/* ==========================================================================
   THE AMERICA AWARDS 2026 — Past Editions page
   Page-specific styles only. Extends the existing token/base/component
   system (tokens.css, base.css, components.css) — never overrides them.
   ========================================================================== */

/* ---------------------------------------------------------------------- *
 * PAGE HERO
 * ---------------------------------------------------------------------- */
.pe-hero {
  padding: calc(var(--space-2xl) + 70px) 0 var(--space-2xl);
  text-align: center;
  background: var(--graphite-950);
  color: var(--ink-on-dark);
}
.pe-hero__inner { max-width: 720px; margin-inline: auto; }
.pe-hero h1 { font-size: var(--step-5); text-wrap: balance; }
.pe-hero__sub {
  margin-top: var(--space-sm);
  font-size: var(--step-1);
  color: var(--ink-on-dark-muted);
  max-width: 58ch;
  margin-inline: auto;
}
.pe-hero__sub + .pe-hero__sub { margin-top: var(--space-sm); }
.pe-hero .hero__actions { justify-content: center; }

/* ---------------------------------------------------------------------- *
 * FEATURED VIDEO — one large, cinematic embed. Native controls only.
 * ---------------------------------------------------------------------- */
.pe-featured { max-width: 980px; margin-inline: auto; }
.pe-video-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--graphite-950);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.45);
}
.pe-video-frame video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: var(--graphite-950);
}
.pe-featured__caption {
  margin-top: var(--space-sm);
  text-align: center;
  font-size: var(--step--1);
  color: var(--text-secondary-muted);
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------- *
 * PAST EDITION VIDEOS — deliberately spacious archive, never a dense grid.
 * ---------------------------------------------------------------------- */
.pe-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  align-items: start;
}
@media (max-width: 900px) {
  .pe-archive-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; gap: var(--space-lg); margin-top: var(--space-lg); }
}

.pe-card { text-align: left; }
.pe-card__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--graphite-950);
}
.pe-card__frame video {
  width: 100%;
  display: block;
  background: var(--graphite-950);
}
.pe-card--wide .pe-card__frame video { aspect-ratio: 16 / 9; }
.pe-card--tall .pe-card__frame { max-width: 320px; margin-inline: auto; }
.pe-card--tall .pe-card__frame video { aspect-ratio: 9 / 16; }

.pe-card__tag {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: 0.3em 0.85em;
  border: 1px solid var(--border-gold);
  border-radius: 2px;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-strong);
}
.pe-card__title {
  margin-top: var(--space-xs);
  font-size: var(--step-1);
}
.pe-card__desc {
  margin-top: 0.35em;
  font-size: var(--step--1);
  color: var(--text-secondary-muted);
}
.pe-card--tall { text-align: center; }
.pe-card--tall .pe-card__tag,
.pe-card--tall .pe-card__title,
.pe-card--tall .pe-card__desc { text-align: center; }

/* ---------------------------------------------------------------------- *
 * EXPERIENCE MOMENTS — concise text list, no imagery (video-only page).
 * ---------------------------------------------------------------------- */
.pe-moments-list {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-lg);
  text-align: center;
  max-width: var(--content-max);
  margin-inline: auto;
}
.pe-moments-list li {
  position: relative;
  padding-left: 1.4em;
  font-size: var(--step-0);
  color: var(--ink-on-dark-muted);
}
.pe-moments-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------------------------------------------------------------------- *
 * HISTORICAL CONNECTION — reuses .hof-preview from components.css
 * ---------------------------------------------------------------------- */
.pe-legacy { max-width: var(--content-narrow); margin-inline: auto; text-align: center; }
.pe-legacy p { margin-top: var(--space-sm); font-size: var(--step-1); color: var(--ink-on-dark-muted); }
.pe-legacy p + p { margin-top: var(--space-sm); }