/* /vsl — hero + video. Kun body.bv-vsl-page; homepage røres ikke. */

/* Mindre vertikal luft mellom tittel / undertekst / video (default .bv-hero__content-gap er stor). */
body.bv-vsl-page main > .bv-hero .bv-hero__content {
  gap: clamp(var(--space-4), 2.6vw, var(--space-7));
}

body.bv-vsl-page main > .bv-hero #bv-vsl-subheading.bv-hero__subtitle {
  margin-block: var(--space-2) var(--space-4);
  padding-inline: clamp(var(--space-3), 3vw, var(--space-6));
}

/*
 * Brede skjermer: video-slot vokser vertikalt mellom undertekst og logoer; video 16:9
 * begrenses av slot-høyde (container) så logo-spinner ikke skyves ut av bildet.
 */
body.bv-vsl-page main > .bv-hero .bv-vsl-hero__video-slot {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  padding-inline: clamp(var(--space-2), 2.4vw, var(--space-5));
  padding-block: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  container-name: bv-vsl-hero-video;
  container-type: size;
}

/* Sikre nok slot-høyde slik at video ikke krymper mer enn nødvendig (cqh for lav → smal 16:9). */
@media (min-width: 721px) {
  body.bv-vsl-page main > .bv-hero .bv-vsl-hero__video-slot {
    min-height: clamp(240px, min(44svh, calc(92vw * 9 / 16)), 560px);
  }
}

/* Uten container-query-støtte: full bredde opp til gammel 880-cap */
body.bv-vsl-page main > .bv-hero .bv-vsl-hero__video-slot .bv-shine-frame {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  flex-shrink: 1;
  min-width: 0;
  box-sizing: border-box;
}

@container bv-vsl-hero-video (min-width: 0px) {
  body.bv-vsl-page main > .bv-hero .bv-vsl-hero__video-slot .bv-shine-frame {
    /* Bred nok til 16:9 innenfor slot-høyde (100cqh); slot får min-height over så cqh ikke blir for lav */
    width: min(100cqw, calc(100cqh * 16 / 9));
    max-width: min(100cqw, calc(100cqh * 16 / 9));
  }
}

/* .bv-hero-logos { margin-top: auto } + flex:1-slot konkurrerer — kun gap mellom video og logoer */
body.bv-vsl-page main > .bv-hero .bv-hero-logos.bv-vsl-section__hero-logos {
  margin-top: 0;
}

/* Behold VSL-typografi (større ord) + samme kicker-tetthet som .bv-hero__title på forsiden */
body.bv-vsl-page main > .bv-hero #bv-vsl-heading.bv-hero__title {
  margin: calc(-1 * var(--space-5)) auto 0;
}

body.bv-vsl-page main > .bv-hero {
  scroll-margin-top: calc(var(--bv-home-nav-offset) + 12px);
}

/*
 * Fallback når container queries mangler (eldre motorer): grov høydebegrensning som før.
 */
@supports not (container-type: size) {
  /* Kun bredere skjermer — smal layout styres av @media (max-width: 720px) nederst */
  @media (max-height: 820px) and (min-width: 721px) {
    body.bv-vsl-page main > .bv-hero .bv-vsl-hero__video-slot .bv-shine-frame {
      width: min(100%, 880px, calc(36svh * 16 / 9));
      max-width: min(880px, calc(36svh * 16 / 9));
    }
  }

  @media (max-height: 700px) and (min-width: 721px) {
    body.bv-vsl-page main > .bv-hero .bv-vsl-hero__video-slot .bv-shine-frame {
      width: min(100%, 880px, calc(30svh * 16 / 9));
      max-width: min(880px, calc(30svh * 16 / 9));
    }
  }

  @media (max-height: 560px) and (min-width: 721px) {
    body.bv-vsl-page main > .bv-hero .bv-vsl-hero__video-slot .bv-shine-frame {
      width: min(100%, 880px, calc(26svh * 16 / 9));
      max-width: min(880px, calc(26svh * 16 / 9));
    }
  }
}

/*
 * Smale skjermer (sist i fila — overstyrer @supports-fallback): ikke tvungen full viewport-høyde;
 * logoer følger innholdet; booking kan synes under når det er plass. Video caps mot 100svh.
 */
@media (max-width: 720px) {
  body.bv-vsl-page main > .bv-hero {
    min-height: 0;
  }

  body.bv-vsl-page main > .bv-hero .bv-hero__content {
    flex: 0 1 auto;
    gap: clamp(var(--space-2), 1.8vw, var(--space-4));
  }

  body.bv-vsl-page main > .bv-hero .bv-vsl-hero__video-slot {
    flex: 0 1 auto;
    flex-grow: 0;
    container-type: normal;
    container-name: none;
  }

  /*
   * Reserver mindre «luft» til nav+tittel+undertekst+logo enn før (mykere clamp),
   * slik at mer av 100svh kan brukes til video-bredde uten å bryte 16:9 mot høyden.
   */
  body.bv-vsl-page main > .bv-hero .bv-vsl-hero__video-slot .bv-shine-frame {
    width: min(
      100%,
      880px,
      calc((100svh - clamp(9.5rem, 26svh, 14.5rem)) * 16 / 9)
    );
    max-width: min(
      880px,
      calc((100svh - clamp(9.5rem, 26svh, 14.5rem)) * 16 / 9)
    );
  }
}