/**
 * CTA Banner module — full-bleed accent section with centered content.
 */

.dz-app .dz-cta-banner {
  padding-block: var(--dz-space-16) var(--dz-space-16);
  background: linear-gradient(135deg, var(--dz-accent) 0%, var(--dz-accent-active) 100%);
  color: var(--dz-accent-fg);
  position: relative;
  overflow: hidden;
}

.dz-app .dz-cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 60%),
              radial-gradient(circle at 80% 50%, rgba(255,255,255,0.05) 0%, transparent 60%);
  pointer-events: none;
}

.dz-app .dz-cta-banner__container {
  max-width: var(--dz-container);
  margin-inline: auto;
  padding-inline: var(--dz-content-padding);
  position: relative;
}

.dz-app .dz-cta-banner__inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.dz-app .dz-cta-banner__title {
  margin: 0 0 var(--dz-space-3);
  font-family: var(--dz-font-sans);
  font-size: clamp(var(--dz-text-3xl), 4vw, var(--dz-text-5xl));
  font-weight: var(--dz-weight-bold);
  letter-spacing: var(--dz-tracking-tight);
  line-height: var(--dz-lh-tight);
  color: var(--dz-accent-fg);
}

.dz-body--ar .dz-app .dz-cta-banner__title {
  font-family: var(--dz-font-arabic);
}

.dz-app .dz-cta-banner__subtitle {
  margin: 0 0 var(--dz-space-8);
  font-size: var(--dz-text-lg);
  color: rgba(255, 255, 255, 0.9);
  line-height: var(--dz-lh-relaxed);
}

.dz-app .dz-cta-banner__actions {
  display: flex;
  gap: var(--dz-space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* White primary button on accent background */
.dz-app .dz-cta-banner__btn {
  background: var(--dz-accent-fg);
  color: var(--dz-accent);
  border-color: var(--dz-accent-fg);
}

.dz-app .dz-cta-banner__btn:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--dz-accent-active);
}

.dz-app .dz-cta-banner__btn--ghost {
  background: transparent;
  color: var(--dz-accent-fg);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.dz-app .dz-cta-banner__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--dz-accent-fg);
  color: var(--dz-accent-fg);
}