/**
 * Brutal Blocks: CTA Universal Styles
 * Pure Holy Albatross, Container Queries & Clamp(). 
 * Zero media queries for layout. Inherits WP themes natively.
 */

/* ==========================================================================
   BASE & CONTAINER SETUP
   ========================================================================== */
.brutal-cta-wrapper {
    /* Magia negra: el bloque se convierte en su propio contexto responsivo */
    container-type: inline-size;
    width: 100%;
    margin: 0; /* Regla de la Biblia: Cero márgenes externos */
    overflow: hidden;
    color: inherit;
    background-color: var(--wp--preset--color--background, transparent);
}

/* ==========================================================================
   LAYOUTS & HOLY ALBATROSS (The Core)
   ========================================================================== */
.brutal-cta-inner {
    /* El padding ya viene en el inline-style del PHP con clamp() para ser dinámico */
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 4cqi, 3rem);
}

/* --- SPLIT LAYOUTS (PRO) --- */
.brutal-cta-wrapper[class*="layout-split"] .brutal-cta-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    
    /* El modificador Holy Albatross.
     * Si el contenedor es menor a ~600px (37.5rem), el cálculo es negativo y la flex-basis colapsa,
     * forzando a los elementos a ocupar el 100% y apilarse.
     */
    --albatross-modifier: calc((37.5rem - 100cqi) * 999);
}

.brutal-cta-wrapper[class*="layout-split"] .brutal-cta-content,
.brutal-cta-wrapper[class*="layout-split"] .brutal-cta-actions {
    flex-grow: 1;
    /* Basis fluido: salta a columnas si hay espacio, o 100% si no lo hay */
    flex-basis: max(clamp(15rem, 100cqi, 20rem), var(--albatross-modifier));
    /* FIX CRÍTICO: Domamos al Albatross para que no reviente el ancho y nos borre el 2º botón */
    max-width: 100%;
}

/* Split Right invierte el orden flex sin tocar el DOM en escritorio */
.brutal-cta-wrapper.layout-split-right .brutal-cta-actions {
    order: -1;
}

/* --- MOBILE REFINEMENTS (Container Queries al rescate) --- */
/* Cuando el espacio baja de 600px, centramos textos y obligamos a los botones a ir abajo */
@container (max-width: 37.5rem) {
    .brutal-cta-wrapper[class*="layout-split"] .brutal-cta-inner {
        text-align: center;
        align-items: center;
    }
    
    .brutal-cta-wrapper[class*="layout-split"] .brutal-cta-actions {
        justify-content: center;
    }
    
    /* Reseteamos el orden para que en móvil el texto SIEMPRE esté arriba y los botones abajo */
    .brutal-cta-wrapper.layout-split-right .brutal-cta-actions {
        order: 0;
    }
}

/* --- STACKED CENTER LAYOUT (PRO) --- */
.brutal-cta-wrapper.layout-stacked .brutal-cta-inner {
    text-align: center;
    align-items: center;
}

.brutal-cta-wrapper.layout-stacked .brutal-cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.brutal-cta-wrapper.layout-stacked .brutal-cta-actions {
    justify-content: center;
}

/* ==========================================================================
   BUTTONS (Fluid & Agnostic)
   ========================================================================== */
.brutal-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 2cqi, 1rem) clamp(1.5rem, 4cqi, 2.5rem);
    font-weight: 700;
    text-decoration: none;
    border-radius: clamp(0.25rem, 1cqi, 0.5rem);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: clamp(0.9rem, 2cqi, 1.1rem);
    cursor: pointer;
}

.brutal-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.brutal-cta-btn:active {
    transform: translateY(0);
}

/* Button Styles */
.brutal-cta-btn.style-solid {
    background: var(--wp--preset--color--contrast, #111);
    color: var(--wp--preset--color--base, #fff);
    border: 2px solid var(--wp--preset--color--contrast, #111);
}

.brutal-cta-btn.style-outline {
    background: transparent;
    color: var(--wp--preset--color--contrast, #111);
    border: 2px solid var(--wp--preset--color--contrast, #111);
}

.brutal-cta-btn.style-ghost {
    background: transparent;
    color: var(--wp--preset--color--contrast, #111);
    border: 2px solid transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.brutal-cta-btn.style-ghost:hover {
    box-shadow: none;
    background: rgba(0,0,0,0.05);
}

/* ==========================================================================
   BACKGROUND IMAGE ADAPTATIONS
   ========================================================================== */
/* Cuando hay imagen de fondo, forzamos texto y botones outline/ghost a blanco 
   para garantizar contraste sobre el overlay oscuro */
.brutal-cta-wrapper.has-bg-image {
    color: var(--wp--preset--color--base, #fff);
}

.brutal-cta-wrapper.has-bg-image .brutal-cta-btn.style-outline,
.brutal-cta-wrapper.has-bg-image .brutal-cta-btn.style-ghost {
    color: var(--wp--preset--color--base, #fff);
    border-color: var(--wp--preset--color--base, #fff);
}

.brutal-cta-wrapper.has-bg-image .brutal-cta-btn.style-solid {
    background: var(--wp--preset--color--base, #fff);
    color: var(--wp--preset--color--contrast, #111);
    border-color: var(--wp--preset--color--base, #fff);
}

.brutal-cta-wrapper.has-bg-image .brutal-cta-btn.style-ghost:hover {
    background: rgba(255,255,255,0.1);
}

/* ==========================================================================
   ANIMATIONS (PRO)
   ========================================================================== */
@keyframes brutalFadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes brutalZoomIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

/* Clase de trigger cuando entra en el viewport (o a piñón si no usas JS de intersection observer) */
.brutal-cta-wrapper.anim-fade-up {
    animation: brutalFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.brutal-cta-wrapper.anim-zoom-in {
    animation: brutalZoomIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ACCESIBILIDAD: Si el usuario odia los mareos, quitamos la mierda de animaciones */
@media (prefers-reduced-motion: reduce) {
    .brutal-cta-wrapper[class*="anim-"] {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    
    .brutal-cta-btn {
        transition: none !important;
        transform: none !important;
    }
}