/* ============================================================
   Event list — ported from the mockup's `.evlist` / `.evrow` and its featured
   "Next up" panel (styles/events.css + the `.nfeatured` grammar in news.css).

   Deltas, deliberate:
     · a real <ul>/<li>, where the mockup nests bare <a>s: a list of events IS a
       list, and a screen reader saying "3 items" is the whole point;
     · the lead panel carries the list's OWN classes rather than the news lead's,
       because block stylesheets load per block and two blocks must not depend on
       each other's (the news lead's own note says the same);
     · the pills are links, not buttons, so they have hover and focus states the
       mockup's inert buttons did not need;
     · the fold is a container query on the section, which is true inside the
       editor canvas as well — a viewport media query is not.
   ============================================================ */

/* The block is a flex ITEM inside a section stack, so it has to claim the band
   itself — the stack aligns its children to var(--vt-align) and would otherwise
   leave the whole list at its content width (the news lead's note, and the same
   trap: it reads as a design choice rather than a missing declaration). */
.vt-event { width: 100%; }

/* ---- pills ---- */
.vt-event__pills { width: 100%; margin: 0 0 26px; }
.vt-event__pills ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vt-event__pill {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
.vt-event__pill:hover { border-color: var(--color-light-purple-40); color: var(--color-dark-purple); }
.vt-event__pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vt-event__pill.is-active {
  color: #fff;
  background: var(--color-dark-purple);
  border-color: var(--color-dark-purple);
}

/* ---- the agenda ---- */
.vt-event__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- the card edge: the ROW decides, the card reads ----
   The `Card border` toggle (inc/card-border.php) lives on the row, so the edge
   travels down as an inherited custom property. The bare row states the CARD
   level as well as its own: a :hover — and on the product cards the flagship's
   own tint — sets the token ON the card, and a value set on an element always
   beats one inherited from its ancestor, whatever the specificity. */
.vt-event { --vt-card-edge: var(--color-border); }
.vt-event.vt-cards-bare,
.vt-event.vt-cards-bare .vt-event__row,
.vt-event.vt-cards-bare .vt-event__row:hover { --vt-card-edge: transparent; }

.vt-event__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  background: var(--color-surface);
  border: 1px solid var(--vt-card-edge, var(--color-border));
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 3vw, 32px);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-standard);
}
/* base.css `a:hover` (0,1,1) underlines every link on hover and outranks the
   plain class above, which drew a line under every text in the card. The card is
   ONE link, so the hover state restates it (launch list B32, 2026-09-30). */
.vt-event__row:hover { --vt-card-edge: var(--color-light-purple-40); text-decoration: none; }
.vt-event__row:hover .vt-event__name { color: var(--color-dark-purple); }
.vt-event__row:hover .vt-event__arrow { transform: translateX(3px); }
.vt-event__row:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* the date tile */
.vt-event__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 12px 16px;
  text-align: center;
  background: var(--color-light-purple-10);
  border-radius: var(--radius-md);
}
.vt-event__month {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-dark-purple);
}
.vt-event__day {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 30px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--color-dark-purple);
}
.vt-event__year { font-size: max(11px, var(--fs-floor, 0px)); letter-spacing: 0.08em; color: var(--color-text-muted); margin-top: 3px; }

/* the body */
.vt-event__row-body { min-width: 0; }
.vt-event__cat {
  display: inline-block;
  font-size: max(11px, var(--fs-floor, 0px));
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-dark-purple);
  margin-bottom: 10px;
}
.vt-event__name {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 0 0 10px;
  transition: color var(--dur-base) var(--ease-standard);
}
.vt-event__lines { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.vt-event__line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--color-text-muted);
}
.vt-event__line svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--color-light-purple); }

/* the go line */
.vt-event__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--color-dark-purple);
}
.vt-event__arrow { transition: transform var(--dur-base) var(--ease-standard); }

.vt-event__empty { width: 100%; padding: 32px 4px; color: var(--color-text-muted); font-size: 15px; }

/* ---- "Next up" lead panel ---- */
.vt-event__lead {
  /* A flex ITEM inside a section stack, so it has to claim the band itself. */
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: var(--gradient-cinematic);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 26px;
  text-decoration: none;
  color: inherit;
}
.vt-event__lead:hover { text-decoration: none; }
.vt-event__lead--no-media { grid-template-columns: 1fr; }

.vt-event__lead-media { position: relative; display: block; min-height: 420px; overflow: hidden; order: -1; }
.vt-event__lead-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-standard);
}
.vt-event__lead:hover .vt-event__lead-img { transform: scale(1.04); }

.vt-event__lead-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 4vw, 60px);
}
.vt-event__lead-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.vt-event__lead-cat {
  font-size: max(11px, var(--fs-floor, 0px));
  font-weight: var(--fw-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}
.vt-event__lead-date { font-size: 12.5px; color: rgba(255, 255, 255, 0.62); }
.vt-event__lead-title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 14px;
}
.vt-event__lead-place {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 16px;
}
.vt-event__lead-place svg { width: 15px; height: 15px; flex: 0 0 auto; color: rgba(255, 255, 255, 0.8); }
.vt-event__lead-teaser { display: block; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, 0.82); }
.vt-event__lead-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: #fff;
}
.vt-event__lead:hover .vt-event__arrow { transform: translateX(3px); }

@container vt-section (max-width: 860px) {
  .vt-event__lead { grid-template-columns: 1fr; }
  .vt-event__lead-media { min-height: 0; aspect-ratio: 16 / 9; }
}

@container vt-section (max-width: 680px) {
  .vt-event__row { grid-template-columns: 1fr; justify-items: start; gap: 16px; }
  .vt-event__tile { flex-direction: row; gap: 8px; align-items: baseline; min-width: 0; padding: 8px 14px; }
  .vt-event__day { font-size: 20px; }
  .vt-event__year { margin-top: 0; }
}