/**
 * Containers
 *
 * El fondo o sección puede ocupar todo el viewport, pero su contenido
 * debe alinearse mediante uno de los contenedores interiores.
 */

.container-full,
.container-wide,
.container,
.container-content,
.container-reading {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--hemik-container-gutter);
}

.container-full {
    max-width: none;
}

.container-wide {
    max-width: calc(var(--hemik-container-wide) + (var(--hemik-container-gutter) * 2));
}

.container,
.container-content {
    max-width: calc(var(--hemik-container-content) + (var(--hemik-container-gutter) * 2));
}

.container-reading {
    max-width: calc(var(--hemik-container-reading) + (var(--hemik-container-gutter) * 2));
}

/* Alineaciones nativas de WordPress. */
.alignwide {
    width: min(
        calc(100vw - (var(--hemik-container-gutter) * 2)),
        var(--hemik-container-wide)
    );
    max-width: none;
    margin-inline: 50%;
    transform: translateX(-50%);
}

.alignfull {
    width: 100vw;
    max-width: none;
    margin-inline: 50%;
    transform: translateX(-50%);
}


/* --------------------------------------------------------------
 * Reading container behavior
 * -------------------------------------------------------------- */
.container-reading {
    --hemik-reading-gutter: clamp(1.125rem, 4vw, 2rem);

    max-width: calc(var(--hemik-container-reading) + (var(--hemik-reading-gutter) * 2));
    padding-inline: var(--hemik-reading-gutter);
}

.container-reading > .alignwide,
.container-reading > .alignfull {
    max-width: none;
}