/* ============================================================
   v2 training page ("El Entrenamiento") — class, progress, compete
   and club sections.
   Source: maquette Web Desktop (1440) / Web Movil (440).
   Mobile first; desktop from UIkit @m (960px). Layout pieces come
   from UIkit (uk-slider, uk-child-width, uk-visible / uk-hidden);
   this file adds the brand look and the maquette metrics. Every rule
   is scoped under a section class to beat UIkit's heading /
   paragraph / list defaults. Mobile dots: css/v2/slider-dots.css.
   ============================================================ */

/* Shared: photo boxes are fixed frames; the image covers them. */
.bf-train-step__img,
.bf-train-progress__poster,
.bf-train-progress__video,
.bf-train-card__img,
.bf-train-club__img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

/* ---- Class ---- */

.bf-train-class {
  overflow: hidden; /* clips the mobile swipe track that bleeds past the gutters */
  padding: 40px 0 44px;
  background: var(--bf-c-white);
  border-top: 1px solid var(--bf-c-line-light);
}

.bf-train-class .bf-train-class__title {
  margin: 0;
  font: 400 38px/.95 var(--bf-font-display);
  text-transform: uppercase;
  color: var(--bf-c-black);
}

.bf-train-class .bf-train-class__lead {
  margin: 14px 0 0;
  font: 400 16px/1.55 var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-train-class__total-label {
  font: 400 30px/1 var(--bf-font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bf-c-black);
}

.bf-train-class__total-value {
  display: inline-block;
  padding: 5px 10px 1px;
  background: var(--bf-c-yellow);
  font: 700 26px/1 var(--bf-font-numeric);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bf-c-black);
}

/* Mobile: the total sits under the dots, after a hairline. */
.bf-train-class__total--row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--bf-c-line-light);
}

.bf-train-class__track {
  margin-top: 14px;
}

/* UIkit slider track: the gap is a gutter (negative margin + item padding), as uk-grid does. */
.bf-train-class .bf-train-class__steps {
  margin: 0 0 0 -14px;
  padding: 0;
  list-style: none;
}

.bf-train-class .bf-train-step {
  display: flex;
  flex-direction: column;
  padding-left: 14px;
}

.bf-train-step__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bf-c-sand);
}

.bf-train-step__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 16px;
}

.bf-train-class .bf-train-step__name {
  margin: 0;
  font: 400 28px/1 var(--bf-font-display);
  text-transform: uppercase;
  color: var(--bf-c-black);
}

.bf-train-step__mark {
  padding: 0 6px;
  background: var(--bf-c-yellow);
}

.bf-train-step__minutes {
  font: 700 16px/1 var(--bf-font-numeric);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bf-c-gold);
}

.bf-train-class .bf-train-step__text {
  margin: 8px 0 0;
  font: 400 16px/1.5 var(--bf-font-body);
  color: var(--bf-c-black);
}

/* Mobile swipe: cards are 86% of the content width (+ the 14px gutter) and run to the screen
   edge. UIkit's uk-slider-container clips at the gutter: let it overflow, .bf-train-class
   clips instead. */
@media (max-width: 959.98px) {
  .bf-train-class .bf-train-class__track.uk-slider-container {
    overflow: visible;
  }

  .bf-train-class .bf-train-step {
    width: calc((100% - 14px) * .86 + 14px);
  }
}

/* ---- Progress ---- */

.bf-train-progress {
  padding: 44px 0;
  background: var(--bf-c-sand);
  border-top: 1px solid var(--bf-c-line-light);
}

.bf-train-progress .bf-train-progress__title {
  margin: 0;
  font: 400 38px/.95 var(--bf-font-display);
  text-transform: uppercase;
  text-wrap: pretty;
  color: var(--bf-c-black);
}

/* Mobile: full-bleed square under the title. The video fades in over its poster once it
   plays (js/v2/video-hero.js, lazy mode). */
.bf-train-progress__media {
  position: relative;
  aspect-ratio: 1 / 1;
  margin: 24px calc(-1 * var(--bf-gutter)) 0;
  overflow: hidden;
  background: var(--bf-c-sand);
}

.bf-train-progress__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s var(--bf-ease);
}

.bf-train-progress__video.is-playing {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .bf-train-progress__video {
    display: none;
  }
}

.bf-train-progress .bf-train-progress__list {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.bf-train-progress__item {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 20px 0 14px;
  border-top: 1px solid var(--bf-c-line-light);
}

.bf-train-progress__item:last-child {
  padding-bottom: 0;
}

.bf-train-progress__num {
  flex: 0 0 auto;
  font: 900 20px/1 var(--bf-font-numeric);
  color: var(--bf-c-gold);
}

.bf-train-progress .bf-train-progress__item-title {
  margin: 0;
  font: 400 20px/1 var(--bf-font-display);
  text-transform: uppercase;
  color: var(--bf-c-black);
}

.bf-train-progress .bf-train-progress__text {
  margin: 8px 0 0;
  font: 400 15px/1.55 var(--bf-font-body);
  color: var(--bf-c-black);
}

/* Full-width yellow CTA on mobile; hover comes from .bf-btn--primary. */
.bf-train-progress .bf-train-progress__btn {
  display: flex;
  width: 100%;
  margin-top: 24px;
  padding: 19px 18px;
  font-size: 22px;
  white-space: normal;
  text-align: center;
}

/* ---- Compete ---- */

.bf-train-compete {
  overflow: hidden; /* clips the mobile swipe track that bleeds past the gutters */
  padding: 44px 0;
  background: var(--bf-c-white);
  border-top: 1px solid var(--bf-c-line-light);
}

.bf-train-compete .bf-train-compete__title {
  margin: 0;
  font: 400 38px/.95 var(--bf-font-display);
  text-transform: uppercase;
  color: var(--bf-c-black);
}

.bf-train-compete__track {
  margin-top: 16px;
  padding-bottom: 6px;
}

/* UIkit slider track: the gap is a gutter (negative margin + item padding), as uk-grid does. */
.bf-train-compete .bf-train-compete__items {
  margin-left: -12px;
}

.bf-train-compete .bf-train-compete__item {
  display: flex;
  padding-left: 12px;
}

.bf-train-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--bf-c-line-light);
  background: var(--bf-c-white);
}

.bf-train-card__media {
  height: 230px;
  overflow: hidden;
  background: var(--bf-c-sand);
}

.bf-train-card__body {
  padding: 16px;
}

.bf-train-compete .bf-train-card__title {
  margin: 0 0 8px;
  font: 400 24px/1 var(--bf-font-display);
  text-transform: uppercase;
  color: var(--bf-c-black);
}

.bf-train-compete .bf-train-card__text {
  margin: 0;
  font: 400 14px/1.55 var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-train-compete__cta {
  padding-top: 24px;
}

/* Full-width yellow CTA on mobile; hover comes from .bf-btn--primary. */
.bf-train-compete .bf-train-compete__btn {
  display: flex;
  width: 100%;
  padding: 20px 18px;
  font-size: 22px;
  white-space: normal;
  text-align: center;
}

/* Mobile swipe: cards are 86% of the content width (+ the 12px gutter) and run to the screen
   edge. UIkit's uk-slider-container clips at the gutter: let it overflow, .bf-train-compete
   clips instead. */
@media (max-width: 959.98px) {
  .bf-train-compete .bf-train-compete__track.uk-slider-container {
    overflow: visible;
  }

  .bf-train-compete .bf-train-compete__item {
    width: calc((100% - 12px) * .86 + 12px);
  }
}

/* ---- Club ---- */

.bf-train-club {
  background: var(--bf-c-white);
  border-top: 1px solid var(--bf-c-line-light);
}

.bf-train-club__grid {
  display: flex;
  flex-direction: column;
}

/* Mobile: the photo first, full bleed, cropped to 4:3. */
.bf-train-club__media {
  order: -1;
  aspect-ratio: 4 / 3;
  margin: 0 calc(-1 * var(--bf-gutter));
  overflow: hidden;
  background: var(--bf-c-sand);
}

.bf-train-club .bf-train-club__text {
  padding: 30px 0 44px;
}

.bf-train-club .bf-train-club__title {
  margin: 0;
  font: 400 38px/.95 var(--bf-font-display);
  text-transform: uppercase;
  color: var(--bf-c-black);
}

.bf-train-club .bf-train-club__lead {
  margin: 14px 0 24px;
  font: 400 16px/1.55 var(--bf-font-body);
  color: var(--bf-c-black);
}

/* Black-outline secondary CTA, yellow fill on hover (maquette). :hover keeps the idle look
   so UIkit's `a:hover` (blue, underlined) never wins; mouse hover is below. */
.bf-train-club__btn,
.bf-train-club__btn:visited,
.bf-train-club__btn:hover {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 19px 18px;
  background: transparent;
  border: 1px solid var(--bf-c-black);
  border-radius: var(--bf-radius-btn);
  font: 400 21px/1 var(--bf-font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--bf-c-black);
  transition: background-color var(--bf-dur) var(--bf-ease);
}

.bf-train-club__btn:focus-visible {
  outline: 2px solid var(--bf-c-gold);
  outline-offset: 2px;
}

@media (hover: hover) {
  .bf-train-club__btn:hover {
    background: var(--bf-c-yellow);
  }
}

/* Line breaks are tuned to the Spanish copy (es reference, matching the maquette). Longer
   translations left a lone word on the last line (fr / it / pt / en club title, en / it compete
   title…): let the browser avoid it there. Not on es, where it would move the maquette's breaks. */
.bf-v2:not(.language-es-es):not(.language-es-ar):not(.language-es-mx) .bf-train-class__title,
.bf-v2:not(.language-es-es):not(.language-es-ar):not(.language-es-mx) .bf-train-compete__title,
.bf-v2:not(.language-es-es):not(.language-es-ar):not(.language-es-mx) .bf-train-club__title {
  text-wrap: pretty;
}

/* Section titles are fluid below the validated widths: 38px from 390px up on mobile
   ((100vw − the 2 × 20px gutters) / 9.2 = 38px at 390px), smaller only on narrower phones.
   Desktop scales the same way below. A word longer than the line (German compounds) breaks
   instead of overflowing, hyphenated in German only (hyphens would move the validated es
   breaks). Card and step titles get the same safety net. */
.bf-train-class .bf-train-class__title,
.bf-train-progress .bf-train-progress__title,
.bf-train-compete .bf-train-compete__title,
.bf-train-club .bf-train-club__title {
  font-size: clamp(30px, calc((100vw - 40px) / 9.2), 38px);
}

/* Per-locale text-fit (es-es is the reference): the es line count, the es clamp scaled by a
   factor; desktop in the @m block. Body class language-{locale} from base_v2. de-de club title
   ("Das Einzige, worauf du dich verlassen kannst, ist die Lust, wiederzukommen") stays one line
   longer than es on phones and tablet at the ≈ 0.75 floor: shorter copy needed. */
@media (max-width: 959.98px) {
  .language-de-de .bf-train-progress .bf-train-progress__title {
    font-size: clamp(26px, calc((100vw - 40px) / 10.6), 33px); /* 0.87 × es */
  }

  .language-it-it .bf-train-progress .bf-train-progress__title {
    font-size: clamp(22.5px, calc((100vw - 40px) / 12.25), 28.5px); /* 0.75 × es */
  }

  .language-fr-fr .bf-train-compete .bf-train-compete__title {
    font-size: clamp(25.5px, calc((100vw - 40px) / 10.8), 32.5px); /* 0.85 × es */
  }

  .language-de-de .bf-train-club .bf-train-club__title {
    font-size: clamp(22px, calc((100vw - 40px) / 12.4), 28px); /* 0.74 × es */
  }

  .language-fr-fr .bf-train-club .bf-train-club__title {
    font-size: clamp(23.5px, calc((100vw - 40px) / 11.8), 29.5px); /* 0.78 × es */
  }

  .language-es-mx .bf-train-club .bf-train-club__title,
  .language-it-it .bf-train-club .bf-train-club__title {
    font-size: clamp(28px, calc((100vw - 40px) / 9.9), 35.5px); /* 0.93 × es */
  }
}

.bf-train-class__title,
.bf-train-progress__title,
.bf-train-compete__title,
.bf-train-club__title,
.bf-train-step__name,
.bf-train-progress__item-title,
.bf-train-card__title {
  overflow-wrap: break-word;
}

.bf-train-step__name {
  min-width: 0; /* a flex item: lets a long name wrap instead of pushing the minutes out */
}

:lang(de) .bf-train-class__title,
:lang(de) .bf-train-progress__title,
:lang(de) .bf-train-compete__title,
:lang(de) .bf-train-club__title,
:lang(de) .bf-train-step__name,
:lang(de) .bf-train-progress__item-title,
:lang(de) .bf-train-card__title {
  hyphens: auto;
}

/* ---- Tablet (640-959px: the mobile layout on a wider screen) ----
   Two cards per view, plus a peek of the next: each card takes half of the mobile 86%. Media and
   CTAs stop growing at 480px wide and keep their mobile alignment (the compete CTA is centred
   under the centred dots, as on desktop). */
@media (min-width: 640px) and (max-width: 959.98px) {
  .bf-train-class .bf-train-step {
    width: calc((100% - 14px) * .43 + 14px);
  }

  .bf-train-compete .bf-train-compete__item {
    width: calc((100% - 12px) * .43 + 12px);
  }

  .bf-train-progress__media {
    max-width: 480px;
    margin: 24px 0 0;
  }

  .bf-train-progress .bf-train-progress__btn,
  .bf-train-club__btn {
    max-width: 480px;
  }

  .bf-train-compete .bf-train-compete__btn {
    max-width: 480px;
    margin: 0 auto;
  }

  /* The mobile 4:3 crop (sign and people) inside the container, 44px under the section's top
     edge like the other sections' padding. */
  .bf-train-club__media {
    max-width: 480px;
    margin: 44px 0 0;
  }
}

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

@media (min-width: 960px) {
  /* Class */
  .bf-train-class {
    padding: 72px 0;
    border-top: 0;
  }

  .bf-train-class__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 48px;
  }

  .bf-train-class .bf-train-class__title {
    font-size: clamp(40px, 4.07vw, 52px); /* 52px from 1280px up, 40px at 960px */
  }

  .bf-train-class .bf-train-class__lead {
    max-width: 620px;
    margin-top: 20px;
    font-size: 19px;
    line-height: 1.6;
  }

  .bf-train-class__total {
    flex: 0 0 auto;
    text-align: right;
  }

  .bf-train-class__total-label {
    display: block;
    font-size: 13px;
    letter-spacing: .08em;
    color: var(--bf-c-ink-idle);
  }

  .bf-train-class__total-value {
    margin-top: 8px;
  }

  /* 5 columns, gap 16. */
  .bf-train-class__track {
    margin-top: 52px;
  }

  .bf-train-class .bf-train-class__steps {
    margin-left: -16px;
  }

  .bf-train-class .bf-train-step {
    padding-left: 16px;
  }

  .bf-train-step__media {
    aspect-ratio: auto;
    height: 170px;
  }

  .bf-train-class .bf-train-step__name {
    font-size: 24px;
  }

  .bf-train-step__minutes {
    font-size: 14px;
  }

  .bf-train-class .bf-train-step__text {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.55;
  }

  /* Progress: the 3:4 video on the left spanning every row; title and body stacked on the
     right, centred vertically by the two 1fr rows. */
  .bf-train-progress {
    padding: 72px 0;
  }

  .bf-train-progress__grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: clamp(40px, 5vw, 80px);
  }

  .bf-train-progress__media {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: start;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 3 / 4;
    margin: 0;
  }

  .bf-train-progress .bf-train-progress__title,
  .bf-train-progress__body {
    grid-column: 2;
    justify-self: end;
    width: 100%;
    max-width: 640px;
  }

  .bf-train-progress .bf-train-progress__title {
    grid-row: 2;
    margin: 0 0 28px;
    font-size: clamp(40px, 3.6vw, 52px);
  }

  /* Per-locale text-fit, see the mobile block. */
  .language-de-de .bf-train-progress .bf-train-progress__title {
    font-size: clamp(37px, 3.31vw, 48px); /* 0.92 × es */
  }

  .language-it-it .bf-train-progress .bf-train-progress__title {
    font-size: clamp(39px, 3.5vw, 50.5px); /* 0.97 × es */
  }

  .bf-train-progress__body {
    grid-row: 3;
  }

  .bf-train-progress .bf-train-progress__list {
    margin: 0;
    border-bottom: 1px solid var(--bf-c-line-light);
  }

  .bf-train-progress__item,
  .bf-train-progress__item:last-child {
    gap: 18px;
    padding: 22px 0;
  }

  .bf-train-progress__num {
    font-size: 22px;
  }

  .bf-train-progress .bf-train-progress__item-title {
    font-size: 24px;
  }

  .bf-train-progress .bf-train-progress__btn {
    display: inline-flex;
    width: auto;
    margin-top: 28px;
    padding: 20px 32px;
    font-size: 21px;
    white-space: nowrap;
  }

  /* Compete */
  .bf-train-compete {
    padding: 72px 0;
  }

  .bf-train-compete .bf-train-compete__title {
    margin-top: 18px;
    font-size: clamp(40px, 4.07vw, 52px);
  }

  /* UIkit's slider container clips exactly at the cards' bottom edge, which can eat their 1px
     border at a fractional DPR (same fix as css/v2/reviews.css). */
  .bf-train-compete .bf-train-compete__track {
    margin-top: 52px;
    margin-bottom: -1px;
    padding-bottom: 1px;
  }

  /* 3 items fill the row: the maquette's 3-column grid, gap 24. */
  .bf-train-compete .bf-train-compete__items {
    margin-left: -24px;
  }

  .bf-train-compete .bf-train-compete__item {
    padding-left: 24px;
  }

  .bf-train-card__media {
    height: 240px;
  }

  .bf-train-card__body {
    padding: 26px 24px 30px;
  }

  .bf-train-compete .bf-train-card__title {
    margin-bottom: 12px;
    font-size: 30px;
  }

  .bf-train-compete .bf-train-card__text {
    font-size: 16px;
    line-height: 1.6;
  }

  .bf-train-compete__cta {
    display: flex;
    justify-content: center;
    padding-top: 56px;
  }

  .bf-train-compete .bf-train-compete__btn {
    display: inline-flex;
    width: auto;
    padding: 22px 40px;
    white-space: nowrap;
  }

  /* Club: inside the container, text left, 4:5 photo right. */
  .bf-train-club {
    padding: 72px 0;
  }

  .bf-train-club__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 34vw, 440px);
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
  }

  .bf-train-club__media {
    order: 0;
    aspect-ratio: 4 / 5;
    margin: 0;
  }

  .bf-train-club .bf-train-club__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
  }

  .bf-train-club .bf-train-club__title {
    font-size: clamp(40px, 4.07vw, 52px);
  }

  /* Per-locale text-fit, see the mobile block. */
  .language-de-de .bf-train-club .bf-train-club__title {
    font-size: clamp(29px, 2.97vw, 38px); /* 0.73 × es */
  }

  .language-es-mx .bf-train-club .bf-train-club__title {
    font-size: clamp(37px, 3.79vw, 48.5px); /* 0.93 × es */
  }

  .bf-train-club .bf-train-club__lead {
    max-width: 540px;
    margin: 20px 0 36px;
    font-size: 19px;
    line-height: 1.6;
  }

  .bf-train-club__btn,
  .bf-train-club__btn:visited,
  .bf-train-club__btn:hover {
    align-self: flex-start;
    width: auto;
    padding: 20px 30px;
  }
}