/* ============================================================
   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); }

/* --- 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. */
.ip-featured {
    display: grid;
    grid-template-columns: 320px 1fr auto;
    gap: 48px;
    align-items: center;
    border-radius: 22px;
    padding: 20px 24px;
    margin: 0 -24px 40px;
    transition: background 160ms ease;
}
.ip-featured:hover { background: var(--lavender); }
.ip-featured-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ip-featured-venue { color: var(--couple-purple-dark); }

/* --- 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); }
.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; }
.ip-row-venue { font: 500 18px/1.3 var(--font-body); color: var(--ink-700); letter-spacing: -0.1px; }

/* --- 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; }
.ipd-map-link { align-self: flex-start; font: var(--type-caption); }

/* --- Host social handles (`render_irl_host_card()`) -------------
   Plain, non-linked chips: legacy stores a bare handle, never a URL,
   and the reference's own `href="#"` is a placeholder — see
   `render_irl_host_card()`'s docblock. */
.ipd-social-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.ipd-social-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    border: var(--border-hairline) solid var(--lavender-edge);
    color: var(--couple-purple);
    font: 700 14px/1.2 var(--font-display);
    letter-spacing: -0.1px;
}
.ipd-social-label { color: var(--ink-500); font-weight: 500; }

/* --- 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) {
    .ip-featured { padding: 16px 12px; margin: 0 -12px 32px; }
    .ip-row { padding: 16px 12px; margin: 0 -12px; column-gap: 16px; }
    .ip-venue-tile--sm { width: 96px; height: 96px; }
    .ip-location { font-size: 16px; }
}