/* ═══════════════════════════════════════════════════════
   08-cta.css — CTA Section Component
   Intecracy Group Theme v3.2.0
   ─────────────────────────────────────────────────────
   SINGLE source of truth for .cta-section / .cta-content.
   Do NOT define these selectors in any page file.
   ═══════════════════════════════════════════════════════ */

.cta-section {
    background: var(--grad-navy);
    padding: var(--space-2xl) var(--section-padding-h);
    border-top: 1px solid var(--cta-border);
}

.cta-content {
    max-width: var(--cta-max-width);
}

.cta-section h2 {
    color: var(--text);
}

.cta-section p {
    color: var(--text-dim);
    margin-bottom: var(--cta-copy-gap);
}

/* ── Centered variant ── */
.cta-section--centered .cta-content {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cta-content-gap);
    text-align: center;
}

.cta-section--centered .cta-content h2 {
    margin-bottom: var(--cta-title-gap-centered);
}

.cta-section--centered .cta-content p {
    margin-bottom: var(--cta-copy-gap-centered);
    max-width: var(--cta-text-max-width);
}

.cta-section--narrow .cta-content {
    max-width: var(--cta-max-width-narrow);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .cta-section {
        padding: var(--cta-pad-mobile-y) var(--cta-pad-mobile-x);
    }
}