/* ============================================================
   v2 club finder — search panel, club list and map.
   Source: maquette Web Desktop (1440) / Web Movil (430), the
   "¿Dónde quieres entrenar?" page (sc-if isFind).
   Mobile first; desktop from UIkit @m (960px): two columns, the
   list scrolls inside the left one, the map fills the right one.
   ============================================================ */

.bf-finder {
  background: var(--bf-c-white);
}

.bf-finder p {
  margin: 0;
}

/* ---- Intro: title, lead, search, locate ---- */

.bf-finder__intro {
  padding: 40px 20px 28px;
}

.bf-finder .bf-finder__title {
  margin: 0;
  font: 400 50px/.95 var(--bf-font-display);
  /* Fluid below 390px only: 50px (maquette) from 390 up, ≈ 0.78 × 50 at 320. */
  font-size: clamp(39px, calc((100vw - 2 * var(--bf-gutter)) / 7), 50px);
  text-transform: uppercase;
  color: var(--bf-c-black);
}

/* Per-locale text-fit (es-es is the reference): longer translations keep the es line count,
   the es clamp scaled by a factor. Body class language-{locale} from base_v2. */
@media (max-width: 959px) {
  .language-fr-fr .bf-finder .bf-finder__title {
    font-size: clamp(34px, calc((100vw - 2 * var(--bf-gutter)) / 8.05), 43.5px); /* 0.87 × es */
  }
}

.bf-finder p.bf-finder__lead {
  margin: 14px 0 26px;
  font: 400 16px/1.55 var(--bf-font-body);
  color: var(--bf-c-black);
}

/* Native input until the Places API lands, then <gmp-place-autocomplete id="search-address">:
   both get the same box (55px desktop / 50px mobile with the border). */
.bf-finder .bf-finder__input,
.bf-finder gmp-place-autocomplete::part(input) {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  background: var(--bf-c-white);
  border: 1px solid var(--bf-c-black);
  border-radius: var(--bf-radius-field);
  color: var(--bf-c-black);
  font: 400 16px/1 var(--bf-font-body);
  padding: 16px 14px;
  outline: none;
}

/* Chrome won't let a text input's line box shrink to line-height: 1, so the native input
   would render 3px taller than the element that replaces it: pin it to the host's height. */
.bf-finder .bf-finder__input {
  box-sizing: border-box;
  height: 50px;
}

.bf-finder .bf-finder__input::placeholder,
.bf-finder gmp-place-autocomplete::part(input)::placeholder {
  color: #757575;
  opacity: 1;
}

/* Focus: a single 2px gold edge on the field's own border. The native input thickens its
   1px border with an inset shadow; the Places element draws its own 2px ring (exposed as
   ::part(focus-ring), Google blue by default), which is recoloured instead of adding ours. */
.bf-finder .bf-finder__input:focus-visible {
  outline: none;
  border-color: var(--bf-c-gold);
  box-shadow: inset 0 0 0 1px var(--bf-c-gold);
}

.bf-finder gmp-place-autocomplete::part(focus-ring) {
  border-color: var(--bf-c-gold);
  border-radius: var(--bf-radius-field);
}

/* The element renders its input and icons in a closed shadow root; only the parts Google
   exposes can be styled. The input is laid absolutely over the host so it covers the
   built-in search/back/clear icons (they have no part), as in components.css. */
.bf-finder gmp-place-autocomplete {
  display: block;
  position: relative;
  width: 100%;
  height: 50px;
  background: transparent;
  border: 0;
  border-radius: var(--bf-radius-field);
  padding: 0;
  color-scheme: light;
}

.bf-finder gmp-place-autocomplete::part(input) {
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: 10;
}

/* On small screens Google opens a fullscreen <dialog> once the visitor types, and its back
   button sits under our absolute input: the loader adds .is-typing on the first keystroke
   so the input goes back in flow (same rule as components.css). */
@media (max-width: 599px) {
  .bf-finder gmp-place-autocomplete.is-typing {
    height: auto;
  }

  .bf-finder gmp-place-autocomplete.is-typing::part(input) {
    position: static;
    z-index: auto;
  }
}

.bf-finder gmp-place-autocomplete::part(prediction-list) {
  background: var(--bf-c-white);
  color: var(--bf-c-ink-idle);
  border: 1px solid var(--bf-c-line-light);
  border-radius: var(--bf-radius-field);
  font-family: var(--bf-font-body);
}

.bf-finder gmp-place-autocomplete::part(prediction-item) {
  color: var(--bf-c-ink-idle);
  padding: 10px 14px;
}

.bf-finder gmp-place-autocomplete::part(prediction-item-main-text) {
  color: var(--bf-c-black);
}

.bf-finder gmp-place-autocomplete::part(prediction-item-match) {
  color: var(--bf-c-black);
  font-weight: 600;
}

/* Full-width CTA, no glow; the white/black hover comes from .bf-btn--on-media (tokens.css). */
.bf-finder .bf-finder__locate {
  display: flex;
  width: 100%;
  margin-top: 12px;
  font-size: 20px;
  padding: 18px;
}

/* ---- Maps ---- */

.bf-finder__map {
  position: relative;
  overflow: hidden;
  background: #F1F1E9;
}

.bf-finder__map--mobile {
  height: 220px;
  border-top: 1px solid var(--bf-c-line-light);
  border-bottom: 1px solid var(--bf-c-line-light);
}

.bf-finder__canvas {
  width: 100%;
  height: 100%;
}

.bf-finder__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  color: var(--bf-c-black);
}

/* Same grey tiles as the current finder (components.css). */
.bf-finder .maplibregl-canvas {
  filter: grayscale(1) contrast(.95);
}

/* ---- Results ---- */

.bf-finder__results {
  padding: 22px 20px 48px;
}

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

.bf-finder .bf-finder__list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.bf-finder .bf-finder__item {
  margin: 0;
  padding: 0;
}

.bf-finder__link,
.bf-finder__link:hover {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--bf-c-line-light);
  color: inherit;
  text-decoration: none;
}

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

.bf-finder__text {
  flex: 1;
  min-width: 0;
}

.bf-finder .bf-finder__name {
  margin: 0;
  font: 400 24px/1 var(--bf-font-display);
  text-transform: uppercase;
  color: var(--bf-c-black);
  transition: color var(--bf-dur) var(--bf-ease);
}

/* Set by finder.js on the nearest club / the club whose marker was clicked. */
.bf-finder .bf-finder__item.is-active .bf-finder__name {
  color: var(--bf-c-gold);
}

.bf-finder__address {
  display: block;
  margin-top: 6px;
  font: 400 13px/1.4 var(--bf-font-body);
  color: var(--bf-c-black);
}

.bf-finder__distance {
  font: 900 18px/1 var(--bf-font-numeric);
  color: var(--bf-c-gold);
  white-space: nowrap;
}

/* ---- Map popup (HTML from js/map/openfree-maps.js _buildPopupHtml) ----
   MapLibre's stylesheet is injected after ours: every rule is scoped under .bf-finder to
   win on specificity. MapLibre's own tip is kept; the legacy black tip is hidden. */

.bf-finder .maplibregl-popup-content {
  position: relative;
  padding: 16px 40px 16px 16px;
  background: var(--bf-c-white);
  border-radius: var(--bf-radius-field);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.bf-finder .maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
  border-top-color: var(--bf-c-white);
}

.bf-finder .popup-tip-container {
  display: none;
}

.bf-finder .popup-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  font: 400 22px/28px var(--bf-font-body);
  text-align: center;
  color: var(--bf-c-black);
  text-decoration: none;
  cursor: pointer;
}

.bf-finder .club-list-items-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 200px;
}

.bf-finder .club-list-items-left h5 {
  margin: 0;
  font: 400 22px/1 var(--bf-font-display);
  text-transform: uppercase;
  color: var(--bf-c-black);
}

.bf-finder .club-list-items-left p {
  margin: 6px 0 12px;
  font: 400 13px/1.4 var(--bf-font-body);
  color: var(--bf-c-ink-idle);
}

/* Looks like .bf-btn--primary .bf-btn--sm (the markup comes from a shared script). */
.bf-finder .club-list-items-left .club-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 400 16px/1 var(--bf-font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  background: var(--bf-c-yellow);
  color: var(--bf-c-black);
  border-radius: var(--bf-radius-btn);
  padding: 11px 14px;
  transition: background-color var(--bf-dur) var(--bf-ease), color var(--bf-dur) var(--bf-ease);
}

.bf-finder .club-list-items-left .club-link:hover,
.bf-finder .club-list-items-left .club-link:focus-visible {
  background: var(--bf-c-black);
  color: var(--bf-c-yellow);
}

/* ---- Tablet (UIkit @s to @m, still the mobile layout) ---- */

@media (min-width: 640px) and (max-width: 959px) {
  /* The search field and the CTA stop stretching: left-aligned, at most 480px. */
  .bf-finder .bf-finder__search,
  .bf-finder .bf-finder__locate {
    max-width: 480px;
  }
}

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

@media (min-width: 960px) {
  /* Fills the viewport under the header and the promo bar (0 without one); the maquette's map
     is at least 640px high. */
  .bf-finder {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    height: calc(100vh - var(--bf-header-h-desktop) - var(--bf-promo-h));
    min-height: 640px;
  }

  /* No bottom padding: the list scrolls down to the column's edge and keeps the
     maquette's 72px as its own bottom padding. */
  .bf-finder__panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 72px 48px 0;
    border-right: 1px solid var(--bf-c-line-light);
  }

  .bf-finder__intro {
    flex: none;
    padding: 0;
  }

  .bf-finder .bf-finder__title {
    font-size: 48px;
  }

  .bf-finder p.bf-finder__lead {
    margin: 20px 0 32px;
    font-size: 18px;
    line-height: 1.6;
  }

  .bf-finder .bf-finder__input,
  .bf-finder gmp-place-autocomplete::part(input) {
    font-size: 17px;
    padding: 18px 16px;
  }

  .bf-finder .bf-finder__input {
    height: 55px;
  }

  .bf-finder gmp-place-autocomplete {
    height: 55px;
  }

  .bf-finder gmp-place-autocomplete::part(prediction-item) {
    padding: 12px 16px;
  }

  .bf-finder .bf-finder__locate {
    margin-top: 14px;
    font-size: 21px;
    padding: 20px;
  }

  /* The scroll container (finder.js scrolls it to the active club). It bleeds into the
     panel's 48px side padding so the scrollbar sits on the column edge. */
  .bf-finder__results {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 44px -48px 0;
    padding: 0 48px 72px;
  }

  .bf-finder .bf-finder__list {
    margin-top: 10px;
  }

  .bf-finder__link,
  .bf-finder__link:hover {
    gap: 16px;
    padding: 22px 0;
  }

  .bf-finder .bf-finder__name {
    font-size: 28px;
  }

  .bf-finder__address {
    margin-top: 8px;
    font-size: 14px;
  }

  .bf-finder__distance {
    font-size: 19px;
  }

  .bf-finder__map--desktop {
    height: 100%;
  }
}