/* ============================================================
   v2 video hero — shared by the home, training, club and province
   heroes. Generic part: the stage, the poster/video layers, the
   gradient layer and the CTA (with .bf-btn--primary.bf-btn--on-media,
   tokens.css, for the white hover). js/v2/video-hero.js plays the video.

   Opt-in layout .bf-video-hero--foot (home, training): the maquette's
   "text at the foot of the stage, CTA inside it" hero — Web Desktop
   l.57-67 / l.175-184, Web Movil l.66-77 / l.175-185. Each page adds
   its heights, mobile title size, gradient and text widths in its css
   (home-hero.css, training-hero.css). Page knobs, on .bf-video-hero:
     --bf-video-hero-h         desktop stage height cap (default 620px)
     --bf-video-hero-max-h     mobile stage height cap (default 630px)
     --bf-video-hero-lead-max  lead max-width (default none)
   Mobile first; desktop from UIkit @m (960px).
   ============================================================ */

/* Stacking inside the stage: poster and video (0) < gradient (1) < text (2). */
.bf-video-hero__stage {
  position: relative;
  overflow: hidden;
  background: var(--bf-c-black);
}

.bf-video-hero__poster,
.bf-video-hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hidden until it really plays (class set by video-hero.js on 'playing'),
   so the poster shows through while the file downloads. */
.bf-video-hero__video {
  opacity: 0;
  transition: opacity .6s var(--bf-ease);
}

.bf-video-hero__video.is-playing {
  opacity: 1;
}

/* Gradient layer: each page (or --foot) sets its background. */
.bf-video-hero__stage::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

/* Without --foot (the CTA sits on white under the stage on mobile): the in-flow content layer
   sets the stage height — at most --bf-video-hero-max-h, less on short screens so the CTA under
   the stage ends at the bottom of the viewport at load: viewport − country-selector bar − header
   − promo bar − the CTA block (20 padding + 62 button). */
@media (max-width: 959px) {
  .bf-video-hero:not(.bf-video-hero--foot) .bf-video-hero__content {
    position: relative;
    box-sizing: border-box;
    min-height: var(--bf-video-hero-max-h);
    min-height: clamp(360px, calc(100vh - var(--bf-country-h) - var(--bf-header-h) - var(--bf-promo-h) - 82px), var(--bf-video-hero-max-h));
    min-height: clamp(360px, calc(100svh - var(--bf-country-h) - var(--bf-header-h) - var(--bf-promo-h) - 82px), var(--bf-video-hero-max-h));
  }
}

/* Hero CTA (with .bf-btn--primary.bf-btn--on-media): full width on mobile, no glow
   (maquette 19px, 16px 26px mobile / 18px 28px desktop, mt 28 on desktop). */
.bf-video-hero .bf-video-hero__btn {
  width: 100%;
  font-size: 19px;
  padding: 16px 26px;
}

/* Tablet (UIkit @s to @m): the mobile layout on a wider screen, the full-width CTA is capped,
   left-aligned like the text above it. */
@media (min-width: 640px) and (max-width: 959px) {
  .bf-video-hero .bf-video-hero__btn {
    max-width: 480px;
  }
}

@media (min-width: 960px) {
  .bf-video-hero .bf-video-hero__btn {
    width: auto;
    margin-top: 28px;
    padding: 18px 28px;
  }
}

/* ---- Layout --foot: text and CTA at the foot of the stage ---- */

.bf-video-hero--foot {
  --bf-video-hero-h: 620px;
  --bf-video-hero-max-h: 630px;
  --bf-video-hero-lead-max: none;
}

/* Mobile gradient: the home's (pages override it). */
.bf-video-hero--foot .bf-video-hero__stage::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .8) 70%, rgba(0, 0, 0, .95) 100%);
}

/* Mobile: in flow, it sets the stage height — the viewport under the country-selector bar (root
   URL only, 0 elsewhere), the header and the promo bar (0 without one), between 480px and the
   page's cap (maquette: min(630px, 100svh − 58px), min 480). It grows past that when the content
   needs it, so the text is never cut. The ::before spacer pushes the text to the foot.
   Desktop: a full-height layer over a fixed-height stage (@m below). */
.bf-video-hero--foot .bf-video-hero__content {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: var(--bf-video-hero-max-h);
  min-height: clamp(480px, calc(100vh - var(--bf-country-h) - var(--bf-header-h) - var(--bf-promo-h)), var(--bf-video-hero-max-h));
  min-height: clamp(480px, calc(100svh - var(--bf-country-h) - var(--bf-header-h) - var(--bf-promo-h)), var(--bf-video-hero-max-h));
  padding-bottom: 48px;
}

.bf-video-hero--foot .bf-video-hero__content::before {
  content: '';
  flex: 1 0 16px;
}

.bf-video-hero--foot .bf-video-hero__eyebrow {
  margin: 0;
  font: 400 12px/1 var(--bf-font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bf-c-yellow);
}

/* Mobile size per page (maquette: home 62, training 60). */
.bf-video-hero--foot .bf-video-hero__title {
  margin: 0;
  font: 400 60px/.95 var(--bf-font-display);
  text-transform: uppercase;
  color: var(--bf-c-white);
}

.bf-video-hero--foot .bf-video-hero__eyebrow + .bf-video-hero__title {
  margin-top: 12px;
}

.bf-video-hero--foot .bf-video-hero__lead {
  max-width: var(--bf-video-hero-lead-max);
  margin: 16px 0 0;
  font: 400 17px/1.5 var(--bf-font-body);
  color: var(--bf-c-white);
}

.bf-video-hero--foot .bf-video-hero__btn {
  margin-top: 22px;
}

@media (min-width: 960px) {
  /* Maquette: min(<page height>, 100vh − 84px header), min 460. */
  .bf-video-hero--foot .bf-video-hero__stage {
    height: var(--bf-video-hero-h);
    height: min(var(--bf-video-hero-h), calc(100vh - var(--bf-country-h) - var(--bf-header-h-desktop) - var(--bf-promo-h)));
    min-height: 460px;
  }

  .bf-video-hero--foot .bf-video-hero__stage::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .55) 70%, rgba(0, 0, 0, .85) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 60%);
  }

  /* Full-height layer in the container geometry; left/right 0 + max-width keep
     .uk-container centred (content-box: its max-width is a content width). Text
     bottom-aligned, 56px above the stage foot. */
  .bf-video-hero--foot .bf-video-hero__content {
    box-sizing: content-box;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 0;
    padding-bottom: 56px;
  }

  .bf-video-hero--foot .bf-video-hero__eyebrow {
    font-size: 13px;
    letter-spacing: .1em;
  }

  .bf-video-hero--foot .bf-video-hero__title {
    font-size: clamp(56px, 5.4vw, 76px);
  }

  .bf-video-hero--foot .bf-video-hero__eyebrow + .bf-video-hero__title {
    margin-top: 22px;
  }

  .bf-video-hero--foot .bf-video-hero__lead {
    font-size: 22px;
  }

  .bf-video-hero--foot .bf-video-hero__btn {
    margin-top: 28px;
  }
}

/* The script never loads the video under reduced motion; this covers a switch made
   while it is already playing. */
@media (prefers-reduced-motion: reduce) {
  .bf-video-hero__video {
    display: none;
  }
}