/* =============================================================================
   Ramallah 2026 — Bootstrap theme layer
   -----------------------------------------------------------------------------
   Loaded AFTER bootstrap[.rtl].min.css and BEFORE theme.css / full-home.css.

   Purpose
   -------
   1. Re-point Bootstrap's own CSS variables at the design's Material-3 tokens, so
      Bootstrap utilities/components (.bg-primary, .btn-primary, .text-secondary …)
      render in the Ramallah palette instead of Bootstrap's default blue. This also
      makes the Tailwind->Bootstrap migration safe: where both frameworks define the
      same class name, they now resolve to the SAME colour.
   2. Provide the handful of utilities the approved design relies on that Bootstrap
      has no equivalent for (line-clamp, aspect ratios, group-hover, backdrop blur,
      the on-* token colours). Per the house rule in
      Control Panel/base/INTEGRATION_README.md, these live here as real CSS rather
      than pulling in a second utility framework.

   Migration status: the markup is being converted from Tailwind utilities to
   Bootstrap file by file. Until that finishes, tailwind.css (a compiled, static
   build — NOT the Play CDN) still supplies the not-yet-converted utilities.
   ============================================================================= */

:root,
[data-bs-theme="light"] {
    /* ---- Design tokens (source of truth: the design's Material-3 palette) ---- */
    --ram-primary: #9ec927;
    --ram-primary-container: #abd43a;
    --ram-on-primary: #ffffff;
    --ram-secondary: #623c11;
    --ram-on-secondary: #ffffff;
    --ram-tertiary: #925b1c;
    --ram-on-tertiary: #ffffff;
    --ram-surface: #ffffff;
    --ram-surface-container-lowest: #ffffff;
    --ram-surface-container-low: #faf7f0;
    --ram-surface-container: #f5f2ea;
    --ram-surface-container-high: #f0ebe0;
    --ram-on-surface: #2a1a10;
    --ram-on-surface-variant: #4a4038;
    --ram-outline: #7a7060;
    --ram-outline-variant: #d4cfc0;
    --ram-background: #ffffff;
    --ram-on-background: #2a1a10;
    --ram-error: #ba1a1a;

    /* ---- Map them onto Bootstrap ---- */
    --bs-primary: var(--ram-primary);
    --bs-primary-rgb: 201, 162, 39;
    --bs-secondary: var(--ram-secondary);
    --bs-secondary-rgb: 98, 17, 50;
    --bs-danger: var(--ram-error);
    --bs-danger-rgb: 186, 26, 26;
    --bs-body-color: var(--ram-on-surface);
    --bs-body-color-rgb: 42, 26, 16;
    --bs-body-bg: var(--ram-background);
    --bs-border-color: var(--ram-outline-variant);
    --bs-link-color: var(--ram-primary);
    --bs-link-color-rgb: 201, 162, 39;
    --bs-link-hover-color: #83a81f;

    --bs-font-sans-serif: "Public Sans", "Cairo", system-ui, -apple-system, sans-serif;
    /* The design's radii are much softer than Bootstrap's defaults. */
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-2xl: 1.5rem;
    --bs-border-radius-pill: 50rem;

    /* ---- Layout metrics ----
       Height of the site header — the single source of truth for it.
       .ram-header__inner sets its height from this. Nothing offsets content by it
       today because the header is in normal flow (see the note on .ram-header),
       but anything that ever needs to MUST read this variable rather than
       hand-copying the number: the old .ram-inner-head offset was a literal that
       had drifted to 7rem under a 5rem header, which is what produced the
       oversized gap at the top of every inner page. */
    --ram-header-h: 3.75rem;
}
@media (min-width: 576px) { :root, [data-bs-theme="light"] { --ram-header-h: 5rem; } }

/* Bootstrap's .btn-primary derives from --bs-btn-* rather than --bs-primary. */
.btn-primary {
    --bs-btn-bg: var(--ram-primary);
    --bs-btn-border-color: var(--ram-primary);
    --bs-btn-color: var(--ram-on-primary);
    --bs-btn-hover-bg: var(--ram-primary-container);
    --bs-btn-hover-border-color: var(--ram-primary-container);
    --bs-btn-hover-color: var(--ram-on-primary);
    --bs-btn-active-bg: #83a81f;
    --bs-btn-active-border-color: #83a81f;
}
.btn-secondary {
    --bs-btn-bg: var(--ram-secondary);
    --bs-btn-border-color: var(--ram-secondary);
    --bs-btn-color: var(--ram-on-secondary);
    --bs-btn-hover-bg: #4a2e0d;
    --bs-btn-hover-border-color: #4a2e0d;
}
.btn-outline-primary {
    --bs-btn-color: var(--ram-primary);
    --bs-btn-border-color: var(--ram-primary);
    --bs-btn-hover-bg: var(--ram-primary);
    --bs-btn-hover-border-color: var(--ram-primary);
    --bs-btn-hover-color: var(--ram-on-primary);
}

/* -----------------------------------------------------------------------------
   Design-token colour utilities.
   Bootstrap has no concept of Material-3 "on-*" pairs, and the design uses them
   throughout, so they are declared here explicitly.
   -------------------------------------------------------------------------- */
.text-on-surface          { color: var(--ram-on-surface) !important; }
.text-on-surface-variant  { color: var(--ram-on-surface-variant) !important; }
.text-on-primary          { color: var(--ram-on-primary) !important; }
.text-on-secondary        { color: var(--ram-on-secondary) !important; }
.text-on-tertiary         { color: var(--ram-on-tertiary) !important; }
.text-tertiary            { color: var(--ram-tertiary) !important; }

.bg-surface                     { background-color: var(--ram-surface) !important; }
.bg-surface-container           { background-color: var(--ram-surface-container) !important; }
.bg-surface-container-low       { background-color: var(--ram-surface-container-low) !important; }
.bg-surface-container-lowest    { background-color: var(--ram-surface-container-lowest) !important; }
.bg-surface-container-high      { background-color: var(--ram-surface-container-high) !important; }
.bg-tertiary                    { background-color: var(--ram-tertiary) !important; }

.border-outline-variant { border-color: var(--ram-outline-variant) !important; }

/* -----------------------------------------------------------------------------
   Utilities Bootstrap does not ship, which the approved design depends on.
   -------------------------------------------------------------------------- */

/* Multi-line truncation — used on every card title/summary. */
.line-clamp-1,
.line-clamp-2,
.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* Fixed media ratios for card thumbnails. Bootstrap's .ratio needs a wrapper
   element; these apply directly to the box, which is what the design markup does. */
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-1x1  { aspect-ratio: 1 / 1; }

.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* Hover-on-parent, i.e. Tailwind's `group` / `group-hover:`. Bootstrap has no
   equivalent; the design uses it for card image zoom and arrow nudges. */
.group { position: relative; }
.group:hover .group-hover-scale   { transform: scale(1.05); }
.group:hover .group-hover-primary { color: var(--ram-primary) !important; }
.group:hover .group-hover-gap     { gap: .5rem; }

.backdrop-blur    { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.backdrop-blur-sm { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* Respect the user's reduced-motion preference for every transition we add. */
@media (prefers-reduced-motion: reduce) {
    .group:hover .group-hover-scale { transform: none; }
}

/* -----------------------------------------------------------------------------
   Layout container.
   The design constrains content to 80rem (Tailwind's max-w-7xl). Bootstrap's
   .container tops out at 1320px, so this keeps the approved measure.
   -------------------------------------------------------------------------- */
.ram-container {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
}
@media (min-width: 576px) { .ram-container { padding-inline: 1.5rem; } }
@media (min-width: 768px) { .ram-container { padding-inline: 2rem; } }

/* -----------------------------------------------------------------------------
   Converted components (Tailwind utility clusters -> named classes).
   Each block replaces a repeated utility soup in the Blade templates.
   -------------------------------------------------------------------------- */

/* --- Footer ------------------------------------------------------------- */
.ram-footer {
    position: relative;
    overflow: hidden;
    border-top: 1px solid #e5e5e5;
    background: #fff;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ram-footer__brand { color: var(--ram-primary); font-weight: 700; }

/* Round social/utility buttons in the footer's first column. */
.ram-social-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #f5f5f5;
    color: var(--ram-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    transition: background-color .2s, color .2s;
}
.ram-social-btn:hover,
.ram-social-btn:focus-visible { background: var(--ram-primary); color: #fff; }

/* Footer link: muted until hover, then the brand gold with a thick underline. */
.ram-flink {
    color: #64748b;
    text-decoration: none;
    transition: color .2s;
}
.ram-flink:hover,
.ram-flink:focus-visible {
    color: var(--ram-primary);
    text-decoration: underline;
    text-decoration-color: var(--ram-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* Developer credit — deliberately the quietest type on the page. */
.ram-footer__credit { font-size: .75rem; line-height: 1.5; letter-spacing: .01em; }
.ram-footer__credit a { color: var(--ram-outline); text-decoration: none; transition: color .2s; }
.ram-footer__credit a:hover,
.ram-footer__credit a:focus-visible { color: var(--ram-primary); text-decoration: underline; text-underline-offset: 3px; }

/* The footer columns collapse into <details> accordions on small screens only;
   from md up they are plain always-open columns. */
.footer-accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 3rem;
    padding-block: .5rem;
    cursor: pointer;
    list-style: none;
    touch-action: manipulation;
}
.footer-accordion > summary::-webkit-details-marker { display: none; }
@media (min-width: 768px) {
    .footer-accordion > summary { min-height: 0; cursor: default; pointer-events: none; padding-block: 0; }
    .footer-accordion { border-bottom: 0 !important; padding-bottom: 0 !important; }
    .footer-accordion-chevron { display: none; }
}

/* --- Inner page header (breadcrumb + title block) ----------------------- */
/* NO header compensation here — deliberately.

   This used to carry padding-top: 4.75/6/7rem, commented "clears the fixed site
   header". The header is NOT fixed: .ram-header below asks for position:fixed,
   but .header-kufiya (full-home.css:359) sets position:relative on the same
   element, loads later, and has equal specificity — so it wins and the header
   sits in normal flow, already occupying its own 80px.

   The padding was therefore reserving a second header's worth of empty space on
   every inner page: 112px of it at >=768px, on top of the container's own
   pt-md-4, which is the "too big gap at the top" that was reported. Measured in
   Chrome: 136px of dead space above the breadcrumb, now 24px.

   The visible breathing room comes from the inner container's pt-3 / pt-md-4
   (1rem / 1.5rem) and nothing else. If the header is ever genuinely made fixed,
   reintroduce the offset as var(--ram-header-h) — not a hand-copied literal. */
.ram-inner-head { padding-top: 0; }
.ram-inner-head__title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); }
.ram-inner-head__lede  { font-size: 1rem; line-height: 1.7; max-width: 48rem; }
.ram-breadcrumb-home:hover { text-decoration: underline !important; }

/* --- Pagination --------------------------------------------------------- */
.ram-pagination {
    --bs-pagination-color: var(--ram-on-surface);
    --bs-pagination-bg: var(--ram-surface-container-lowest);
    --bs-pagination-border-color: rgba(122, 112, 96, .25);
    --bs-pagination-border-radius: .75rem;
    --bs-pagination-hover-color: var(--ram-primary);
    --bs-pagination-hover-bg: var(--ram-surface-container-low);
    --bs-pagination-hover-border-color: rgba(158, 201, 39, .4);
    --bs-pagination-focus-color: var(--ram-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(158, 201, 39, .25);
    --bs-pagination-active-bg: var(--ram-primary);
    --bs-pagination-active-border-color: var(--ram-primary);
    --bs-pagination-active-color: var(--ram-on-primary);
    --bs-pagination-disabled-color: rgba(74, 64, 56, .4);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: rgba(122, 112, 96, .15);
    gap: .375rem;
}
.ram-pagination .page-link {
    min-width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --- Floating action buttons (chat / a11y / back-to-top) ----------------- */
.ram-fab-stack {
    position: fixed;
    z-index: 40;
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    /* PHYSICAL left, not inset-inline-start. The approved design pins these to the
       left edge in Arabic too; a logical property flips them to the right in RTL. */
    left: max(1rem, env(safe-area-inset-left, 0px));
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
@media (min-width: 576px) {
    .ram-fab-stack { bottom: 2rem; left: 2rem; gap: 1rem; }
}
.ram-fab {
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ram-primary);
    color: #fff;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .45);
    touch-action: manipulation;
    transition: transform .2s, background-color .2s;
}
.ram-fab:hover { transform: scale(1.06); }
.ram-fab:active { transform: scale(.95); }
.ram-fab .material-symbols-outlined { font-size: 1.5rem; }
@media (min-width: 576px) {
    .ram-fab { width: 3.5rem; height: 3.5rem; }
    .ram-fab:hover { transform: scale(1.1); }
    .ram-fab .material-symbols-outlined { font-size: 1.875rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ram-fab, .ram-fab:hover, .ram-fab:active { transition: none; transform: none; }
}

/* --- Chatbot widget ------------------------------------------------------
   Anchored to the same corner as .ram-fab-stack (physical left, in both
   directions — see the note on that block) and sized to sit above it. */
.ram-chat {
    position: fixed;
    z-index: 45;                       /* above the FAB stack (40), below the header (60) */
    bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 3.75rem);
    left: max(1rem, env(safe-area-inset-left, 0px));
    right: max(1rem, env(safe-area-inset-right, 0px));
    max-width: 23rem;
    height: min(30rem, calc(100vh - 9rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ram-surface-container-lowest);
    border: 1px solid var(--ram-outline-variant);
    border-radius: var(--bs-border-radius-xl);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .38);
    opacity: 0;
    transform: translateY(.75rem) scale(.98);
    transition: opacity .18s ease, transform .18s ease;
}
.ram-chat.is-open { opacity: 1; transform: none; }
@media (min-width: 576px) {
    .ram-chat {
        bottom: calc(2rem + 4.25rem);
        left: 2rem;
        right: auto;
        width: 23rem;
        height: min(32rem, calc(100vh - 11rem));
    }
}
@media (prefers-reduced-motion: reduce) {
    .ram-chat { transition: none; transform: none; }
}

.ram-chat__head {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-shrink: 0;
    padding: .75rem 1rem;
    background: var(--ram-secondary);
    color: var(--ram-on-secondary);
}
.ram-chat__head-icon { font-size: 1.375rem; }
.ram-chat__title { font-size: 1rem; font-weight: 700; flex-grow: 1; }
.ram-chat__close {
    display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; flex-shrink: 0;
    border: 0; border-radius: 50%;
    background: transparent; color: inherit;
    transition: background-color .2s;
}
.ram-chat__close:hover { background: rgba(255, 255, 255, .16); }
.ram-chat__close .material-symbols-outlined { font-size: 1.25rem; }

.ram-chat__log {
    flex-grow: 1;
    overflow-y: auto;
    overscroll-behavior: contain;      /* stops the page scrolling once the log bottoms out */
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    background: var(--ram-surface-container-low);
}

.ram-chat__bubble {
    max-width: 85%;
    padding: .5rem .75rem;
    border-radius: var(--bs-border-radius-lg);
    font-size: .875rem;
    line-height: 1.6;
    overflow-wrap: anywhere;           /* long URLs in replies must not widen the panel */
}
.ram-chat__bubble--ai {
    align-self: flex-start;
    background: var(--ram-surface-container-lowest);
    color: var(--ram-on-surface);
    border: 1px solid var(--ram-outline-variant);
    border-start-start-radius: .25rem;
}
.ram-chat__bubble--human {
    align-self: flex-end;
    background: var(--ram-primary);
    color: var(--ram-on-primary);
    border-start-end-radius: .25rem;
}
.ram-chat__bubble.is-pending { opacity: .7; font-style: italic; }
.ram-chat__bubble.is-error {
    border-color: var(--ram-error);
    color: var(--ram-error);
    background: rgba(186, 26, 26, .06);
}
.ram-chat__bubble a { color: var(--ram-primary); text-underline-offset: 2px; }
.ram-chat__bubble--human a { color: var(--ram-on-primary); }
.ram-chat__bubble p:last-child { margin-bottom: 0; }

.ram-chat__form {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    padding: .625rem .75rem;
    border-top: 1px solid var(--ram-outline-variant);
    background: var(--ram-surface-container-lowest);
}
.ram-chat__input {
    flex-grow: 1;
    min-width: 0;
    border: 1px solid var(--ram-outline-variant);
    border-radius: var(--bs-border-radius-pill);
    padding: .5rem .875rem;
    font-size: .875rem;
    color: var(--ram-on-surface);
    background: var(--ram-surface-container-low);
}
.ram-chat__input:focus {
    outline: 2px solid var(--ram-primary);
    outline-offset: 1px;
    background: var(--ram-surface-container-lowest);
}
.ram-chat__send {
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; flex-shrink: 0;
    border: 0; border-radius: 50%;
    background: var(--ram-primary); color: var(--ram-on-primary);
    transition: background-color .2s;
}
.ram-chat__send:hover { background: var(--ram-primary-container); }
.ram-chat__send .material-symbols-outlined { font-size: 1.125rem; }
/* The send glyph points right; mirror it on RTL pages so it points at the input. */
[dir="rtl"] .ram-chat__send .material-symbols-outlined { transform: scaleX(-1); }

/* --- Accessibility dialog ------------------------------------------------
   The dialog markup is highly repetitive (four identical size chips, three
   line-height chips, ...). The JS binds to .a11y-seg / .a11y-chip /
   .a11y-chip-group and data-a11y-field, so all styling hangs off those hooks
   instead of being repeated inline on every button.
   ---------------------------------------------------------------------- */
.a11y-head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid rgba(229, 229, 229, .8);
    background: linear-gradient(to left, rgba(158, 201, 39, .07), transparent);
}
@media (min-width: 576px) { .a11y-head { padding-inline: 1.25rem; } }
.a11y-body { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; }
@media (min-width: 576px) { .a11y-body { padding-inline: 1.25rem; } }
.a11y-sec-label {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ram-on-surface-variant);
}
.a11y-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem;
    border: 1px solid rgba(229, 229, 229, .9);
    border-radius: 1rem;
    background: linear-gradient(to bottom, rgba(250, 250, 250, .95), rgba(250, 250, 250, .5));
}
.a11y-chip {
    flex: 1 1 auto;
    min-height: 3.5rem;
    min-width: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding-inline: .5rem;
    border: 0;
    border-radius: .75rem;
    background: transparent;
    color: inherit;
    transition: background-color .2s, color .2s, box-shadow .2s;
}
.a11y-chip:hover { background: rgba(255, 255, 255, .95); }
/* Selected state — the JS toggles aria-pressed, so style from that rather than
   requiring it to add/remove a pile of utility classes. */
.a11y-chip[aria-pressed="true"] {
    background: rgba(158, 201, 39, .15);
    color: var(--ram-primary);
    box-shadow: inset 0 0 0 2px rgba(158, 201, 39, .35);
}
.a11y-chip--wide { min-width: 5.5rem; }
.a11y-close {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .75rem;
    background: transparent;
    color: var(--ram-on-surface-variant);
    transition: background-color .2s;
}
.a11y-close:hover { background: rgba(0, 0, 0, .05); }

/* --- Generic content card (category / article / gallery listings) -------- */
.ram-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--ram-surface-container-lowest);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .06);
    outline: 1px solid rgba(212, 207, 192, .35);
    outline-offset: -1px;
    transition: transform .25s, box-shadow .25s, outline-color .25s;
}
.ram-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .12), 0 8px 10px -6px rgba(0, 0, 0, .08);
    outline-color: rgba(158, 201, 39, .35);
}
@media (prefers-reduced-motion: no-preference) {
    .ram-card:hover { transform: translateY(-4px); }
}
.ram-card__media {
    position: relative;
    display: block;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--ram-surface-container);
}
.ram-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ram-card:hover .ram-card__media img { transform: scale(1.05); }
.ram-card__media--wide { aspect-ratio: 16 / 9; }
.ram-card__media-empty {
    display: flex; width: 100%; height: 100%;
    align-items: center; justify-content: center;
    color: rgba(74, 64, 56, .4);
}
.ram-card__media-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(42, 26, 16, .7), transparent 60%);
    pointer-events: none;
}
.ram-card__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 1.25rem; text-align: start; }
.ram-card__date { display: block; margin-bottom: .375rem; font-size: .75rem; font-weight: 600; color: var(--ram-primary); }
.ram-card__title { font-weight: 700; line-height: 1.35; color: var(--ram-on-surface); font-size: 1rem; }
@media (min-width: 768px) { .ram-card__title { font-size: 1.125rem; } }
.ram-card__title a { color: inherit; text-decoration: none; }
.ram-card:hover .ram-card__title,
.ram-card:hover .ram-card__title a { color: var(--ram-primary); }
.ram-card__text { margin-top: .5rem; flex: 1 1 auto; font-size: .875rem; line-height: 1.65; color: var(--ram-on-surface-variant); }
.ram-card__cta {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--ram-primary);
    text-decoration: none;
    transition: gap .2s;
}
.ram-card:hover .ram-card__cta { gap: .5rem; }

/* --- Section rhythm + empty state --------------------------------------- */
.ram-section { padding-block: 2.5rem; }
@media (min-width: 576px) { .ram-section { padding-block: 3.5rem; } }
@media (min-width: 768px) { .ram-section { padding-block: 4rem; } }

.ram-empty {
    border: 1px dashed rgba(212, 207, 192, .8);
    border-radius: 1rem;
    background: var(--ram-surface-container-lowest);
    padding: 4rem 1.5rem;
    text-align: center;
    color: var(--ram-on-surface-variant);
}
.ram-empty .material-symbols-outlined { font-size: 3rem; color: rgba(74, 64, 56, .4); }

/* --- Fullscreen menu overlay -------------------------------------------- */
.ram-html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .ram-html { scroll-behavior: auto; } }

.fs-menu-overlay {
    position: fixed; inset: 0; z-index: 100;
    display: flex; flex-direction: column;
    /* was #0d0508 -- a wine-tinted near-black left over from the Ramallah
       theme, the one overlay that never got retinted. --k-night is the palette's
       own dark ground, the same one the footer and media block sit on. */
    background: var(--k-night, #16200F); color: #fff;
}
.fs-menu-overlay__scrim {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,.4), transparent, rgba(0,0,0,.5));
}
.fs-menu-overlay__inner {
    position: relative; z-index: 10;
    display: flex; flex-direction: column;
    min-height: 0; flex: 1 1 auto;
}
.fs-menu-topbar {
    display: flex; flex-shrink: 0;
    align-items: center; justify-content: space-between; gap: .75rem;
    padding: max(1rem, env(safe-area-inset-top, 0px)) 1.25rem .75rem;
}
@media (min-width: 768px) { .fs-menu-topbar { padding: 2rem 2.5rem 1rem; } }
.fs-menu-topbar-logo {
    height: 2.25rem; width: auto; max-height: 2.5rem;
    max-width: min(78vw, 17rem);
    object-fit: contain; object-position: right;
}
@media (min-width: 576px) { .fs-menu-topbar-logo { height: 2.75rem; max-height: 3rem; max-width: 20rem; } }
.fs-menu-close {
    width: 2.75rem; height: 2.75rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    background: transparent; color: #fff;
    transition: background-color .2s;
}
.fs-menu-close:hover { background: rgba(255, 255, 255, .1); }
.fs-menu-searchwrap { padding: 0 1.25rem 1rem; }
@media (min-width: 768px) { .fs-menu-searchwrap { padding-inline: 2.5rem; } }
.fs-menu-search { z-index: 20; max-width: 32rem; }
/* Doubled class + logical padding — same two reasons as .ram-search__input above:
   the @tailwindcss/forms reset in the last-loaded shim ties on specificity and
   won on source order (this input rendered as a plain WHITE box in the middle of
   the dark menu overlay), and the icon is pinned with inset-inline-START while
   the padding reserved its gap physically on the left, so in Arabic the icon and
   the text collided on the right. */
.fs-menu-search__input.fs-menu-search__input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50rem;
    background: rgba(255, 255, 255, .05);
    padding-block: .7rem;
    padding-inline-start: 2.85rem;   /* icon side */
    padding-inline-end: 1.15rem;
    font-size: .875rem; color: #fff; text-align: start;
    line-height: 1.3;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.fs-menu-search__input::placeholder { color: rgba(255, 255, 255, .4); }
.fs-menu-search__input.fs-menu-search__input:focus {
    border-color: rgba(158, 201, 39, .4);
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 .25rem rgba(158, 201, 39, .25);
}
.fs-menu-search__icon {
    position: absolute; inset-inline-start: .875rem; top: 50%;
    transform: translateY(-50%);
    pointer-events: none; color: rgba(255, 255, 255, .4);
}
.fs-menu-trackwrap { position: relative; min-height: 0; flex: 1 1 auto; overflow: hidden; }
.fs-menu-foot {
    position: relative; z-index: 10;
    display: flex; flex-shrink: 0; flex-wrap: wrap;
    align-items: center; justify-content: space-between; gap: .75rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 1.25rem 1.5rem;
    font-size: .75rem; color: rgba(255, 255, 255, .45);
}
@media (min-width: 768px) { .fs-menu-foot { padding-inline: 2.5rem; } }
.fs-menu-foot__link { color: rgba(255, 255, 255, .8); text-decoration: none; transition: color .2s; }
.fs-menu-foot__link:hover { color: #fff; }
.main-menu-root { margin: 0; padding: 0; list-style: none; }

/* --- Site header ---------------------------------------------------------
   NOTE: despite the position:fixed below, this header renders IN NORMAL FLOW.
   .header-kufiya (full-home.css:359) sets position:relative on the same element,
   loads after this file and has the same specificity, so it wins. The markup
   carries both classes, so that is the behaviour on every page.

   Left as-is rather than "corrected" in either direction: making it genuinely
   fixed changes the layout of every page (content would slide under it), and
   deleting the declaration would change nothing today but silently alter things
   if .header-kufiya is ever dropped from the markup. Decide deliberately, not as
   a side effect. Anything that needs to offset for the header must read
   --ram-header-h; see .ram-inner-head for why. */
.ram-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 60;
    transition: all .3s;
}
.ram-header__inner {
    position: relative;
    z-index: 10;
    max-width: 1440px;
    margin-inline: auto;
    height: var(--ram-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-inline: .75rem;
}
@media (min-width: 576px) { .ram-header__inner { gap: 1rem; padding-inline: 1.25rem; } }
@media (min-width: 768px) { .ram-header__inner { padding-inline: 1.5rem; } }
@media (min-width: 992px) { .ram-header__inner { gap: 1.5rem; } }

.ram-header__logo {
    height: 1.75rem; width: auto; max-width: 7.5rem;
    object-fit: contain; object-position: right;
}
@media (min-width: 380px) { .ram-header__logo { max-width: 9rem; } }
@media (min-width: 576px) { .ram-header__logo { height: 2.5rem; max-width: 11rem; } }
@media (min-width: 768px) { .ram-header__logo { max-width: 13.5rem; } }

.ram-header__divider { width: 1px; height: 2rem; flex-shrink: 0; background: rgba(212, 207, 192, .3); }
@media (min-width: 1200px) { .ram-header__nav { gap: 2rem !important; } }

.ram-navlink {
    position: relative;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ram-on-surface-variant);
    text-decoration: none;
    transition: color .2s;
}
.ram-navlink:hover { color: var(--ram-primary); }
.ram-navlink--active { font-weight: 700; color: var(--ram-primary); }

/* --- Header nav dropdown (البوابة الإعلامية) ----------------------------- */
/* The trigger is a <button> so Bootstrap can own the a11y wiring, but it has to
   read as one of the plain nav links beside it — hence the button reset. */
.ram-navdrop__btn {
    display: inline-flex;
    align-items: center;
    gap: .125rem;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
}
.ram-navdrop__btn::after { display: none; }   /* Bootstrap's CSS caret; we use the icon */
.ram-navdrop__caret { font-size: 1.125rem; transition: transform .2s; }
.ram-navdrop__btn[aria-expanded="true"] { color: var(--ram-primary); }
.ram-navdrop__btn[aria-expanded="true"] .ram-navdrop__caret { transform: rotate(180deg); }

.ram-dropdown {
    --bs-dropdown-min-width: 15rem;
    --bs-dropdown-padding-y: .5rem;
    --bs-dropdown-bg: var(--ram-surface-container-lowest);
    --bs-dropdown-border-color: var(--ram-outline-variant);
    --bs-dropdown-border-radius: var(--bs-border-radius-lg);
    --bs-dropdown-link-color: var(--ram-on-surface);
    --bs-dropdown-link-hover-bg: var(--ram-surface-container-low);
    --bs-dropdown-link-hover-color: var(--ram-primary);
    --bs-dropdown-link-active-bg: var(--ram-surface-container);
    --bs-dropdown-link-active-color: var(--ram-primary);
    box-shadow: 0 12px 32px rgba(42, 26, 16, .14);
    max-height: min(70vh, 32rem);
    overflow-y: auto;
}
.ram-dropdown__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-block: .5rem;
    font-size: .875rem;
    font-weight: 600;
    white-space: normal;          /* long Arabic titles wrap instead of stretching the menu */
    line-height: 1.45;
}
.ram-dropdown__ext { font-size: 1rem; opacity: .55; flex-shrink: 0; }
.ram-dropdown__item--all { color: var(--ram-primary); font-weight: 700; }
.ram-navlink--active::after {
    content: "";
    position: absolute; inset-inline-end: 0; bottom: -.25rem;
    height: 2px; width: 100%;
    background: var(--ram-primary);
}

/* Round icon button used for the menu toggle and the account action. */
.ram-iconbtn {
    width: 2.75rem; height: 2.75rem;
    min-width: 44px; min-height: 44px;   /* touch target */
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: transparent;
    touch-action: manipulation;
    transition: background-color .2s;
}
.ram-iconbtn:hover { background: #f5f5f5; }
@media (min-width: 576px) { .ram-iconbtn { width: 2.5rem; height: 2.5rem; min-width: 0; min-height: 0; } }

/* Header search
   ---------------------------------------------------------------------------
   SPECIFICITY NOTE — the doubled `.ram-search__input.ram-search__input` is
   deliberate, do not "tidy" it back to a single class.

   The Tailwind shim (tailwind.css) is loaded LAST on purpose (§9.4b: it has to
   outrank theme.css the way the Play CDN's runtime <style> used to). It is built
   with the @tailwindcss/forms plugin, whose base reset is

       [type="text"],[type="search"],input:where(:not([type])),select,textarea
       { border-radius:0; padding:.5rem .75rem; background-color:#fff }

   `[type="search"]` scores (0,0,1,0) — exactly the same as a single class — so
   with the shim later in the cascade it WINS on source order and the search box
   rendered as a square white unstyled field with the icon sitting on top of the
   text. Repeating the class lifts this to (0,0,2,0) and settles it without
   touching the generated shim or reordering the stylesheets.

   Once kobar_home is converted and the tailwind.css <link> is deleted, the
   doubled selector can go back to a single class.

   PADDING must be LOGICAL. The icon is pinned with `inset-inline-end`, which is
   the LEFT edge in Arabic and the RIGHT edge in English; the old rule reserved
   its space with a physical `padding-right`, so in RTL the text ran straight
   under the icon. padding-inline-end keeps the gap on whichever side the icon
   actually lands. */
.ram-search__input.ram-search__input {
    width: 100%;
    border: 1px solid rgba(229, 229, 229, .8);
    border-radius: 50rem;
    background: #f5f5f5;
    /* The icon is pinned to the physical RIGHT in BOTH directions (measured, not
       assumed — inset-inline-end resolves to `right` here in RTL as well), so the
       gap has to be reserved on the right in both. Using logical padding put the
       gap on the left in Arabic and the text ran under the icon. If the icon is
       ever moved to the inline-start, flip these two together. */
    padding-block: .8rem;
    padding-right: 3.25rem;   /* clears the 24px icon + its ~1.1rem offset */
    padding-left: 1.25rem;
    font-size: .875rem;
    line-height: 1.3;
    color: var(--ram-on-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    outline: none;
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.ram-search__input::placeholder { color: rgba(74, 64, 56, .6); }
.ram-search__input.ram-search__input:focus {
    background: #fff;
    border-color: rgba(158, 201, 39, .25);
    box-shadow: 0 0 0 .25rem rgba(158, 201, 39, .2);
}
/* Breathing room around the whole control, not just inside it. */
.ram-search { padding-block: .25rem; }
.ram-search__icon {
    position: absolute; inset-inline-end: 1.1rem; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(158, 201, 39, .6);
}
.ram-search:focus-within .ram-search__icon { color: var(--ram-primary); }

/* Live-broadcast pill */
.ram-live {
    display: flex; align-items: center; gap: .5rem;
    flex-shrink: 0;
    min-height: 40px;
    border-radius: 50rem;
    padding: .375rem .75rem;
    background: var(--ram-on-surface);
    color: var(--ram-surface);
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s, transform .2s;
}
.ram-live:hover { background: #000; color: var(--ram-surface); }
.ram-live:active { transform: scale(.95); }
@media (min-width: 576px) { .ram-live { min-height: 0; padding: .5rem 1rem; } }
.ram-live__label { font-size: .75rem; white-space: nowrap; }
.ram-live__dot { position: relative; display: flex; width: .5rem; height: .5rem; flex-shrink: 0; }
.ram-live__ping {
    position: absolute; inset: 0; border-radius: 50%;
    background: #f87171; opacity: .75;
    animation: ram-ping 1s cubic-bezier(0, 0, .2, 1) infinite;
}
.ram-live__core { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: #dc2626; }
@keyframes ram-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ram-live__ping { animation: none; } }

/* Language switch */
.ram-lang {
    border: 1px solid rgba(158, 201, 39, .2);
    border-radius: .5rem;
    padding: .375rem .625rem;
    font-size: .625rem; font-weight: 900;
    color: var(--ram-primary);
    text-decoration: none;
    transition: background-color .2s;
}
.ram-lang:hover { background: rgba(158, 201, 39, .1); color: var(--ram-primary); }
@media (min-width: 576px) { .ram-lang { padding: .5rem .75rem; font-size: .75rem; } }

/* Festive theme switcher */
.ram-themebar {
    align-items: center; gap: .125rem;
    border: 1px solid rgba(212, 207, 192, .4);
    border-radius: 50rem;
    background: rgba(255, 255, 255, .9);
    padding: .125rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.ram-themebar .theme-btn {
    width: 2rem; height: 2rem;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--ram-on-surface-variant);
    transition: background-color .2s;
}
.ram-themebar .theme-btn:hover { background: #f5f5f5; }
.ram-themebar .theme-btn[aria-pressed="true"] { background: rgba(158, 201, 39, .15); color: var(--ram-primary); }
@media (min-width: 576px) { .ram-themebar .theme-btn { width: 2.25rem; height: 2.25rem; } }

/* --- 404 page ----------------------------------------------------------- */
.ram-404-icon {
    width: 6rem; height: 6rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(158, 201, 39, .1);
    box-shadow: inset 0 0 0 1px rgba(158, 201, 39, .2);
    color: var(--ram-primary);
}
.ram-404-icon .material-symbols-outlined { font-size: 3.25rem; }
@media (min-width: 576px) {
    .ram-404-icon { width: 7rem; height: 7rem; }
    .ram-404-icon .material-symbols-outlined { font-size: 3.75rem; }
}
/* Bootstrap has no py-6; the design's vertical rhythm here is larger than py-5. */
.py-md-6 { }
@media (min-width: 768px) { .py-md-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; } }
@media (min-width: 576px) { .w-sm-auto { width: auto !important; } }

/* --- Article page ------------------------------------------------------- */
.ram-article-lede {
    border-inline-start: 4px solid rgba(158, 201, 39, .4);
    padding-inline-start: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.7;
    color: var(--ram-on-surface-variant);
}
.ram-article-figure {
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
    outline: 1px solid rgba(0, 0, 0, .05);
    outline-offset: -1px;
    background: var(--ram-surface-container-lowest);
}

/* Long-form body copy — the design's type scale applied to CMS-authored HTML.
   Kept as element selectors because the markup comes from the editor, not us. */
.ram-article-body { color: var(--ram-on-surface); line-height: 1.95; font-size: 1.0625rem; text-align: start; }
.ram-article-body > * + * { margin-top: 1.15rem; }
.ram-article-body h2, .ram-article-body h3, .ram-article-body h4 { font-weight: 700; line-height: 1.35; margin-top: 2rem; }
.ram-article-body h2 { font-size: 1.5rem; } .ram-article-body h3 { font-size: 1.25rem; } .ram-article-body h4 { font-size: 1.1rem; }
.ram-article-body p { margin-bottom: 0; }
.ram-article-body a { color: var(--ram-primary); text-decoration: underline; text-underline-offset: 3px; }
.ram-article-body a:hover { text-decoration-thickness: 2px; }
.ram-article-body img { max-width: 100%; height: auto; border-radius: 1rem; margin-inline: auto; }
.ram-article-body ul, .ram-article-body ol { padding-inline-start: 1.5rem; }
.ram-article-body ul { list-style: disc; } .ram-article-body ol { list-style: decimal; }
.ram-article-body li + li { margin-top: .5rem; }
.ram-article-body blockquote { border-inline-start: 4px solid var(--ram-primary); padding-inline-start: 1.25rem; font-style: italic; opacity: .9; }
.ram-article-body table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.ram-article-body th, .ram-article-body td { border: 1px solid rgba(0, 0, 0, .12); padding: .6rem .8rem; text-align: start; }
.ram-article-body iframe, .ram-article-body video { max-width: 100%; border-radius: 1rem; }

.ram-tag {
    display: inline-flex; align-items: center;
    border: 1px solid rgba(212, 207, 192, .7);
    border-radius: 50rem;
    background: var(--ram-surface-container-lowest);
    padding: .25rem .75rem;
    font-size: .75rem; font-weight: 600;
    color: var(--ram-on-surface-variant);
    text-decoration: none;
    transition: border-color .2s, color .2s;
}
.ram-tag:hover { border-color: rgba(158, 201, 39, .5); color: var(--ram-primary); }

/* --- Article sidebar ---------------------------------------------------- */
@media (min-width: 992px) { .ram-sticky { position: sticky; top: 6rem; } }
.ram-aside-box {
    border: 1px solid rgba(212, 207, 192, .45);
    border-radius: 1rem;
    background: var(--ram-surface-container-lowest);
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.ram-mini__media {
    display: block; width: 6rem; aspect-ratio: 4 / 3;
    overflow: hidden; border-radius: .75rem;
    background: var(--ram-surface-container);
}
.ram-mini__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ram-mini:hover .ram-mini__media img { transform: scale(1.05); }
.ram-mini__title { font-size: .875rem; font-weight: 700; line-height: 1.35; color: var(--ram-on-surface); }
.ram-mini__title a { color: inherit; text-decoration: none; }
.ram-mini:hover .ram-mini__title a { color: var(--ram-primary); }
.ram-aside-item { border-bottom: 1px solid rgba(212, 207, 192, .3); padding-bottom: .75rem; }
.ram-aside-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ram-aside-link { color: var(--ram-on-surface); }
.ram-aside-link:hover { color: var(--ram-primary); }
.ram-aside-dot {
    width: .375rem; height: .375rem; border-radius: 50%;
    background: rgba(158, 201, 39, .6); margin-top: .45rem;
}

/* --- Photo album grid --------------------------------------------------- */
.ram-photo {
    aspect-ratio: 1 / 1;
    background: var(--ram-surface-container);
    outline: 1px solid rgba(212, 207, 192, .35);
    outline-offset: -1px;
    transition: outline-color .2s;
}
.ram-photo:hover { outline-color: rgba(158, 201, 39, .5); }
.ram-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ram-photo:hover img { transform: scale(1.05); }
.ram-photo__zoom {
    position: absolute; top: .5rem; inset-inline-end: .5rem;
    width: 2rem; height: 2rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .92); color: var(--ram-primary);
    opacity: 0; transition: opacity .2s;
}
.ram-photo__cap {
    position: absolute; inset-inline: 0; bottom: 0;
    padding: 1.75rem .75rem .6rem;
    font-size: .75rem; font-weight: 600; color: #fff;
    background: linear-gradient(to top, rgba(42, 26, 16, .8), transparent);
    opacity: 0; transition: opacity .2s;
}
.ram-photo:hover .ram-photo__zoom,
.ram-photo:hover .ram-photo__cap,
.ram-photo:focus-visible .ram-photo__zoom { opacity: 1; }

/* --- Downloadable file row ---------------------------------------------- */
.ram-filerow {
    border: 1px solid rgba(212, 207, 192, .45);
    border-radius: 1rem;
    background: var(--ram-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: border-color .2s, box-shadow .2s;
}
.ram-filerow:hover {
    border-color: rgba(158, 201, 39, .45);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
}
.ram-filerow__icon {
    width: 3rem; height: 3rem; border-radius: .75rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(158, 201, 39, .1);
    color: var(--ram-primary);
    box-shadow: inset 0 0 0 1px rgba(158, 201, 39, .2);
    transition: background-color .2s, color .2s;
}
.ram-filerow:hover .ram-filerow__icon { background: var(--ram-primary); color: var(--ram-on-primary); }
@media (min-width: 576px) { .ram-filerow__icon { width: 3.5rem; height: 3.5rem; } }
.ram-filerow__title { font-size: 1rem; line-height: 1.35; transition: color .2s; }
.ram-filerow:hover .ram-filerow__title { color: var(--ram-primary); }
.ram-filerow__ext {
    display: inline-flex; align-items: center;
    border-radius: .375rem; padding: .05rem .4rem;
    background: var(--ram-surface-container);
    font-weight: 700; font-variant-numeric: tabular-nums;
}
.ram-filerow__dl {
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--ram-primary); transition: background-color .2s;
}
.ram-filerow:hover .ram-filerow__dl { background: rgba(158, 201, 39, .1); }

/* Small pill used for category names on cards/slides. */
.ram-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border-radius: .5rem;
    padding: .25rem .625rem;
    font-size: .6875rem;
    font-weight: 700;
    background: var(--ram-primary);
    color: var(--ram-on-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

/* =============================================================================
   Accessibility dialog — remaining components
   -----------------------------------------------------------------------------
   Completes the .a11y-* set begun above so partials/kobar/_a11y.blade.php needs no
   utility framework. The dialog JS binds to ids, .a11y-seg and data-a11y-field
   only, so nothing here is load-bearing for behaviour — it is presentation only.
   ============================================================================= */
.a11y-dialog {
    width: min(34rem, calc(100vw - 2rem));
    max-height: min(44rem, calc(100dvh - 2rem));
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 1.25rem;
    background: var(--ram-surface-container-lowest);
    color: var(--ram-on-surface);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .45);
}
.a11y-dialog::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); }
.a11y-shell { display: flex; flex-direction: column; min-height: 0; max-height: 100%; flex: 1 1 auto; }

.a11y-head-icon,
.a11y-sec-icon,
.a11y-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(158, 201, 39, .10);
    color: var(--ram-primary);
}
.a11y-head-icon { width: 2.75rem; height: 2.75rem; border-radius: 1rem; box-shadow: inset 0 0 0 1px rgba(158, 201, 39, .15); }
.a11y-sec-icon  { width: 2rem;    height: 2rem;    border-radius: .5rem; }
.a11y-sec-icon .material-symbols-outlined { font-size: 1.125rem; }
.a11y-toggle-icon {
    width: 2.5rem; height: 2.5rem; border-radius: .75rem;
    background: rgba(0, 0, 0, .06); color: var(--ram-on-surface);
}
.a11y-title { font-size: 1rem; font-weight: 700; line-height: 1.25; }

/* Chip inner previews. Sizes differ per chip, so they take a --a11y-* custom
   property instead of needing one class per size. */
.a11y-glyph { font-weight: 700; line-height: 1; user-select: none; font-size: var(--a11y-glyph, 1rem); }
.a11y-lines { display: flex; flex-direction: column; align-items: center; gap: var(--a11y-gap, .125rem); padding-block: .125rem; }
.a11y-lines i { display: block; width: 2.25rem; max-width: 100%; height: 2px; border-radius: 50rem; background: currentColor; opacity: .55; }
.a11y-dots { display: flex; align-items: center; gap: var(--a11y-gap, .125rem); }
.a11y-dots i { display: block; width: .5rem; height: .5rem; border-radius: .125rem; background: currentColor; opacity: .6; }
.a11y-track { white-space: nowrap; font-size: .6875rem; font-weight: 700; line-height: 1; letter-spacing: var(--a11y-track, normal); }

.a11y-swatch {
    display: block; width: 100%; height: 2.25rem; overflow: hidden;
    border-radius: .5rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.a11y-swatch--light { background: #ffffff; }
.a11y-swatch--dark { background: #1a2228; }
.a11y-swatch--system { background: linear-gradient(to right, #1a2228 0 50%, #ffffff 50% 100%); }

.a11y-toggle-card {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .75rem .875rem; cursor: pointer;
    border: 1px solid rgba(229, 229, 229, .9); border-radius: 1rem;
    background: linear-gradient(to bottom, rgba(250, 250, 250, .95), rgba(250, 250, 250, .4));
    transition: border-color .2s;
}
.a11y-toggle-card:hover { border-color: rgba(158, 201, 39, .25); }
.a11y-toggle-title { font-size: .875rem; font-weight: 700; line-height: 1.35; }
/* Bootstrap's own switch, resized to the design and re-coloured via the tokens. */
.a11y-toggle-card .form-check-input { width: 3rem; height: 1.75rem; margin: 0; flex-shrink: 0; cursor: pointer; }
.a11y-toggle-card .form-check-input:checked { background-color: var(--ram-primary); border-color: var(--ram-primary); }
.a11y-toggle-card .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(158, 201, 39, .25); }

.a11y-foot {
    display: flex; flex-shrink: 0; flex-wrap: wrap; gap: .5rem;
    padding: .875rem 1rem;
    border-top: 1px solid rgba(229, 229, 229, .8);
    background: linear-gradient(to top, rgba(250, 250, 250, .5), transparent);
}
@media (min-width: 576px) { .a11y-foot { padding-inline: 1.25rem; } }
.a11y-btn {
    flex: 1 1 auto; min-height: 2.85rem;
    display: flex; align-items: center; justify-content: center; gap: .375rem;
    padding-inline: .75rem; border-radius: 1rem;
    font-size: .875rem; font-weight: 700;
    border: 1px solid rgba(212, 207, 192, .55);
    background: rgba(255, 255, 255, .6); color: var(--ram-on-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    transition: background-color .2s, border-color .2s, color .2s, transform .1s;
}
.a11y-btn:hover { border-color: rgba(158, 201, 39, .45); background: #fff; color: var(--ram-primary); }
.a11y-btn--primary {
    border-color: transparent; background: var(--ram-primary); color: var(--ram-on-primary);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .12);
}
.a11y-btn--primary:hover { background: #94bd24; color: var(--ram-on-primary); border-color: transparent; }
.a11y-btn:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .a11y-btn, .a11y-btn:active { transition: none; transform: none; } }

/* =============================================================================
   Dark scheme
   -----------------------------------------------------------------------------
   home-scripts.js toggles `dark` on <html> from the colour-scheme chips in the
   a11y dialog (light / dark / follow-system). Previously the ONLY dark styling
   came from Tailwind `dark:` utilities inside the markup, so as templates moved
   to Bootstrap the dark mode quietly stopped covering them. Re-pointing the
   --ram-* tokens fixes every component at once, including the already-converted
   ones, instead of re-adding per-element overrides.
   ============================================================================= */
html.dark {
    color-scheme: dark;

    --ram-primary: #b3d94a;            /* lifted: #9ec927 fails contrast on dark */
    --ram-primary-container: #516911;
    --ram-on-primary: #1c2406;
    --ram-secondary: #e0b481;          /* #623c11 is unreadable as text on dark  */
    --ram-on-secondary: #3d250a;
    --ram-tertiary: #f0cba0;
    --ram-on-tertiary: #4a2e0f;
    --ram-surface: #150e12;
    --ram-surface-container-lowest: #150e12;
    --ram-surface-container-low: #1b1318;
    --ram-surface-container: #21181e;
    --ram-surface-container-high: #2a1f26;
    --ram-on-surface: #f5f0e8;
    --ram-on-surface-variant: #c9bdb4;
    --ram-outline: #8a8078;
    --ram-outline-variant: #3a3038;
    --ram-background: #100a0e;
    --ram-on-background: #f5f0e8;
    --ram-error: #ffb4ab;

    --bs-body-color: var(--ram-on-surface);
    --bs-body-color-rgb: 245, 240, 232;
    --bs-body-bg: var(--ram-background);
    --bs-border-color: var(--ram-outline-variant);
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: var(--ram-on-surface-variant);
    --bs-tertiary-bg: var(--ram-surface-container);
    --bs-link-color: var(--ram-primary);
    --bs-link-color-rgb: 217, 182, 74;
    --bs-link-hover-color: #c4e666;
}
html.dark body { background: var(--ram-background); color: var(--ram-on-surface); }

/* Surfaces that the light theme hard-codes rather than taking from a token. */
html.dark .a11y-head { border-bottom-color: rgba(255, 255, 255, .10); background: linear-gradient(to left, rgba(179, 217, 74, .12), transparent); }
html.dark .a11y-foot { border-top-color: rgba(255, 255, 255, .10); background: linear-gradient(to top, rgba(10, 16, 20, .8), transparent); }
html.dark .a11y-chip-group,
html.dark .a11y-toggle-card { border-color: rgba(255, 255, 255, .10); background: linear-gradient(to bottom, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); }
html.dark .a11y-chip:hover { background: rgba(255, 255, 255, .10); }
html.dark .a11y-chip[aria-pressed="true"] { background: rgba(179, 217, 74, .18); box-shadow: inset 0 0 0 2px rgba(179, 217, 74, .35); }
html.dark .a11y-close:hover { background: rgba(255, 255, 255, .10); }
html.dark .a11y-head-icon,
html.dark .a11y-sec-icon { background: rgba(179, 217, 74, .18); }
html.dark .a11y-toggle-icon { background: rgba(255, 255, 255, .10); color: var(--ram-on-surface); }
html.dark .a11y-swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
html.dark .a11y-btn { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); color: var(--ram-on-surface); }
html.dark .a11y-btn:hover { background: rgba(255, 255, 255, .10); color: var(--ram-primary); }
html.dark .a11y-btn--primary { background: var(--ram-primary); color: var(--ram-on-primary); border-color: transparent; }
html.dark .ram-card { background: var(--ram-surface-container-low); outline-color: rgba(255, 255, 255, .08); }
html.dark .ram-card:hover { outline-color: rgba(179, 217, 74, .35); }

/* Header / toggle-card left group. min-width:0 is what lets .text-truncate work
   inside a flex row — without it the title pushes the close button off-dialog. */
.a11y-head-main { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.a11y-head-text { min-width: 0; }

/* =============================================================================
   Home — hero banner & quick actions
   -----------------------------------------------------------------------------
   Base styling for markup that previously carried it as Tailwind utilities.

   The EXISTING class names are kept deliberately. full-home.css / theme.css
   already target .hero-banner, .hero-cta-block, .quick-action-card,
   .quick-action-icon-wrap and .quick-action-text with mobile overrides (several
   using !important), and they load AFTER this file. Renaming these to .ram-*
   would silently drop every one of those overrides on phones, so the base values
   live here under the same names and the cascade keeps working as designed.
   Values are transcribed 1:1 from the Tailwind classes they replace — Bootstrap's
   spacing scale differs (its px-4 is 1.5rem, Tailwind's is 1rem), so the design
   is NOT re-expressed in Bootstrap utilities where the numbers would shift.
   ============================================================================= */

/* ---- Hero banner -------------------------------------------------------- */
.hero-banner {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: min(64svh, 26rem);
    min-height: 18rem;
    max-height: 28rem;
    overflow: hidden;
}
@media (min-width: 576px) {
    .hero-banner { height: min(62svh, 26rem); min-height: 19rem; max-height: 32rem; align-items: center; }
}
@media (min-width: 768px) {
    .hero-banner { height: 870px; min-height: 0; max-height: none; align-items: center; }
}

.hero-banner__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-banner__media video,
.hero-banner__media img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
.hero-banner__interact { position: absolute; inset: 0; z-index: 2; cursor: grab; user-select: none; }
.hero-banner__interact:active { cursor: grabbing; }

.hero-banner__inner {
    position: relative;
    z-index: 10;
    margin-inline: auto;
    width: 100%;
    max-width: 80rem;
    padding: 1rem .75rem 4.75rem;
}
@media (min-width: 576px) { .hero-banner__inner { padding: 2rem 1.5rem 5.25rem; } }
@media (min-width: 768px) { .hero-banner__inner { padding: 3.5rem 2rem 5rem; } }
@media (min-width: 992px) { .hero-banner__inner { padding-bottom: 6rem; } }

.hero-cta-block {
    max-width: 42rem;
    padding: 1rem;
    text-align: start;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: .75rem;
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
@media (min-width: 576px) { .hero-cta-block { padding: 2rem; } }
@media (min-width: 768px) { .hero-cta-block { padding: 2.5rem; } }

.hero-cta-title { margin-bottom: .75rem; font-size: 1.25rem; font-weight: 700; line-height: 1.2; color: #fff; }
@media (min-width: 576px) { .hero-cta-title { margin-bottom: 1.5rem; font-size: 2.25rem; } }
@media (min-width: 768px) { .hero-cta-title { font-size: 3rem; } }
@media (min-width: 992px) { .hero-cta-title { font-size: 3.75rem; } }
@media (min-width: 1200px) { .hero-cta-title { font-size: 4.5rem; } }

.hero-cta-lede { margin-bottom: 1rem; font-size: .875rem; line-height: 1.625; color: rgba(255, 255, 255, .9); }
@media (min-width: 576px) { .hero-cta-lede { margin-bottom: 2.5rem; font-size: 1.125rem; } }

.hero-cta-actions { display: flex; flex-direction: column; gap: .625rem; }
@media (min-width: 576px) { .hero-cta-actions { flex-direction: row; gap: 1rem; } }

.hero-btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.25rem;
    border-radius: .75rem;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    touch-action: manipulation;
    transition: transform .2s, background-color .2s;
}
@media (min-width: 576px) { .hero-btn { width: auto; padding: 1rem 2rem; font-size: 1.125rem; } }
.hero-btn--primary {
    background: linear-gradient(to right, var(--ram-primary), var(--ram-primary-container));
    color: var(--ram-on-primary);
    border: 0;
    box-shadow: 0 20px 25px -5px rgba(158, 201, 39, .2), 0 8px 10px -6px rgba(158, 201, 39, .2);
}
.hero-btn--primary:hover { transform: scale(1.02); color: var(--ram-on-primary); }
.hero-btn--primary:active { transform: scale(.98); }
.hero-btn--ghost {
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.hero-btn--ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; }
@media (prefers-reduced-motion: reduce) {
    .hero-btn, .hero-btn:hover, .hero-btn:active { transition: none; transform: none; }
}

.hero-banner__navwrap {
    pointer-events: none;
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    justify-content: center;
    padding: .5rem .75rem max(.65rem, env(safe-area-inset-bottom, 0px));
}
@media (min-width: 576px) { .hero-banner__navwrap { padding: .75rem 1.5rem 1rem; } }
@media (min-width: 768px) { .hero-banner__navwrap { padding: .75rem 2rem 7.5rem; } }
.hero-banner__navgroup { pointer-events: auto; display: flex; width: 100%; justify-content: center; }

/* ---- Quick actions ------------------------------------------------------ */
.quick-actions-bento {
    position: relative;
    z-index: 20;
    margin-inline: auto;
    margin-top: -2rem;
    width: 100%;
    max-width: 80rem;
    padding-inline: 1rem;
}
@media (min-width: 576px) { .quick-actions-bento { margin-top: -3.5rem; padding-inline: 1.5rem; } }
@media (min-width: 768px) { .quick-actions-bento { margin-top: -6rem; padding-inline: 2rem; } }

/* Horizontal snap-scroller on phones (base rules live in full-home.css),
   a real grid from md up. */
.quick-actions-bento .section-carousel {
    gap: 1rem;
    margin-inline: -1rem;
    padding-inline: 1rem;
    padding-bottom: .25rem;
}
@media (min-width: 768px) {
    .quick-actions-bento .section-carousel {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        margin-inline: 0;
        padding-inline: 0;
        padding-bottom: 0;
        overflow: visible;
    }
}
@media (min-width: 992px) {
    .quick-actions-bento .section-carousel { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}

.quick-action-card {
    display: flex;
    width: min(88vw, 19.5rem);
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(229, 229, 229, .8);
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .04), 0 4px 6px -4px rgba(0, 0, 0, .04);
    transition: background-color .5s, border-color .5s, color .5s;
}
@media (min-width: 576px) { .quick-action-card { padding: 2rem; } }
@media (min-width: 768px) { .quick-action-card { width: auto; min-width: 0; } }
.quick-action-card:hover { background: var(--ram-primary); border-color: var(--ram-primary); }

.quick-action-icon-wrap {
    margin-bottom: 1rem;
    display: flex;
    height: 4rem;
    width: 4rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(158, 201, 39, .1);
    transition: background-color .3s;
}
.quick-action-icon-wrap .material-symbols-outlined { font-size: 1.875rem; color: var(--ram-primary); transition: color .3s; }
.quick-action-card:hover .quick-action-icon-wrap { background: rgba(255, 255, 255, .2); }
.quick-action-card:hover .quick-action-icon-wrap .material-symbols-outlined { color: #fff; }

.quick-action-text { width: 100%; }
@media (min-width: 768px) { .quick-action-text { text-align: center; } }
.quick-action-text h3 { font-size: 1.25rem; font-weight: 700; color: var(--ram-on-surface); margin: 0; transition: color .5s; }
.quick-action-text p { margin: .5rem 0 0; font-size: .875rem; color: var(--ram-on-surface-variant); transition: color .5s; }
.quick-action-card:hover .quick-action-text h3 { color: #fff; }
.quick-action-card:hover .quick-action-text p { color: rgba(255, 255, 255, .8); }
@media (prefers-reduced-motion: reduce) {
    .quick-action-card, .quick-action-icon-wrap,
    .quick-action-icon-wrap .material-symbols-outlined,
    .quick-action-text h3, .quick-action-text p { transition: none; }
}

/* ---- News ticker -------------------------------------------------------- */
.ram-ticker {
    position: relative;
    z-index: 20;
    margin-top: 2.5rem;
    border-block: 1px solid rgba(158, 201, 39, .2);
    background: var(--ram-surface-container-lowest);
}
@media (min-width: 576px) { .ram-ticker { margin-top: 3.5rem; } }
.ram-ticker__inner { margin-inline: auto; display: flex; width: 100%; max-width: 80rem; align-items: stretch; }
/* The label is a solid gold block butted straight against the scrolling text,
   with square corners and only .75rem of vertical padding — it read as an
   unfinished edge rather than a badge, in both languages. Give it a rounded
   inline-end, a shadow to lift it above the moving text, and a bit more height.
   All logical properties: the label sits at the inline-start in both scripts. */
.ram-ticker__label {
    position: relative;
    z-index: 2;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: .5rem;
    padding: .9rem 1.15rem;
    background: var(--ram-primary);
    color: var(--ram-on-primary);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    border-start-end-radius: .75rem;
    border-end-end-radius: .75rem;
    box-shadow: .35rem 0 .75rem rgba(0, 0, 0, .10);
}
html[dir="rtl"] .ram-ticker__label { box-shadow: -.35rem 0 .75rem rgba(0, 0, 0, .10); }
@media (min-width: 576px) { .ram-ticker__label { padding-inline: 1.4rem; font-size: .875rem; } }
.ram-ticker__label .material-symbols-outlined { font-size: 1.125rem; }
/* Breathing room so the first headline does not start hard against the badge. */
.ram-ticker__viewport { padding-inline-start: .5rem; }
.ram-ticker__item { min-height: 2.9rem; }

/* Slides overlay each other; full-home.css only supplies the opacity cross-fade,
   so the stacking that Tailwind used to provide (absolute inset-0) lives here. */
.hero-slider__slide { position: absolute; inset: 0; }

/* The inline <style> in kobar_home.blade.php supplies only the fade mask and
   the scroll animation; the box itself was Tailwind (relative min-w-0 flex-1). */
.ram-ticker__viewport { position: relative; min-width: 0; flex: 1 1 auto; overflow: hidden; color: var(--ram-on-surface); }

/* =============================================================================
   Home — shared section skeleton
   -----------------------------------------------------------------------------
   Every content section on the homepage repeats the same header: a coloured
   "eyebrow" line with a dot, a large title, and a lede paragraph, inside a
   max-width wrapper. Those four utility stacks appeared 5-6 times each; they are
   components here so the sections stay identical by construction.
   Values transcribed 1:1 from the Tailwind they replace.
   ============================================================================= */
.ram-wrap {
    position: relative;
    margin-inline: auto;
    width: 100%;
    max-width: 80rem;
    padding-inline: 1rem;
}
@media (min-width: 576px) { .ram-wrap { padding-inline: 1.5rem; } }
@media (min-width: 768px) { .ram-wrap { padding-inline: 2rem; } }

.ram-eyebrow {
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .025em;
    color: var(--ram-primary);
}
.ram-eyebrow__dot {
    display: inline-flex;
    width: .375rem;
    height: .375rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ram-primary);
}

.ram-sec-title {
    margin-bottom: .75rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ram-on-surface);
}
@media (min-width: 576px) { .ram-sec-title { font-size: 1.875rem; } }
@media (min-width: 768px) { .ram-sec-title { font-size: 2.25rem; } }
/* Variant used by the sections whose Tailwind carried lg:text-[2.5rem]. */
@media (min-width: 992px) { .ram-sec-title--xl { font-size: 2.5rem; } }

.ram-sec-lede { font-size: 1rem; line-height: 1.625; color: var(--ram-on-surface-variant); }

/* =============================================================================
   Home — section blocks, cards and icon sizing
   -----------------------------------------------------------------------------
   Values transcribed 1:1 from the Tailwind classes they replace. Bootstrap's
   fs-* scale does NOT match Tailwind's text-* scale, so icon sizes are named
   explicitly rather than mapped onto fs-* and silently resized.
   ============================================================================= */

/* Icon sizes (Material Symbols). .ico-a-b = size a, size b from sm up. */
.ico-xs     { font-size: .75rem; }
.ico-sm     { font-size: .875rem; }
.ico-base   { font-size: 1rem; }
.ico-lg     { font-size: 1.125rem; }
.ico-2xl    { font-size: 1.5rem; }
.ico-3xl    { font-size: 1.875rem; }
.ico-6xl    { font-size: 3.75rem; }
.ico-xs-sm  { font-size: .75rem; }
.ico-base-lg { font-size: 1rem; }
@media (min-width: 576px) {
    .ico-xs-sm   { font-size: .875rem; }
    .ico-base-lg { font-size: 1.125rem; }
}

/* Section block: the repeated <section> shell. modern-surface / --soft / --frost
   / --violet stay on the element; they come from full-home.css and supply the
   background treatment. */
.ram-block {
    position: relative;
    padding-block: 3rem;
    scroll-margin-top: 6rem;
}
@media (min-width: 576px) { .ram-block { padding-block: 4rem; scroll-margin-top: 7rem; } }
@media (min-width: 768px) { .ram-block { padding-block: 6rem; } }
@media (min-width: 992px) { .ram-block { padding-block: 7rem; } }
/* Applied only where the original markup had overflow-hidden — one section
   (major-projects) deliberately did not, so clipping is opt-in. */
.ram-block--clip { overflow: hidden; }

/* Media tile with a hover zoom. Replaces Tailwind's group/group-hover pair:
   the parent is .ram-tile, so the child keys off :hover on it directly. */
.ram-tile {
    position: relative;
    overflow: hidden;
    text-align: start;
    border: 1px solid rgba(212, 207, 192, .25);
    border-radius: 1rem;
    background: var(--ram-surface-container-lowest);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: border-color .2s, box-shadow .2s;
}
/* The Tailwind original gated its hover on motion-safe:, so keep the hover
   affordance out of the way for users who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    .ram-tile:hover {
        border-color: rgba(158, 201, 39, .3);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    }
    .ram-tile--secondary:hover { border-color: rgba(98, 60, 17, .35); }
}
.ram-tile__img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .5s;
}
.ram-tile:hover .ram-tile__img,
/* TRANSITIONAL: three carousel cards still carry Tailwind's `group` marker and
   are not converted yet, so their images would otherwise lose the zoom. `group`
   has no styles of its own (Tailwind only reads it at build time), so matching
   it here is safe and independent of tailwind.css. Drop this half of the
   selector once those cards move to .ram-tile. */
.group:hover .ram-tile__img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
    .ram-tile__img,
    .ram-tile:hover .ram-tile__img,
    .group:hover .ram-tile__img { transition: none; transform: none; }
}
.ram-thumb-empty {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    background: var(--ram-surface-container);
    color: rgba(74, 64, 56, .4);
}

/* Card text scale */
.ram-kicker {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .025em;
    color: var(--ram-on-surface-variant);
}
.ram-card-name {
    margin-top: .25rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ram-on-surface);
}
@media (min-width: 576px) { .ram-card-name { font-size: 1.125rem; } }
.ram-card-meta { margin-top: .125rem; font-size: .75rem; font-weight: 600; color: var(--ram-on-surface-variant); }
.ram-card-desc { margin-top: .5rem; flex: 1 1 auto; font-size: .875rem; line-height: 1.625; color: var(--ram-on-surface-variant); }
.ram-sec-sublede { max-width: 36rem; font-size: .875rem; line-height: 1.625; color: var(--ram-on-surface-variant); }
@media (min-width: 576px) { .ram-sec-sublede { text-align: start; } }

/* Wide list row (facilities / awards) */
.ram-listrow {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.25rem 1.75rem;
}
@media (min-width: 576px) {
    .ram-listrow { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 2rem; }
}

/* ---------------------------------------------------------------------------
   Directional icons in LTR
   ---------------------------------------------------------------------------
   The whole design was drawn for Arabic, so every "continue reading / next"
   affordance uses `arrow_back` (which points LEFT — the forward direction when
   you read right-to-left), and the slider's prev/next use chevron_right /
   chevron_left the same way round. Rendered untouched on /en those all point
   the wrong way: "Read more <-".

   Mirroring them for LTR is one rule instead of editing 16 `arrow_back`s, 4
   chevron pairs in the Blade views and the 3 icons home-scripts.js injects.
   Material Symbols are glyphs, so scaleX(-1) mirrors cleanly.

   Only reading-order icons are listed. Do NOT add non-directional ones
   (expand_more, close, search ...) — they must never be mirrored.          */
html[dir="ltr"] .material-symbols-outlined[data-icon="arrow_back"],
html[dir="ltr"] .material-symbols-outlined[data-icon="arrow_forward"],
html[dir="ltr"] .material-symbols-outlined[data-icon="arrow_back_ios"],
html[dir="ltr"] .material-symbols-outlined[data-icon="arrow_forward_ios"],
html[dir="ltr"] .material-symbols-outlined[data-icon="chevron_left"],
html[dir="ltr"] .material-symbols-outlined[data-icon="chevron_right"] {
    transform: scaleX(-1);
}
/* The hero dots/arrows sit inside a translated parent; keep the mirror from
   cancelling the vertical centring those apply. */
html[dir="ltr"] .hero-slider__btn .material-symbols-outlined[data-icon="chevron_left"],
html[dir="ltr"] .hero-slider__btn .material-symbols-outlined[data-icon="chevron_right"] {
    transform: scaleX(-1);
}

/* =============================================================================
   Home — typography scale & remaining layout bits
   -----------------------------------------------------------------------------
   Card/heading sizes are named rather than mapped onto Bootstrap's fs-* scale:
   fs-* does not line up with Tailwind's text-* steps, and Bootstrap's spacing
   scale is offset too (its gap-4 is 1.5rem where Tailwind's is 1rem), so a
   utility-for-utility swap would resize the design by a step in places.
   ============================================================================= */

/* Card / block headings, smallest to largest. */
.ram-h6 { font-size: 1rem; font-weight: 700; line-height: 1.375; color: var(--ram-on-surface); }
@media (min-width: 768px) { .ram-h6 { font-size: 1.125rem; } }

.ram-h6b { font-size: 1rem; font-weight: 900; line-height: 1.375; color: var(--ram-on-surface); }
@media (min-width: 576px) { .ram-h6b { font-size: 1.125rem; } }

.ram-h5 { font-size: 1.125rem; font-weight: 700; line-height: 1.375; color: var(--ram-on-surface); }
@media (min-width: 768px) { .ram-h5 { font-size: 1.25rem; } }

.ram-h4 { font-size: 1.25rem; font-weight: 700; line-height: 1.375; color: var(--ram-on-surface); }
@media (min-width: 576px) { .ram-h4 { font-size: 1.5rem; } }

.ram-h3 { font-size: 1.25rem; font-weight: 700; color: var(--ram-on-surface); }
@media (min-width: 576px) { .ram-h3 { font-size: 1.5rem; } }
@media (min-width: 768px) { .ram-h3 { font-size: 1.875rem; } }

/* Over-image variant (white, one step larger at each stop). */
.ram-h3--onmedia { font-size: 1.125rem; font-weight: 700; line-height: 1.375; color: #fff; }
@media (min-width: 576px) { .ram-h3--onmedia { font-size: 1.25rem; } }
@media (min-width: 768px) { .ram-h3--onmedia { font-size: 1.5rem; } }
@media (min-width: 992px) { .ram-h3--onmedia { font-size: 1.875rem; } }

/* Title that turns primary on tile hover (was group-hover:text-primary). */
.ram-tile-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.375;
    color: var(--ram-on-surface);
    transition: color .2s;
}
@media (min-width: 576px) { .ram-tile-title { font-size: 1.125rem; } }
.ram-tile:hover .ram-tile-title { color: var(--ram-primary); }

.ram-note { font-size: .875rem; color: var(--ram-on-surface-variant); }
/* Secondary line hidden on the narrowest screens (was hidden sm:block). */
.ram-note--sm-up { display: none; margin-top: .5rem; line-height: 1.625; }
@media (min-width: 576px) { .ram-note--sm-up { display: block; } }
.ram-eyebrow-sm { display: block; margin-bottom: .375rem; font-size: .75rem; font-weight: 600; color: var(--ram-primary); }
.ram-num { font-size: .75rem; font-weight: 900; font-variant-numeric: tabular-nums; }
@media (min-width: 576px) { .ram-num { font-size: .875rem; } }
.ram-num--lg { font-size: .875rem; font-weight: 900; }
@media (min-width: 576px) { .ram-num--lg { font-size: 1rem; } }

/* Layout bits repeated across sections. */
.ram-row-start { display: flex; align-items: flex-start; gap: 1rem; }
.ram-inline { display: inline-flex; align-items: center; gap: .375rem; }
.ram-maxw { max-width: 42rem; text-align: start; }
.ram-cardbody { display: flex; flex: 1 1 auto; flex-direction: column; padding: 1.25rem; text-align: start; }
.ram-overlay { position: absolute; inset: 0; z-index: 10; border-radius: 1.5rem; }

/* Square slot marker (calendar / list index). Shrinks as the viewport grows,
   exactly as the original responsive utilities did. */
.ram-slot {
    display: inline-flex;
    height: 2.75rem;
    width: 2.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212, 207, 192, .4);
    border-radius: .75rem;
    background: #fff;
    color: rgba(74, 64, 56, .5);
}
@media (min-width: 576px) { .ram-slot { height: 2.25rem; width: 2.25rem; } }
@media (min-width: 992px) { .ram-slot { height: 2rem; width: 2rem; border-radius: .5rem; } }

/* ---------------------------------------------------------------------------
   Seasonal garland layer
   ---------------------------------------------------------------------------
   #festive-garland-layer existed in partials/kobar/_festive.blade.php but had NO
   css anywhere and was never referenced by the JS, so the Christmas lights and
   the Ramadan garland were being appended to #festive-layer instead — which is
   position:fixed. The garland therefore stayed pinned to the top of the VIEWPORT
   and floated over the middle of the page as you scrolled, with a gap above it.

   Anchored to the top of the DOCUMENT so it scrolls away with the header, the way
   bunting strung across the top of the page should. Snow stays in the fixed layer.
   --------------------------------------------------------------------------- */
.festive-garland-layer {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 0;                 /* purely a hanging point — never takes up space */
    overflow: visible;
    pointer-events: none;
    z-index: 58;
}
/* The rows inside are absolutely positioned by the design's own css; make sure
   they hang from this layer rather than from the page. */
.festive-garland-layer > * { position: absolute; top: 0; inset-inline: 0; }

/* ---------------------------------------------------------------------------
   Events calendar — interactive bits
   ---------------------------------------------------------------------------
   The month chevrons and the day cells are real controls now (they were inert
   <span aria-hidden> after the conversion), so they need to LOOK clickable, and
   the day-detail panel needs styling. See the calendar IIFE in home-scripts.js.
   --------------------------------------------------------------------------- */
.ram-cal-nav { cursor: pointer; text-decoration: none; color: inherit; transition: background-color .2s, color .2s; }
.ram-cal-nav:hover { background: rgba(158, 201, 39, .12); color: var(--ram-primary); }
.ram-cal-nav:focus-visible { outline: 2px solid var(--ram-primary); outline-offset: 2px; }
.ram-cal-cell { cursor: pointer; border: 0; }

.ram-cal-day {
    margin-top: .85rem;
    border: 1px solid rgba(158, 201, 39, .28);
    border-radius: 1rem;
    background: rgba(158, 201, 39, .06);
    padding: .75rem .85rem;
}
.ram-cal-day__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.ram-cal-day__date { margin: 0; font-size: .8125rem; font-weight: 700; color: var(--ram-on-surface); }
.ram-cal-day__close {
    flex-shrink: 0; width: 1.75rem; height: 1.75rem;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: .5rem; background: transparent;
    color: var(--ram-on-surface-variant); cursor: pointer;
}
.ram-cal-day__close:hover { background: rgba(0, 0, 0, .06); }
.ram-cal-day__close .material-symbols-outlined { font-size: 1.125rem; }
.ram-cal-day__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .35rem; }
.ram-cal-day__list a {
    display: block; font-size: .8125rem; font-weight: 600; line-height: 1.4;
    color: var(--ram-on-surface); text-decoration: none;
}
.ram-cal-day__list a:hover { color: var(--ram-primary); text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================================
   Home sections — shared components (Tailwind -> Bootstrap conversion)
   -----------------------------------------------------------------------------
   The remaining home sections were the last Tailwind holdouts. They are all the
   same three shapes repeated with a different accent colour, so they are defined
   once here rather than as ~1,100 inline utilities.

   ACCENT SYSTEM — a card sets .ram-accent--{primary|secondary|tertiary} and every
   part inside reads var(--ram-accent). That replaces the per-item Tailwind class
   strings the Blade used to carry in PHP arrays ('bg-secondary/90 text-on-secondary',
   'ring-primary/15', 'text-tertiary', ...). Because the accents resolve through the
   theme's own custom properties they follow dark mode for free.
   Values below are the Tailwind equivalents, kept 1:1 so the design does not shift.
   ========================================================================== */
.ram-accent--primary   { --ram-accent: var(--ram-primary);   --ram-accent-on: var(--ram-on-primary); }
.ram-accent--secondary { --ram-accent: var(--ram-secondary); --ram-accent-on: var(--ram-on-secondary); }
.ram-accent--tertiary  { --ram-accent: var(--ram-tertiary);  --ram-accent-on: var(--ram-on-tertiary); }

/* --- section header: heading block, optional CTA pushed to the far end ------ */
.ram-sechead {
    display: flex; flex-direction: column; gap: 2rem;
    text-align: start; margin-bottom: 2.5rem;
}
@media (min-width: 768px) { .ram-sechead { margin-bottom: 3.5rem; } }
@media (min-width: 992px) {
    .ram-sechead { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.ram-sechead__text { max-width: 42rem; }

/* --- card grid: swipeable row on phones, grid from sm up --------------------
   SELF-CONTAINED ON PURPOSE — do NOT also put .section-carousel on these.
   theme.css and full-home.css both declare `.section-carousel { display:flex;
   overflow-x:auto }` and BOTH load AFTER kobar-bs.css, so that flex wins over
   anything here and the cards stretch to content width instead of forming a grid.
   The swipe behaviour is reproduced below so the class is not needed.          */
.ram-cardgrid {
    display: flex; gap: 1rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-inline: -1rem; padding-inline: 1rem; padding-bottom: .25rem;
    scrollbar-width: none;
}
.ram-cardgrid::-webkit-scrollbar { display: none; }
.ram-cardgrid > * { flex: 0 0 auto; width: min(88vw, 20rem); scroll-snap-align: start; }
@media (min-width: 576px) {
    .ram-cardgrid {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem;
        margin-inline: 0; padding-inline: 0; padding-bottom: 0;
        overflow: visible; scroll-snap-type: none;
    }
    .ram-cardgrid > * { width: auto; min-width: 0; }
}
@media (min-width: 992px) {
    .ram-cardgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
    .ram-cardgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}

/* --- image-led tile card (facilities, projects, media portal) --------------- */
.ram-tilecard {
    display: flex; flex-direction: column; height: 100%;
    overflow: hidden; border-radius: 1rem;
    background: var(--ram-surface-container-lowest);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1),
                0 0 0 1px rgba(212, 207, 192, .2);
    transition: transform .25s, box-shadow .25s;
}
.ram-tilecard:hover {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1),
                0 0 0 1px var(--ram-accent, rgba(212,207,192,.3));
}
@media (prefers-reduced-motion: no-preference) {
    .ram-tilecard:hover { transform: translateY(-.25rem); }
}
.ram-tilecard__media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; flex-shrink: 0; overflow: hidden; }
.ram-tilecard__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(42,26,16,.88), rgba(42,26,16,.35) 50%, transparent);
}
.ram-tilecard__overlay {
    position: absolute; inset-inline: 0; bottom: 0;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: .75rem; padding: 1.25rem;
}
.ram-tilecard__icon {
    display: flex; align-items: center; justify-content: center;
    width: 3.5rem; height: 3.5rem; flex-shrink: 0;
    border-radius: 1rem;
    background: var(--ram-surface-container-lowest);
    color: var(--ram-accent, var(--ram-primary));
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1),
                0 0 0 1px var(--ram-accent, rgba(0,0,0,.1));
    transition: transform .2s;
}
.ram-tilecard:hover .ram-tilecard__icon { transform: scale(1.05); }

/* --- accent chip (category badge sitting on the image) ---------------------- */
.ram-chip--accent {
    background: var(--ram-accent, var(--ram-primary));
    color: var(--ram-accent-on, #fff);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* --- "all <category>" link at the foot of a card --------------------------- */
.ram-cardlink {
    margin-top: 1.25rem;
    display: inline-flex; align-items: center; gap: .375rem;
    font-size: .875rem; font-weight: 700; text-decoration: none;
    color: var(--ram-accent, var(--ram-primary));
    transition: gap .2s;
}
.ram-cardlink:hover { gap: .5rem; color: var(--ram-accent, var(--ram-primary)); }

/* --- section header variant: heading + CTA on one baseline ------------------ */
.ram-sechead--inline {
    display: flex; flex-direction: column; gap: 1rem;
    text-align: start; margin-bottom: 2rem;
}
@media (min-width: 576px) {
    .ram-sechead--inline { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1.5rem; }
}
@media (min-width: 768px) { .ram-sechead--inline { margin-bottom: 2.5rem; } }

/* "view all" CTA: a full-width pill on phones, a plain link from sm up. */
.ram-seclink {
    display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
    width: 100%; flex-shrink: 0; align-self: stretch;
    border: 1px solid color-mix(in srgb, var(--ram-primary) 15%, transparent);
    background: color-mix(in srgb, var(--ram-primary) 5%, transparent);
    border-radius: .75rem; padding-block: .625rem;
    font-size: .875rem; font-weight: 700; text-decoration: none;
    color: var(--ram-primary);
    touch-action: manipulation; transition: background-color .2s;
}
.ram-seclink:hover { background: color-mix(in srgb, var(--ram-primary) 10%, transparent); color: var(--ram-primary); }
@media (min-width: 576px) {
    .ram-seclink { width: auto; align-self: auto; border: 0; background: transparent; padding-block: 0; }
    .ram-seclink:hover { background: transparent; }
}

/* --- padded card (projects, awards): media sits INSIDE the padding ---------- */
.ram-padcard {
    display: flex; flex-direction: column; height: 100%;
    border: 1px solid color-mix(in srgb, var(--ram-outline-variant) 25%, transparent);
    border-radius: 1rem;
    background: var(--ram-surface-container-lowest);
    padding: 1.25rem; text-align: start;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    transition: border-color .2s, box-shadow .2s;
}
@media (min-width: 576px) { .ram-padcard { padding: 1.5rem; } }
.ram-padcard:hover {
    border-color: color-mix(in srgb, var(--ram-accent, var(--ram-primary)) 30%, transparent);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
.ram-padcard__media {
    position: relative; display: block; width: 100%; height: 10rem; flex-shrink: 0;
    overflow: hidden; border-radius: .75rem;
    box-shadow: 0 0 0 1px rgba(0,0,0,.1);
}

/* soft accent chip — the old bg-{accent}/12 text-{accent} pairing */
.ram-chip--soft {
    display: inline-flex; align-items: center; gap: .25rem; width: fit-content;
    border-radius: 50rem; padding: .25rem .75rem;
    font-size: .75rem; font-weight: 700;
    background: color-mix(in srgb, var(--ram-accent, var(--ram-primary)) 14%, transparent);
    color: var(--ram-accent, var(--ram-primary));
}
.ram-metarow { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ram-meta {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .75rem; font-weight: 600; color: var(--ram-on-surface-variant);
}
.ram-cardlink--sm { margin-top: 1rem; gap: .25rem; }
/* gaps in the icon scale, hit during the home-section conversion
   (Tailwind text-4xl = 2.25rem, text-5xl = 3rem) */
.ico-4xl { font-size: 2.25rem; }
.ico-5xl { font-size: 3rem; }

/* --- awards: hero card + accent rails on the list tiles --------------------- */
.ram-awardwrap { position: relative; display: flex; flex-direction: column; }
/* the soft gold glow behind the hero card */
.ram-awardwrap::before {
    content: ""; position: absolute; inset-inline-start: -1.5rem; top: 50%;
    width: 12rem; height: 12rem; transform: translateY(-50%);
    border-radius: 50%; filter: blur(48px); pointer-events: none;
    background: color-mix(in srgb, var(--ram-primary) 9%, transparent);
}
@media (min-width: 576px) { .ram-awardwrap::before { width: 14rem; height: 14rem; } }

.ram-awardhero {
    position: relative; display: flex; flex-direction: column; min-height: 22rem;
    overflow: hidden; border-radius: 1.75rem; padding: 2rem; text-align: start;
    border: 1px solid color-mix(in srgb, var(--ram-primary) 20%, transparent);
    background: linear-gradient(to bottom, #fff, var(--ram-surface-container-lowest),
                color-mix(in srgb, var(--ram-primary) 6%, transparent));
    box-shadow: 0 24px 60px -24px rgba(158, 201, 39,.35),
                0 0 0 1px color-mix(in srgb, var(--ram-primary) 15%, transparent);
    color: inherit; text-decoration: none; transition: box-shadow .2s;
}
.ram-awardhero:hover {
    color: inherit;
    box-shadow: 0 24px 60px -24px rgba(158, 201, 39,.35),
                0 0 0 1px color-mix(in srgb, var(--ram-primary) 30%, transparent);
}
@media (min-width: 576px) { .ram-awardhero { min-height: 0; padding: 2.5rem; } }
html.dark .ram-awardhero {
    background: linear-gradient(to bottom, var(--ram-surface-container-lowest), #141c18,
                color-mix(in srgb, var(--ram-primary) 12%, transparent));
}
.ram-awardhero__head { margin-bottom: 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ram-awardhero__medalwrap { position: relative; }
.ram-awardhero__medal {
    display: flex; align-items: center; justify-content: center;
    width: 6rem; height: 6rem; border-radius: 50%;
    background: linear-gradient(to bottom right, var(--ram-primary), var(--ram-primary-container));
    color: var(--ram-on-primary);
    box-shadow: 0 10px 15px -3px rgba(158, 201, 39,.25), 0 0 0 4px #fff;
}
html.dark .ram-awardhero__medal { box-shadow: 0 10px 15px -3px rgba(158, 201, 39,.25), 0 0 0 4px var(--ram-surface-container-lowest); }
@media (min-width: 576px) { .ram-awardhero__medal { width: 7rem; height: 7rem; } }
.ram-awardhero__medal .material-symbols-outlined { font-size: 3.25rem; font-variation-settings: 'FILL' 1; }
@media (min-width: 576px) { .ram-awardhero__medal .material-symbols-outlined { font-size: 3.5rem; } }
.ram-awardhero__ribbon {
    position: absolute; bottom: -.25rem; inset-inline-start: -.25rem;
    display: flex; align-items: center; justify-content: center;
    height: 2.25rem; min-width: 2.25rem; padding-inline: .625rem;
    border-radius: 50rem; border: 2px solid #fff;
    background: var(--ram-tertiary); color: var(--ram-on-tertiary);
    font-size: .75rem; font-weight: 900;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
}
html.dark .ram-awardhero__ribbon { border-color: var(--ram-surface-container-lowest); }
.ram-awardhero__tag {
    border-radius: 50rem; padding: .25rem .75rem;
    font-size: .6875rem; font-weight: 700;
    background: color-mix(in srgb, var(--ram-primary) 12%, transparent);
    color: var(--ram-primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ram-primary) 25%, transparent);
}
.ram-awardhero__sub { margin-top: .5rem; font-size: .875rem; font-weight: 600; color: color-mix(in srgb, var(--ram-primary) 90%, transparent); }
.ram-awardhero__body { margin-top: 1.25rem; flex: 1 1 auto; font-size: .875rem; line-height: 1.625; color: var(--ram-on-surface-variant); }
.ram-awardhero__foot {
    margin-top: 2rem; padding-top: 1.5rem;
    border-top: 1px dashed color-mix(in srgb, var(--ram-primary) 20%, transparent);
}
.ram-awardhero__foot p {
    margin: 0; font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .2em;
    color: color-mix(in srgb, var(--ram-on-surface-variant) 80%, transparent);
}

/* coloured rail down the leading edge of each award tile */
.ram-tile__rail {
    pointer-events: none; position: absolute; inset-block: 0; inset-inline-start: 0; width: .25rem;
    background: linear-gradient(to bottom, var(--ram-accent, var(--ram-primary)),
                color-mix(in srgb, var(--ram-accent, var(--ram-primary)) 60%, transparent));
}
.ram-tile__icon {
    display: flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; flex-shrink: 0; border-radius: .75rem;
    background: color-mix(in srgb, var(--ram-accent, var(--ram-primary)) 12%, transparent);
    color: var(--ram-accent, var(--ram-primary));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ram-accent, var(--ram-primary)) 25%, transparent);
}

/* --- media portal extras ---------------------------------------------------- */
/* 4th card uses the design's "fixed" gold pair, which has no --ram- var yet
   (values from the original tailwind config: primary-fixed / on-primary-fixed) */
.ram-accent--primary-fixed { --ram-accent: #e9f6c6; --ram-accent-on: #1c2406; }
html.dark .ram-accent--primary-fixed { --ram-accent: #516911; --ram-accent-on: #e9f6c6; }

/* header CTA group */
.ram-sechead__actions { display: flex; width: 100%; flex-direction: column; gap: .75rem; }
@media (min-width: 576px) {
    .ram-sechead__actions { width: auto; flex-direction: row; flex-wrap: wrap;
                            align-items: center; justify-content: flex-end; }
}
@media (min-width: 992px) { .ram-sechead__actions { justify-content: flex-start; } }
.ram-btn {
    display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: .5rem;
    border-radius: .75rem; padding: .75rem 1.25rem;
    font-size: .875rem; font-weight: 700; text-decoration: none;
    touch-action: manipulation; transition: background-color .2s, border-color .2s, color .2s;
}
@media (min-width: 576px) { .ram-btn { width: auto; } }
.ram-btn--primary {
    background: var(--ram-primary); color: var(--ram-on-primary);
    box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--ram-primary) 20%, transparent);
}
.ram-btn--primary:hover { background: var(--ram-primary-container); color: var(--ram-on-primary); }
.ram-btn--outline {
    border: 1px solid color-mix(in srgb, var(--ram-outline-variant) 50%, transparent);
    background: var(--ram-surface-container-lowest); color: var(--ram-on-surface);
}
.ram-btn--outline:hover { border-color: color-mix(in srgb, var(--ram-primary) 40%, transparent); color: var(--ram-primary); }

/* tighter overlay used by the media cards (bottom/inline .75rem, no icon badge) */
.ram-tilecard__overlay--tight { padding: .75rem; }
.ram-tilecard__scrim--soft { background: linear-gradient(to top, rgba(42,26,16,.85), rgba(42,26,16,.2) 55%, transparent); }
.ram-cardlink--underline { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--ram-accent, var(--ram-primary)) 30%, transparent); }
.ram-cardlink--underline:hover { text-decoration-color: var(--ram-accent, var(--ram-primary)); }

/* media portal goes 4-up only at xl (its cards carry more text than facilities) */
@media (min-width: 1200px) { .ram-cardgrid--4xl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } }

/* --- latest news: full-bleed lead story + compact side list ------------------ */
.ram-newslead {
    position: relative; overflow: hidden; border-radius: 1rem;
    min-height: 200px; background: var(--ram-on-surface);
    box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--ram-on-surface) 10%, transparent),
                0 0 0 1px rgba(0,0,0,.05);
}
@media (min-width: 576px) { .ram-newslead { min-height: 260px; } }
@media (min-width: 768px) { .ram-newslead { min-height: 360px; } }
@media (min-width: 992px) { .ram-newslead { min-height: 400px; } }
.ram-newslead__media { position: absolute; inset: 0; }
.ram-newslead__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top, #2a1a10, rgba(42,26,16,.5) 50%, rgba(42,26,16,.1));
}
.ram-newslead__hit { position: absolute; inset: 0; z-index: 10; }
.ram-newslead__body {
    pointer-events: none; position: absolute; inset-inline: 0; bottom: 0; z-index: 1;
    padding: .75rem; text-align: start; color: #fff;
}
@media (min-width: 576px) { .ram-newslead__body { padding: 1.5rem; } }
@media (min-width: 768px) { .ram-newslead__body { padding: 2.5rem; } }
.ram-newslead__meta { margin-bottom: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
@media (min-width: 576px) { .ram-newslead__meta { margin-bottom: 1rem; } }
.ram-newslead__cat {
    display: inline-flex; align-items: center; border-radius: 50rem;
    background: var(--ram-primary); color: var(--ram-on-primary);
    padding: .125rem .625rem; font-size: .625rem; font-weight: 700;
}
@media (min-width: 576px) { .ram-newslead__cat { padding: .25rem .75rem; font-size: .75rem; } }
.ram-newslead__time {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .625rem; font-weight: 500; color: rgba(255,255,255,.85);
}
@media (min-width: 576px) { .ram-newslead__time { font-size: .75rem; } }
.ram-newslead__time .material-symbols-outlined { font-size: .875rem; opacity: .9; }
.ram-newslead__title {
    margin-bottom: .5rem; max-width: 36rem; color: #fff;
    font-size: 1.125rem; font-weight: 700; line-height: 1.375;
}
@media (min-width: 576px) { .ram-newslead__title { margin-bottom: 1rem; font-size: 1.5rem; } }
@media (min-width: 768px) { .ram-newslead__title { font-size: 1.875rem; } }
.ram-newslead__desc {
    margin-bottom: .75rem; max-width: 36rem; color: rgba(255,255,255,.85);
    font-size: .75rem; line-height: 1.625;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
@media (min-width: 576px) { .ram-newslead__desc { margin-bottom: 1.5rem; font-size: .875rem; -webkit-line-clamp: 3; } }
@media (min-width: 768px) { .ram-newslead__desc { font-size: 1rem; } }
.ram-newslead__cta {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .875rem; font-weight: 700; color: #e9f6c6; transition: gap .2s;
}
.ram-newslead:hover .ram-newslead__cta { gap: .75rem; }

/* side list: horizontal swipe on phones, stacked column from md up */
.ram-newslist {
    display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; margin-inline: -1rem; padding-inline: 1rem;
    padding-bottom: .25rem; scrollbar-width: none;
}
.ram-newslist::-webkit-scrollbar { display: none; }
.ram-newslist > * { flex: 0 0 auto; width: min(92vw, 26rem); scroll-snap-align: start; }
@media (min-width: 768px) {
    .ram-newslist { flex-direction: column; overflow: visible; scroll-snap-type: none;
                    margin-inline: 0; padding-inline: 0; padding-bottom: 0; }
    .ram-newslist > * { width: auto; min-width: 0; }
}
.ram-newsitem {
    position: relative; display: flex; gap: .75rem;
    border: 1px solid color-mix(in srgb, var(--ram-outline-variant) 25%, transparent);
    border-radius: 1rem; background: var(--ram-surface-container-lowest);
    padding: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05);
    transition: border-color .3s, box-shadow .3s;
}
@media (min-width: 576px) { .ram-newsitem { gap: 1rem; padding: 1rem; } }
.ram-newsitem:hover {
    border-color: color-mix(in srgb, var(--ram-primary) 35%, transparent);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
.ram-newsitem__hit { position: absolute; inset: 0; z-index: 10; border-radius: 1rem; }
.ram-newsitem__media {
    position: relative; z-index: 1; width: 7rem; flex-shrink: 0;
    border-radius: .75rem; overflow: hidden; aspect-ratio: 4 / 3;
    background: var(--ram-surface-container);
}
@media (min-width: 576px) { .ram-newsitem__media { width: 8rem; } }
.ram-newsitem__text {
    position: relative; z-index: 1; flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; text-align: start;
}

/* dashed "looking for the archive?" strip under the list */
.ram-newsarchive {
    display: flex; flex-direction: column; gap: .75rem; text-align: start;
    border: 1px dashed color-mix(in srgb, var(--ram-primary) 25%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--ram-primary) 5%, transparent);
    padding: .75rem 1rem;
}
@media (min-width: 576px) { .ram-newsarchive { flex-direction: row; align-items: center; justify-content: space-between; } }
.ram-newsarchive a { position: relative; z-index: 20; flex-shrink: 0; font-size: .875rem; font-weight: 700; color: var(--ram-primary); text-decoration: none; }
.ram-newsarchive a:hover { text-decoration: underline; }

/* --- events calendar: box, grid, cells --------------------------------------
   NOTE: the day cells are produced in TWO places — the Blade renders the current
   month server-side, and the calendar IIFE in home-scripts.js re-renders on every
   month change. Both emit these same class names; change them together.        */
.ram-calbox {
    display: flex; flex-direction: column; height: 100%; min-height: 0;
    border: 1px solid color-mix(in srgb, var(--ram-outline-variant) 25%, transparent);
    border-radius: 1rem; padding: .625rem;
    background: color-mix(in srgb, var(--ram-surface-container-lowest) 95%, transparent);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
@media (min-width: 576px) { .ram-calbox { padding: 1.25rem; } }
@media (min-width: 768px) { .ram-calbox { padding: 1.5rem; } }
@media (min-width: 992px) { .ram-calbox { border-radius: 1.5rem; padding: .75rem; } }

.ram-cal-head { margin-bottom: .5rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
@media (min-width: 576px) { .ram-cal-head { margin-bottom: 1rem; gap: .75rem; } }
.ram-cal-dows {
    margin-bottom: .25rem; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px; text-align: center; font-size: .6rem; font-weight: 700; line-height: 1.25;
    color: var(--ram-on-surface-variant);
}
@media (min-width: 576px) { .ram-cal-dows { margin-bottom: .5rem; gap: .25rem; font-size: .625rem; } }
@media (min-width: 768px) { .ram-cal-dows { font-size: .6875rem; } }
#ram-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .125rem; text-align: center; }
@media (min-width: 576px) { #ram-cal-grid { gap: .375rem; } }

/* the three day states */
.ram-cal-cell, .ram-cal-blank, .ram-cal-off {
    display: flex; aspect-ratio: 1 / 1; flex-direction: column;
    align-items: center; justify-content: center; border-radius: .75rem;
    font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
@media (min-width: 576px) { .ram-cal-cell, .ram-cal-off { font-size: .875rem; } }
.ram-cal-blank { background: transparent; }
.ram-cal-off { border: 1px solid transparent; color: var(--ram-on-surface-variant); }
.ram-cal-cell { cursor: pointer; transition: background-color .2s, border-color .2s; }
.ram-cal-cell--event {
    border: 1px solid color-mix(in srgb, var(--ram-secondary) 30%, transparent);
    background: color-mix(in srgb, var(--ram-secondary) 5%, transparent);
    color: var(--ram-on-surface);
}
.ram-cal-cell--event:hover {
    border-color: color-mix(in srgb, var(--ram-secondary) 50%, transparent);
    background: color-mix(in srgb, var(--ram-secondary) 10%, transparent);
}
.ram-cal-cell--today {
    border: 2px solid var(--ram-primary); border-radius: .5rem;
    background: color-mix(in srgb, var(--ram-primary) 10%, transparent);
    color: var(--ram-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 0 0 2px color-mix(in srgb, var(--ram-primary) 15%, transparent);
}
@media (min-width: 576px) { .ram-cal-cell--today { border-radius: .75rem; } }
.ram-cal-cell--today:hover { background: color-mix(in srgb, var(--ram-primary) 15%, transparent); }
.ram-cal-dot { margin-top: .125rem; width: .25rem; height: .25rem; border-radius: 50%; background: var(--ram-secondary); }
.ram-cal-dot--today { background: var(--ram-primary); }

.ram-cal-legend {
    margin-top: .75rem; display: flex; flex-wrap: wrap; align-items: center;
    justify-content: center; column-gap: .75rem; row-gap: .375rem;
    font-size: .625rem; color: var(--ram-on-surface-variant);
}
@media (min-width: 576px) { .ram-cal-legend { margin-top: 1rem; font-size: .6875rem; } }
@media (min-width: 992px) { .ram-cal-legend { justify-content: flex-end; } }
.ram-cal-legend__dot { width: .5rem; height: .5rem; flex-shrink: 0; border-radius: 50%; }
.ram-cal-legend__dot--today { background: var(--ram-primary); }
.ram-cal-legend__dot--event { background: var(--ram-secondary); }
.ram-cal-count { font-size: .625rem; color: var(--ram-on-surface-variant); }
@media (min-width: 576px) { .ram-cal-count { font-size: .6875rem; } }

/* --- events timeline cards -------------------------------------------------- */
.events-city-timeline__marker { background: var(--ram-accent, var(--ram-primary)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ram-accent, var(--ram-primary)) 22%, transparent); }
.ram-evcard {
    border: 1px solid color-mix(in srgb, var(--ram-outline-variant) 25%, transparent);
    border-radius: 1rem; background: #fff; padding: 1rem; text-align: start;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    transition: border-color .2s, box-shadow .2s;
}
@media (min-width: 576px) { .ram-evcard { padding: 1.25rem; } }
html.dark .ram-evcard { border-color: rgba(255,255,255,.1); background: #1c0f14; }
.ram-evcard:hover {
    border-color: color-mix(in srgb, var(--ram-accent, var(--ram-primary)) 30%, transparent);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
.ram-evcard--empty { border-style: dashed; border-color: color-mix(in srgb, var(--ram-outline-variant) 40%, transparent); padding: 1.25rem; font-size: .875rem; color: var(--ram-on-surface-variant); }
.ram-evcard__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem; }
@media (min-width: 576px) { .ram-evcard__row { gap: .75rem; } }
.ram-evcard__main { min-width: 0; flex: 1 1 auto; }
.ram-evcard__title { margin-top: .375rem; font-size: 1rem; font-weight: 700; line-height: 1.375; color: var(--ram-on-surface); }
@media (min-width: 576px) { .ram-evcard__title { font-size: 1.125rem; } }
.ram-evcard__title a { color: inherit; text-decoration: none; transition: color .2s; }
.ram-evcard__title a:hover { color: var(--ram-primary); }
.ram-evcard__desc { margin-top: .25rem; font-size: .75rem; line-height: 1.625; color: var(--ram-on-surface-variant); }
@media (min-width: 576px) { .ram-evcard__desc { font-size: .875rem; } }
.ram-evdate {
    flex-shrink: 0; border-radius: .75rem; background: var(--ram-on-surface);
    padding: .375rem .625rem; text-align: center; color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
@media (min-width: 576px) { .ram-evdate { padding: .5rem .75rem; } }
.ram-evdate__dow { margin: 0; font-size: .625rem; font-weight: 700; color: rgba(255,255,255,.75); }
.ram-evdate__year { margin-top: .125rem; margin-bottom: 0; font-size: .6875rem; font-weight: 700;
                    color: color-mix(in srgb, var(--ram-accent, var(--ram-primary)) 90%, transparent); }
@media (min-width: 576px) { .ram-evdate__year { font-size: .75rem; } }

/* footer CTA under the calendar */
.ram-secfoot {
    margin-top: 2.5rem; display: flex; justify-content: center;
    border-top: 1px solid color-mix(in srgb, var(--ram-outline-variant) 20%, transparent);
    padding-top: 2rem;
}

/* --- citizen services: featured GIS card + service list --------------------- */
.ram-gis {
    position: relative; display: flex; flex-direction: column; min-height: 240px;
    overflow: hidden; border-radius: 1.5rem; background: var(--ram-on-surface);
    box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--ram-on-surface) 10%, transparent),
                0 0 0 1px rgba(0,0,0,.05);
}
@media (min-width: 576px) { .ram-gis { min-height: 280px; } }
@media (min-width: 768px) { .ram-gis { min-height: 320px; } }
@media (prefers-reduced-motion: no-preference) {
    .ram-gis { transition: transform .3s; }
    .ram-gis:hover { transform: translateY(-.125rem); }
}
.ram-gis__media { position: absolute; inset: 0; }
.ram-gis__media img {
    width: 100%; height: 100%; object-fit: cover; opacity: .95;
    transition: transform .7s ease-out;
}
.ram-gis:hover .ram-gis__media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .ram-gis__media img { transition: none; } }
.ram-gis__scrim { position: absolute; inset: 0; background: linear-gradient(to top, #2a1a10, rgba(42,26,16,.55) 50%, rgba(42,26,16,.2)); }
/* faint vertical pinstripe over the map, the design's "grid paper" texture */
.ram-gis__lines {
    pointer-events: none; position: absolute; inset: 0; opacity: .08;
    background: repeating-linear-gradient(90deg, transparent, transparent 18px,
                rgba(255,255,255,.06) 18px, rgba(255,255,255,.06) 19px);
}
.ram-gis__body {
    position: relative; z-index: 1; margin-top: auto;
    display: flex; flex: 1 1 auto; flex-direction: column; justify-content: flex-end;
    padding: 1rem; text-align: start; color: #fff;
}
@media (min-width: 576px) { .ram-gis__body { padding: 1.5rem; } }
@media (min-width: 768px) { .ram-gis__body { padding: 2rem; } }
.ram-gis__tags { margin-bottom: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
@media (min-width: 576px) { .ram-gis__tags { margin-bottom: 1rem; gap: .5rem; } }
.ram-gis__tag {
    display: inline-flex; align-items: center; gap: .25rem; border-radius: 50rem;
    padding: .125rem .5rem; font-size: .625rem; font-weight: 700;
    background: var(--ram-primary); color: var(--ram-on-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
@media (min-width: 576px) { .ram-gis__tag { padding: .25rem .75rem; font-size: .6875rem; } }
.ram-gis__tag--glass { background: rgba(255,255,255,.15); color: #fff; backdrop-filter: blur(12px); box-shadow: none; }
.ram-gis__desc { margin-top: .375rem; max-width: 36rem; font-size: .75rem; line-height: 1.625; color: rgba(255,255,255,.85); }
@media (min-width: 576px) { .ram-gis__desc { margin-top: .5rem; font-size: .875rem; } }
@media (min-width: 768px) { .ram-gis__desc { font-size: 1rem; } }
.ram-gis__cta { pointer-events: none; margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
@media (min-width: 576px) { .ram-gis__cta { margin-top: 1.5rem; gap: .75rem; } }
.ram-gis__btn {
    display: inline-flex; align-items: center; gap: .375rem; border-radius: .75rem;
    background: #fff; color: var(--ram-on-surface);
    padding: .5rem .75rem; font-size: .75rem; font-weight: 700;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
}
@media (min-width: 576px) { .ram-gis__btn { gap: .5rem; padding: .625rem 1rem; font-size: .875rem; } }

/* the right-hand service rows */
.ram-svccard {
    position: relative; display: flex; flex: 1 1 auto; flex-direction: column;
    overflow: hidden; border-radius: 1.5rem; padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--ram-outline-variant) 25%, transparent);
    background: linear-gradient(to bottom right, var(--ram-surface-container-lowest), #fff,
                color-mix(in srgb, var(--ram-accent, var(--ram-primary)) 5%, transparent));
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 0 0 1px color-mix(in srgb, var(--ram-outline-variant) 15%, transparent);
    transition: border-color .2s, box-shadow .2s;
}
@media (min-width: 768px) { .ram-svccard { flex-direction: row; align-items: center; gap: 1.25rem; padding: 1.5rem; } }
.ram-svccard:hover {
    border-color: color-mix(in srgb, var(--ram-accent, var(--ram-primary)) 30%, transparent);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
.ram-svccard__text { position: relative; z-index: 1; display: flex; flex: 1 1 auto; flex-direction: column; text-align: start; }
.ram-svccard__foot {
    margin-top: 1rem; display: flex; align-items: center; gap: .75rem;
    border-top: 1px solid color-mix(in srgb, var(--ram-outline-variant) 25%, transparent);
    padding-top: 1rem;
}
@media (min-width: 768px) { .ram-svccard__foot { margin-top: 1.25rem; border-top: 0; padding-top: 0; } }
.ram-svccard__icon {
    position: relative; z-index: 1; margin-inline: auto; display: flex; flex-shrink: 0;
    width: 5rem; height: 5rem; align-items: center; justify-content: center;
    overflow: hidden; border-radius: 1rem; background: #fff;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),
                0 0 0 1px color-mix(in srgb, var(--ram-accent, var(--ram-primary)) 15%, transparent);
    color: color-mix(in srgb, var(--ram-accent, var(--ram-primary)) 80%, transparent);
    transition: transform .2s;
}
@media (min-width: 768px) { .ram-svccard__icon { width: 6rem; height: 6rem; } }
.ram-svccard:hover .ram-svccard__icon img,
.ram-svccard:hover .ram-svccard__icon .material-symbols-outlined { transform: scale(1.05); }
.ram-svccard__icon img { width: 100%; height: 100%; object-fit: contain; padding: .75rem; transition: transform .2s; }

/* ---------------------------------------------------------------------------
   Events timeline — stop the cards being squeezed below their content
   ---------------------------------------------------------------------------
   PRE-EXISTING BUG (not introduced by the Bootstrap conversion — reproduced on
   the pre-conversion build too). theme.css / full-home.css declare:

       .events-city-timeline__list { min-height: 100%; justify-content: space-between }
       .events-city-timeline__item { flex: 1 1 0; min-height: 0 }

   `flex: 1 1 0` + `min-height: 0` makes all four items share the column height
   EQUALLY, and the column height is set by the calendar beside it. Below roughly
   1400px the calendar is short enough that each item gets ~105px while the card
   inside needs ~150px — so the cards overflowed their items and printed on top of
   each other (chips landing over the next card's title, date badges hanging out
   the bottom). It only looked right on a wide desktop.

   Both design files load AFTER kobar-bs.css, so this override wins on
   SPECIFICITY (0,0,2,0 vs 0,0,1,0) rather than order — do not flatten it to a
   single class or theme.css takes over again.

   `flex: 0 0 auto` = size to content. The list keeps min-height:100% and
   space-between, so when the content is shorter than the calendar the cards still
   spread out the way the design intended; when it is taller they simply grow.  */
.events-city-timeline .events-city-timeline__item {
    flex: 0 0 auto;
    min-height: 0;
}
/* Long CMS titles/descriptions must not force the card wider than its column. */
.events-city-timeline .ram-evcard { min-width: 0; }
.events-city-timeline .ram-evcard__main { min-width: 0; }
/* The date badge must stay on the same row as the text, not wrap under it when
   the CMS title/description is long. The text column shrinks instead (min-width:0
   above lets it), the badge never does. Kept wrappable on phones, where the card
   is too narrow to hold both side by side. */
@media (min-width: 576px) {
    .events-city-timeline .ram-evcard__row { flex-wrap: nowrap; }
}
.events-city-timeline .ram-evdate { align-self: flex-start; }