/*
 * Dunkler Kontext (dev-wp.progiton.com component.scss:
 * .pg-component--dark) -- dieselbe Vereinfachung wie bei pg-hero/
 * pg-container-default: kein generisches Kontext-Token-System, Werte
 * lokal gesetzt.
 *
 * 1:1 aus der lokalen WP-Referenzquelle übernommen (assets/scss/
 * components/cta.scss), keine frei geschätzten Werte.
 */
.pg-cta {
  --component-background: var(--color-dark);
  --component-text: var(--color-text-inverse);
  --component-muted: rgba(255, 255, 255, 0.72);
  --component-accent: var(--color-primary);

  position: relative;
  overflow: hidden;
  padding-block: var(--space-section);
  text-align: center;
  background:
    radial-gradient(90% 120% at 18% 12%, var(--color-primary-glow), transparent 55%),
    radial-gradient(90% 120% at 85% 92%, rgba(180, 142, 214, 0.14), transparent 55%),
    var(--component-background);
}

.pg-cta__container {
  position: relative;
  z-index: 1;
  width: min(40rem, calc(100% - 2 * var(--container-padding)));
  margin-inline: auto;
}

.pg-cta__eyebrow {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  margin: 0 0 var(--space-sm);
  color: var(--component-accent);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.pg-cta__eyebrow::before {
  width: 2.5rem;
  height: 0.1875rem;
  border-radius: var(--radius-pill);
  background: var(--component-accent);
  content: "";
}

.pg-cta__heading {
  margin: 0;
  color: var(--component-text);
  font-family: var(--font-family-heading);
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/*
 * Story layout-032: Überschriften, die nie umbrechen dürfen (z. B.
 * unser Firmen-Claim), bekommen eine eigene, enger skalierende
 * Schriftgröße statt der Standard-Heading-Größe -- sonst würde
 * "white-space: nowrap" bei langen Sätzen über den auf 40rem
 * begrenzten .pg-cta__container hinauslaufen.
 */
.pg-cta__heading--nowrap {
  font-size: clamp(0.9rem, 3.6vw, 1.75rem);
  white-space: nowrap;
}

.pg-cta__description {
  max-width: 35rem;
  margin: var(--space-sm) auto 0;
  color: var(--component-muted);
  font-size: 1.1rem;
  line-height: 1.6;
}

.pg-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
  margin-top: var(--space-lg);
}