/* ══════════════════════════════════════════════════════════════════════════
   /events/{slug} — the components only this page needs

   Scoped `.v2x.atd.atdx.evd`, one class deeper than public-atd-detail.css, so
   an event-only rule always out-cascades the shared rule it refines and can
   never leak sideways onto the other nine module pages.

   The page still carries `.evp` as well, because `events/_kit` owns the viewer
   timezone rewrite, the countdown ticker, the share sheet, the calendar handler
   and the toast — all of which key off `data-ev-*` attributes and the tokens
   `.evp` declares. Nothing below fights that: `.evp` sets custom properties,
   these rules set the geometry, and every rule here is more specific.

   What is left is what only an event has: a countdown, a clocked agenda, a
   speaker card, a sponsor wall, a venue map and a registration control with
   eight distinct states.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── §EVD-COUNT) The countdown ──────────────────────────────────────────
   Sits at the top of the registration card. The number is tabular so the digits
   do not jitter as it ticks — a countdown that re-flows every second reads as
   broken. */
.v2x.atd.atdx.evd .evd-count{
  display:flex; flex-direction:column; gap:3px; align-items:center;
  padding:14px; margin-bottom:14px; border-radius:14px;
  background-image:linear-gradient(140deg, rgba(54,128,237,.12) 0%, rgba(1,150,253,.10) 100%);
  background-color:#F4F8FE;
  border:1px solid rgba(54,128,237,.24);
}
body.theme-dark .v2x.atd.atdx.evd .evd-count{
  background-image:linear-gradient(140deg, rgba(54,128,237,.20) 0%, rgba(1,150,253,.16) 100%);
  background-color:var(--dk-accent-soft,rgba(54,128,237,.16)); border-color:rgba(96,164,245,.30);
}
.v2x.atd.atdx.evd .evd-count-l{
  font-size:.68rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.v2x.atd.atdx.evd .evd-count-v{
  font-size:1.5rem; font-weight:800; line-height:1.1; color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* ── §EVD-AG) The agenda ────────────────────────────────────────────────
   §CHLOG's geometry with a clock in the gutter instead of a date. `--ag-x` is
   the node column's centre and is the single number that keeps the rail and the
   grid in step across breakpoints — change one, change both. */
.v2x.atd.atdx.evd .evd-agenda{ --ag-x:74px; position:relative; margin:2px 0 0; padding:0; list-style:none; }
.v2x.atd.atdx.evd .evd-agenda::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset-inline-start:calc(var(--ag-x) - 1px); top:14px; bottom:14px; width:2px; border-radius:2px;
  background:linear-gradient(180deg, rgba(54,128,237,.34) 0%, rgba(54,128,237,.15) 70%, rgba(54,128,237,0) 100%);
}
body.theme-dark .v2x.atd.atdx.evd .evd-agenda::before{
  background:linear-gradient(180deg, rgba(96,164,245,.40) 0%, rgba(96,164,245,.18) 70%, rgba(96,164,245,0) 100%);
}
.v2x.atd.atdx.evd .evd-sess{
  position:relative; z-index:1;
  display:grid; grid-template-columns:60px 28px minmax(0,1fr); align-items:start; gap:0 0;
  padding-bottom:14px;
}
.v2x.atd.atdx.evd .evd-sess:last-child{ padding-bottom:0; }
.v2x.atd.atdx.evd .evd-sess-t{
  grid-column:1; display:flex; flex-direction:column; align-items:flex-end; gap:2px; padding-top:12px;
}
.v2x.atd.atdx.evd .evd-sess-t time{
  font-size:.95rem; font-weight:800; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums;
}
.v2x.atd.atdx.evd .evd-sess-d{ font-size:.7rem; font-weight:650; color:var(--muted); }
.v2x.atd.atdx.evd .evd-sess-n{
  grid-column:2; justify-self:center; margin-top:15px;
  width:12px; height:12px; border-radius:50%;
  background-color:var(--t-1p); box-shadow:0 0 0 4px #fff;
}
body.theme-dark .v2x.atd.atdx.evd .evd-sess-n{ box-shadow:0 0 0 4px var(--dk-surface-2,#17171B); }
.v2x.atd.atdx.evd .evd-sess-b{
  grid-column:3; min-width:0; padding:13px 15px; border-radius:14px;
  background-color:var(--t-bg); border:1px solid var(--t-line);
}
/* A break is not a talk. It keeps the rail position but drops the fill, so the
   agenda can be skimmed for the content rather than counting coffee. */
.v2x.atd.atdx.evd .evd-sess.is-break .evd-sess-b{
  background-color:transparent; border-style:dashed; opacity:.85;
}
.v2x.atd.atdx.evd .evd-sess-h{ margin:0; font-size:.98rem; font-weight:750; line-height:1.35; color:var(--ink); }
.v2x.atd.atdx.evd .evd-sess-m{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; }
.v2x.atd.atdx.evd .evd-sess-p{ margin:8px 0 0; font-size:.86rem; line-height:1.6; color:var(--muted); }
.v2x.atd.atdx.evd .evd-sess-s{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }

/* Speaker chip — a face plus a name, used inside a session and nowhere else. */
.v2x.atd.atdx.evd .evd-chip{
  display:inline-flex; align-items:center; gap:7px; padding:3px 11px 3px 3px; border-radius:999px;
  font-size:.78rem; font-weight:700; text-decoration:none; color:var(--ink);
  background-color:rgba(var(--t-rgb),.10); border:1px solid rgba(var(--t-rgb),.22);
}
.v2x.atd.atdx.evd .evd-chip img{ width:22px; height:22px; border-radius:50%; object-fit:cover; display:block; }
.v2x.atd.atdx.evd .evd-chip .ph{
  width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:.65rem; font-weight:800; color:#fff; background-color:var(--t-1p);
}

/* ── §EVD-SPK) The speaker wall ─────────────────────────────────────────
   A card per person, sized so three fit an 8-column body and the bio has room
   to be two lines rather than one word. */
.v2x.atd.atdx.evd .evd-spks{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap:12px;
}
.v2x.atd.atdx.evd .evd-spk{
  display:flex; gap:13px; padding:15px; border-radius:14px;
  background-color:var(--t-bg); border:1px solid var(--t-line);
}
.v2x.atd.atdx.evd .evd-spk-ph{
  flex:0 0 auto; width:56px; height:56px; border-radius:50%; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  background-color:var(--t-1p); color:#fff; font-size:1.2rem; font-weight:800;
  box-shadow:0 3px 10px rgba(var(--t-rgb),.35);
}
.v2x.atd.atdx.evd .evd-spk-ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.v2x.atd.atdx.evd .evd-spk-b{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.v2x.atd.atdx.evd .evd-spk-n{
  display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0;
  font-size:.98rem; font-weight:770; line-height:1.3; color:var(--ink);
}
.v2x.atd.atdx.evd .evd-spk-n a{ color:inherit; text-decoration:none; }
.v2x.atd.atdx.evd .evd-spk-n a:hover{ color:var(--accent); }
.v2x.atd.atdx.evd .evd-spk-r{ margin:0; font-size:.8rem; font-weight:650; color:var(--t-ink); }
.v2x.atd.atdx.evd .evd-spk-bio{ margin:0; font-size:.83rem; line-height:1.55; color:var(--muted); }
.v2x.atd.atdx.evd .evd-spk-soc{ display:flex; flex-wrap:wrap; gap:7px; margin-top:3px; }
.v2x.atd.atdx.evd .evd-spk-soc a{
  width:26px; height:26px; border-radius:8px; font-size:.8rem;
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  color:var(--t-ink); background-color:rgba(var(--t-rgb),.14); border:1px solid rgba(var(--t-rgb),.24);
  transition:color .2s ease, background-color .2s ease;
}
.v2x.atd.atdx.evd .evd-spk-soc a:hover{ color:#fff; background-color:var(--t-1p); }

/* ── §EVD-SPON) The sponsor wall ────────────────────────────────────────
   Logos on a neutral plate at one height, because a sponsor wall where the
   logos are different sizes reads as a ranking nobody agreed to. */
.v2x.atd.atdx.evd .evd-spons{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 158px), 1fr)); gap:12px;
}
.v2x.atd.atdx.evd .evd-spon{
  display:flex; align-items:center; justify-content:center;
  min-height:82px; padding:14px; border-radius:14px; text-decoration:none;
  font-size:.86rem; font-weight:700; color:var(--ink);
  background-color:#fff; border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .22s ease;
}
body.theme-dark .v2x.atd.atdx.evd .evd-spon{ background-color:rgba(255,255,255,.05); }
.v2x.atd.atdx.evd .evd-spon img{ max-width:100%; max-height:46px; object-fit:contain; display:block; }
@media (hover:hover) and (pointer:fine){
  .v2x.atd.atdx.evd a.evd-spon:hover{
    transform:translateY(-3px); border-color:rgba(54,128,237,.4);
    box-shadow:0 14px 26px -18px rgba(15,23,42,.5);
  }
}

/* ── §EVD-MAP) The venue map ────────────────────────────────────────────
   OpenStreetMap needs no API key, so the venue is always locatable even with no
   Google key configured — the frame is here so the iframe cannot bleed. */
.v2x.atd.atdx.evd .evd-map{
  border-radius:14px; overflow:hidden; border:1px solid var(--line); background-color:#F1F5F9;
}
body.theme-dark .v2x.atd.atdx.evd .evd-map{ background-color:var(--dk-surface-3,#1D1D22); }
.v2x.atd.atdx.evd .evd-map iframe{ display:block; width:100%; height:280px; border:0; }

/* ── §EVD-CTA) The registration control ─────────────────────────────────
   Eight states on one class. EVERY state carries text — colour alone never
   says what happened, and three of the eight are refusals. The disabled
   states are a real `disabled` <button> rather than a greyed link, so they
   are unfocusable and announce themselves to a screen reader. */
.v2x.atd.atdx.evd .evd-cta{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  margin-top:14px; padding:13px 18px; border-radius:13px; cursor:pointer; text-decoration:none;
  font-size:.94rem; font-weight:750; line-height:1.3; text-align:center; color:#fff; border:0;
  background-image:linear-gradient(135deg,#4C8DF2,#2060C0); background-color:#3680ED;
  box-shadow:0 8px 20px -10px rgba(32,96,192,.85);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.v2x.atd.atdx.evd .evd-cta:hover{ transform:translateY(-2px); filter:saturate(1.06); }
.v2x.atd.atdx.evd .evd-cta svg{ flex:0 0 auto; }

/* Live — the join link. Rose rather than brand blue, because it is the one
   action that expires while the reader is looking at it. */
.v2x.atd.atdx.evd .evd-cta.is-live{
  background-image:linear-gradient(135deg,#F43F5E,#B31D3C); background-color:#F43F5E;
  box-shadow:0 8px 20px -10px rgba(179,29,60,.85);
}
/* Already registered — a statement of fact, not an invitation. */
.v2x.atd.atdx.evd .evd-cta.is-ok{
  background-image:linear-gradient(135deg,#10B981,#08795A); background-color:#0EA575;
  box-shadow:0 8px 20px -10px rgba(8,121,90,.85);
}
/* Waitlist — possible, but not the thing that was asked for. */
.v2x.atd.atdx.evd .evd-cta.is-warn{
  background-image:linear-gradient(135deg,#F59E0B,#A85B08); background-color:#D07E0A;
  box-shadow:0 8px 20px -10px rgba(168,91,8,.85);
}
/* Cancelled, sold out, closed, ended. */
.v2x.atd.atdx.evd .evd-cta.is-off,
.v2x.atd.atdx.evd .evd-cta[disabled]{
  cursor:not-allowed; box-shadow:none;
  color:var(--muted); background-image:none; background-color:rgba(100,116,139,.14);
  border:1px solid rgba(100,116,139,.24);
}
.v2x.atd.atdx.evd .evd-cta.is-off:hover,
.v2x.atd.atdx.evd .evd-cta[disabled]:hover{ transform:none; filter:none; }
body.theme-dark .v2x.atd.atdx.evd .evd-cta.is-off,
body.theme-dark .v2x.atd.atdx.evd .evd-cta[disabled]{
  color:var(--dk-text-3,#9AA0AB); background-color:rgba(148,163,184,.16); border-color:rgba(148,163,184,.26);
}

.v2x.atd.atdx.evd .evd-cta-note{
  margin:9px 0 0; font-size:.78rem; line-height:1.5; color:var(--muted); text-align:center;
}

/* Secondary actions under the CTA — save, share, add to calendar. */
.v2x.atd.atdx.evd .evd-acts{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-top:14px;
}
.v2x.atd.atdx.evd .evd-act{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:11px 6px; border-radius:12px; cursor:pointer; text-decoration:none;
  font-size:.72rem; font-weight:700; line-height:1.3; text-align:center;
  color:var(--muted); background-color:transparent; border:1px solid var(--line);
  transition:color .2s ease, border-color .2s ease, background-color .2s ease;
}
.v2x.atd.atdx.evd .evd-act:hover{
  color:var(--accent); border-color:rgba(54,128,237,.42); background-color:rgba(54,128,237,.07);
}
.v2x.atd.atdx.evd .evd-act.is-on{ color:var(--accent); border-color:rgba(54,128,237,.5); }

/* The report link — deliberately the quietest thing in the rail. */
.v2x.atd.atdx.evd .evd-report{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-size:.78rem; font-weight:650; color:var(--muted); text-decoration:none;
}
.v2x.atd.atdx.evd .evd-report:hover{ color:var(--accent); }

/* ── §EVD-RESP) Narrow viewports ────────────────────────────────────────
   The agenda's 60px clock gutter is 17% of a 360px column. Below 576px the time
   moves into the body's head row and the rail goes with it. */
@media (max-width:575.98px){
  .v2x.atd.atdx.evd .evd-agenda{ --ag-x:13px; }
  .v2x.atd.atdx.evd .evd-sess{ grid-template-columns:26px minmax(0,1fr); }
  .v2x.atd.atdx.evd .evd-sess-t{
    grid-column:2; grid-row:1; flex-direction:row; align-items:baseline; gap:8px;
    padding:0 0 6px; justify-content:flex-start;
  }
  .v2x.atd.atdx.evd .evd-sess-n{ grid-column:1; grid-row:1; margin-top:5px; }
  .v2x.atd.atdx.evd .evd-sess-b{ grid-column:2; grid-row:2; }
  .v2x.atd.atdx.evd .evd-acts{ grid-template-columns:1fr; }
}