/**
 * SEAFORMEC — CTA
 *
 * Estructura base:
 *
 * CTA Section                  .sf-cta-section
 * └── CTA container            .sf-cta-container
 *     └── CTA card             .sf-cta-card
 *         ├── H2
 *         ├── Párrafo
 *         └── Botones          .sf-cta-actions
 *
 * Variantes:
 * - CTA estándar: vertical y centrado
 * - CTA horizontal: añadir .sf-cta--horizontal al grupo raíz
 *
 * Responsabilidades:
 * - section: ancho completo y separación vertical
 * - container: ancho máximo del componente
 * - card: superficie visual del CTA
 * - actions: distribución de botones
 */


/* ==========================================================
   SECCIÓN
   ========================================================== */

.sf-cta-section {
    width: 100%;
    margin-block-start: 0 !important;
    padding-block: 64px;
    box-sizing: border-box;
}


/* ==========================================================
   CONTENEDOR
   ========================================================== */

.sf-cta-container {
    width: min(calc(100% - 64px), 760px);
    margin-inline: auto !important;
    box-sizing: border-box;
}


/* ==========================================================
   CARD CTA
   ========================================================== */

.sf-cta-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 48px 40px !important;

    box-sizing: border-box;
    text-align: center;
}


/* Evita márgenes laterales inesperados de Gutenberg */
.sf-cta-card > * {
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
   BOTONERA
   ========================================================== */

.sf-cta-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap;

    width: 100%;
    gap: 24px !important;
}


/* Todos los botones del CTA comparten ancho */
.sf-cta-actions .wp-block-button {
    width: 180px;
    margin: 0 !important;
}


.sf-cta-actions .wp-block-button__link {
    display: block;
    width: 100%;

    box-sizing: border-box;
    text-align: center;
}


/* ==========================================================
   VARIANTE HORIZONTAL
   ========================================================== */

/*
 * Utilizada en páginas de servicio individual para CTAs
 * como "Consulta Actividades Acreditadas FMC".
 *
 * Escritorio:
 * - H2 + texto a la izquierda
 * - botón a la derecha
 *
 * Responsive:
 * - móvil en una sola columna
 */
/* El CTA horizontal utiliza ancho amplio y anula
   la restricción contentSize de Gutenberg */
/* Variante CTA horizontal: espaciado exterior */

/* Contenedor de la variante horizontal */
.sf-cta-section.sf-cta--horizontal > .sf-cta-container {
    width: min(1320px, calc(100% - 64px)) !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

.sf-cta-section.sf-cta--horizontal .sf-cta-card {
    display: grid !important;

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title actions"
        "text actions";

    column-gap: 48px;
    row-gap: 12px;

    align-items: center;

    padding: 40px 48px !important;

    text-align: left;
}

.sf-cta-section.sf-cta--horizontal .sf-cta-card > h2 {
    grid-area: title;

    width: 100%;
    max-width: none;
    margin: 0 !important;

    text-align: left;
}

.sf-cta-section.sf-cta--horizontal .sf-cta-card > p {
    grid-area: text;

    width: 100%;
    max-width: 760px;
    margin: 0 !important;

    text-align: left;
}

.sf-cta-section.sf-cta--horizontal .sf-cta-actions {
    grid-area: actions;

    width: auto;
    margin: 0 !important;

    justify-content: flex-end !important;
}

.sf-cta-section.sf-cta--horizontal .sf-cta-actions .wp-block-button {
    width: 180px;
}


/* ==========================================================
   PORTÁTIL
   ========================================================== */

@media (min-width: 981px) and (max-width: 1399px) {

    .sf-cta-container {
        max-width: 700px;
    }

    .sf-cta-card {
        padding: 44px 36px !important;
    }

    .sf-cta-section.sf-cta--horizontal .sf-cta-container {
        width: min(1180px, calc(100% - 64px)) !important;
        max-width: none !important;
    }

    .sf-cta-section.sf-cta--horizontal .sf-cta-card {
        column-gap: 36px;
        padding: 36px 40px !important;
    }
}

@media (max-width: 1100px) {

    .sf-cta-section {
        padding-block: 48px;
    }
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 601px) and (max-width: 980px) {

    .sf-cta-container {
        width: min(calc(100% - 64px), 620px);
    }

    .sf-cta-card {
        padding: 40px 32px !important;
    }

    .sf-cta-actions {
        gap: 20px !important;
    }

    .sf-cta-section.sf-cta--horizontal .sf-cta-container {
        width: min(calc(100% - 64px), 760px);
    }

    .sf-cta-section.sf-cta--horizontal .sf-cta-card {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 28px;
        row-gap: 10px;

        padding: 32px !important;
    }

    .sf-cta-section.sf-cta--horizontal .sf-cta-card > p {
        max-width: none;
    }
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 600px) {

    .sf-cta-section {
        padding-block: 32px;
    }

    .sf-cta-container {
        width: calc(100% - 48px);
    }

    .sf-cta-card {
        padding: 36px 24px !important;
    }

    .sf-cta-card h2 {
        font-size: clamp(26px, 8vw, 32px);
        line-height: 1.1;
    }

    .sf-cta-actions {
        flex-direction: column;
        align-items: center !important;
        justify-content: center !important;

        gap: 16px !important;
    }

    .sf-cta-actions .wp-block-button {
        width: min(100%, 220px);
        margin-inline: auto !important;
    }

    .sf-cta-section.sf-cta--horizontal .sf-cta-container {
        width: calc(100% - 48px);
    }

    .sf-cta-section.sf-cta--horizontal .sf-cta-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "text"
            "actions";

        row-gap: 16px;
        column-gap: 0;

        padding: 32px 24px !important;

        text-align: left;
    }

    .sf-cta-section.sf-cta--horizontal .sf-cta-card > h2,
    .sf-cta-section.sf-cta--horizontal .sf-cta-card > p {
        text-align: left;
    }

    .sf-cta-section.sf-cta--horizontal .sf-cta-actions {
        width: 100%;
        margin-top: 8px !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .sf-cta-section.sf-cta--horizontal .sf-cta-actions .wp-block-button {
        width: min(100%, 220px);
        margin-inline: 0 !important;
    }
}


/* ==========================================================
   MÓVIL PEQUEÑO
   ========================================================== */

@media (max-width: 380px) {

    .sf-cta-container {
        width: calc(100% - 32px);
    }

    .sf-cta-card {
        padding: 32px 20px !important;
    }
}