/* Events listing — page delta over /styles/blogs.css, which the /events route loads
   first (the same base-sheet pattern as STYLE_BASE in app/(site)/[slug]/page.tsx).
   blogs.css supplies the site chrome (header, nav, footer, mobile drawer, demo modal),
   so it is identical to the other pages. This file holds only the handoff events.html
   page blocks, verbatim: <style id="ps-events-page"> and <style id="ps-events-hero-photo">.
   Left out on purpose:
     - the handoff's template chrome (its header/footer/modal rules differ from the site's),
     - the REGISTRATION MODAL .fcta-* rules in ps-events-page (the page has no such modal,
       and .fcta-* is the shared demo modal),
     - <style id="ps-events-focus-ring"> (site.css owns the one global focus ring).
   The .ds-* components and v2.2 tokens come from app/(site)/ds-v2.css. */

/* ── <style id="ps-events-page"> ── */
  /* ═══════════════════════════════════════════════════════════════
     EVENTS PAGE — uses only tokens from assets/tokens.css
     Brand #155DFC via var(--brand); radius/space/type from the scale.
     ═══════════════════════════════════════════════════════════════ */

  /* ---------- HERO ---------- */
  .ev-hero { padding: clamp(40px,4.5vw,72px) 0 clamp(24px,3vw,40px); background: var(--bg-white); text-align: center; }
  .ev-hero .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
  .ev-hero h1 { font-size: var(--ps-text-h1); font-weight: 300; line-height: var(--lh-tight); letter-spacing: -0.025em; color: var(--ink-900); margin: 0 0 var(--space-2-5); text-wrap: balance; }
  .ev-hero h1 em { font-style: normal; font-weight: 500; color: var(--brand); }
  /* With the Register button removed, .ds-meta is the last thing in the card
     body, and the 24px bottom margin the component gives it became trailing
     dead space above the card's own padding. Zero it only when it IS last, so
     the rule undoes itself if the button ever comes back. */
  .ds-card-media > div > .ds-meta:last-child { margin-bottom: 0; }

  .ev-hero p { font-size: var(--ps-text-body); color: var(--ink-600); line-height: var(--lh-body); margin: 0 auto; max-width: 920px  /* was 640px: at 22px that capped the line at ~62 characters,
       so a 246-character lede broke to 4 lines under a 1-line h1. 920px gives
       3 lines at ~82 characters, still inside a readable measure. */; }

  /* ---------- FEATURED NEXT EVENT ---------- */
  .ev-featured-section { padding: clamp(24px,3vw,40px) 0 clamp(32px,4vw,56px); background: var(--bg-white); }
  .ev-featured-section .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
  .ev-featured { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--bg-white); border: var(--border-hair) solid var(--ink-200); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
  .ev-featured-visual { position: relative; min-height: clamp(360px,28vw,460px); background: var(--grad-blue-soft, linear-gradient(135deg,#EAF1FF 0%,#F5F7FB 100%)); display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
  .ev-featured-visual img { width: 100%; max-width: 420px; height: auto; display: block; filter: drop-shadow(0 22px 48px rgba(16,24,40,0.12)); }
  .ev-featured-flag { position: absolute; top: var(--space-2-5); left: var(--space-2-5); display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--ink-900); color: #fff; font-size: var(--text-legal); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
  .ev-featured-flag .ev-pulse { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--brand-3, #3A7BFF); }
  .ev-featured-body { padding: clamp(32px,3.2vw,52px); display: flex; flex-direction: column; justify-content: center; }
  .ev-featured-body .ds-chip { align-self: flex-start; }
  .ev-featured-title { font-size: var(--ps-text-h2, var(--ps-text-h3)); font-weight: 500; line-height: var(--lh-heading); letter-spacing: -0.02em; color: var(--ink-900); margin: var(--space-1-5) 0 var(--space-2); }
  .ev-featured-desc { font-size: var(--ps-text-body); font-weight: 300; color: var(--ink-600); line-height: var(--lh-body); margin: 0 0 var(--space-2-5); }
  .ev-featured-actions { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin-top: var(--space-2-5); }

  /* ---------- META ROWS (date / time / venue / speaker) ---------- */
  /* Option A: a compact two-row meta block — location + dates on one line,
     audience on the next — rather than three icon rows. */
  .ev-meta { display: flex; flex-direction: column; gap: var(--space-0-5); margin: 0; padding: 0; list-style: none; }
  /* --ps-text-body, not --ps-text-nav: this is card content, and at nav size
     it read a tier too small against the description. */
  .ev-meta-row { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: var(--space-1); font-size: var(--ps-text-body); font-weight: 400; color: var(--ink-600); line-height: var(--lh-body); }
  .ev-meta-row > span { min-width: 0; }
  .ev-meta-row svg { width: 1.15em; height: 1.15em; color: var(--brand); flex-shrink: 0; align-self: flex-start; margin-top: var(--space-0-5); }
  .ev-sep { color: var(--ink-400); }
  .ev-meta li { display: flex; align-items: flex-start; gap: var(--space-1-5); font-size: var(--ps-text-body); font-weight: 300; color: var(--ink-600); line-height: var(--lh-body); }
  /* em so the icon scales with the meta text rather than staying at 16px */
  .ev-meta svg { flex-shrink: 0; width: 1em; height: 1em; color: var(--brand); margin-top: 0.25em; }
  .ev-meta strong { font-weight: 500; color: var(--ink-900); }

  /* ---------- TYPE BADGE ---------- */
  .ev-type { display: inline-flex; align-items: center; gap: var(--space-0-5); padding: var(--chip-pad-y) var(--chip-pad-x); border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand); font-size: var(--ps-text-chip); font-weight: var(--chip-weight); letter-spacing: var(--tracking-eyebrow-tight); text-transform: uppercase; white-space: nowrap; }

  /* ---------- FILTERS ---------- */
  .ev-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); margin: 0 0 var(--space-4); }
  /* DS §7.4a nav pill — sized to match .btn exactly: 44/52/56 height,
     14/16/18 font, 20/24/28 side padding, 1.5px visible outline. */
  .ev-filter { display: inline-flex; align-items: center; justify-content: center; height: var(--ps-btn-height); padding: 0 var(--btn-pad-h); border-radius: var(--radius-pill); background: transparent; border: var(--border-medium) solid var(--ink-200); color: var(--ink-600); font-size: var(--ps-text-btn); font-weight: 500; line-height: var(--lh-flat); font-family: var(--font-sans); white-space: nowrap; cursor: pointer; transition: all var(--dur-fast, 0.18s) var(--ease-out, ease); }
  .ev-filter:hover { border-color: var(--ink-900); color: var(--ink-900); }
  .ev-filter.active { background: var(--pill-active-bg); border-color: var(--pill-active-bg); color: var(--pill-active-fg); box-shadow: var(--pill-active-shadow); }

  /* ---------- UPCOMING GRID ---------- */
  .ev-upcoming { background: var(--bg-soft); }
  /* Was a full-width centred button; Option A makes it a text link, so it
     hugs its text and aligns left with the rest of the card content. */
  .ev-register { align-self: flex-start; }
  .ev-empty { display: none; text-align: center; padding: var(--space-5) 0; font-size: var(--ps-text-body); font-weight: 300; color: var(--ink-600); }

  /* ---------- SPEAKERS ---------- */
  .ev-speakers { background: var(--bg-white); }
  .ev-speaker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2vw, 36px); }
  .ev-speaker { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); }
  .ev-speaker-photo { width: 100%; aspect-ratio: 180 / 220; border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); border: var(--border-hair) solid var(--ink-200); }
  .ev-speaker-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ev-speaker-name { font-size: var(--ps-text-h3); font-weight: 500; letter-spacing: -0.01em; color: var(--ink-900); margin: 0; }
  .ev-speaker-role { font-size: var(--ps-text-nav); font-weight: 300; color: var(--ink-600); margin-top: 2px; }
  .ev-speaker-topic { font-size: var(--text-meta, var(--text-legal)); font-weight: 300; color: var(--ink-600); margin-top: var(--space-1); }

  /* ---------- PAST EVENTS ---------- */
  .ev-past { background: var(--bg-soft); }
  .ev-past-list { border-top: var(--border-hair) solid var(--ink-200); }
  .ev-past-row { display: grid; grid-template-columns: 132px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-2-5) 0; border-bottom: var(--border-hair) solid var(--ink-200); transition: background 0.2s ease; }
  .ev-past-date { font-size: var(--ps-text-nav); font-weight: 400; color: var(--ink-600); letter-spacing: 0.02em; }
  .ev-past-main { min-width: 0; }
  .ev-past-title { font-size: var(--ps-text-body); font-weight: 500; color: var(--ink-900); margin: 0 0 2px; }
  .ev-past-sub { font-size: var(--ps-text-nav); font-weight: 300; color: var(--ink-600); margin: 0; }
  .ev-past-link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--ps-text-nav); font-weight: 500; color: var(--brand); white-space: nowrap; }
  .ev-past-link svg { width: 14px; height: 14px; transition: transform var(--dur-fast, 0.18s) ease; }
  .ev-past-row:hover .ev-past-link svg { transform: translateX(3px); }

  /* ---------- CLOSING CTA (dark) ---------- */
  .ev-cta { background: var(--bg-dark); padding: clamp(56px,6vw,88px) 0; }
  .ev-cta .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
  .ev-cta-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
  .ev-cta h2 { font-size: var(--ps-text-h2, var(--ps-text-h1)); font-weight: 300; line-height: var(--lh-heading); letter-spacing: -0.025em; color: #fff; margin: var(--space-1-5) 0 var(--space-2); max-width: 620px; }
  .ev-cta h2 em { font-style: normal; font-weight: 500; color: var(--brand-3, #3A7BFF); }
  .ev-cta p { font-size: var(--ps-text-body); font-weight: 300; color: rgba(255,255,255,0.7); line-height: var(--lh-body); margin: 0; max-width: 560px; }
  .ev-cta .eyebrow { color: var(--brand-3, #3A7BFF); }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 1100px) {
    .ev-grid { grid-template-columns: repeat(2, 1fr); }
    .ev-speaker-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 900px) {
    .ev-featured { grid-template-columns: 1fr; }
    .ev-featured-visual { min-height: 0; aspect-ratio: 16/10; }
    .ev-cta-row { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 700px) {
    .ev-grid { grid-template-columns: 1fr; }
    .ev-past-row { grid-template-columns: 1fr; gap: var(--space-1); }
    .ev-past-link { margin-top: var(--space-1); }
  }
  @media (max-width: 480px) {
    .ev-speaker-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  }

/* ── <style id="ps-events-hero-photo"> ── */
  /* ---- featured card photo -------------------------------------------
     .ev-featured-visual was built for a centred illustration (max-width
     420px + drop shadow). A photograph has to fill the panel instead, so
     it is taken out of the flex flow and absolutely positioned. The
     calendar glyph stays underneath as the fallback: the <img> carries
     onerror="this.remove()", so a missing file reveals it, same as the
     grid cards.
     ------------------------------------------------------------------ */
  /* .ev-featured-visual img (0,1,1) sets width:100%; max-width:420px;
     height:auto for the illustration. Qualifying the selector the same way
     (0,2,1) beats it on specificity — DS §1.3 forbids !important. */
  .ev-featured-visual img.ev-featured-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
    filter: none;             /* the drop-shadow was for the illustration */
    z-index: 1;
  }
  /* the flag has to stay readable on top of the photo */
  .ev-featured-flag { z-index: 2; }

/* ── Base-sheet corrections ──────────────────────────────────────────────────
   blogs.css is loaded first for the chrome, but three of its generic rules also
   reach this page's content. Restore the handoff's values, scoped to /events:
   - `.eyebrow { text-transform: none; letter-spacing: normal }` would turn the
     tracked "EVENTS" / "UPCOMING" labels into mixed case. (Their size stays on the
     site-wide eyebrow token set in site.css.)
   - `html body span[class*="eyebrow"] { font-size: var(--ps-text-eyebrow) !important }`
     catches the card date (.ds-eyebrow), which the DS media card sizes with
     --ps-text-btn; on phones that is 12px instead of 14px. The id beats it.
   - `html body p:not([style*="font-size"]) { font-size: var(--ps-text-body) !important }`
     catches the card location (p.ds-meta), which the media card also sizes with
     --ps-text-btn. Every other <p> on the page is body size already. */
.ev-hero .eyebrow,
.ev-upcoming .section-header .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: var(--lh-heading);
}
html body #evGrid .ds-card-media > div > :is(.ds-eyebrow, .ds-meta) { font-size: var(--ps-text-btn) !important; }