/* 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); }
}