/* v2 FAQ — redesign 2026. Uses tokens from css/v2/tokens.css.
   Maquette: "Diseño web móvil HTML (4)" Web Desktop / Web Movil, sand "Preguntas frecuentes" /
   "Dudas antes de reservar" section (WD l.352, 502, 634; WM l.372, 511, 630) — training,
   province and club. Items = design system Accordion (_ds_bundle.js "function Accordion"),
   recoloured by the section's variables: text and chevron #000, answer #3A3A3A,
   separators rgba(0,0,0,.18).
   Structure and behaviour come from UIkit (uk-container-bf, uk-accordion);
   this file adds the brand look and the exact maquette spacing.
   Mobile first, desktop from UIkit @m (960px). */

.bf-faq {
  background: var(--bf-c-sand);
}

/* Horizontal geometry comes from .uk-container-bf. */
.bf-faq__grid {
  padding-top: 40px;
  padding-bottom: 48px;
}

/* 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-faq__title {
  margin: 0 0 18px;
  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;
  text-wrap: balance;  /* es-es fits one line (mockup); longer translations split evenly */
  color: var(--bf-c-black);
}

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

/* Per-locale text-fit (es-es is the reference): the es line count at every width, the es clamp
   scaled by a factor. The title differs per page, and so do the overrides: training + province
   (after .bf-train-club / .bf-prov-clubs: "Preguntas frecuentes", 1 line) and club page (after
   .bf-club: "Dudas antes de reservar", 1 line on phones, 2 at 960-1279px, 1 from 1440px).
   Body class language-{locale} from base_v2. it-it club ("Vuoi saperne di più prima di
   prenotare?") would need < 0.75 × es: left at 2 lines (shorter copy needed). */
@media (max-width: 959.98px) {
  .language-en-ie .bf-train-club ~ .bf-faq .bf-faq__title,
  .language-en-ie .bf-prov-clubs ~ .bf-faq .bf-faq__title,
  .language-en-us .bf-train-club ~ .bf-faq .bf-faq__title,
  .language-en-us .bf-prov-clubs ~ .bf-faq .bf-faq__title {
    font-size: clamp(25.5px, calc((100vw - 40px) / 10.8), 32.5px); /* 0.85 × es */
  }

  .language-pt-br .bf-club ~ .bf-faq .bf-faq__title {
    font-size: clamp(28.5px, calc((100vw - 40px) / 9.7), 36px); /* 0.95 × es */
  }

  .language-ca-es .bf-club ~ .bf-faq .bf-faq__title {
    font-size: clamp(28px, calc((100vw - 40px) / 9.9), 35.5px); /* 0.93 × es */
  }

  .language-en-ie .bf-club ~ .bf-faq .bf-faq__title,
  .language-en-us .bf-club ~ .bf-faq .bf-faq__title {
    font-size: clamp(27.5px, calc((100vw - 40px) / 10), 35px); /* 0.92 × es */
  }

  .language-pt-pt .bf-club ~ .bf-faq .bf-faq__title {
    font-size: clamp(27.5px, calc((100vw - 40px) / 10.1), 34.5px); /* 0.91 × es */
  }

  .language-fr-fr .bf-club ~ .bf-faq .bf-faq__title {
    font-size: clamp(22.5px, calc((100vw - 40px) / 12.4), 28.5px); /* 0.74 × es */
  }
}

/* ---- Counter UIkit base: `ul` margin (incl. `* + ul`) and item spacing ---- */

.bf-faq__list.uk-accordion {
  margin: 0;
}

.bf-faq__list.uk-accordion > .bf-faq__item {
  margin-top: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .18);
}

/* ---- Question row ---- */

.bf-faq__question.uk-accordion-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 4px;
  font: 500 15px/1.3 var(--bf-font-body);
  color: var(--bf-c-black);
}

/* Same safety net for a long word in a question: the text may shrink and break beside the chevron. */
.bf-faq__question > span {
  min-width: 0;
  overflow-wrap: break-word;
}

.bf-faq__question.uk-accordion-title:hover,
.bf-faq__question.uk-accordion-title:focus {
  color: var(--bf-c-black);
}

.bf-faq__question.uk-accordion-title:focus-visible {
  outline: 2px solid var(--bf-c-black);
  outline-offset: -2px;
}

/* Chevron replaces UIkit's +/- icon: 18px, polyline "4 7 10 13 16 7" in a
   20×20 viewBox, black stroke 1.7; flips when the item is open. */
.bf-faq__question.uk-accordion-title::before {
  order: 1;
  flex-shrink: 0;
  float: none;
  width: 18px;
  height: 18px;
  margin: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolyline fill='none' stroke='%23000000' stroke-width='1.7' points='4 7 10 13 16 7'/%3E%3C/svg%3E") 50% 50% / 18px 18px no-repeat;
  transition: transform var(--bf-dur);
}

.uk-open > .bf-faq__question.uk-accordion-title::before {
  transform: rotate(180deg);
}

/* ---- Answer (translations are HTML: one <p> per answer) ---- */

.bf-faq__answer.uk-accordion-content {
  margin-top: 0;
  padding: 0 4px 16px;
  font: 300 14px/1.5 var(--bf-font-body);
  color: #3A3A3A;
}

.bf-faq__answer > p {
  margin: 0;
}

.bf-faq__answer > p + p {
  margin-top: 1em;
}

@media (min-width: 960px) {
  .bf-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 64px;
    padding-top: 72px;  /* WD l.353: 72px 48px */
    padding-bottom: 72px;
  }

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

  /* Per-locale text-fit, see the mobile block above. */
  .language-de-de .bf-train-club ~ .bf-faq .bf-faq__title,
  .language-de-de .bf-prov-clubs ~ .bf-faq .bf-faq__title {
    font-size: clamp(37.5px, 3.83vw, 49px); /* 0.94 × es */
  }

  .language-en-ie .bf-train-club ~ .bf-faq .bf-faq__title,
  .language-en-ie .bf-prov-clubs ~ .bf-faq .bf-faq__title,
  .language-en-us .bf-train-club ~ .bf-faq .bf-faq__title,
  .language-en-us .bf-prov-clubs ~ .bf-faq .bf-faq__title,
  .language-fr-fr .bf-club ~ .bf-faq .bf-faq__title {
    font-size: clamp(32px, 3.26vw, 41.5px); /* 0.8 × es */
  }
}