/* ==========================================================================
   closing-cta.css — full-width dark CTA block at end of page
   Markup: <section class="closing"><div class="container">
            <h2>Headline</h2>
            <p>...</p>
            <form class="search-block">...</form>
   Reuses .search-block component on a darker background.
   ========================================================================== */

section.closing {
  position: relative;
  color: white;
  padding: var(--space-100) 0;
  background:
    linear-gradient(180deg, rgba(var(--bg-dark-rgb), .6) 0%, rgba(var(--bg-dark-rgb), .82) 100%),
    url('../../closing-client-bg.webp') center center/cover no-repeat;
  text-align: center;
}

/* Trainer-page variant: cinematic boxing-gym-at-sunset backdrop, slightly
   stronger gradient to keep heavy-bag silhouettes from competing with copy. */
section.closing.is-trainer {
  background:
    linear-gradient(180deg, rgba(var(--bg-dark-rgb), .55) 0%, rgba(var(--bg-dark-rgb), .78) 100%),
    url('../../closing-trainer-bg.webp') center center/cover no-repeat;
}

section.closing h2 {
  font-size: var(--fs-h2-closing);
  line-height: var(--lh-display);
  margin: 0 0 var(--space-14);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-tight);
}
section.closing p {
  color: rgba(var(--white-rgb), .85);
  margin: 0 auto var(--space-32);
  max-width: 50ch;
  font-size: var(--fs-price);
}
section.closing .search-block {
  max-width: 760px;
  margin: 0 auto;
}

/* Single-CTA variant (e.g. trainer landing closer) — used in place of the
   .search-block when the page wants a focused button rather than a search. */
.closing-actions {
  display: inline-flex;
  gap: var(--space-12);
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  section.closing { padding: var(--space-64) 0; }
  section.closing h2 { font-size: var(--fs-metric); }
  .closing-actions {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .closing-actions .btn { width: 100%; }
}