/* ============================================================
   v2 training page — video hero.
   Source: maquette Web Desktop (1440) l.175-184 / Web Movil (440)
   l.175-185, sc-if isTrain.
   The stage, video, layout (--foot), eyebrow and CTA come from
   css/v2/video-hero.css (shared); this file sets the training heights,
   mobile gradient and text sizes.
   Mobile first; desktop from UIkit @m (960px).
   ============================================================ */

/* Stage caps: min(580px, viewport under the header) desktop, 630px mobile (video-hero.css). */
.bf-train-hero {
  --bf-video-hero-h: 580px;
  --bf-video-hero-max-h: 630px;
}

.bf-train-hero .bf-train-hero__stage::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, .85) 76%, rgba(0, 0, 0, .95) 100%);
}

/* Mobile title: 60px, "Intensidad<br>que da gusto" (the shared default size). Longer
   translations whose second line overflows the column at 60px: fluid size, capped at 60px, so
   it fits the content width (viewport − 2 gutters); R = line width at 60px / 60. */
@media (max-width: 959px) {
  .language-de-de .bf-train-hero .bf-train-hero__title {
    font-size: min(60px, calc((100vw - 2 * var(--bf-gutter)) / 5.95));
  }

  .language-en-ie .bf-train-hero .bf-train-hero__title,
  .language-en-us .bf-train-hero .bf-train-hero__title {
    font-size: min(60px, calc((100vw - 2 * var(--bf-gutter)) / 5.93));
  }

  .language-fr-fr .bf-train-hero .bf-train-hero__title {
    font-size: min(60px, calc((100vw - 2 * var(--bf-gutter)) / 6.85));
  }

  .language-it-it .bf-train-hero .bf-train-hero__title {
    font-size: min(60px, calc((100vw - 2 * var(--bf-gutter)) / 6.3));
  }

  .language-es-mx .bf-train-hero .bf-train-hero__title {
    font-size: min(60px, calc((100vw - 2 * var(--bf-gutter)) / 5.9));
  }
}

/* ---- Desktop ---- */

@media (min-width: 960px) {
  .bf-train-hero {
    --bf-video-hero-lead-max: 590px;
  }

  /* The shared two-layer desktop gradient (video-hero.css), over the mobile one above. */
  .bf-train-hero .bf-train-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%);
  }

  .bf-train-hero .bf-train-hero__lead {
    font-size: 21px;
  }

  /* One line on desktop (maquette); the <br> is the mobile break. */
  .bf-train-hero__title br {
    display: none;
  }
}