/* ============================================================
   v2 club landing — photo hero.
   Source: maquette Web Desktop l.516-528 / Web Movil l.521-533,
   sc-if isClub.
   The stage, photo layer, the .bf-video-hero--foot layout (text and CTA
   at the foot of the stage), the eyebrow / title / lead and the CTA come
   from css/v2/video-hero.css (shared with the home and training heroes;
   the photo uses the poster class, there is no video). This file sets
   the club knobs and sizes and the club-only parts.
   Mobile first; desktop from UIkit @m (960px).
   ============================================================ */

/* Stage caps: desktop min(580px, viewport) (WD l.516), mobile min(630px, viewport) (WM l.521,
   the shared default). */
.bf-club-hero {
  --bf-video-hero-h: 580px;
  --bf-video-hero-lead-max: 600px;
}

/* Mobile gradient (WM l.523): .85 at 74%, darker than the shared default. Desktop keeps the
   shared two-layer gradient, which is the club's (WD l.518). */
@media (max-width: 959px) {
  .bf-club-hero .bf-video-hero__stage::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .85) 74%, rgba(0, 0, 0, .95) 100%);
  }
}

/* Preopening offer ("Oferta de preapertura: Hasta <month>"), above the eyebrow. */
.bf-club-hero .bf-club-hero__badge {
  margin: 0 0 16px;
  padding: 6px 10px 5px;
  font: 400 15px/1 var(--bf-font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bf-c-black);
  background: var(--bf-c-yellow);
  border-radius: var(--bf-radius-btn);
}

/* 54px in the maquette (440 column), where "Brooklyn Fitboxing" just fills the line: scaled
   down with the viewport so the title keeps its two lines (brand / club) on narrower phones. */
.bf-club-hero .bf-club-hero__title {
  font-size: 54px;
  font-size: clamp(40px, calc(13.5vw - 5.6px), 54px);
}

.bf-club-hero__accent {
  color: var(--bf-c-yellow);
}

/* Closed state: notice and "find another club" lines under the first one. */
.bf-club-hero .bf-club-hero__lead + .bf-club-hero__lead {
  margin-top: 10px;
}

/* CTA block: full width on mobile (button stretched, gift line centred under it, WM l.528-531). */
.bf-club-hero__action {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

/* Tablet: the CTA is capped at 480px (css/v2/video-hero.css), the block too so the gift line
   stays centred under it. */
@media (min-width: 640px) and (max-width: 959px) {
  .bf-club-hero__action {
    max-width: 480px;
  }
}

/* The CTA holds a price (struck + promo with a promo): it may wrap on narrow screens,
   never inside the price. Its label is one <span>, so .bf-btn's flex does not split the
   text and the price into two items. */
.bf-club-hero .bf-club-hero__btn {
  white-space: normal;
  text-align: center;
}

.bf-club-hero__price {
  white-space: nowrap;
}

.bf-club-hero__old-price {
  margin-right: .15em;
  opacity: .55;
  text-decoration-thickness: 2px;
}

.bf-club-hero .bf-club-hero__gift {
  margin: 12px 0 0;
  font: 400 14px/1.4 var(--bf-font-body);
  color: var(--bf-c-white);
  text-align: center;
}

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

@media (min-width: 960px) {
  .bf-club-hero .bf-club-hero__badge {
    margin-bottom: 22px;
    font-size: 17px;
  }

  .bf-club-hero .bf-club-hero__title {
    font-size: clamp(56px, 5.4vw, 76px);
  }

  /* WD l.522: 21px (the shared desktop lead is 22). */
  .bf-club-hero .bf-club-hero__lead {
    font-size: 21px;
  }

  .bf-club-hero .bf-club-hero__lead + .bf-club-hero__lead {
    margin-top: 12px;
  }

  .bf-club-hero__action {
    align-items: flex-start;
    align-self: auto;
  }

  .bf-club-hero .bf-club-hero__btn {
    white-space: nowrap;
  }

  .bf-club-hero .bf-club-hero__gift {
    margin-top: 16px;
    font-size: 15px;
    text-align: left;
  }
}