/* /event only — short hero that hands straight over to the video. */

.ev-hero { padding-block: clamp(40px, 5vw, 80px) clamp(40px, 4vw, 64px); }
.ev-hero__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--s-12) var(--s-16); align-items: end; }
.ev-hero__text { display: grid; gap: var(--s-6); justify-items: start; }
.ev-hero h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); max-width: 15ch; }
.ev-hero h1 .accent { color: var(--terracotta-ink); }
.ev-hero__lede { font-size: var(--text-lg); line-height: 1.45; color: var(--ink-soft); max-width: 34ch; font-family: var(--font-serif); }
.ev-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-8); margin-top: var(--s-2); }
.ev-hero__actions .text-link { font-size: var(--text-sm); color: var(--ink-soft); }
.ev-hero__portrait { max-width: 360px; justify-self: end; width: 100%; }

.ev-vsl { padding-bottom: var(--section-y); }
.ev-vsl__head { padding-top: var(--s-4); border-top: 1px solid var(--rule-strong); margin-bottom: var(--s-6); }

@media (max-width: 767px) {
  .ev-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  /* On phones the portrait shrinks to a compact strip so the video stays near the top. */
  .ev-hero__portrait { order: -1; justify-self: stretch; max-width: none; aspect-ratio: 16 / 7; }
  .ev-hero__portrait .portrait__silhouette { left: auto; right: 6%; width: 38%; height: 92%; }
  .ev-hero__portrait .portrait__note { display: none; }
  .ev-hero__portrait.portrait--photo { aspect-ratio: 4 / 3; }
  .ev-hero__portrait.portrait--photo img { object-position: 64% 42%; }
  .ev-hero__actions { width: 100%; }
  .ev-hero__actions .btn { width: 100%; }
}