/* =========================================================
   Archivo: assets/css/03-base-layout.css
   Proyecto: INEM Kennedy Child Theme

   Función:
   - Definir el sistema base de layout del sitio.
   - Centralizar contenedores, secciones, grids y utilidades
     estructurales reutilizables.
   - Servir como base para páginas, archivos, CPTs y componentes.

   Nota:
   - No definir colores globales aquí.
   - No diseñar componentes específicos aquí.
   - No incluir header, footer, hero, cards ni botones.
========================================================= */


/* =========================================================
   1. Reset estructural
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    margin: 0;
    font-family: var(--inem-font);
    color: var(--inem-gray-900);
    background: var(--inem-page-bg);
    text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================================
   2. Wrapper principal
========================================================= */

.site,
.site-content,
#page,
#content {
    width: 100%;
}

.site-main {
    width: 100%;
}


/* =========================================================
   3. Containers
========================================================= */

.inem-container {
    width: min(
        calc(100% - (var(--inem-container-padding-desktop) * 2)),
        var(--inem-container)
    );
    margin-inline: auto;
}

.inem-container--wide {
    width: min(
        calc(100% - (var(--inem-container-padding-desktop) * 2)),
        var(--inem-container-wide)
    );
    margin-inline: auto;
}

.inem-container--narrow {
    width: min(
        calc(100% - (var(--inem-container-padding-desktop) * 2)),
        var(--inem-container-narrow)
    );
    margin-inline: auto;
}

.inem-container--full {
    width: 100%;
    margin-inline: auto;
}


/* =========================================================
   4. Secciones
========================================================= */

.inem-section {
    padding-block: var(--inem-space-3xl);
}

.inem-section--sm {
    padding-block: var(--inem-space-2xl);
}

.inem-section--lg {
    padding-block: var(--inem-space-4xl);
}

.inem-section--no-top {
    padding-top: 0;
}

.inem-section--no-bottom {
    padding-bottom: 0;
}


/* =========================================================
   5. Grid system
========================================================= */

.inem-grid {
    display: grid;
    gap: var(--inem-space-xl);
}

.inem-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inem-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inem-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.inem-grid--compact {
    gap: var(--inem-space-lg);
}

.inem-grid--loose {
    gap: var(--inem-space-2xl);
}


/* =========================================================
   6. Flex utilities
========================================================= */

.inem-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--inem-space-md);
}

.inem-cluster--between {
    justify-content: space-between;
}

.inem-cluster--center {
    justify-content: center;
}

.inem-stack {
    display: flex;
    flex-direction: column;
    gap: var(--inem-space-md);
}

.inem-stack--sm {
    gap: var(--inem-space-sm);
}

.inem-stack--lg {
    gap: var(--inem-space-lg);
}


/* =========================================================
   7. Flow utilities
========================================================= */

.inem-flow > * + * {
    margin-top: var(--inem-space-md);
}

.inem-flow--sm > * + * {
    margin-top: var(--inem-space-sm);
}

.inem-flow--lg > * + * {
    margin-top: var(--inem-space-lg);
}


/* =========================================================
   8. Alineación
========================================================= */

.inem-center {
    margin-inline: auto;
    text-align: center;
}

.inem-text-center {
    text-align: center;
}

.inem-text-left {
    text-align: left;
}

.inem-text-right {
    text-align: right;
}


/* =========================================================
   9. Visibilidad accesible
========================================================= */

.inem-screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =========================================================
   10. Responsive
========================================================= */

@media (max-width: 1024px) {
    .inem-container,
    .inem-container--wide,
    .inem-container--narrow {
        width: min(
            calc(100% - (var(--inem-container-padding-tablet) * 2)),
            var(--inem-container)
        );
    }

    .inem-section {
        padding-block: var(--inem-space-2xl);
    }

    .inem-section--lg {
        padding-block: var(--inem-space-3xl);
    }

    .inem-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inem-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .inem-grid--2,
    .inem-grid--3,
    .inem-grid--4 {
        grid-template-columns: 1fr;
    }

    .inem-cluster--between {
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .inem-container,
    .inem-container--wide,
    .inem-container--narrow {
        width: min(
            calc(100% - (var(--inem-container-padding-mobile) * 2)),
            var(--inem-container)
        );
    }

    .inem-section {
        padding-block: var(--inem-space-xl);
    }

    .inem-section--sm {
        padding-block: var(--inem-space-lg);
    }

    .inem-section--lg {
        padding-block: var(--inem-space-2xl);
    }
}