/* CTA Banner — centered call-to-action band.
   Real theme variables only: --primary, --poppins, --nutralight, --nutrabold
   (see includes/class-theme.php get_root_variables). Per-instance typography
   and button size/colour arrive via --ctab-* custom properties emitted by the
   render template; the CSS here supplies the fallback defaults so an untouched
   block instance is pixel-stable. Hardcoded values are limited to plain white
   and white overlay alphas, for which no theme variable exists. */

.cta-banner {
    position: relative;
    overflow: hidden;          /* clip the ring motif to the band */
    border-radius: 20px;
    isolation: isolate;
}

/* DEFAULT background — teal gradient derived from --primary. Added by the
   render template ONLY when the Design tab Section Background is unset, so a
   user-set bg-color / bg-image (scoped to #block_id) always wins. */
.cta-banner--default-bg {
    background-color: var(--primary); /* fallback for no color-mix support */
    background-image:
        radial-gradient(circle at 18% 32%,
            color-mix(in srgb, var(--primary) 74%, #fff) 0%, transparent 55%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--primary) 86%, #fff) 0%,
            var(--primary) 52%,
            color-mix(in srgb, var(--primary) 82%, #000) 100%);
}

/* Faint concentric-ring motif — low-opacity white, behind content, on the
   left, masked so it fades out toward the centre/right. Decorative only. */
.cta-banner__rings {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-radial-gradient(
        circle at 8% 50%,
        rgba(255, 255, 255, .14) 0,
        rgba(255, 255, 255, .14) 1.5px,
        transparent 1.5px,
        transparent 62px
    );
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 78%);
            mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 78%);
}

.cta-banner__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 70px 24px;
}

.cta-banner__heading {
    margin: 0 0 14px;
    font-family: var(--nutrabold);
    font-weight: 700;
    font-size: var(--ctab-heading-size, 40px);
    line-height: 1.15;
    color: var(--ctab-heading-color, #fff);
}

.cta-banner__subtext {
    margin: 0 0 32px;
    max-width: 620px;
    font-family: var(--nutralight);
    font-size: var(--ctab-subtext-size, 18px);
    line-height: 1.6;
    color: var(--ctab-subtext-color, rgba(255, 255, 255, .85));
}

.cta-banner-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.cta-btn-primary,
.cta-btn-outline {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 12px;
    font-family: var(--poppins);
    font-size: var(--ctab-btn-size, 16px);
    font-weight: 600;
    text-decoration: none;
    transition: .3s;
}

/* Primary — solid white / teal text */
.cta-btn-primary {
    background: #fff;
    color: var(--primary);
    border: 1px solid #fff;
}
.cta-btn-primary:hover {
    background: rgba(255, 255, 255, .88);
    border-color: rgba(255, 255, 255, .88);
}

/* Secondary — transparent / white outline / white text */
.cta-btn-outline {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
}
.cta-btn-outline:hover {
    background: rgba(255, 255, 255, .14);
}

/* ================= TABLET ================= */
@media (max-width: 1024px) {
    .cta-banner__inner { padding: 56px 22px; }
    .cta-banner__heading { font-size: var(--ctab-heading-size, 32px); }
    .cta-banner__subtext { font-size: var(--ctab-subtext-size, 17px); }
}

/* ================= MOBILE ================= */
@media (max-width: 767px) {
    .cta-banner__inner { padding: 44px 18px; }
    .cta-banner__heading { font-size: var(--ctab-heading-size, 26px); }
    .cta-banner__subtext { font-size: var(--ctab-subtext-size, 16px); }
    .cta-banner-actions { width: 100%; }
    .cta-btn-primary,
    .cta-btn-outline { flex: 1 1 100%; text-align: center; }
}