/* Ntono Call To Action Block Styles */

.ntono-cta-block {
    position: relative;
    width: 100%;
    overflow: hidden;
    color: var(--ntono-text-light, #fff);
}

.ntono-cta-content {
    position: relative;
    z-index: 10;
    max-width: 48rem;
    /* max-w-3xl */
    margin: 0 auto;
    text-align: center;
}

/* Text Alignment Modifiers */
.ntono-cta-align-left .ntono-cta-content {
    text-align: left;
}

.ntono-cta-align-right .ntono-cta-content {
    text-align: right;
}

.ntono-cta-align-center .ntono-cta-content {
    text-align: center;
}

/* Layout Width Modifiers */
.ntono-cta-layout-bleed {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0;
    box-sizing: border-box;
}

.ntono-cta-layout-bleed .ntono-cta-box {
    border-radius: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

/* When bleed is active, section padding is handled by the box */
.ntono-cta-is-bleed {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Base Typographic Styles */
.ntono-cta-kicker {
    display: inline-block;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--cta-kicker-mb, 0.5rem);
    /* Reduced from 1.5rem to fix spacing */
}

.ntono-cta-title {
    color: var(--cta-title-color, inherit);
    font-size: 2.5rem;
    /* text-4xl */
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}



@media (min-width: 768px) {
    .ntono-cta-title {
        font-size: 3.75rem;
        /* md:text-6xl */
    }
}



/* Actions Area */
.ntono-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--cta-btn-gap, 1rem);
    /* Dynamic gap powered by ACF */
}

/* Button Layout Modifiers (Mobile First) */
.ntono-cta-btn-layout-stack {
    flex-direction: column;
}

.ntono-cta-btn-layout-stack .ntono-btn {
    width: 100%;
    /* Force buttons to fill width when stacked */
}

@media (min-width: 640px) {

    /* Tablet/Desktop revert to inline row behavior */
    .ntono-cta-btn-layout-stack {
        flex-direction: row;
    }

    .ntono-cta-btn-layout-stack .ntono-btn {
        width: auto;
    }
}

/* Button Component Wrapper inside Block */
.ntono-cta-block .ntono-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 1rem;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

@media (min-width: 768px) {
    .ntono-cta-block .ntono-btn {
        padding: 1.25rem 2.5rem;
        font-size: 1.125rem;
    }
}

.ntono-cta-block .ntono-btn:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Background Customization Mappings */
.ntono-cta-section {
    background-color: var(--cta-bg-section, transparent);
}

.ntono-cta-container {
    background-color: var(--cta-bg-container, transparent);
}

/* Theme: Saffron Gradient (Vibrant) */
.ntono-cta-theme-saffron-gradient {
    padding: 4rem 1.5rem;
    color: #111;
}

@media (min-width: 768px) {
    .ntono-cta-theme-saffron-gradient {
        padding: 6rem 1.5rem;
    }
}

/* When bleed + saffron, section padding is zero; box handles everything */
.ntono-cta-theme-saffron-gradient.ntono-cta-is-bleed {
    padding: 0 !important;
}

/* Saffron Default Text Colors — black for legibility on bright gradient */
.ntono-cta-theme-saffron-gradient .ntono-cta-kicker {
    color: #1a1a1a;
}

.ntono-cta-theme-saffron-gradient .ntono-cta-title {
    color: var(--cta-title-color, #111);
}

.ntono-cta-theme-saffron-gradient .ntono-cta-body {
    color: var(--cta-body-color, #1a1a1a);
}

/* Saffron Button Styling — dark button with primary text */
.ntono-cta-theme-saffron-gradient .ntono-btn-primary {
    background-color: var(--cta-btn-bg, #0B090A);
    color: var(--ntono-primary, #FAA916);
}

.ntono-cta-theme-saffron-gradient .ntono-btn-primary:hover {
    background-color: #1a1a2e;
}

/* Base Saffron Box (Contained or Bleed) */
.ntono-cta-theme-saffron-gradient .ntono-cta-box {
    position: relative;
    overflow: hidden;
    background: var(--cta-bg-box, linear-gradient(to right, #FAA916, #f59e0b));
    border-radius: 1.5rem;
    /* 3xl */
    padding: 3rem 1.5rem;
    box-shadow: 0 0 100px rgba(250, 169, 22, 0.15);
    text-align: center;
}

@media (min-width: 768px) {
    .ntono-cta-theme-saffron-gradient .ntono-cta-box {
        padding: 5rem;
    }
}

/* --------------------------------------------------------------------------
 * FULL WIDTH LAYOUT BEHAVIOR
 * Shifts the background from the Box to the Section wrapper.
 * -------------------------------------------------------------------------- */
.ntono-cta-theme-saffron-gradient.ntono-cta-layout-full-width {
    position: relative;
    overflow: hidden;
    background: var(--cta-bg-section, linear-gradient(to right, #FAA916, #f59e0b));
}

/* In Full Width, the box becomes just a content wrapper, losing its distinct shape */
.ntono-cta-layout-full-width .ntono-cta-box {
    background: var(--cta-bg-box, transparent) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Ensure the Saffron glows and textures follow the Section in Full Width */
.ntono-cta-theme-saffron-gradient.ntono-cta-layout-full-width .ntono-cta-bg-texture,
.ntono-cta-theme-saffron-gradient.ntono-cta-layout-full-width .ntono-cta-bg-glow {
    /* Since we can't move DOM nodes with CSS, we position them relative to the section which holds the 'relative' constraint */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Saffron Textures and Glows */
.ntono-cta-theme-saffron-gradient .ntono-cta-bg-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Same noisy texture you use generally, just multiply blend */
    background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
    opacity: 0.1;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.ntono-cta-theme-saffron-gradient .ntono-cta-bg-glow {
    position: absolute;
    top: -6rem;
    left: -6rem;
    width: 16rem;
    height: 16rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    filter: blur(48px);
    pointer-events: none;
}

/* Theme: Dark Ambient (Minimalist & Subdued) */
.ntono-cta-theme-dark-ambient {
    padding: 4rem 1.5rem;
}

@media (min-width: 768px) {
    .ntono-cta-theme-dark-ambient {
        padding: 6rem 1.5rem;
    }
}

.ntono-cta-theme-dark-ambient.ntono-cta-is-bleed {
    padding: 0 !important;
}

/* Base Dark Box */
.ntono-cta-theme-dark-ambient .ntono-cta-box {
    position: relative;
    overflow: hidden;
    background: var(--cta-bg-box, rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.5rem;
    /* 3xl */
    padding: 3rem 1.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .ntono-cta-theme-dark-ambient .ntono-cta-box {
        padding: 5rem;
    }
}

/* Dark Ambient FULL WIDTH BEHAVIOR */
.ntono-cta-theme-dark-ambient.ntono-cta-layout-full-width {
    position: relative;
    overflow: hidden;
    background: var(--cta-bg-section, rgba(255, 255, 255, 0.03));
}

.ntono-cta-theme-dark-ambient.ntono-cta-layout-full-width .ntono-cta-box {
    background: var(--cta-bg-box, transparent) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

.ntono-cta-theme-dark-ambient.ntono-cta-layout-full-width .ntono-cta-ambient-glow-1,
.ntono-cta-theme-dark-ambient.ntono-cta-layout-full-width .ntono-cta-ambient-glow-2 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Dark Ambient Glows */
.ntono-cta-theme-dark-ambient .ntono-cta-ambient-glow-1 {
    position: absolute;
    top: -10rem;
    right: -10rem;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.ntono-cta-theme-dark-ambient .ntono-cta-ambient-glow-2 {
    position: absolute;
    bottom: -10rem;
    left: -10rem;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle, var(--ntono-primary, rgba(250, 169, 22, 0.05)) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Custom Background Texture */
.ntono-cta-custom-texture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: var(--cta-custom-texture);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    mix-blend-mode: multiply;
    /* Blend custom texture cleanly against base color */
    opacity: 0.15;
    /* Subtle noise effect */
    z-index: 3;
    /* Above gradient base but below content */
    pointer-events: none;
}

/* Two-Tone Title Colors (Based on Theme) */

/* 1. If a Custom Secondary Color is passed from ACF via inline style, use it */
.ntono-cta-title strong,
.ntono-cta-title b {
    color: var(--cta-title-secondary-color);
    font-style: normal;
}

/* 2. Theme Fallbacks (Only apply if Custom Secondary Color is Not Set) */
.ntono-cta-theme-saffron-gradient .ntono-cta-title strong:not([style*="color"]),
.ntono-cta-theme-saffron-gradient .ntono-cta-title b:not([style*="color"]) {
    color: var(--cta-title-secondary-color, #0B090A);
}

.ntono-cta-theme-dark .ntono-cta-title strong:not([style*="color"]),
.ntono-cta-theme-dark .ntono-cta-title b:not([style*="color"]) {
    color: var(--cta-title-secondary-color, var(--ntono-primary, #f4af25));
}

/* Base Responsive Typography */
.ntono-cta-title {
    color: var(--cta-title-color, inherit);
    font-size: 2rem;
    /* Mobile first: 32px */
    font-weight: 900;
    line-height: 1.1;
    margin-top: var(--cta-title-mt, 0);
    margin-bottom: var(--cta-title-mb, 1.5rem);
    letter-spacing: -0.02em;
}

@media (min-width: 640px) {

    /* Tablet/iPad (sm) */
    .ntono-cta-title {
        font-size: 2.5rem;
        /* 40px */
    }
}

@media (min-width: 1024px) {

    /* Desktop (lg) */
    .ntono-cta-title {
        font-size: 3.75rem;
        /* 60px */
    }
}

.ntono-cta-body {
    color: var(--cta-body-color, rgba(255, 255, 255, 0.8));
    font-size: 1rem;
    /* Mobile */
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 640px) {

    /* Tablet/iPad */
    .ntono-cta-body {
        font-size: 1.125rem;
        /* 18px */
    }
}

.ntono-cta-theme-dark .ntono-cta-body {
    color: #94a3b8;
    /* slate-400 */
}

/* Dark Theme Buttons */
.ntono-cta-theme-dark .ntono-btn-primary {
    background-color: var(--ntono-primary, #f4af25);
    color: var(--ntono-bg-dark, #0B090A);
}

.ntono-cta-theme-dark .ntono-btn-primary:hover {
    background-color: #d99920;
    /* slightly darker safffron */
}

/* Dark (Light Text) Variant */
.ntono-btn-dark-light {
    background-color: #0F172A;
    /* slate-900 */
    color: #cbd5e1;
    /* slate-300 */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ntono-btn-dark-light:hover {
    background-color: #1e293b;
    /* slate-800 */
    color: #f8fafc;
    /* slate-50 */
    border-color: rgba(255, 255, 255, 0.2);
}

/* --------------------------------------------------------------------------
 * DYNAMIC BUILDER CONTROLS 
 * (Generated by ACF Settings in render.php)
 * -------------------------------------------------------------------------- */

/* Section Padding Y */
.ntono-cta-py-small {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.ntono-cta-py-medium {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.ntono-cta-py-large {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

/* Inner Box Border Radius */
.ntono-cta-radius-none {
    border-radius: 0;
}

.ntono-cta-radius-small {
    border-radius: 0.5rem;
    /* 8px */
}

.ntono-cta-radius-medium {
    border-radius: 1rem;
    /* 16px */
}

.ntono-cta-radius-large {
    border-radius: 1.5rem;
    /* 24px */
}

.ntono-cta-radius-xl {
    border-radius: 3rem;
    /* 48px */
}

/* Inner Box Shadows */
.ntono-cta-shadow-none {
    box-shadow: none !important;
}

.ntono-cta-shadow-subtle {
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3) !important;
}

.ntono-cta-shadow-glow.ntono-cta-theme-saffron-gradient .ntono-cta-box {
    box-shadow: 0 0 100px rgba(250, 169, 22, 0.15);
}