/**
 * Banner CTA — granatowy box pełnoekranowy z wyśrodkowaną treścią.
 * Wzorzec zgodny z blokami `contact` i `proces` (ten sam radius i edge gap).
 */

.wl-cta-banner {
  padding: var(--space-edge);
}

.wl-cta-banner__inner {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-box);
  overflow: hidden;
  background: var(--color-bg-dark);
  padding: var(--space-lg) calc(var(--space-page-fluid) - var(--space-edge));
}

.wl-cta-banner__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
}

.wl-cta-banner__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wl-cta-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(12, 54, 92, 0.7);
}

.wl-cta-banner__content {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  color: var(--color-text-invert);
}

/**
 * Banner CTA nie używa linii działowej z section-head.
 * Design (dokument klienta): wyśrodkowany nagłówek + opis + przycisk — bez dividra.
 */
.wl-cta-banner .wl-section-head__line {
  display: none;
}

@media (max-width: 768px) {
  .wl-cta-banner {
    padding: 0;
  }

  .wl-cta-banner__inner {
    border-radius: 0;
    padding: var(--space-lg) var(--space-page-fluid);
  }
}

/**
 * Wariant jasny — bez boxa: brak tła, radiusu i wewnętrznego paddingu,
 * granatowy tekst. Używany, gdy banner sąsiadowałby z inną ciemną sekcją
 * (rytm strony: ciemna sekcja ma być jedna między jasnymi).
 * Wzorzec 1:1 z `.wl-contact--light`.
 *
 * UWAGA: bez boxa nie ma już nic, co dawałoby odstęp — wariant MUSI przejąć
 * pionowy rytm i gutter standardowych sekcji. Wcześniej zostawał tylko
 * `--space-edge` (20px), czyli 5× mniej niż sąsiednie sekcje (~106px
 * przy 1440px), a treść stała 20px od krawędzi zamiast w gutterze.
 */
.wl-cta-banner--light {
  padding: var(--space-lg) 0;
}

.wl-cta-banner--light .wl-cta-banner__inner {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.wl-cta-banner--light .wl-cta-banner__content {
  /* jak `.wl-container`: pełna szerokość + gutter, zamiast max-width 1600px */
  max-width: none;
  padding-inline: max(var(--space-page-fluid), calc((100% - var(--container-max)) / 2));
  color: var(--color-text);
}

.wl-cta-banner--light .wl-section-head__title {
  color: var(--color-text);
}

.wl-cta-banner--light .wl-section-head__desc {
  color: var(--color-text);
}

/**
 * Przyciski: warianty *_white są projektowane na ciemnym tle — na jasnym
 * banerze biała pigułka zlewa się z tłem. W wariancie jasnym odwracamy je,
 * więc treść może zachować te same nazwy wariantów w ACF.
 */
.wl-cta-banner--light .wl-btn--primary_white .wl-btn__body {
  background: var(--color-primary);
  color: var(--color-text-invert);
  border-color: var(--color-primary);
}

.wl-cta-banner--light .wl-btn--secondary_white .wl-btn__body {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.wl-cta-banner--light .wl-btn__badge {
  background: var(--color-accent);
  color: var(--color-white);
}

@media (max-width: 768px) {
  /* Wariant jasny nie jest pełnoekranowym boxem — zostaje w gutterze,
     z tym samym pionowym rytmem co inne sekcje (--space-lg). */
  .wl-cta-banner--light {
    padding: var(--space-lg) 0;
  }

  .wl-cta-banner--light .wl-cta-banner__inner {
    padding: 0;
  }
}