/* ==========================================================================
   ENCCI — LAYOUT
   Contenedores + secciones + grids + estructura de página
   --------------------------------------------------------------------------
   El layout es responsable de:
   - ancho y centrado de contenedores;
   - gutters laterales;
   - grids y columnas propias de ENCCI;
   - separación vertical de secciones.

   base.css NO define .container.
   header.css puede sobrescribir el contenedor del header cuando corresponda.
   ========================================================================== */


/* ==========================================================================
   01. TOKENS DE LAYOUT
   ========================================================================== */

:root {

    --layout-gutter: 1.5rem;

    --layout-gutter-sm: 1.25rem;

    --layout-gutter-lg: 2rem;

}


/* ==========================================================================
   02. CONTENEDOR PRINCIPAL
   ========================================================================== */

.container {

    max-width: none;

    margin-inline: auto;

    padding-inline: 0;

}

main .container {
    width: var(--encci-container-width);
    margin: 0 auto !important;
}

@media (max-width: 991.98px) {
    main .container {
        width: 100%;
    }
}

/* ==========================================================================
   03. CONTENEDORES DE CONTENIDO
   ========================================================================== */

.container--sm {

    width: min(var(--encci-content-width),
            calc(100% - (var(--layout-gutter) * 2)));

    max-width: none;

    margin-inline: auto;

    padding-inline: 0;

}

.container--lg {

    width: min(1440px,
            calc(100% - (var(--layout-gutter) * 2)));

    max-width: none;

    margin-inline: auto;

    padding-inline: 0;

}

.container--fluid {

    width: 100%;

    max-width: none;

    margin-inline: auto;

    padding-inline: var(--layout-gutter);

}


/* ==========================================================================
   04. WRAPPER
   ========================================================================== */

.wrapper {

    width: 100%;

    min-width: 0;

    margin-inline: auto;

}


/* ==========================================================================
   05. SECCIONES
   ========================================================================== */

.section {

    width: 100%;

    min-width: 0;

    padding-block: var(--section-spacing);

}

.section--sm {

    padding-block: var(--section-spacing-sm);

}

.section--compact {

    padding-block: var(--space-xl);

}

.section--tight {

    padding-block: var(--space-lg);

}


/* ==========================================================================
   06. SECCIONES CON FONDO
   ========================================================================== */

.section--surface {

    background: var(--encci-surface);

}

.section--surface-alt {

    background: var(--encci-surface-alt);

}

.section--blue {

    background: var(--encci-surface-blue);

}

.section--primary {

    background: var(--encci-primary);

}

.section--primary-dark {

    background: var(--encci-primary-verydark);

}


/* ==========================================================================
   07. GRID BASE ENCCI
   ========================================================================== */

.encci-grid {

    display: grid;

    gap: var(--component-gap);

    min-width: 0;

}

.encci-grid > * {

    min-width: 0;

}


/* ==========================================================================
   08. GRID RESPONSIVE
   ========================================================================== */

.encci-grid--2 {

    grid-template-columns: repeat(2, minmax(0, 1fr));

}

.encci-grid--3 {

    grid-template-columns: repeat(3, minmax(0, 1fr));

}

.encci-grid--4 {

    grid-template-columns: repeat(4, minmax(0, 1fr));

}


/* ==========================================================================
   09. GRID DE AUTO-FIT
   ========================================================================== */

.encci-grid--auto {

    grid-template-columns: repeat(auto-fit,
            minmax(min(100%, 280px), 1fr));

}


/* ==========================================================================
   10. GRID DE CONTENIDO
   ========================================================================== */

.content-grid {

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);

    gap: var(--space-xl);

    min-width: 0;

}

.content-grid > * {

    min-width: 0;

}


/* ==========================================================================
   11. LAYOUT FLEX
   ========================================================================== */

.flex {

    display: flex;

    min-width: 0;

}

.flex-wrap {

    flex-wrap: wrap;

}

.flex-center {

    display: flex;

    align-items: center;

    justify-content: center;

}

.flex-between {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* ==========================================================================
   12. GAP
   ========================================================================== */

.gap-xs {

    gap: var(--space-xs);

}

.gap-sm {

    gap: var(--space-sm);

}

.gap-md {

    gap: var(--space-md);

}

.gap-lg {

    gap: var(--space-lg);

}

.gap-xl {

    gap: var(--space-xl);

}


/* ==========================================================================
   13. UTILIDADES DE ANCHO
   ========================================================================== */

.w-full {

    width: 100% !important;

}

.max-content {

    max-width: var(--encci-content-width);

}

.mx-auto {

    margin-inline: auto !important;

}


/* ==========================================================================
   14. ALINEACIÓN DE CONTENIDO
   ========================================================================== */

.content-narrow {

    width: min(var(--encci-content-width),
            100%);

    margin-inline: auto;

}

.content-wide {

    width: min(var(--encci-container-width),
            100%);

    margin-inline: auto;

}


/* ==========================================================================
   15. PREVENCIÓN DE OVERFLOW
   ========================================================================== */

.container,
.container--sm,
.container--lg,
.container--fluid,
.wrapper,
.section,
.grid,
.content-grid {

    min-width: 0;

}

.container > *,
.container--sm > *,
.container--lg > *,
.container--fluid > *,
.wrapper > *,
.section > * {

    min-width: 0;

}


/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

@media (max-width:991.98px) {

    .content-grid {

        grid-template-columns: 1fr;

        gap: var(--space-lg);

    }

}


@media (max-width:767.98px) {

    :root {

        --layout-gutter: 1.25rem;

    }

    .encci-grid--4 {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

    .encci-grid--3 {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

    .section {

        padding-block: var(--section-spacing-sm);

    }

}

@media (max-width:575.98px) {

    :root {

        --layout-gutter: 1rem;

    }

    .encci-grid--2,
    .encci-grid--3,
    .encci-grid--4 {

        grid-template-columns: 1fr;

    }

    .container--fluid {

        padding-inline: var(--layout-gutter);

    }

    .content-grid {

        gap: var(--space-md);

    }

}





/* ==========================================================================
   17. COMPATIBILIDAD CON BOOTSTRAP
   --------------------------------------------------------------------------
   No redefinimos aquí .row ni sus gutters.
   Esa normalización pertenece a base.css.
   ========================================================================== */

.row > [class*="col-"] {

    min-width: 0;

}


/* ==========================================================================
   18. ESPACIADO VERTICAL DE SECCIONES
   ========================================================================== */

.section + .section {

    margin-top: 0;

}

.section > :last-child {

    margin-bottom: 0;

}