/* Event section · shared
   ==========================================================================
   Structure, type and controls. Ground-agnostic: the colours come from the
   variant file, which sets --ev-* on the section. */

.ca-ev {
  position: relative;
  background: var(--ev-bg);
  color: var(--ev-fg);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.ca-ev-wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: center;
}

/* ---------- copy column ---------- */
.ca-ev-copy {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}
.ca-ev-eyebrow {
  margin: 0;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: var(--t-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ev-eyebrow);
}
.ca-ev-title {
  margin: 0;
  /* Alfa Slab One: one weight, and never under 24px. */
  font: 400 clamp(1.75rem, 5.2vw, 3.4375rem)/1.1 var(--font-display);
  letter-spacing: -0.005em;
  color: var(--ev-fg);
  text-wrap: balance;
}
.ca-ev-lead {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.55;
  max-width: 56ch;
}
.ca-ev-fine {
  margin: 0;
  font-size: var(--t-2);
  line-height: 1.5;
  color: var(--ev-muted);
}

.ca-ev-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-0) var(--s-2);
  border-radius: 999px;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: var(--t-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ca-ev-live {
  background: var(--ev-live-bg);
  color: var(--ev-live-fg);
  /* The keyline is what keeps red off navy directly. */
  box-shadow: inset 0 0 0 1px var(--ev-live-ring);
}
.ca-ev-live i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  animation: ca-ev-pulse 1.6s ease-in-out infinite;
}
@keyframes ca-ev-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ---------- countdown ---------- */
.ca-ev-cd {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
}
.ca-ev-cd-label {
  margin: 0;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: var(--t-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ev-muted);
}
.ca-ev-cd-clock {
  margin: 0;
}
.ca-ev-cd-grid {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
}
.ca-ev-cd-unit {
  display: grid;
  justify-items: center;
  gap: var(--s-1);
}
.ca-ev-cd-num {
  display: flex;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ev-num);
}
/* Each digit is its own window; the variant slides two layers through it. */
.ca-ev-dg {
  position: relative;
  display: block;
  overflow: hidden;
  width: 0.62em;
  height: 1em;
}
.ca-ev-dg-a,
.ca-ev-dg-b {
  position: absolute;
  inset: 0;
  display: block;
  text-align: center;
}
.ca-ev-cd-tag {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: var(--t-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ev-muted);
}
.ca-ev-cd-sep {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.1;
  color: var(--ev-muted);
  padding-bottom: 1.1em;
}
.ca-ev-cd-when {
  margin: 0;
  font-size: var(--t-4);
  color: var(--ev-muted);
}

/* ---------- the two sessions ---------- */
.ca-ev-nights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}
.ca-ev-nights li {
  display: grid;
  gap: var(--s-0) var(--s-3);
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  padding-top: var(--s-2);
  border-top: 1px solid var(--ev-rule);
}
.ca-ev-nights-k {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: var(--t-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ev-eyebrow);
}
.ca-ev-nights-d {
  font-size: var(--t-4);
  color: var(--ev-fg);
}
.ca-ev-nights-s {
  grid-column: 2/-1;
  font-size: var(--t-3);
  color: var(--ev-muted);
}
.ca-ev-nights-st {
  grid-row: 1;
  grid-column: 3;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: var(--t-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ev-muted);
}
.ca-ev-nights li[data-night-state="now"] .ca-ev-nights-st {
  color: var(--ev-eyebrow);
}
.ca-ev-nights li[data-night-state="done"] {
  opacity: 0.62;
}
@media (max-width: 560px) {
  .ca-ev-nights li {
    grid-template-columns: 1fr auto;
  }
  .ca-ev-nights-s {
    grid-column: 1/-1;
  }
}

/* ---------- actions ---------- */
.ca-ev-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
.ca-ev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--s-5);
  border-radius: var(--r-1);
  border: 2px solid transparent;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: var(--t-6);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.ca-ev-btn--primary {
  background: var(--ev-btn1-bg);
  color: var(--ev-btn1-fg);
}
.ca-ev-btn--primary:hover {
  background: var(--ev-btn1-hover);
}
.ca-ev-btn--secondary {
  color: var(--ev-btn2-fg);
  border-color: currentColor;
}
.ca-ev-btn--secondary:hover {
  background: var(--ev-btn2-hover);
}
.ca-ev-handle {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: var(--t-4);
  letter-spacing: 0.06em;
  color: var(--ev-muted);
}
.ca-ev-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ev-link);
  font-size: var(--t-4);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ev-eyebrow);
}
.ca-ev-link:hover {
  color: var(--ev-link-hover);
}
.ca-ev :focus-visible {
  outline: 3px solid var(--ev-focus);
  outline-offset: 3px;
}

/* ---------- second row: stream and notes ---------- */
.ca-ev-row2 {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-top: clamp(var(--s-6), 5vw, var(--s-8));
  display: grid;
  gap: clamp(var(--s-5), 4vw, var(--s-7));
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
@media (max-width: 899px) {
  .ca-ev-row2 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ca-ev-video {
  display: grid;
  gap: var(--s-3);
  min-width: 0;
}
.ca-ev-video-frame {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--inverse-deep);
}
.ca-ev-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* A facade, not an embed: nothing is requested from YouTube until this is pressed. */
.ca-ev-video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: end;
  justify-items: start;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 0;
  cursor: pointer;
  text-align: left;
  background: linear-gradient(
    180deg,
    rgba(1, 19, 47, 0.25),
    rgba(1, 19, 47, 0.88)
  );
  color: var(--ca-paper);
}
.ca-ev-video-badge {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: var(--t-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ca-gold-300);
}
.ca-ev-video-title {
  font-size: var(--t-6);
  line-height: 1.35;
  max-width: 34ch;
}
.ca-ev-video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ca-red-500);
  box-shadow: inset 0 0 0 2px var(--ca-white);
}
.ca-ev-video-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  translate: -50% -50%;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--ca-white);
}
.ca-ev-video-play:hover .ca-ev-video-btn {
  background: var(--ca-red-700);
}
.ca-ev-video-foot {
  margin: 0;
  font-size: var(--t-2);
  line-height: 1.5;
  color: var(--ev-muted);
}
.ca-ev-video-foot a {
  color: var(--ev-link);
  text-underline-offset: 3px;
}

.ca-ev-side {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  min-width: 0;
}
.ca-ev-notes-h {
  margin: 0 0 var(--s-3);
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: var(--t-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ev-eyebrow);
}
.ca-ev-run-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.ca-ev-run-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  font-size: var(--t-4);
  line-height: 1.45;
  color: var(--ev-muted);
}
.ca-ev-run-t {
  font-family: var(--font-accent);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ev-fg);
  white-space: nowrap;
}
.ca-ev-run-list li[data-hour-state="now"] {
  color: var(--ev-fg);
}
.ca-ev-run-list li[data-hour-state="now"] .ca-ev-run-t {
  color: var(--ev-eyebrow);
}
.ca-ev-run .ca-ev-fine {
  margin-top: var(--s-3);
}

/* ---------- motion toggle ---------- */
.ca-ev-pause {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-4);
  min-height: 32px;
  padding: 0 var(--s-3);
  background: transparent;
  color: var(--ev-muted);
  border: 1px solid var(--ev-rule);
  /* The section's two buttons take --r-1; a pill in the same frame reads as a
     different kind of control. */
  border-radius: var(--r-1);
  cursor: pointer;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: var(--t-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ca-ev-pause:hover {
  color: var(--ev-fg);
  border-color: currentColor;
}
/* Paused stops every animation in the section, including the variant's. */
.ca-ev[data-motion="paused"] *,
.ca-ev[data-motion="paused"] *::before,
.ca-ev[data-motion="paused"] *::after {
  animation-play-state: paused !important;
}

.ca-ev-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .ca-ev-live i {
    animation: none;
  }
}

/* Both buttons take the same width, growing from one flex-basis rather than
   from their own text. The handle and the plain link keep their content
   width. */
/* 17rem, with the side padding in to --s-4: the buttons are nowrap, so a label
   wider than the cap runs out through its own padding rather than wrapping.
   The two longest, NOT READY TO RUN? VOLUNTEER and WATCH ON GOPCONVENTION.COM,
   are 231px and 230px, which at 16 a side come to 263 against a 272 cap. */
.ca-ev-actions .ca-ev-btn{flex:1 1 13rem;max-width:17rem;padding-inline:var(--s-4)}
@media (max-width:560px){
  /* One per row below that, where 13rem apiece stops fitting. */
  .ca-ev-actions .ca-ev-btn{flex:1 1 100%;max-width:none}
}

/* Rhythm and emphasis in the copy column
   ==========================================================================
   One flat 16px gap between every child put an eyebrow as far from its own
   headline as the headline was from the buttons. */
.ca-ev-copy{gap:var(--s-2)}
.ca-ev-copy .ca-ev-lead{margin-top:var(--s-1)}
/* The buttons own the space both sides of themselves, stated once rather than
   by two rules that happen to agree. The top is a rung short of the bottom
   because the lead above ends with more leading below its last line than the
   countdown's label carries above its caps: measured off a 1:1 render, equal
   16s gave 36 above against 32 below. */
.ca-ev-copy .ca-ev-actions{margin-block:var(--s-3) var(--s-4)}
.ca-ev-copy .ca-ev-cd{margin-top:0}
.ca-ev-copy .ca-ev-nights{margin-top:var(--s-3)}
/* The location note annotates the list above it, so it keeps the tight base. */

/* The one live number in the section, so it gets a rule in the accent colour
   rather than a panel. */
.ca-ev-cd{
  border-left:3px solid var(--ev-eyebrow);
  padding-left:var(--s-4);
}