/* hero.css — only in doors that have a real hero image (2026-10-20). Uses the door's tokens; nothing here glows. */
.hero-media { margin: var(--space-5) 0 0; }
.hero-media img { width: 100%; height: auto; }
.hero-media--photo img { aspect-ratio: 4 / 5; max-height: 72svh; object-fit: cover; object-position: var(--hero-pos, 50% 50%); border-radius: var(--radius-2); background: var(--color-surface); }
.hero-media--graphic { margin: 0 0 var(--space-5); }
@media (min-width: 64rem) {
  .hero-media { margin: 0; }
  .hero-media--photo img { max-height: calc(100svh - 9rem); }
  .hero--graphic .wrap { display: block; }
  .hero--graphic .hero-media--graphic { margin: 0 0 var(--space-6); }
}

/* Sized graphic hero: centered, capped width, at or below the asset's native size */
.hero-media--sized picture { display: block; }
.hero-media--sized img { display: block; margin-inline: auto; width: var(--hero-max-phone); max-width: 100%; }
.hero--centered .wrap > div { text-align: center; }
.hero--centered .wrap > div > p { margin-inline: auto; }
.hero--centered .tagline { max-width: 36rem; }
.hero--centered .actions { justify-content: center; }
@media (min-width: 64rem) {
  .hero-media--sized img { width: var(--hero-max-laptop); }
}