/* ============================================================
   In-person (IRL) events — `/singles-mixers/` + detail
   (`docs/3_2_KICKOFF_PROMPT.md`, sub-batch 3.2).

   Loaded **alongside** `events.css`, never instead of it: the design
   markup itself says `in-person-event-detail.jsx` "deliberately REUSES
   the online detail's .edx-* classes ... so the two detail pages read
   as one product." Everything shared — the going cluster, host cards,
   the timeline/expect plate, the confirm-dialog shell, hero grid,
   month dividers, schedule list — comes from `events.css`/`styles.css`
   unchanged. Only the genuinely IRL-only vocabulary lives here:

     - the venue photo tile (square, replacing the online host tile)
     - the venue location line (pin + neighborhood + address)
     - the IRL schedule row's own 4-column / 3-row grid
     - the detail hero's "Where" block + map link
     - host social-handle chips

   Structural-port fidelity, matching `events.css`'s own docblock: real
   hierarchy and tokens, not every one of the reference's pixel-tuned
   breakpoints.
   ============================================================ */

/* --- Venue photo tile (`render_irl_venue_tile()`) --------------- */
.ip-venue-tile {
    border-radius: var(--r-card-sm);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    flex-shrink: 0;
    background: var(--lavender);
}
.ip-venue-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ip-venue-tile--sm { width: 200px; height: 200px; }
.ip-venue-tile--lg { width: 320px; height: 320px; border-radius: var(--r-card); }

/* --- Location line (`render_irl_location()`) -------------------- */
.ip-location {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font: 500 18px/1.3 var(--font-body);
    color: var(--ink-700);
    letter-spacing: -0.1px;
}
.ip-location .ip-pin { flex-shrink: 0; }
.ip-location-hood { color: var(--ink-700); font-weight: 700; white-space: nowrap; }
.ip-location-addr { color: var(--ink-500); }
/* SC-48 (2026-10-05, brief IN-PERSON-1o5sr / 0c8aj): the FEATURED card's
   location line rides the fluid lead size — `500 var(--fs-body-lg)/1.3`
   (`in-person.jsx:203`), 18 -> 20px across the desktop ramp — while the rows
   keep the fixed 18px above (`:355`). 0-2-0 over the base, declared below it. */
.ip-featured .ip-location { font: 500 var(--fs-body-lg)/1.3 var(--font-body); }

/* --- Featured hero (`render_irl_featured_hero()`) ---------------
   Same three-column rhythm as the online `.event-featured`, with the
   venue photo in place of the host tile and an extra venue-name +
   location pair in the copy column. */
/* SC-48 (2026-10-02, brief IN-PERSON-0wrr9): the IRL index hero's grid is
   1.1fr / 1fr (`in-person.jsx:755`); the shared base is the online index's
   1.2fr. 0-2-0 over the shared rule. */
.event-hero-grid.event-hero-grid--irl { grid-template-columns: 1.1fr 1fr; }
.ip-featured {
    display: grid;
    grid-template-columns: 320px 1fr auto;
    gap: 48px;
    align-items: center;
    border-radius: 22px;
    padding: 20px 24px;
    /* SC-48 (brief IN-PERSON-1ep4c): `--rhythm-64` below the card, the design's
       inline `marginBottom` (`in-person.jsx:157`) — 64px at 641-1100 and on wide
       screens, 42-45 at 1440-1536; v3 had a flat 40. */
    margin: 0 -24px var(--rhythm-64);
    transition: background 160ms ease;
}
.ip-featured:hover { background: var(--lavender); }
.ip-featured-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* SC-48 (2026-10-05): the featured card's phone-tier date stack — hidden above
   640, where the one-line date shows (the SC-8 follow-up #4 device, the
   online hero's `.event-featured .event-row-date--phone`). 0-2-0, so no later
   `.event-row-date` declaration can show it on desktop (the SC-12 lesson). */
.ip-featured .event-row-date--phone { display: none; }

/* --- Schedule row (`render_irl_schedule_row()`) -----------------
   date | venue photo | info | cta, with the location and the going
   cluster stacked under the info column — `in-person.jsx`'s own
   grid-template-areas, same shape as the online `.event-row`. */
.ip-row {
    display: grid;
    grid-template-columns: 120px 200px 1fr auto;
    grid-template-areas:
        "date venue info cta"
        "date venue loc  cta"
        "date venue meta cta";
    column-gap: 32px;
    row-gap: 16px;
    align-items: center;
    border-radius: 22px;
    padding: 20px 24px;
    margin: 0 -24px;
    transition: background 160ms ease;
}
.ip-row:hover { background: var(--lavender); }
/* F-38 (2026-11-03) — FF-18's containing block, which the IRL pair never had.
   The title link's stretched overlay (`events.css`'s
   `.event-card-title-link::after`, `inset: 0`) fills its nearest POSITIONED
   ancestor. `.event-featured` / `.event-row` are `position: relative` for
   exactly that (`events.css:233`, `:299`); these two plates were not, so every
   IRL overlay stretched to the page and the LAST card's overlay sat on top of
   all of them — both cards clicked through to the same event the first day
   production listed two (2026-11-03, events 163 and 164). Same rule, same
   reason. And the real controls are lifted above the overlay the way
   `events.css:1061-1065` lifts the online cards' (`.btn-pill` is the Register
   anchor signed out and the Register button signed in), so Register keeps its
   own click; the inert "You're in" lockup stays under the overlay, as online. */
.ip-featured,
.ip-row { position: relative; }
.ip-featured .btn-pill,
.ip-row .btn-pill { position: relative; z-index: 1; }
.ip-row > .event-row-date { grid-area: date; }
.ip-row > .ip-venue-tile  { grid-area: venue; }
.ip-row > .ip-row-info    { grid-area: info; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ip-row > .ip-row-loc     { grid-area: loc; margin-top: -6px; }
.ip-row > .ip-row-meta    { grid-area: meta; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ip-row > .event-row-cta  { grid-area: cta; }
/* Optical balance, straight from the reference: the venue name carries
   top leading the small eyebrows above it don't, so a flat 10px gap
   reads larger above it than between the eyebrows. */
.ip-row .ip-row-info > .event-card-title-link { margin-top: -5px; }

/* --- Detail hero "Where" block ---------------------------------- */
.ipd-loc { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.ipd-loc .ip-location { color: var(--couple-purple-dark); }
.ipd-loc .ip-location-hood { color: var(--couple-purple-dark); }
.ipd-loc .ip-location-addr { color: var(--couple-purple-dark); opacity: 0.85; }
/* SC-19 (2026-09-16) — the location line is the Google Maps link (an `<a>`,
   `render_irl_location()`'s `$href`); it keeps the lockup's own colours and
   weights above, so only the UA's underline is cleared. The former
   `.ipd-map-link` caption is gone — no design equivalent. */
.ipd-loc a.ip-location { text-decoration: none; }
/* SC-18-D3 (2026-09-15) — the design's gap above "Reserve my spot": its copy
   column is `flex column, gap: 24` and `.edx-cta-row` adds `marginTop: 12`
   (`in-person-event-detail.jsx:199-201, :249-251`) = 36px, constant at every
   tier. v3's copy column is a plain block, so `.event-hero-cta`'s own 12px
   (`events.css:814`) was the whole gap under the Where block (then ending in
   the "Open in Maps" caption — gone since SC-19, 2026-09-16; the location
   line is the block's last child now and this rule is unchanged). ⚠ That rule is
   SHARED with the online detail hero (`event-detail.php:141`), so it is not
   edited; this IRL-only rule beats it at 0-2-0 whatever the load order. */
.ipd-loc + .event-hero-cta { margin-top: 36px; }

/* --- Detail "What to expect" plate, top gap ---------------------
   SC-18-D4 (2026-09-15) — in the design the plate is the first child of
   `.edx-shell`, whose padding-top is the gap under the hero:
   `var(--rhythm-64)` → 56px ≤1100 → 56px ≤900 → 48px ≤768 → 40px ≤640
   (`styles.css:690-691, :723, :749, :771, :791`). v3 renders the plate as the
   hero's direct sibling, and `.event-expect-shell`'s base `margin: 0 auto
   var(--rhythm-56)` (`events.css:336`) gave it NO top margin — it touched the
   hero at every width. Only the detail page's FIRST plate wears the modifier:
   the closing CTA plate, the index plate and both online pages have a
   `.section` between them and the hero. 0-2-0 beats the base's 0-1-0
   shorthand; the 0-1-1 `div.event-expect-shell` tier rules never set
   `margin-top`. Tiers below the base, same selector, so source order wins. */
.event-expect-shell.ipd-expect-shell { margin-top: var(--rhythm-64); }
@media (max-width: 1100px) {
    .event-expect-shell.ipd-expect-shell { margin-top: 56px; }
}
@media (max-width: 768px) {
    .event-expect-shell.ipd-expect-shell { margin-top: 48px; }
}
@media (max-width: 640px) {
    .event-expect-shell.ipd-expect-shell { margin-top: 40px; }
}

/* --- Host social handles --------------------------------------
   SC-38 walk finding #1 (2026-10-02): the `.ipd-social-*` chip rules moved
   to `events.css` (which both detail pages load) so the online host card
   draws the same chips — see `render_host_socials()`. */

/* --- Responsive -------------------------------------------------
   Two steps, matching the online events page's own breakpoints
   rather than reproducing every tier the reference tunes. */
@media (max-width: 1100px) {
    .ip-featured { grid-template-columns: 240px 1fr auto; gap: 40px; }
    .ip-venue-tile--lg { width: 240px; height: 240px; }
    .ip-row { grid-template-columns: 100px 180px 1fr auto; column-gap: 24px; }
    .ip-venue-tile--sm { width: 180px; height: 180px; }
}

@media (max-width: 900px) {
    .ip-featured {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .ip-featured .event-featured-cta { align-items: flex-start; }
    .ip-venue-tile--lg { width: 100%; max-width: 360px; height: auto; aspect-ratio: 1 / 1; }

    /* Square venue card: the photo sits top-left carrying the date
       stack, then the info, location, price and CTA stack full-width
       beneath — the reference's own ≤900 reflow, simplified. */
    .ip-row {
        grid-template-columns: 104px 1fr;
        grid-template-areas:
            "venue date"
            "info  info"
            "loc   loc"
            "meta  cta";
        column-gap: 20px;
        row-gap: 14px;
        align-items: start;
    }
    .ip-venue-tile--sm { width: 104px; height: 104px; }
    .ip-row > .ip-venue-tile { align-self: start; }
    .ip-row > .ip-row-loc { margin-top: 0; }
    .ip-row > .event-row-cta { align-items: flex-end; }
}

@media (max-width: 640px) {
    /* ============================================================
       SC-48 (2026-10-05, brief IN-PERSON-1o5sr) — THE FEATURED CARD ON A PHONE.
       The design mounts NO featured card at this tier (`in-person.jsx:817`,
       `:826` `{!isMobile && <FeaturedHero/>}`): the first event is a schedule
       row in its month group. v3 renders server-side, so the card WEARS THE
       ROW CARD from one copy of the markup — the `.ip-row` square-venue grid
       (venue | date / info / loc / meta | cta) at this tier's steps, the info
       column dissolved to `display: contents` so each leaf places itself, the
       meta column already dissolved by `events.css`'s own <=640 block. SC-8
       follow-up #2 / #4's device from the online index, carried here. Every
       rule 0-2-0 and below the base it beats. */
    .ip-featured {
        padding: 16px 12px;
        margin: 0 -12px 40px;
        grid-template-columns: 104px 1fr;
        grid-template-areas:
            "venue  date"
            "type   type"
            "hosted hosted"
            "title  title"
            "loc    loc"
            "meta   cta";
        column-gap: 16px;
        row-gap: 10px;
        align-items: start;
    }
    .ip-featured .ip-venue-tile--lg {
        grid-area: venue;
        width: 96px; height: 96px;
        max-width: none; aspect-ratio: auto;
        border-radius: var(--r-card-sm);
        align-self: start;
    }
    .ip-featured > .ip-featured-info { display: contents; }
    .ip-featured .event-row-date--phone { display: flex; grid-area: date; align-self: start; }
    /* The one-line date is the hero's; the row stacks it. */
    .ip-featured .ip-featured-when { display: none; }
    .ip-featured .ip-featured-type { grid-area: type; align-self: start; margin-top: 4px; }
    .ip-featured .event-hosted { grid-area: hosted; align-self: start; }
    .ip-featured .event-card-title-link { grid-area: title; margin-top: -5px; }
    /* The row's title recipe, not the hero's h2 (the SC-8 follow-up #4 lesson). */
    .ip-featured .h2-section { font: var(--type-h3); letter-spacing: -0.3px; line-height: 1.2; }
    .ip-featured .ip-location { grid-area: loc; margin-top: 4px; font-size: 16px; }
    /* Both action cells sit at the START of the row, as the row's `align-items:
       start` places them: the cluster beside the price line, never the pill. */
    .ip-featured .event-going {
        grid-area: meta;
        align-self: start;
        margin-top: 4px;
    }
    /* The hero's cluster is the 42px `--lg` tier at desktop; as a row it takes
       the row's 38px. */
    .ip-featured .event-going--lg .event-going-avatar { width: 38px; height: 38px; margin-left: -12px; }
    .ip-featured .event-going--lg .event-going-avatar:first-child { margin-left: 0; }
    /* The CTA column stays a column — the row's own price-over-pill stack
       (`.event-row-cta`: the price right-aligned over the pill, the stack at
       the START of its cell beside the going cluster, as the rows render it);
       0-2-0 over `events.css`'s bare `display: contents` at this tier
       whatever the load order. */
    .ip-featured .event-featured-cta {
        display: flex; flex-direction: column; align-items: flex-end;
        gap: 14px; grid-area: cta; align-self: start; justify-self: start;
        margin-top: 4px;
    }
    /* And the row's pill, not the hero's marketing one: control metrics,
       `min-width: 0` (the plain `.btn-pill` demands 240px), the purple
       gradient a Schedule row wears (`events.css`'s `.event-featured .btn-pill`). */
    .ip-featured .btn-pill {
        min-width: 0;
        height: 56px;
        padding: 0 28px;
        font-size: 18px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        background: var(--grad-cta-purple);
        color: var(--lavender);
        box-shadow: var(--shadow-cta);
    }
    .ip-row { padding: 16px 12px; margin: 0 -12px; column-gap: 16px; }
    .ip-venue-tile--sm { width: 96px; height: 96px; }
    .ip-location { font-size: 16px; }
}