/*
 * portal-cuerpo.css — El cuerpo de la nota, tal como sale del editor.
 *
 * El diseño de `web5/` dibujó la página de la nota, pero no los bloques que la
 * redacción escribe dentro: la rejilla de doce columnas, las citas, las
 * columnas, los pies de imagen y las tipografías que se eligen por bloque.
 * Todo eso vivía en el tema anterior y es lo único que sobrevive de él.
 *
 * Es lo que hace falta para que `article-body` enseñe la nota como la escribió
 * la redacción y como se la enseña el editor mientras escribe.
 */

/*
 * Tipografías que la redacción puede aplicar a un bloque de la nota.
 *
 * Se sirven desde este mismo dominio, sin depender de Google ni de ningún otro
 * CDN: los archivos los descarga Vite al compilar y los copia aquí el comando
 * `php artisan fuentes:publicar`.
 */

@font-face {
    font-family: "Merriweather";
    src: url("../fonts/merriweather-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Merriweather";
    src: url("../fonts/merriweather-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lora";
    src: url("../fonts/lora-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lora";
    src: url("../fonts/lora-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/playfair-display-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/playfair-display-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Sans 3";
    src: url("../fonts/source-sans-3-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Sans 3";
    src: url("../fonts/source-sans-3-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/roboto-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/roboto-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Las que la redacción puede elegir por bloque (ver `ArticleFonts`). */
    --fuente-merriweather: "Merriweather", Georgia, serif;
    --fuente-lora: "Lora", Georgia, serif;
    --fuente-playfair: "Playfair Display", Georgia, serif;
    --fuente-source-sans: "Source Sans 3", system-ui, sans-serif;
    --fuente-roboto: "Roboto", system-ui, sans-serif;
}

/* ------------------------------------------------------ Bloques del texto -- */

.article-body > * {
    margin-block: 0 1.25rem;
}

/* Primer párrafo del cuerpo como entradilla. */
.article-body > .bloque-parrafo:first-child {
    font-size: 1.2rem;
    line-height: 1.55;
}

.article-body a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-body a:hover {
    color: var(--color-accent-hover);
}

/* Las listas del cuerpo sí llevan viñeta: comunican enumeración. */
.bloque-lista {
    list-style: disc;
    padding-left: 1.5rem;
}

ol.bloque-lista {
    list-style: decimal;
}

.bloque-lista__elemento {
    margin-bottom: 0.375rem;
}

.article-body .bloque-cita {
    border-left: 4px solid var(--color-accent);
    padding: 0.25rem 0 0.25rem 1.25rem;
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.4;
    color: var(--color-text);
}

.article-body .bloque-cita__autor {
    font-style: normal;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}

.article-body .bloque-encabezado {
    color: var(--color-navy);
    font-weight: 800;
    line-height: 1.25;
    margin-top: 2rem;
}

.article-body .bloque-imagen {
    border-radius: 8px;
    overflow: hidden;
}

.bloque-imagen__archivo {
    width: 100%;
}

.article-body .bloque-imagen__pie {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    padding-top: 0.5rem;
}

.bloque-embed__marco {
    aspect-ratio: 16 / 9;
    width: 100%;
    border: 0;
}

/* Dentro del cuerpo la publicidad no ocupa todo el ancho de lectura. */
.article-body .ad-container img {
    max-width: 20rem;
}

/* ------------------------------------------- Acomodo elegido en el editor -- */

/*
 * Modificadores que la redacción aplica desde los ajustes de cada bloque.
 * Solo alteran el acomodo dentro del flujo del documento: nada se posiciona
 * de forma absoluta, así que la nota sigue siendo legible en cualquier ancho.
 */

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

.bloque--izquierda,
.bloque--derecha {
    max-width: 55%;
    margin-bottom: 1rem;
}

.bloque--izquierda {
    float: left;
    margin-right: 1.5rem;
}

.bloque--derecha {
    float: right;
    margin-left: 1.5rem;
}

/* El texto vuelve a ocupar todo el ancho al terminar el cuerpo. */
.article-body::after {
    content: '';
    display: block;
    clear: both;
}

.bloque--ancha {
    max-width: 55rem;
    margin-inline: calc((100% - 55rem) / 2);
}

/*
 * A todo lo ancho de la columna de lectura. En el tema anterior esto se salía
 * al ancho de la ventana, pero ahora la nota vive en ocho columnas con un
 * bloque al lado: desbordarse se le comería.
 */
.bloque--completa {
    max-width: none;
    width: 100%;
    margin-inline: 0;
}

/* En pantallas estrechas ningún bloque flota ni se desborda. */
@media (max-width: 48rem) {
    .bloque--izquierda,
    .bloque--derecha,
    .bloque--ancha,
    .bloque--completa {
        float: none;
        width: auto;
        max-width: 100%;
        margin-inline: 0;
    }
}

/* --------------------------------------------- Rejilla arrastrable (grid) -- */

/*
 * Acomodo en malla de 12 columnas. Cada celda declara en qué columna empieza
 * (`--col`) y cuántas ocupa (`--ancho`); el alto lo da su contenido. El orden
 * del HTML sigue el orden de lectura, así que la nota es indexable aunque las
 * celdas se coloquen lado a lado. En pantallas estrechas todo se apila.
 */
.rejilla {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 1.25rem 1.5rem;
    align-items: start;
    clear: both;
}

.rejilla__celda {
    grid-column: var(--col) / span var(--ancho);
    min-width: 0;
}

.rejilla__celda > *:last-child {
    margin-bottom: 0;
}

@media (max-width: 48rem) {
    .rejilla {
        display: block;
    }

    .rejilla__celda {
        margin-bottom: 1.25rem;
    }
}

/* -------------------------------------------------------------- Columnas -- */

.bloque-columnas {
    display: grid;
    gap: 1.5rem;
    clear: both;
}

@media (min-width: 48rem) {
    .bloque-columnas--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

.bloque-columnas__columna > *:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------ Tipografía por bloque -- */

/*
 * El modificador lo escribe el renderizador a partir del catálogo de
 * `ArticleFonts`; la familia se resuelve aquí, nunca en el HTML de la nota.
 * Se aplica también a los hijos para que las citas y listas hereden la fuente.
 */
.bloque--fuente-merriweather,
.bloque--fuente-merriweather * {
    font-family: var(--fuente-merriweather);
}

.bloque--fuente-lora,
.bloque--fuente-lora * {
    font-family: var(--fuente-lora);
}

.bloque--fuente-playfair,
.bloque--fuente-playfair * {
    font-family: var(--fuente-playfair);
}

.bloque--fuente-source-sans,
.bloque--fuente-source-sans * {
    font-family: var(--fuente-source-sans);
}

.bloque--fuente-roboto,
.bloque--fuente-roboto * {
    font-family: var(--fuente-roboto);
}