/* Image hero — V0.1 Case Studies 62:2933: 700 tall, pill at y50, headline at y250,
   subline 34px at y481, black overlay at 30%. */
.block--media-hero {
  position: relative; overflow: clip; isolation: isolate; /* clip, not hidden: hidden would make this the scroll container for view() */
  display: flex; min-height: 700px;
  --mh-overlay: 0.3;
}
.block--media-hero.media-hero--md { min-height: 540px; }
.block--media-hero.media-hero--screen { min-height: calc(100svh - var(--nav-height)); }
.block--media-hero.media-hero--light { --mh-overlay: 0.18; }
.block--media-hero.media-hero--strong { --mh-overlay: 0.5; }

.block--media-hero .media-hero__bg { position: absolute; inset: 0; z-index: -1; }
.block--media-hero .media-hero__bg::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / var(--mh-overlay)); }
.block--media-hero .media-hero__settle,
.block--media-hero .media-hero__media { position: absolute; inset: 0; }
.block--media-hero .media-hero__media { background: var(--surface-page); }
.block--media-hero .media-hero__media > img,
.block--media-hero .media-hero__media > video { width: 100%; height: 100%; object-fit: cover; }

.block--media-hero .media-hero__inner {
  display: flex; flex-direction: column;
  padding-top: 50px; padding-bottom: var(--space-80);
}
.block--media-hero .media-hero__title { margin-block: auto; padding-top: var(--space-40); }
.block--media-hero .media-hero__headline { max-width: 15em; letter-spacing: -0.06em; line-height: 1.1; }
/* V0.1: subline is Ekstra 34 — between Display/6 (28) and Display/5 (40). */
.block--media-hero .media-hero__subline { margin-top: var(--space-32); font-size: clamp(var(--fs-display-6), 2.7vw, 34px); letter-spacing: -0.06em; }
.block--media-hero .tag--eyebrow { border-width: 1.5px; }

/* Motion: slow settle on load, then a gentle drift as the hero scrolls away. */
@keyframes media-hero-settle { from { transform: scale(1.12); } to { transform: none; } }
@keyframes media-hero-drift { to { transform: translate3d(0, 18%, 0); } }
.block--media-hero .media-hero__settle { animation: media-hero-settle 2.8s var(--ease-out) both; }
@supports (animation-timeline: view()) {
  .block--media-hero .media-hero__bg { animation: media-hero-drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
}

@media (max-width: 767px) {
  /* The cover (mobile experience, 2026-09-30): the picture fills most of the first screen,
     the headline sits low and scales with the phone like every page hero's. */
  .block--media-hero { min-height: calc(78svh - var(--nav-height)); }
  .block--media-hero.media-hero--md { min-height: 420px; }
  .block--media-hero .media-hero__inner { padding-top: var(--space-32); padding-bottom: var(--space-48); }
  .block--media-hero .media-hero__title { margin-top: auto; margin-bottom: 0; }
  .block--media-hero .media-hero__headline { font-size: clamp(40px, 12.5vw, 56px); }
  .block--media-hero .media-hero__subline { margin-top: var(--space-16); }
}