/* ==========================================================================
   Medina Collective sub-theme: css/medina.css
   Premium fusion: deep olive-green ground + warm gold + cream, with the
   warm sand/clay light sections. Scoped entirely under body.medina so the
   injected CIEA nav/footer keep their --ciea-* tokens unchanged.

   Token namespace: --mc-*   Component namespace: .mc-*
   Fonts: Marcellus (var(--font-display)) + Montserrat (var(--font-sans)),
   already loaded site-wide. No new font loads here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS (scoped to body.medina)
   -------------------------------------------------------------------------- */
body.medina {
    /* Forest (dark sections + hero) */
    --mc-forest:        #28311D;   /* deep olive-green ground */
    --mc-forest-2:      #313C24;   /* gradient partner / lighter olive */
    --mc-forest-3:      #1F271680; /* vignette */
    --mc-forest-soft:   #36422700; /* (unused base) */
    --mc-panel:         #313D24;   /* cards/panels on dark */
    --mc-panel-2:       #2C3720;   /* event card */

    /* Gold + cream accents */
    --mc-gold:          #D2A656;
    --mc-gold-bright:   #E2BE7A;
    --mc-gold-deep:     #A9762F;   /* gold on light backgrounds */
    --mc-cream:         #F4F1E9;
    --mc-cream-muted:   #C3C5B2;   /* body text on dark */
    --mc-cream-faint:   #969C86;   /* labels/footnotes on dark */
    --mc-gold-a15:      rgba(210,166,86,0.15);
    --mc-gold-a25:      rgba(210,166,86,0.25);
    --mc-gold-a40:      rgba(210,166,86,0.40);

    /* Light palette (cream/sand sections) */
    --mc-offwhite:      #F7F3EA;
    --mc-sand-soft:     #EFE7D6;
    --mc-sand:          #E2CDA8;
    --mc-charcoal:      #2B2A26;
    --mc-muted:         #6E685E;
    --mc-line:          #E3D9C7;

    /* Warm secondary accents */
    --mc-clay:          #B0613C;
    --mc-clay-deep:     #9A5230;
    --mc-clay-soft:     rgba(176,97,60,0.10);
    --mc-olive:         #3F4E30;
    --mc-sage:          #7E8670;

    --mc-radius:        4px;
    --mc-radius-card:   10px;

    background: var(--mc-offwhite);
    color: var(--mc-charcoal);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   2. SECTION GROUNDS
   -------------------------------------------------------------------------- */
.mc-dark {
    background: var(--mc-forest);
    color: var(--mc-cream);
}
.mc-dark-grad {
    background:
        radial-gradient(120% 90% at 18% 12%, var(--mc-forest-2) 0%, var(--mc-forest) 55%, #20281800 100%),
        linear-gradient(160deg, var(--mc-forest-2) 0%, var(--mc-forest) 60%, #1E2515 100%);
    color: var(--mc-cream);
}
.mc-light      { background: var(--mc-offwhite); color: var(--mc-charcoal); }
.mc-sand-soft  { background: var(--mc-sand-soft); color: var(--mc-charcoal); }
.mc-white      { background: #fff; color: var(--mc-charcoal); }

/* --------------------------------------------------------------------------
   3. EYEBROW LABELS
   -------------------------------------------------------------------------- */
.mc-eyebrow {
    display: flex;
    width: fit-content;
    align-self: flex-start;
    align-items: center;
    gap: 12px;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mc-clay);          /* default: light sections */
}
.mc-eyebrow-gold  { color: var(--mc-gold); }      /* on dark grounds */

.mc-rule        { width: 100%; height: 1px; background: var(--mc-line); border: none; margin: 0; }
.mc-rule-dark   { width: 100%; height: 1px; background: var(--mc-gold-a25); border: none; margin: 0; }
.mc-rule-short  { width: 56px; height: 2px; background: var(--mc-gold); border: none; margin: 0; }
.mc-rule-clay   { width: 56px; height: 2px; background: var(--mc-clay); border: none; margin: 0; }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.mc-btn {
    display: inline-block;
    background: var(--mc-gold);
    color: #241F14;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    padding: 15px 32px;
    border-radius: var(--mc-radius);
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.mc-btn:hover { background: var(--mc-gold-bright); }

/* Outline for dark grounds */
.mc-btn-outline {
    display: inline-block;
    background: transparent;
    color: var(--mc-cream);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    padding: 14px 30px;
    border: 1px solid var(--mc-gold-a40);
    border-radius: var(--mc-radius);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.mc-btn-outline:hover { border-color: var(--mc-gold); color: var(--mc-gold-bright); }

/* Outline for light grounds */
.mc-btn-outline-olive {
    display: inline-block;
    background: transparent;
    color: var(--mc-olive);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    padding: 14px 30px;
    border: 1px solid var(--mc-olive);
    border-radius: var(--mc-radius);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.mc-btn-outline-olive:hover { background: var(--mc-clay-soft); }

/* --------------------------------------------------------------------------
   5. HERO SCENE (full-bleed supplied image: the pointed arch + gathering are
   baked into the artwork; its left third is dark olive-green for the text
   overlay). A scrim guarantees text contrast over the green area.
   -------------------------------------------------------------------------- */
.mc-hero-photo { position: absolute; inset: 0; z-index: 0; }
.mc-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;   /* keep the arch + people in frame */
    display: block;
}
.mc-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        var(--mc-forest) 0%,
        rgba(40,49,29,0.92) 26%,
        rgba(40,49,29,0.45) 50%,
        rgba(40,49,29,0.05) 72%,
        rgba(40,49,29,0) 100%);
}
@media (max-width: 1023px) {
    .mc-hero-photo img { object-position: 64% center; }
    /* Full-width text on mobile: darken the whole scene so copy stays legible. */
    .mc-hero-scrim {
        background: linear-gradient(180deg,
            rgba(40,49,29,0.90) 0%,
            rgba(40,49,29,0.74) 52%,
            rgba(40,49,29,0.62) 100%);
    }
}

/* --------------------------------------------------------------------------
   6. UPCOMING EVENT CARD (overlay)
   -------------------------------------------------------------------------- */
.mc-event-card {
    background: var(--mc-panel-2);
    border: 1px solid var(--mc-gold-a25);
    border-radius: 8px;
    padding: 22px 24px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.32);
}
.mc-event-eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: left;
    color: var(--mc-gold);
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--mc-gold-a25);
}
.mc-event-date {
    font-family: var(--font-display);
    font-size: 34px;
    line-height: 1;
    color: var(--mc-cream);
}
.mc-event-month { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mc-gold); margin-top: 4px; }
.mc-event-kicker { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mc-cream-faint); }
.mc-event-title  { font-family: var(--font-display); font-size: 19px; color: var(--mc-cream); line-height: 1.2; }
.mc-event-desc   { font-size: 13px; color: var(--mc-cream-muted); line-height: 1.6; }
.mc-event-arrow  { color: var(--mc-gold); font-size: 18px; transition: transform 0.2s ease, color 0.2s ease; }
.mc-event-card a:hover .mc-event-arrow { color: var(--mc-gold-bright); transform: translateX(3px); }

/* --------------------------------------------------------------------------
   7. MEDINA GATHERINGS
   -------------------------------------------------------------------------- */
.mc-events-section {
    padding: 92px 0 100px;
    border-top: 1px solid var(--mc-line);
}
.mc-events-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    max-width: 640px;
    margin: 0 auto 42px;
}
/* The eyebrow defaults to align-self:flex-start; recentre it in this header. */
.mc-events-header .mc-eyebrow { align-self: center; }
.mc-events-heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.2;
    color: var(--mc-olive);
}
.mc-events-lead {
    max-width: 570px;
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: var(--mc-muted);
}
.mc-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 380px));
    justify-content: center;
    gap: 20px;
}
/* A CSS `display` declaration outranks the HTML `hidden` attribute, so
   `display: grid` above silently defeated `container.hidden = true` and the
   past gatherings stayed on the page whatever the flag said. */
.mc-events-grid[hidden],
.mc-events-past-heading[hidden] {
    display: none;
}
.mc-events-card {
    display: flex;
    width: 100%;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius-card);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mc-events-card:hover {
    border-color: var(--mc-sand);
    box-shadow: 0 6px 22px rgba(43, 42, 38, 0.08);
}

/* --- Card media ---------------------------------------------------------
   A square frame with the image CONTAINED, never cropped.

   Contain, not cover: event posters carry their own text (title, date,
   speakers), so a cover-crop would cut words off.

   Square, not portrait: the artwork we actually receive is mixed. The CMS
   banners are landscape (the Markets of Medina is 1600x1207) while the
   supplied posters are portrait 4:5. A square frame letterboxes both by a
   similar small amount, where a portrait frame would leave a landscape
   banner floating in ~190px of dead ground. It also keeps every card in a
   row the same height, so titles stay on a common baseline.

   The icon fallback sits underneath, so a missing or broken image is never
   an empty box. */
.mc-events-card-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: var(--mc-forest);
    border-bottom: 1px solid var(--mc-line);
    overflow: hidden;
}
.mc-events-card-poster {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}
/* The fallback is only revealed when the frame has no usable image. It must
   stay hidden behind a loaded poster, because `contain` leaves the letterbox
   bands transparent and the icon would otherwise show through them. */
.mc-events-card-media-fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: var(--mc-gold);
    opacity: 0.55;
}
.mc-events-card-media-empty .mc-events-card-media-fallback {
    display: flex;
}

.mc-events-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 26px 28px 28px;
}
.mc-events-card-topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.mc-events-card-state,
.mc-events-card-ticket {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* --- Lifecycle states ---------------------------------------------------
   All four states are visually distinct. The state label is a pill so it
   reads as a status, not as another line of copy. */
.mc-events-card-state {
    padding: 5px 10px;
    border-radius: var(--mc-radius);
    color: var(--mc-clay);
    background: var(--mc-clay-soft);
}
.mc-events-card-state-live {
    color: #fff;
    background: var(--mc-olive);
}
/* Steady dot, not a pulsing one: the theme forbids attention-grabbing
   motion, and a static marker still separates live from upcoming. */
.mc-events-card-state-live::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--mc-gold-bright);
    vertical-align: middle;
}
.mc-events-card-state-completed {
    color: var(--mc-muted);
    background: rgba(110, 104, 94, 0.10);
}
.mc-events-card-state-cancelled {
    color: var(--mc-muted);
    background: transparent;
    border: 1px solid var(--mc-line);
}
.mc-events-card-ticket { color: var(--mc-gold-deep); }

/* Completed and cancelled recede: the poster drops back so a finished
   gathering can never be mistaken for the next one. */
.mc-events-card-completed,
.mc-events-card-cancelled {
    background: var(--mc-offwhite);
}
.mc-events-card-completed .mc-events-card-media,
.mc-events-card-cancelled .mc-events-card-media {
    filter: grayscale(0.55);
    opacity: 0.72;
}
.mc-events-card-completed .mc-events-card-title,
.mc-events-card-cancelled .mc-events-card-title {
    color: var(--mc-muted);
}
.mc-events-card-cancelled .mc-events-card-title {
    text-decoration: line-through;
    text-decoration-color: var(--mc-clay);
    text-decoration-thickness: 1px;
}

/* --- Card copy ---------------------------------------------------------
   Scan order is when, what, where, cost. The date leads because it is the
   first thing a reader decides on. */
.mc-events-card-when {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--mc-olive);
}
.mc-events-card-completed .mc-events-card-when,
.mc-events-card-cancelled .mc-events-card-when {
    color: var(--mc-muted);
}
.mc-events-card-title {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1.25;
    color: var(--mc-charcoal);
}
.mc-events-card-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--mc-muted);
}
.mc-events-card-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--mc-line);
}
.mc-events-card-meta-row {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 12px;
    align-items: baseline;
}
.mc-events-card-meta-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mc-sage);
}
.mc-events-card-meta-value {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--mc-charcoal);
}
/* Ticket status sits beside the CTA, where the reader is deciding whether
   to act, rather than competing with the state pill at the top. */
.mc-events-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    margin-top: auto;
    padding-top: 24px;
}
.mc-events-card-action {
    display: inline-block;
    padding: 11px 16px;
    background: var(--mc-gold);
    border-radius: var(--mc-radius);
    color: #241F14;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.mc-events-card-action:hover { background: var(--mc-gold-bright); }
.mc-events-card-disabled {
    color: var(--mc-muted);
    font-size: 13px;
    font-weight: 600;
}
.mc-events-empty {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 620px);
    max-width: 620px;
    padding: 32px;
    background: var(--mc-sand-soft);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius-card);
}
.mc-events-empty-title {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--mc-olive);
}
.mc-events-empty-copy {
    max-width: 500px;
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--mc-muted);
}
/* --- Compact cards + the details dialog ---------------------------------
   Redesign 2026-08-12 (Sakib): every card renders COLLAPSED by default,
   title + action only, so the panel stays short however many gatherings
   exist. Clicking the card opens the full card in a centred dialog; a page
   refresh naturally resets everything to compact because nothing persists.
   The dialog is an in-page overlay, not a window, so popup blockers (which
   only intercept window.open) cannot touch it. */
.mc-events-card-compact {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    min-height: 0;
    padding: 14px 18px;
    cursor: pointer;
}
/* The shared media frame shrinks to a thumbnail: same forest ground, same
   contained (never cropped) poster, same icon fallback, just small. */
.mc-events-card-compact .mc-events-card-media {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    aspect-ratio: auto;
    border: 1px solid var(--mc-line);
    border-bottom: 1px solid var(--mc-line);
    border-radius: var(--mc-radius);
}
.mc-events-card-compact .mc-events-card-media-fallback {
    font-size: 22px;
}
.mc-events-card-compact-info {
    display: flex;
    flex: 1 1 200px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
}
.mc-events-card-compact .mc-events-card-when {
    margin: 0;
}
.mc-events-card-compact .mc-events-card-title {
    margin: 0;
    font-size: 17px;
}
.mc-events-card-compact:focus-visible {
    outline: 2px solid var(--mc-gold-deep);
    outline-offset: 2px;
}
.mc-events-card-cta { flex-shrink: 0; }

.mc-events-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
/* Same trap as the grids above: a display declaration outranks the HTML
   hidden attribute, so the override must be explicit. */
.mc-events-modal[hidden] { display: none; }
.mc-events-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 27, 24, 0.62);
}
.mc-events-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    max-height: min(88vh, 760px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius-card);
    box-shadow: 0 24px 64px rgba(20, 27, 24, 0.35);
}
.mc-events-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 20px;
    line-height: 1;
    color: var(--mc-cream);
    background: rgba(20, 27, 24, 0.55);
    border: 1px solid rgba(247, 243, 234, 0.35);
    border-radius: var(--mc-radius);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mc-events-modal-close:hover {
    border-color: var(--mc-gold);
    background: rgba(20, 27, 24, 0.78);
}
/* The dialog already draws the frame; the card inside sheds its own. */
.mc-events-modal-content .mc-events-card {
    border: 0;
    border-radius: 0;
}
/* Inside the dialog the artwork keeps its own ratio. The square card frame
   exists to hold grid rows level, and a dialog has no row to level: forcing
   1/1 here just letterboxes landscape banners between deep forest bands. The
   icon fallback keeps the square so an imageless event is not a sliver. */
.mc-events-modal-content .mc-events-card-media { aspect-ratio: auto; }
.mc-events-modal-content .mc-events-card-poster {
    height: auto;
    max-height: 46vh;
}
.mc-events-modal-content .mc-events-card-media-empty { aspect-ratio: 1 / 1; }
body.mc-modal-open { overflow: hidden; }

/* --- The panel ----------------------------------------------------------
   One bounded container holds the filter and every card, so the gatherings
   read as a single object on the page rather than cards floating loose on
   the section ground. */
.mc-events-panel {
    padding: 22px 22px 26px;
    /* Warm sand ground, a shade off both the section behind it and the white
       cards inside it, so the box reads as a container at a glance without
       needing a heavy border. */
    background: var(--mc-sand-soft);
    /* A shade deeper than --mc-line: the panel sits on a warm ground, and the
       default hairline was too close in tone to read as an edge. */
    border: 1px solid var(--mc-sand);
    border-radius: var(--mc-radius-card);
}

/* --- The filter ---------------------------------------------------------
   Upcoming is the default view. Previous gatherings exist ONLY behind this
   filter: they are never stacked below the upcoming ones, which is what made
   the section feel cluttered. The Previous tab hides itself entirely when
   there is no history, rather than offering an empty dead end. */
.mc-events-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--mc-line);
}
.mc-events-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: transparent;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mc-muted);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.mc-events-filter:hover {
    color: var(--mc-olive);
    border-color: var(--mc-sand);
}
.mc-events-filter:focus-visible {
    outline: 2px solid var(--mc-gold-deep);
    outline-offset: 3px;
}
/* Olive rather than gold: this is a control, and gold here would compete
   with the gold ticket buttons inside the cards below it. */
.mc-events-filter-active,
.mc-events-filter-active:hover {
    background: var(--mc-olive);
    border-color: var(--mc-olive);
    color: var(--mc-cream);
}
/* White, not sand: the panel ground IS sand-soft, so the old tint made the
   count on an unselected tab invisible against it. */
.mc-events-filter-count {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--mc-muted);
    padding: 2px 7px;
    background: #fff;
    border: 1px solid var(--mc-line);
    border-radius: 999px;
}
.mc-events-filter-active .mc-events-filter-count {
    color: var(--mc-cream);
    background: rgba(244, 241, 233, 0.18);
    border-color: rgba(244, 241, 233, 0.28);
}
.mc-events-filter[hidden] { display: none; }

@media (max-width: 639px) {
    .mc-events-section { padding: 68px 0 76px; }
    .mc-events-panel { padding: 16px 14px 20px; }
    .mc-events-card-body { padding: 22px 24px 24px; }
}

/* --------------------------------------------------------------------------
   8. FEATURE BAND (CONNECT / GROW / CONTRIBUTE)
   -------------------------------------------------------------------------- */
.mc-feature-icon { width: 52px; height: 52px; color: var(--mc-olive); }
.mc-feature-icon .accent { color: var(--mc-clay); }
.mc-feature-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mc-clay);
}
.mc-feature-desc { font-size: 14px; line-height: 1.7; color: var(--mc-muted); max-width: 280px; }
.mc-feature-divider { width: 1px; background: var(--mc-line); align-self: stretch; }

/* --------------------------------------------------------------------------
   8. VALUE BLOCKS (light + dark variants)
   -------------------------------------------------------------------------- */
.mc-value { display: flex; flex-direction: column; gap: 6px; padding: 24px 0; }
.mc-value-name   { font-family: var(--font-display); font-size: 21px; font-weight: 400; color: var(--mc-olive); line-height: 1.2; }
.mc-value-arabic { font-size: 13px; color: var(--mc-sage); letter-spacing: 0.04em; }
.mc-value-desc   { font-size: 15px; color: var(--mc-muted); line-height: 1.7; max-width: 600px; }
/* dark ground overrides */
.mc-dark .mc-value-name,
.mc-dark-grad .mc-value-name   { color: var(--mc-gold-bright); }
.mc-dark .mc-value-arabic,
.mc-dark-grad .mc-value-arabic { color: var(--mc-cream-faint); }
.mc-dark .mc-value-desc,
.mc-dark-grad .mc-value-desc   { color: var(--mc-cream-muted); }

/* --------------------------------------------------------------------------
   9. BULLETS + LISTS
   -------------------------------------------------------------------------- */
.mc-bullet { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mc-clay); flex-shrink: 0; margin-top: 8px; }
.mc-dark .mc-bullet, .mc-dark-grad .mc-bullet { background: var(--mc-gold); }

/* Small diamond marker (rub-style) for dark list rows */
.mc-diamond { display:inline-block; width:7px; height:7px; transform: rotate(45deg); background: var(--mc-gold); flex-shrink:0; margin-top: 7px; }

/* --------------------------------------------------------------------------
   10. CARDS
   -------------------------------------------------------------------------- */
.mc-card-soft { background: #fff; border: 1px solid var(--mc-line); border-radius: var(--mc-radius-card); padding: 32px; }
.mc-card-sand { background: var(--mc-sand-soft); border: 1px solid var(--mc-line); border-radius: var(--mc-radius-card); padding: 32px; }
.mc-card-dark {
    background: var(--mc-panel);
    border: 1px solid var(--mc-gold-a25);
    border-radius: var(--mc-radius-card);
    padding: 32px;
}

/* --------------------------------------------------------------------------
   11. FORM CONTROLS (dark ground)
   -------------------------------------------------------------------------- */
.mc-label { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mc-cream-faint); display: block; }
.mc-input {
    width: 100%;
    padding: 13px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--mc-gold-a25);
    border-radius: var(--mc-radius);
    font-size: 14px;
    font-family: var(--font-sans);
    color: var(--mc-cream);
    outline: none;
    transition: border-color 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
}
.mc-input::placeholder { color: var(--mc-cream-faint); }
.mc-input:focus { border-color: var(--mc-gold); }
.mc-input option { color: #241F14; }   /* dropdown list readability */

/* --------------------------------------------------------------------------
   12. LINKS + WATERMARK
   -------------------------------------------------------------------------- */
.mc-link { color: var(--mc-olive); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; transition: color 0.2s ease; }
.mc-link:hover { color: var(--mc-clay); }
.mc-link-gold { color: var(--mc-gold); text-decoration: none; font-weight: 600; transition: color 0.2s ease; }
.mc-link-gold:hover { color: var(--mc-gold-bright); }

.mc-watermark { position: absolute; pointer-events: none; user-select: none; opacity: 0.06; color: var(--mc-gold); }

/* --------------------------------------------------------------------------
   13. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .mc-btn, .mc-btn-outline, .mc-btn-outline-olive, .mc-input, .mc-link, .mc-link-gold,
    .mc-event-arrow { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Section 3: About - "What is Medina Collective?"
   Two-tier editorial layout on a clean white ground:
     1. mc-about-intro  eyebrow (logo mark) + heading / lead pair
     2. mc-about-body   pointed-arch brand visual | numbered pillars (01-03)
   ========================================================================== */
.mc-about-section {
    background: #fff;
    position: relative;
    overflow: hidden;
}

.mc-about-upper {
    padding: clamp(64px, 8vw, 104px) 0;
}

/* --------------------------------------------------------------------------
   S3: INTRO - eyebrow on top, then heading (left) + lead (right)
   -------------------------------------------------------------------------- */
.mc-about-intro {
    margin-bottom: clamp(44px, 5.5vw, 72px);
}

/* Eyebrow carries the Medina logo mark in place of the default hairline */
.mc-about-eyebrow {
    margin-bottom: 26px;
}
.mc-about-eyebrow-mark {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.mc-about-intro-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 72px;
    align-items: start;
}

@media (max-width: 1023px) {
    .mc-about-intro-cols {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* --------------------------------------------------------------------------
   S3: INTRO TYPOGRAPHY
   -------------------------------------------------------------------------- */
.mc-about-heading {
    font-family: var(--font-display);
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 400;  /* Marcellus is always 400 */
    line-height: 1.12;
    color: var(--mc-charcoal);
    max-width: 12ch;
}

.mc-about-lead {
    font-size: 16px;
    line-height: 1.85;
    color: var(--mc-muted);
    max-width: 32rem;
}

@media (max-width: 1023px) {
    .mc-about-heading { max-width: 20ch; }
}

/* --------------------------------------------------------------------------
   S3: BODY - arch visual (left) + numbered pillars (right)
   The two cells are vertically centred against each other so neither hangs.
   -------------------------------------------------------------------------- */
.mc-about-body {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 0 clamp(48px, 6vw, 88px);
    align-items: center;
}

@media (max-width: 1023px) {
    .mc-about-body {
        grid-template-columns: 1fr;
        gap: 52px;
        justify-items: center;
    }
}

/* --------------------------------------------------------------------------
   S3: POINTED ARCH BRAND VISUAL
   Clipped to an Islamic pointed-arch (mihrab) silhouette via an inline SVG
   clipPath; a gold stroke of the same path sits on top as the frame. A
   forest fill + geometric watermark + centred CIEA arch mark read as an
   intentional brand plate.
   -------------------------------------------------------------------------- */
.mc-about-visual {
    display: flex;
    justify-content: center;
    width: 100%;
}

.mc-arch-wrapper {
    position: relative;
    width: 300px;
    height: 386px;   /* keeps the 280x360 clip viewBox aspect (0.778) */
    flex-shrink: 0;
}

/* Decorative dotted-arc flourishes (symmetric mirror pair) behind the arch */
.mc-arch-flourish {
    position: absolute;
    inset: -26px -30px;
    pointer-events: none;
    z-index: 0;
}

/* The clipped fill/image container */
.mc-arch-clip {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: visible;
}

.mc-arch-clip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}

/* Gold arch frame overlay (same path, stroked) */
.mc-arch-frame {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}

@media (max-width: 1023px) {
    .mc-arch-wrapper {
        width: 264px;
        height: 340px;
    }
}

/* --------------------------------------------------------------------------
   S3: NUMBERED PILLARS (01-03)
   -------------------------------------------------------------------------- */
.mc-about-pillars {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mc-about-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 0;
    position: relative;
}

/* Thin vertical rule between numeral and body text */
.mc-about-row-divider {
    width: 1px;
    align-self: stretch;
    background: var(--mc-line);
    flex-shrink: 0;
}

.mc-about-numeral {
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 58px);
    font-weight: 400;
    line-height: 1;
    color: var(--mc-clay);
    flex-shrink: 0;
    width: 52px;
    text-align: right;
}

.mc-about-row-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mc-about-row-title {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--mc-charcoal);
}

.mc-about-row-desc {
    font-size: 14px;
    line-height: 1.75;
    color: var(--mc-muted);
    max-width: 30rem;
}

/* Circular outline icon (floated right) */
.mc-about-row-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--mc-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mc-sage);
    background: transparent;
}

.mc-about-row-icon svg {
    width: 26px;
    height: 26px;
}

@media (max-width: 767px) {
    .mc-about-row-icon {
        display: none;  /* declutter on small screens */
    }
    .mc-about-numeral {
        width: 40px;
        font-size: 36px;
    }
}

/* --------------------------------------------------------------------------
   S3: DARK FOREST BAND (full-bleed, at the bottom of the section)
   The arch's bottom third visually overlaps into this band via the arch
   wrapper positioning (no actual z-index trick needed; just layout flow).
   On desktop the arch sits in the left column which is a sibling of the band.
   We use a negative top margin on the band so it pulls up under the arch.
   -------------------------------------------------------------------------- */
.mc-about-band {
    background: var(--mc-forest);
    position: relative;
    overflow: hidden;
    margin-top: 0;          /* desktop: the arch extends visually but the band
                               starts flush; the arch wrapper has extra bottom
                               padding that creates the apparent overlap look */
}

/* On desktop, pull the band up so the arch bottom appears over it.
   Dormant: the band block is no longer rendered. The arch + pillars now own
   their spacing via .mc-about-body, so this no longer touches the intro
   padding; restoring the band would need the arch pull-up re-added here. */
@media (min-width: 1024px) {
    .mc-about-band {
        margin-top: -110px; /* pull band up behind arch lower portion */
    }
}

/* Band inner layout: watermark left, star + quote right.
   On desktop the quote row is pushed into the right-column area so it
   does not compete visually with the arch that sits over the left half. */
.mc-about-band-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 52px 0 56px;
}

@media (min-width: 1024px) {
    .mc-about-band-inner {
        padding-top: 116px;  /* absorbs the negative margin pullup (110px) + visual buffer */
        padding-bottom: 52px;
    }
    /* Push quote content into the right half of the layout
       (roughly matching the ~46% left column width) */
    .mc-about-band-quote-row {
        margin-left: calc(46% + 36px);
    }
}

@media (max-width: 1023px) {
    .mc-about-band {
        margin-top: 0;
    }
}

/* Geometric watermark in band */
.mc-about-band-watermark {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
    opacity: 0.055;
    color: var(--mc-gold);
    width: 240px;
    height: 240px;
}

/* Star + divider + quote row */
.mc-about-band-quote-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex: 1;
}

.mc-about-band-star {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-top: 3px;
}

.mc-about-band-vert {
    width: 1px;
    height: 72px;
    background: rgba(210,166,86,0.35);
    align-self: center;
    flex-shrink: 0;
}

.mc-about-band-quote {
    flex: 1;
}

.mc-about-band-quote p {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--mc-cream);
    max-width: 540px;
}

/* Large decorative quotation mark on the far right */
.mc-about-band-bigquote {
    font-family: Georgia, var(--font-display), serif;
    font-size: 120px;
    line-height: 0.7;
    color: rgba(210,166,86,0.13);
    user-select: none;
    pointer-events: none;
    align-self: flex-end;
    flex-shrink: 0;
    padding-bottom: 8px;
    letter-spacing: -0.04em;
}

@media (max-width: 767px) {
    .mc-about-band-bigquote {
        display: none;
    }
    .mc-about-band-inner {
        padding: 44px 0 44px;
    }
}

/* ===== Section 4: Who is it for (radial) ===== */

/* --------------------------------------------------------------------------
   S4: SECTION SHELL
   Cream ground, generous vertical padding.
   -------------------------------------------------------------------------- */
.mc-who-section {
    background: var(--mc-offwhite);
    padding: 88px 0 80px;
}

/* --------------------------------------------------------------------------
   S4: CENTRED HEADER
   Left-aligned eyebrow, Marcellus heading, lead copy.
   -------------------------------------------------------------------------- */
.mc-who-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    margin-bottom: 64px;
}

/* Eyebrow remains left-aligned while the heading and lead stay centred. */
.mc-who-eyebrow-wrap {
    align-self: flex-start;
    text-align: left;
}

.mc-who-eyebrow-text {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mc-clay);
    display: block;
}

.mc-who-heading {
    font-family: var(--font-display);
    font-size: clamp(30px, 4.5vw, 52px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--mc-charcoal);
    margin: 0;
}

.mc-who-lead {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--mc-muted);
    max-width: 32rem;
    margin: 0;
}

/* --------------------------------------------------------------------------
   S4: RADIAL BODY
   Three-zone row on desktop: left items col / centre medallion / right items col.
   On mobile: single centred column.
   -------------------------------------------------------------------------- */
.mc-who-body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0 40px;
    margin-bottom: 56px;
}

/* --------------------------------------------------------------------------
   S4: ITEM COLUMNS
   Three items stacked, each is an icon-circle + text row.
   Left column items: icon on the LEFT, text to its right.
   Right column items: text on the LEFT, icon on the right (mirror).
   -------------------------------------------------------------------------- */
.mc-who-col {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* Each audience item row */
.mc-who-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Mirrored layout for right column: icon after text */
.mc-who-item-right {
    flex-direction: row-reverse;
}

/* Circular outline icon container */
.mc-who-icon-wrap {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--mc-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mc-sage);
    background: transparent;
    transition: border-color 0.2s ease;
}

.mc-who-icon-wrap:hover {
    border-color: var(--mc-gold);
}

.mc-who-icon-wrap svg {
    width: 22px;
    height: 22px;
}

.mc-who-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Right column text stays left-aligned per spec */
.mc-who-item-body-right {
    text-align: left;
}

.mc-who-item-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--mc-charcoal);
}

.mc-who-item-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--mc-muted);
    margin: 0;
}

/* --------------------------------------------------------------------------
   S4: CENTRE MEDALLION ZONE
   Position-relative container. The orbit SVG is absolutely positioned behind
   the medallion disc. The disc is a dark forest circle centred within.
   -------------------------------------------------------------------------- */
.mc-who-centre {
    position: relative;
    width: 480px;
    height: 480px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Orbit rings SVG: fills the full zone, sits behind the medallion */
.mc-who-orbit-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* The dark medallion disc */
.mc-who-medallion {
    position: relative;
    z-index: 1;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: var(--mc-forest);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    box-shadow: 0 8px 40px rgba(20,27,15,0.18);
}

.mc-who-medallion-symbol {
    width: 44px;
    height: 44px;
    display: block;
    flex-shrink: 0;
}

.mc-who-medallion-wordmark {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.12em;
    color: var(--mc-cream);
    text-align: center;
    text-transform: uppercase;
}

.mc-who-medallion-divider {
    width: 36px;
    height: 1px;
    background: var(--mc-gold);
    flex-shrink: 0;
}

.mc-who-medallion-tagline {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mc-gold);
    text-align: center;
}

/* --------------------------------------------------------------------------
   S4: BOTTOM CALLOUT BAND
   Full-width rounded rectangle with border and faint geometric end fades.
   Inside: community icon circle / vertical divider / statement text.
   -------------------------------------------------------------------------- */
.mc-who-band {
    position: relative;
    border: 1px solid var(--mc-line);
    border-radius: 6px;
    overflow: hidden;
    background: transparent;
}

/* Geometry fades: positioned SVGs at each end */
.mc-who-band-fade {
    position: absolute;
    top: 0;
    width: 160px;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.mc-who-band-fade-left  { left: 0; }
.mc-who-band-fade-right { right: 0; }

.mc-who-band-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px 32px;
    justify-content: center;
}

/* Community icon: clay-coloured circle with two-figure SVG inside */
.mc-who-band-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--mc-clay);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.mc-who-band-icon svg {
    width: 28px;
    height: 28px;
}

/* Thin vertical divider between icon and text */
.mc-who-band-divider {
    width: 1px;
    height: 40px;
    background: var(--mc-line);
    flex-shrink: 0;
}

.mc-who-band-text {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--mc-charcoal);
    margin: 0;
    max-width: 520px;
}

/* --------------------------------------------------------------------------
   S4: RESPONSIVE
   Below lg: orbit SVG hidden, medallion shrinks, all items stack centred.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .mc-who-body {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Stack order: left col items, then medallion, then right col items */
    .mc-who-col-left  { order: 1; }
    .mc-who-centre    { order: 2; }
    .mc-who-col-right { order: 3; }

    /* Orbit rings: desktop-only, hidden on mobile */
    .mc-who-orbit-svg { display: none; }

    /* Medallion: shrink and centre */
    .mc-who-centre {
        width: 100%;
        height: auto;
        padding: 40px 0;
        justify-content: center;
    }

    .mc-who-medallion {
        width: 200px;
        height: 200px;
        gap: 6px;
        padding: 18px;
    }

    .mc-who-medallion-symbol {
        width: 34px;
        height: 34px;
    }

    .mc-who-medallion-wordmark {
        font-size: 17px;
    }

    /* Items: single column, icon always on the left */
    .mc-who-col {
        gap: 24px;
    }

    /* Reset the desktop row-reverse so icon stays on the left at mobile.
       Use order to put the icon (which is after the body in markup for right items)
       back before the body text. */
    .mc-who-item-right {
        flex-direction: row;
    }

    .mc-who-item-right .mc-who-icon-wrap {
        order: -1;
    }

    .mc-who-header {
        margin-bottom: 48px;
    }

    .mc-who-body {
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .mc-who-section {
        padding: 64px 0 60px;
    }

    .mc-who-band-inner {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 24px 20px;
    }

    .mc-who-band-divider {
        width: 40px;
        height: 1px;
    }

    .mc-who-band-text {
        font-size: 15px;
    }

    .mc-who-item-title {
        font-size: 17px;
    }
}

/* ===== Section 5: What happens (radial) ===== */

/* --------------------------------------------------------------------------
   S5: SECTION SHELL
   Offwhite (light) ground, generous vertical padding.
   -------------------------------------------------------------------------- */
.mc-happens-section {
    background: #fff;
    padding: 88px 0 80px;
}

/* --------------------------------------------------------------------------
   S5: LEFT-ALIGNED HEADER
   Eyebrow label, Marcellus heading, three lead paras.
   Max-width ~38rem, pinned to upper-left. NOT centred.
   -------------------------------------------------------------------------- */
.mc-happens-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 38rem;
    margin-bottom: 64px;
}

/* Eyebrow label */
.mc-happens-eyebrow-wrap {
    display: block;
    width: fit-content;
    text-align: left;
}

.mc-happens-eyebrow-text {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mc-clay);
    white-space: nowrap;
}

.mc-happens-heading {
    font-family: var(--font-display);
    font-size: clamp(30px, 4.5vw, 52px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--mc-charcoal);
    margin: 0;
}

.mc-happens-leads {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mc-happens-lead {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--mc-muted);
    margin: 0;
}

/* --------------------------------------------------------------------------
   S5: RADIAL BODY
   Three-zone grid: left items col / centre image zone / right items col.
   Mirrors .mc-who-body layout.
   -------------------------------------------------------------------------- */
.mc-happens-body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0 40px;
}

/* --------------------------------------------------------------------------
   S5: ITEM COLUMNS
   Two items stacked. Icon always on the LEFT in both columns (no row-reverse).
   -------------------------------------------------------------------------- */
.mc-happens-col {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.mc-happens-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Circular outline icon container: same spec as .mc-who-icon-wrap */
.mc-happens-icon-wrap {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--mc-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mc-sage);
    background: transparent;
    transition: border-color 0.2s ease;
}

.mc-happens-icon-wrap:hover {
    border-color: var(--mc-gold);
}

.mc-happens-icon-wrap svg {
    width: 22px;
    height: 22px;
}

.mc-happens-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mc-happens-item-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--mc-charcoal);
}

.mc-happens-item-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--mc-muted);
    margin: 0;
}

/* --------------------------------------------------------------------------
   S5: CENTRE IMAGE ZONE
   Position-relative container holding the orbit SVG (behind) and the
   transparent-BG table image (above). No frame, no border, no shadow.
   -------------------------------------------------------------------------- */
.mc-happens-centre {
    position: relative;
    /* Fluid square: shrinks on mid-size desktops so the flanking activity
       columns never collapse into thin ribbons. Same expression for width
       and height keeps it perfectly square without aspect-ratio. */
    width: clamp(320px, 33vw, 480px);
    height: clamp(320px, 33vw, 480px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Orbit rings SVG: fills the full zone, sits behind the image */
.mc-happens-orbit-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Table image wrapper: above the orbit SVG */
.mc-happens-table-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Scales with the fluid centre (66% of it, matching the old 320/480) */
    width: 66%;
    height: 66%;
    flex-shrink: 0;
}

.mc-happens-table-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* --------------------------------------------------------------------------
   S5: RESPONSIVE
   Below lg: orbit SVG hidden, image shrinks, all items stack single-column.
   Header stays left-aligned. Icon always on the left.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .mc-happens-body {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Stack order: header (already above), left col, centre, right col */
    .mc-happens-col-left  { order: 1; }
    .mc-happens-centre    { order: 2; }
    .mc-happens-col-right { order: 3; }

    /* Orbit rings: desktop only */
    .mc-happens-orbit-svg { display: none; }

    /* Centre zone: shrink height, keep centred */
    .mc-happens-centre {
        width: 100%;
        height: auto;
        padding: 40px 0;
        justify-content: center;
    }

    .mc-happens-table-wrap {
        width: 220px;
        height: 220px;
    }

    .mc-happens-col {
        gap: 24px;
    }

    .mc-happens-header {
        margin-bottom: 48px;
    }
}

@media (max-width: 767px) {
    .mc-happens-section {
        padding: 64px 0 60px;
    }

    .mc-happens-item-title {
        font-size: 17px;
    }
}

/* --------------------------------------------------------------------------
   S5: SPACING BEFORE THE PANEL
   Radial body sits at full content width now; the panel follows beneath it.
   -------------------------------------------------------------------------- */
.mc-happens-body {
    margin-bottom: 72px;
}

/* --------------------------------------------------------------------------
   S5: "STARTING SIMPLY IN PERTH" PANEL
   Full-width horizontal panel under the radial. Sand wash + faint geometric
   watermark, rounded card. Header row (star + heading + clay rule), a
   three-up flex row of icon points split by vertical hairlines, then the
   closing tagline. Stacks to a single column on small screens.
   -------------------------------------------------------------------------- */
.mc-happens-rail {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-radius-card);
    padding: 44px 48px;

    /* Subtle warmer wash behind the panel */
    background-color: rgba(239, 231, 214, 0.45);

    /* Faint repeating geometric pattern watermark */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect x='13' y='13' width='22' height='22' fill='none' stroke='%23B0613C' stroke-width='0.5' stroke-opacity='0.07'/%3E%3Crect x='13' y='13' width='22' height='22' transform='rotate(45 24 24)' fill='none' stroke='%23B0613C' stroke-width='0.5' stroke-opacity='0.05'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 48px 48px;
}

/* Header row: star beside the heading + clay rule stack */
.mc-happens-rail-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 36px;
}

/* Eight-point star icon */
.mc-happens-rail-star {
    width: 30px;
    height: 30px;
    display: block;
    flex-shrink: 0;
}

.mc-happens-rail-head-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Panel heading: Marcellus, single line */
.mc-happens-rail-heading {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--mc-charcoal);
    margin: 0;
}

/* Short clay rule below heading */
.mc-happens-rail-rule {
    width: 40px;
    height: 2px;
    background: var(--mc-clay);
    opacity: 0.75;
    border-radius: 1px;
}

/* Three-up items row: equal flex columns, vertical hairlines between */
.mc-happens-rail-items {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 32px;
    margin-bottom: 36px;
}

/* Each item: circular icon + text, evenly sized */
.mc-happens-rail-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 0;
}

/* Vertical hairline divider between items (matches --mc-line) */
.mc-happens-rail-hairline {
    flex: 0 0 1px;
    align-self: stretch;
    background: var(--mc-line);
}

/* Circular outline icon: mirrors .mc-happens-icon-wrap */
.mc-happens-rail-icon-wrap {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--mc-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mc-sage);
    background: transparent;
    transition: border-color 0.2s ease;
}

.mc-happens-rail-icon-wrap:hover {
    border-color: var(--mc-gold);
}

.mc-happens-rail-icon-wrap svg {
    width: 20px;
    height: 20px;
}

/* Text beside each icon */
.mc-happens-rail-item-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--mc-muted);
    margin: 0;
    flex: 1;
}

/* Closing tagline block */
.mc-happens-rail-foot {
    position: relative;
}

/* Full-width hairline above tagline */
.mc-happens-rail-tagline-wrap {
    height: 1px;
    background: var(--mc-line);
    margin-bottom: 22px;
}

/* Three-line clay tagline */
.mc-happens-rail-tagline {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.85;
    color: var(--mc-clay);
    margin: 0;
}

/* --------------------------------------------------------------------------
   S5 PANEL: RESPONSIVE
   Tablet (<=900px): the three points stack into one column with horizontal
   hairlines. Mobile (<=767px): tighter padding + spacing.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .mc-happens-rail-items {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .mc-happens-rail-item {
        padding: 18px 0;
    }

    .mc-happens-rail-item:first-child {
        padding-top: 0;
    }

    /* Hairlines flip to horizontal dividers between stacked items */
    .mc-happens-rail-hairline {
        flex: 0 0 1px;
        width: 100%;
        height: 1px;
        align-self: auto;
    }
}

@media (max-width: 767px) {
    .mc-happens-body {
        margin-bottom: 48px;
    }

    .mc-happens-rail {
        padding: 32px 24px;
    }

    .mc-happens-rail-head {
        gap: 14px;
        margin-bottom: 28px;
    }

    .mc-happens-rail-items {
        margin-bottom: 28px;
    }
}

/* ===== Section 6: Mission, vision & values (architectural columns) ===== */

/* --------------------------------------------------------------------------
   S6: SECTION WRAPPER
   -------------------------------------------------------------------------- */
body.medina .mc-mvv-section {
    padding: 88px 0 72px;
}

/* --------------------------------------------------------------------------
   S6: (A) HEADER ROW
   Three-column grid: heading left / ornament divider / intro paragraph right.
   -------------------------------------------------------------------------- */
body.medina .mc-mvv-header {
    display: grid;
    grid-template-columns: 1.1fr auto 0.9fr;
    gap: 0 48px;
    align-items: center;
    margin-bottom: 60px;
}

body.medina .mc-mvv-header-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.medina .mc-mvv-heading {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(26px, 3.2vw, 42px);
    line-height: 1.18;
    color: var(--mc-charcoal);
    margin: 0;
}

/* Central 1px vertical divider with a floating 8-point star */
body.medina .mc-mvv-header-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1px;
    align-self: stretch;
}

body.medina .mc-mvv-header-line {
    position: absolute;
    inset: 0;
    width: 1px;
    background: var(--mc-line);
}

body.medina .mc-mvv-header-star {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--mc-offwhite);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

body.medina .mc-mvv-header-star svg {
    width: 100%;
    height: 100%;
}

body.medina .mc-mvv-intro {
    font-family: var(--font-sans);
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--mc-muted);
    margin: 0;
}

/* --------------------------------------------------------------------------
   S6: (B) MISSION + VISION CARDS
   -------------------------------------------------------------------------- */
body.medina .mc-mvv-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 60px;
}

body.medina .mc-mvv-card {
    position: relative;
}

/* Stretched SVG frame: absolutely fills the card behind the inner content */
body.medina .mc-mvv-card-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

body.medina .mc-mvv-card-inner {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
    padding: 30px 32px;
    min-height: 180px;
}

/* 88px circular disc: forest bg + gold icon colour */
body.medina .mc-mvv-disc {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--mc-forest);
    color: var(--mc-gold);
    display: flex;
    align-items: center;
    justify-content: center;
}

body.medina .mc-mvv-disc svg {
    width: 40px;
    height: 40px;
}

body.medina .mc-mvv-card-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

body.medina .mc-mvv-card-label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mc-clay-deep);
}

body.medina .mc-mvv-card-copy {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.75;
    color: var(--mc-muted);
    margin: 0;
}

/* --------------------------------------------------------------------------
   S6: (C) FIVE PILLARS
   -------------------------------------------------------------------------- */
body.medina .mc-mvv-pillars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 28px;
    align-items: start;
}

body.medina .mc-pillar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;   /* room for the icon floating above the capital */
    min-height: 380px;
}

/* Floating icon ring: sits above the column capital */
body.medina .mc-pillar-iconwrap {
    position: relative;
    z-index: 2;
    width: 72px;
    height: 72px;
    margin-bottom: -10px;  /* overlap onto the capital top */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.medina .mc-pillar-iconring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

body.medina .mc-pillar-icon {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.medina .mc-pillar-icon svg {
    width: 100%;
    height: 100%;
}

/* Accent colours: clay or olive for icon stroke and pillar name */
body.medina .mc-pillar-icon--clay  { color: var(--mc-clay); }
body.medina .mc-pillar-icon--olive { color: var(--mc-olive); }

/* Classical column art: stretches down behind the body text */
body.medina .mc-pillar-art {
    position: absolute;
    z-index: 0;
    top: 100px;   /* start below the floating icon */
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 300px;
    color: var(--mc-gold);
    opacity: 0.55;
    pointer-events: none;
}

/* Pillar body: text stacked over the column art */
body.medina .mc-pillar-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 8px 0;
    width: 100%;
}

body.medina .mc-pillar-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(18px, 1.6vw, 24px);
    line-height: 1.2;
    color: var(--mc-charcoal);
    margin-bottom: 6px;
}

body.medina .mc-pillar-name--clay  { color: var(--mc-clay-deep); }
body.medina .mc-pillar-name--olive { color: var(--mc-olive); }

body.medina .mc-pillar-arabic {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-style: italic;
    font-weight: 600;
    color: var(--mc-sage);
    line-height: 1.4;
    margin-bottom: 12px;
}

/* 28px gold accent bar below the Arabic subtitle */
body.medina .mc-pillar-rule {
    width: 28px;
    height: 2px;
    background: var(--mc-gold);
    margin: 0 auto 14px;
    flex-shrink: 0;
}

body.medina .mc-pillar-desc {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.65;
    color: var(--mc-muted);
    max-width: 20ch;
    margin: 0;
}

/* --------------------------------------------------------------------------
   S6: (D) DARK TAGLINE BAND
   -------------------------------------------------------------------------- */
body.medina .mc-mvv-band {
    position: relative;
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

/* Geometric watermark: data-URI hard-codes %23D2A656 (gold #D2A656) because
   CSS custom properties cannot resolve inside data URIs. This is the one
   accepted exception to the token rule. */
body.medina .mc-mvv-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Crect x='20' y='20' width='40' height='40' fill='none' stroke='%23D2A656' stroke-width='0.6' opacity='0.18'/%3E%3Crect x='20' y='20' width='40' height='40' fill='none' stroke='%23D2A656' stroke-width='0.6' opacity='0.18' transform='rotate(45 40 40)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    pointer-events: none;
    opacity: 0.4;
}

/* Ornament row: hairline / star / hairline */
body.medina .mc-mvv-band-rule-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 28px;
}

body.medina .mc-mvv-band-hairline {
    display: block;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--mc-gold-a25), transparent);
    flex: 0 0 120px;
}

body.medina .mc-mvv-band-hairline--left {
    background: linear-gradient(to right, transparent, var(--mc-gold-a40));
}

body.medina .mc-mvv-band-hairline--right {
    background: linear-gradient(to left, transparent, var(--mc-gold-a40));
}

body.medina .mc-mvv-band-star {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

body.medina .mc-mvv-band-text {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mc-gold);
    margin: 0;
    position: relative;
}

/* --------------------------------------------------------------------------
   S6: RESPONSIVE - tablet (max-width: 1023px)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    body.medina .mc-mvv-header {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-bottom: 44px;
    }

    body.medina .mc-mvv-header-divider {
        display: none;
    }

    body.medina .mc-mvv-heading {
        font-size: clamp(24px, 5vw, 36px);
    }

    body.medina .mc-mvv-pillars {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 28px;
    }

    body.medina .mc-pillar {
        min-height: 340px;
    }
}

/* --------------------------------------------------------------------------
   S6: RESPONSIVE - phablet (max-width: 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body.medina .mc-mvv-section {
        padding: 64px 0 52px;
    }

    body.medina .mc-mvv-cards {
        grid-template-columns: 1fr;
    }

    body.medina .mc-mvv-card-inner {
        min-height: 0;
    }

    body.medina .mc-mvv-pillars {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Degrade each pillar to a flat hairline card on mobile */
    body.medina .mc-pillar {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        text-align: left;
        border: 1px solid var(--mc-line);
        border-radius: var(--mc-radius-card);
        padding: 24px;
        padding-top: 24px;
        min-height: 0;
    }

    body.medina .mc-pillar-art {
        display: none;
    }

    body.medina .mc-pillar-iconwrap {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    body.medina .mc-pillar-body {
        padding: 0;
        text-align: left;
        align-items: flex-start;
    }

    body.medina .mc-pillar-desc {
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   S6: RESPONSIVE - mobile (max-width: 639px)
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
    body.medina .mc-mvv-disc {
        width: 72px;
        height: 72px;
    }

    body.medina .mc-mvv-disc svg {
        width: 34px;
        height: 34px;
    }

    body.medina .mc-mvv-band {
        padding: 52px 0;
    }

    body.medina .mc-mvv-band-text {
        letter-spacing: 0.16em;
    }

    body.medina .mc-mvv-band-hairline {
        flex-basis: 60px;
    }
}

/* ==========================================================================
   Section 7 (merged): "Under the CIEA banner" relationship panel
   A dark forest card on cream. Left column carries the OUR HOME copy (with the
   former "Growing with the community" message folded in) + a gold CTA. Right
   column shows CIEA (parent) linked by a gold diamond connector to the Medina
   Collective community card. Replaces the old sand "Growing" + light "banner"
   pair with one self-contained panel.
   ========================================================================== */
.mc-banner-section {
    background: var(--mc-offwhite);
    padding: 84px 0;
}

.mc-banner-panel {
    position: relative;
    overflow: hidden;
    background: var(--mc-forest);
    border-radius: 18px;
    padding: 60px 56px;
    box-shadow: 0 30px 70px rgba(20, 27, 15, 0.18);
}

.mc-banner-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 0 56px;
    align-items: center;
}

/* ----- LEFT: copy + CTA ----- */
.mc-banner-left {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.mc-banner-heading {
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 400;          /* Marcellus is always 400 */
    line-height: 1.12;
    color: var(--mc-cream);
    max-width: 12ch;
    margin: 0;
}

.mc-banner-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mc-banner-copy p {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--mc-cream-muted);
    max-width: 34rem;
    margin: 0;
}

.mc-banner-cta {
    align-self: flex-start;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
}

/* ----- RIGHT: CIEA -> Medina relationship cluster ----- */
.mc-banner-rel {
    display: flex;
    align-items: center;
    gap: 0;
}

/* CIEA parent block */
.mc-banner-ciea {
    flex-shrink: 0;
    width: 196px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.mc-banner-ciea-arch {
    height: 84px;
    width: auto;
    display: block;
}

.mc-banner-ciea-word {
    width: 124px;
    height: auto;
    display: block;
}

.mc-banner-ciea-role {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--mc-cream);
    margin-top: 2px;
}

.mc-banner-ciea-tag {
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.5;
    color: var(--mc-gold-bright);
    max-width: 17ch;
    margin: 0;
}

/* Gold diamond connector */
.mc-banner-link {
    flex: 1;
    min-width: 36px;
    display: flex;
    align-items: center;
}

.mc-banner-link-line {
    flex: 1;
    height: 1px;
    background: var(--mc-gold-a40);
}

.mc-banner-link-diamond {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    transform: rotate(45deg);
    border: 1px solid var(--mc-gold);
    background: transparent;
}

/* Medina community card */
.mc-banner-card {
    position: relative;
    flex-shrink: 0;
    width: 296px;
    background: var(--mc-cream);
    border: 1px solid var(--mc-olive);
    border-radius: 10px;
    padding: 34px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}

/* faint inner frame line (double-frame detail from the reference) */
.mc-banner-card::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid var(--mc-olive);
    opacity: 0.28;
    border-radius: 6px;
    pointer-events: none;
}

.mc-banner-card-logo {
    width: 158px;
    height: auto;
    display: block;
}

.mc-banner-card-rule {
    width: 40px;
    height: 2px;
    background: var(--mc-clay);
    border-radius: 1px;
}

.mc-banner-card-title {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--mc-charcoal);
}

.mc-banner-card-desc {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--mc-muted);
    margin: 0;
}

/* ----- Responsive ----- */
@media (max-width: 1023px) {
    .mc-banner-grid {
        grid-template-columns: 1fr;
        gap: 44px 0;
    }
    .mc-banner-panel {
        padding: 48px 36px;
    }
    .mc-banner-heading {
        max-width: 18ch;
    }
    .mc-banner-rel {
        justify-content: center;
    }
}

@media (max-width: 639px) {
    .mc-banner-section {
        padding: 60px 0;
    }
    .mc-banner-panel {
        padding: 40px 22px;
        border-radius: 14px;
    }
    /* stack the relationship vertically: CIEA over connector over card */
    .mc-banner-rel {
        flex-direction: column;
    }
    .mc-banner-ciea {
        width: 100%;
    }
    .mc-banner-link {
        flex-direction: column;
        width: auto;
        min-width: 0;
        height: 52px;
        align-self: center;
    }
    .mc-banner-link-line {
        width: 1px;
        height: auto;
        flex: 1;
    }
    .mc-banner-card {
        width: 100%;
        max-width: 360px;
    }
}

/* ==========================================================================
   Series spotlight: "The Legacy of Medina" (forest framing).
   Lead-in to the gatherings list. Announces the upcoming themed session. It is
   dateless by design, so it lives as static content and never enters the
   date-driven CMS event list. It sits directly under the dark tagline band, so
   the dark-on-dark seam is made deliberate with a top gold hairline.
   ========================================================================== */
.mc-series-band {
    /* Lit "stage" ground: brightest behind the poster, settling to forest at the
       edges. Deliberately lighter than the .mc-dark-grad band above so the two
       dark sections read as separate planes, not one block. */
    background:
        radial-gradient(105% 82% at 50% 38%, #3C4B2C 0%, #333F26 46%, var(--mc-forest) 100%);
    border-top: 1px solid var(--mc-gold-a40);
    padding: 74px 0 88px;
}
.mc-series-band .max-w-content { text-align: center; }
.mc-series-band .mc-eyebrow { margin: 0 auto 22px; justify-content: center; }

.mc-series-poster {
    margin: 0 auto 34px;
    max-width: 720px;
    border: 1px solid var(--mc-gold-a40);
    border-radius: var(--mc-radius-card);
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 22px 50px -20px rgba(0, 0, 0, 0.55);
}
.mc-series-poster img { width: 100%; height: auto; display: block; }

.mc-series-title {
    font-family: 'Marcellus', serif;
    font-weight: 400;
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1.12;
    color: var(--mc-cream);
    margin: 0 0 6px;
}
.mc-series-subtitle {
    font-family: 'Marcellus', serif;
    font-size: clamp(17px, 2.4vw, 21px);
    color: var(--mc-gold-bright);
    margin: 0 0 22px;
}
.mc-series-lead {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--mc-cream-muted);
    max-width: 600px;
    margin: 0 auto 26px;
}
.mc-series-lead strong { color: var(--mc-cream); font-weight: 600; }

.mc-series-themes {
    list-style: none;
    margin: 0 auto 30px;
    padding: 0;
    max-width: 640px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mc-cream);
}
.mc-series-themes li { display: inline-flex; align-items: center; }
.mc-series-themes li:not(:last-child)::after {
    content: '\25C6';
    color: var(--mc-gold);
    font-size: 7px;
    margin-left: 14px;
    position: relative;
    top: -1px;
}

.mc-series-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 22px;
}
.mc-series-status {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mc-gold-bright);
}

/* ==========================================================================
   Scroll reveal: each section's content fades + rises as it scrolls into view.
   Gated on html.mc-anim, which an inline <head> script adds before first paint,
   so the page renders fully visible when JS is off (and the reveal script drops
   the gate on any error as a safety net). Honours prefers-reduced-motion.
   Scoped to body.medina <section> so the shared nav/footer stay untouched; a
   single uniform fade+translate per block keeps the arch SVG intact (the old
   motion collapsed it by tweening width).
   ========================================================================== */
html.mc-anim body.medina section .max-w-content {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

html.mc-anim body.medina section .max-w-content.mc-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html.mc-anim body.medina section .max-w-content {
        opacity: 1;
        transform: none;
        transition: none;
    }
}