/* The movie is vertical 9:16 since 2026-10-13 (owner: "everything in reel format"): the home page shows the vertical
   film in phone-shaped frames. Loaded after launch.css and production.css; it only overrides their 16:9 frames. */

/* First screen: the montage in a phone frame, centered under the header on tablets. */
.hero-film { width: min(420px, calc(100% - 40px)); aspect-ratio: 9 / 16; }
.hero-film img, .hero-film__video { object-position: 50% 50%; }

/* Title card beside the story. */
.spotlight-visual { aspect-ratio: 9 / 16; }

/* Scene clips: three phone frames. */
.scene-media { aspect-ratio: 9 / 16; }

/* The sound comparison: the phone frame beside its caption on wide screens, centered above it on phones. */
.production-media { aspect-ratio: 9 / 16; width: min(72%, 340px); margin-inline: auto; }

@media (min-width: 681px) {
  .product-spotlight { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: stretch; }
  .product-spotlight .spotlight-visual { aspect-ratio: 9 / 16; min-height: 0; }
  .production-showcase { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: center; }
  .production-media { width: 100%; }
}

@media (min-width: 1000px) {
  .cover-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
  .hero-film, .hero-film.is-playing { width: 100%; aspect-ratio: 9 / 16; justify-self: center; }
  .scene-grid { max-width: 920px; margin-inline: auto; }
}

@media (max-width: 680px) {
  /* Full width, as tall as most of the screen: the headline still starts within the first screen on a phone. */
  .hero-film { width: 100%; max-height: 66svh; }
  .product-spotlight .spotlight-visual { width: 70%; justify-self: center; margin-top: 20px; border-radius: 12px; }
  /* Narrower cards so the next clip peeks in, like a reel strip. */
  .scene-grid { grid-auto-columns: 64%; }
}