/* 7TH BREED — device-specific cinematic hero geometry (2026-09-25)
   The viewport determines the stage. Backend media always fills the stage. */
.hero-headline-visual{
  position:relative!important;
  width:100%!important;
  overflow:hidden!important;
  isolation:isolate;
  background:#07162d url('/images/hero/hero-live-poster.webp') center/cover no-repeat!important;
}
.hero-headline-visual .hero-stage-image,
.hero-headline-visual .hero-stage-video-v4,
.hero-headline-visual > video,
.hero-headline-visual > img[data-hero-layer]{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:50% 50%!important;
  transform-origin:center center!important;
}
/* Never let a portrait/square/small source collapse the cinematic frame. */
.hero-stage .hero-visual{min-width:0!important;}

/* Large desktop / ultrawide: broad editorial frame. */
@media (min-width:1440px){
  .hero-stage{grid-template-columns:minmax(0,1fr)!important;gap:clamp(2.25rem,3vw,3.75rem)!important;}
  .hero-stage .hero-visual{width:100%!important;max-width:none!important;margin-inline:auto!important;}
  .hero-headline-visual{height:clamp(36rem,67vh,52rem)!important;min-height:36rem!important;max-height:52rem!important;aspect-ratio:auto!important;border-radius:clamp(1.25rem,1.6vw,2rem)!important;}
}
/* Standard desktop/laptop: wide cinematic composition without consuming the full page. */
@media (min-width:1024px) and (max-width:1439px){
  .hero-stage{grid-template-columns:minmax(0,1fr)!important;gap:clamp(2rem,3.5vw,3.25rem)!important;}
  .hero-stage .hero-visual{width:100%!important;max-width:none!important;margin-inline:auto!important;}
  .hero-headline-visual{height:clamp(31rem,61vh,42rem)!important;min-height:31rem!important;max-height:42rem!important;aspect-ratio:auto!important;border-radius:1.5rem!important;}
}
/* Tablet landscape / iPad Pro landscape. */
@media (min-width:820px) and (max-width:1023px){
  .hero-stage{gap:2rem!important;}
  .hero-stage .hero-visual{width:100%!important;max-width:none!important;margin-inline:auto!important;}
  .hero-headline-visual{height:clamp(27rem,55vh,36rem)!important;min-height:27rem!important;aspect-ratio:auto!important;border-radius:1.35rem!important;}
}
/* Tablet portrait / large foldables: less panoramic, more vertical room for subject matter. */
@media (min-width:640px) and (max-width:819px){
  .hero-stage{gap:1.75rem!important;}
  .hero-stage .hero-visual{width:100%!important;max-width:none!important;}
  .hero-headline-visual{height:clamp(28rem,58vh,35rem)!important;min-height:28rem!important;aspect-ratio:auto!important;border-radius:1.25rem!important;}
}
/* Phones: portrait-first stage. Media still covers the whole hero; it is not letterboxed. */
@media (max-width:639px){
  .hero-stage{gap:1.25rem!important;}
  .hero-stage .hero-visual{width:100%!important;max-width:none!important;margin-inline:0!important;}
  .hero-headline-visual{height:clamp(27rem,66svh,36rem)!important;min-height:27rem!important;max-height:36rem!important;aspect-ratio:auto!important;border-radius:1.1rem!important;}
  .hero-headline-visual .hero-stage-image,
  .hero-headline-visual .hero-stage-video-v4,
  .hero-headline-visual > video,
  .hero-headline-visual > img[data-hero-layer]{object-position:50% 50%!important;}
}
/* Short landscape phones: prioritize usable viewport height. */
@media (max-width:932px) and (orientation:landscape) and (max-height:520px){
  .hero-headline-visual{height:clamp(19rem,78svh,25rem)!important;min-height:19rem!important;max-height:25rem!important;border-radius:1rem!important;}
}
/* Very narrow phones. */
@media (max-width:374px){
  .hero-headline-visual{height:clamp(25rem,64svh,32rem)!important;min-height:25rem!important;border-radius:.9rem!important;}
}
@media (prefers-reduced-motion:reduce){
  .hero-headline-visual .hero-stage-image,
  .hero-headline-visual .hero-stage-video-v4{animation:none!important;transition-duration:.01ms!important;}
}