/* ============================================================
   v2 reviews — rating band + review cards.
   Source: maquette Web Desktop (1440) / Web Movil (430), the black
   "Somos el entrenamiento más recomendado" band and the
   "Más que reseñas / Experiencias reales" block.
   Mobile first; desktop from UIkit @m (960px).
   ============================================================ */

.bf-reviews {
  overflow: hidden; /* clips the mobile swipe track that bleeds past the gutters */
}

.bf-reviews p {
  margin: 0;
}

/* ---- Rating band ---- */

.bf-reviews__band {
  background: var(--bf-c-black);
}

.bf-reviews__band-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 0;
}

.bf-reviews__note {
  font: 900 42px/1 var(--bf-font-numeric, sans-serif);
  color: var(--bf-c-yellow);
}

.bf-reviews__band-stars {
  font-size: 14px;
  color: var(--bf-c-yellow);
}

/* SVG stars, band and cards alike (user's reference): 12.8px glyphs 2.6px apart at 14px, on a
   1em-high row like the maquette's `line-height: 1` text. The viewBox is cropped to the ink,
   so the gap is the whole spacing. */
.bf-reviews__band-stars,
.bf-reviews__stars-row {
  display: flex;
  gap: .1857em;
  height: 1em;
}

.bf-reviews__star {
  display: block;
}

.bf-reviews__star-shape {
  display: block;
  width: .9143em;
  height: 1em;
  fill: currentColor;
}

.bf-reviews p.bf-reviews__band-title {
  margin-top: 8px;
  font: 400 18px/1.1 var(--bf-font-display);
  /* Shrinks below ~400px so the es-es title stays on one line down to 360px (the space left
     beside the note grows by 1px per px of viewport); 18px as in the maquette from ~403px. */
  font-size: clamp(14px, calc(6.2vw - 7px), 18px);
  text-transform: uppercase;
  color: var(--bf-c-white);
}

/* ---- Cards block ---- */

.bf-reviews__body {
  padding: 40px 0 44px;
  background: var(--bf-c-white);
}

.bf-reviews__overline {
  font: 400 12px/1 var(--bf-font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bf-c-ink-idle);
}

/* Fluid below the validated widths: 38px from 390px up ((100vw − the 2 × 20px gutters) / 9.2
   = 38px at 390px), smaller only on narrower phones; desktop scales the same way. A word longer
   than the line breaks instead of overflowing, hyphenated in German only (hyphens would move
   the validated es breaks). */
.bf-reviews .bf-reviews__title {
  margin: 12px 0 0;
  font: 400 38px/.95 var(--bf-font-display);
  font-size: clamp(30px, calc((100vw - 40px) / 9.2), 38px);
  overflow-wrap: break-word;
  text-transform: uppercase;
  color: var(--bf-c-black);
}

:lang(de) .bf-reviews .bf-reviews__title {
  hyphens: auto;
}

/* Per-locale text-fit (es-es is the reference), province page only (the booking page has its
   own reviews section): one line like es on phones, 0.8 × the es clamp. */
@media (max-width: 959.98px) {
  .language-it-it .bf-prov-clubs ~ .bf-reviews .bf-reviews__title {
    font-size: clamp(24px, calc((100vw - 40px) / 11.5), 30.5px);
  }
}

.bf-reviews__slider {
  margin-top: 16px;
}

.bf-reviews__track {
  padding-bottom: 6px;
}

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

.bf-reviews .bf-reviews__item {
  display: flex;
  padding-left: 12px;
}

.bf-reviews__card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--bf-c-line-light);
  padding: 16px;
}

/* The cards share the row's height: the signature sits at the bottom of each card, aligned
   across the row whatever the text length (the text's bottom margin stays the minimum gap). */
.bf-reviews .bf-reviews__card > .bf-reviews__author,
.bf-reviews .bf-reviews__card > .bf-reviews__sign {
  margin-top: auto;
}

.bf-reviews__stars {
  font-size: 13px;
  color: var(--bf-c-gold);
}

.bf-reviews__star--off {
  color: var(--bf-c-grey-200);
}

.bf-reviews p.bf-reviews__text {
  margin: 12px 0 14px;
  font: 400 14px/1.55 var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-reviews__author {
  font: 500 13px/1.2 var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-reviews__club {
  font: 400 11px/1.2 var(--bf-font-body);
  color: var(--bf-c-black);
}

/* Mobile swipe: cards are 86% of the content width (+ the 12px gutter), starting on the 20px
   gutter, black dots under them (css/v2/slider-dots.css). UIkit's uk-slider-container
   (overflow: hidden) would clip the cards at the gutter; the maquette lets them run to the
   screen edge (.bf-reviews clips instead). */
@media (max-width: 959.98px) {
  .bf-reviews .bf-reviews__track.uk-slider-container {
    overflow: visible;
  }

  .bf-reviews .bf-reviews__item {
    width: calc((100% - 12px) * .86 + 12px);
  }

  /* Every card the same height: the text holds exactly 5 lines at 14px/1.55 (the maquette's 3
     + 2, user request), clamped with "…"; stars and author stay in flow above and below it. */
  .bf-reviews p.bf-reviews__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    height: calc(5em * 1.55);
  }
}

/* Tablet (640-959px, the mobile layout on a wider screen): two cards per view plus a peek of the
   next, each card half of the mobile 86%. */
@media (min-width: 640px) and (max-width: 959.98px) {
  .bf-reviews .bf-reviews__item {
    width: calc((100% - 12px) * .43 + 12px);
  }
}

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

@media (min-width: 960px) {
  .bf-reviews__band-inner {
    gap: 28px;
    padding: 44px 0;
  }

  .bf-reviews__note {
    font-size: 64px;
  }

  .bf-reviews__band-body {
    display: flex;
    align-items: center;
    gap: 28px;
  }

  .bf-reviews__band-stars {
    font-size: 18px;
  }

  .bf-reviews p.bf-reviews__band-title {
    margin-top: 0;
    font-size: 40px;
    line-height: .98;
  }

  .bf-reviews__body {
    padding: 72px 0;
    border-bottom: 1px solid var(--bf-c-line-light);
  }

  .bf-reviews__overline {
    font-size: 13px;
  }

  .bf-reviews .bf-reviews__title {
    margin-top: 16px;
    font-size: clamp(40px, 4.07vw, 52px); /* 52px from 1280px up, 40px at 960px */
  }

  .bf-reviews__slider {
    margin-top: 48px;
  }

  /* UIkit's slider container clips (overflow: hidden) exactly at the cards' bottom edge. At a
     fractional height and a non-integer device pixel ratio (1.25) the clip rounds up and eats
     their 1px bottom border: 1px of padding moves the clip below it, the negative margin gives
     that pixel back so nothing after the slider moves (two classes to beat UIkit's
     `.uk-container > :last-child { margin-bottom: 0 }`). */
  .bf-reviews .bf-reviews__track {
    margin-bottom: -1px;
    padding-bottom: 1px;
  }

  /* 3 items fill the row: same card widths as the maquette's 3-column grid, gap 20. */
  .bf-reviews .bf-reviews__items {
    margin-left: -20px;
  }

  .bf-reviews .bf-reviews__item {
    padding-left: 20px;
  }

  .bf-reviews__card {
    padding: 26px;
  }

  .bf-reviews__stars {
    font-size: 14px;
  }

  .bf-reviews p.bf-reviews__text {
    margin: 16px 0 20px;
    font-size: 16px;
    line-height: 1.6;
  }

  .bf-reviews__author {
    font-size: 14px;
    line-height: 1.3;
  }

  .bf-reviews__club {
    font-size: 13px;
    line-height: 1.3;
  }
}

/* ============================================================
   "proof" variant (training page): no band, sand background, the
   title next to a white score box, white cards signed with the
   review date. Source: maquette Web Desktop / Web Movil, the
   "Te lo contamos nosotros, te lo confirman ellos" block.
   ============================================================ */

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

/* Mobile: "Te lo contamos nosotros," (es-es first line) must hold on one line. It measures
   9.706px of text per px of font-size: 9.9 leaves a margin inside the two gutters; capped at
   the maquette's 38px. Desktop sets its own size below. */
.bf-reviews--proof .bf-reviews__title {
  margin: 0;
  font-size: min(38px, calc((100vw - 2 * var(--bf-gutter)) / 9.9));
}

/* Longer translations (fr / pt-pt) left a lone word on the last line; es keeps the maquette's
   breaks (see css/v2/training.css). */
.bf-v2:not(.language-es-es):not(.language-es-ar):not(.language-es-mx) .bf-reviews--proof .bf-reviews__title {
  text-wrap: pretty;
}

/* Mobile, same calibration as es for the longest line of the longer translations (text width
   per px of font-size: fr "Ce sont eux qui le confirment" 11.315, pt-pt "Somos nós que te
   contamos," 10.666, + the same ~2% margin), so each holds its 2 lines. */
@media (max-width: 959.98px) {
  .bf-v2.language-fr-fr .bf-reviews--proof .bf-reviews__title {
    font-size: min(38px, calc((100vw - 2 * var(--bf-gutter)) / 11.55));
  }

  .bf-v2.language-pt-pt .bf-reviews--proof .bf-reviews__title {
    font-size: min(38px, calc((100vw - 2 * var(--bf-gutter)) / 10.9));
  }
}

/* Score box: full width under the title on mobile. */
.bf-reviews__score {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--bf-c-white);
  border: 1px solid var(--bf-c-line-light);
}

.bf-reviews--proof .bf-reviews__note {
  font-size: 40px;
  color: var(--bf-c-gold);
}

/* Same calibrated SVG stars as the band and the cards. */
.bf-reviews__score-stars {
  display: flex;
  gap: .1857em;
  height: 1em;
  font-size: 14px;
  color: var(--bf-c-gold);
}

.bf-reviews p.bf-reviews__count {
  margin-top: 5px;
  font: 400 13px/1.3 var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-reviews--proof .bf-reviews__card {
  background: var(--bf-c-white);
}

/* Mobile signature: initial avatar (no author photo in the data), name over date. */
.bf-reviews__sign {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bf-reviews__avatar {
  display: flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .12);
  font: 500 14px/1 var(--bf-font-body);
  text-transform: uppercase;
  color: var(--bf-c-black);
}

.bf-reviews--proof .bf-reviews__author {
  min-width: 0;
}

.bf-reviews__date {
  display: block;
  margin-top: 3px;
  font: 400 11px/1.2 var(--bf-font-body);
  color: var(--bf-c-black);
}

@media (min-width: 960px) {
  .bf-reviews--proof .bf-reviews__body {
    padding: 72px 0;
    border-bottom: 0;
  }

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

  .bf-reviews--proof .bf-reviews__title {
    max-width: 680px;
    margin: 0;
    font-size: clamp(40px, 4.07vw, 52px);
  }

  .bf-reviews__score {
    flex: 0 0 auto;
    gap: 16px;
    margin-top: 0;
    padding: 18px 22px;
  }

  .bf-reviews--proof .bf-reviews__note {
    font-size: 48px;
  }

  .bf-reviews__score-stars {
    font-size: 16px;
  }

  .bf-reviews p.bf-reviews__count {
    margin-top: 6px;
    font-size: 14px;
  }

  .bf-reviews--proof .bf-reviews__slider {
    margin-top: 40px;
  }

  /* Desktop signature: "Name · date" on one line. */
  .bf-reviews__sign {
    display: block;
  }

  .bf-reviews__date {
    display: inline;
    margin-top: 0;
    font-size: 13px;
    line-height: 1.3;
  }
}