/**
 * Rejilla de tarjetas de CR (Contenido Responsable) de la portada y de los archives de
 * categoría: contenedor 990px, gap 15px.
 *
 * Sistema de slots: columnas fluidas (`1fr`); cada tarjeta vive
 * dentro de un `.cr-slot` (`<li>`, ver inc/class-cr-archive-mosaic.php) que
 * declara su propia `aspect-ratio` y escala la tarjeta ENTERA con
 * transform:scale() partiendo de su lienzo nativo (320×320 / 655×320,
 * definido en innovalike-cr-card.css, plugin) — la tarjeta nunca se deforma
 * ni refluye su texto, a cualquier ancho se ve idéntica, solo más pequeña.
 *
 * Breakpoints (solo uno):
 * - Escritorio y tablet: 3 columnas fluidas SIEMPRE. El escalado
 *   proporcional del slot resuelve el ajuste a cualquier ancho intermedio.
 * - Móvil (<768px, único breakpoint del sistema): UNA columna a ancho completo
 *   (decisión del 2026-09-21), filas `auto` y gap fijo de 15px. Las noticias se ven
 *   todas cuadradas (1x1); los anuncios conservan su proporción real.
 *
 * Slots `--1x2`/`--2x2` (anuncios): preparados para anuncios de esa forma.
 *
 * La rejilla es del TEMA (layout), no del plugin: el CSS de
 * la tarjeta en sí (.innovalike-cr-card) sigue viviendo en
 * innovalike-cr-card.css (plugin) y no se toca aquí.
 *
 * Variables de color por categoría: mismas definiciones que
 * cr-single.css (single del CR), replicadas aquí en vez de depender de que
 * ese archivo esté encolado — el archive y el single son documentos
 * distintos con enqueue condicional independiente (ver
 * innovalike_theme_enqueue_cr_archive_assets() en inc/class-assets.php). Las
 * clases .cr-{slug} ya las inyecta Innovalike_Shortcodes::add_category_body_classes()
 * (plugin) en el <body> también para is_category(), sin cambios necesarios
 * ahí.
 */

:root {
    --innovalike-cr-cat-primary: #B6B6B6;
    --innovalike-cr-gray-text: #4D4D4D;
    --innovalike-cr-font: "Raleway", sans-serif;

    /* Botón "Cargar más": azul claro corporativo. NO depende de la categoría —
       es una acción de la interfaz, no contenido, así que se ve igual en todas
       las vistas (archive y portada).

       El fondo es el azul más claro del sistema de diseño del plugin
       (innovalike-base.css: --innovalike-primary-lighter); el texto y la
       sombra, el azul primario (#064C9B), el mismo de los títulos del single.

       Sobre un fondo tan claro el texto NO puede ir en blanco (contraste 1.07,
       ilegible). En azul oscuro da 7.80, por encima del 4.5 que pide WCAG AA. */
    --innovalike-cr-btn: #f1f8ff;
    --innovalike-cr-btn-text: #064C9B;
}

.cr-proyectos-idi {
    --innovalike-cr-cat-primary: #5DAB46;
}

/* El mosaico de portada mezcla todas las categorías, así que el <body> no
   lleva ninguna clase `.cr-*` y heredaría el gris neutro del :root. Se le da
   el verde corporativo, que es el color principal de la marca. */
.innovalike-archive-cr--home {
    --innovalike-cr-cat-primary: #5DAB46;
}
/* .cr-productos-y-servicios es la clase legacy (categoría 12, vacía tras el
   desdoblamiento en Producto/Servicio/Evento); las otras tres son las
   vigentes. `.cr-eventos` faltaba aquí — sí está en cr-single.css. */
.cr-productos-y-servicios,
.cr-productos,
.cr-servicios,
.cr-eventos {
    --innovalike-cr-cat-primary: #EDA714;
}

.innovalike-archive-cr {
    padding: 0 20px;
    box-sizing: border-box;
}

.innovalike-archive-cr__container {
    max-width: 990px;
    margin: 0 auto;
    padding-bottom: 50px; /* Medido: margin-bottom del container original (152b796) */
    /* Contenedor de consulta: permite que el grid exprese sus medidas en
       `cqw` (% del ancho de este contenedor), que es lo que hace que columna,
       fila y gap encojan TODOS en la misma proporción. */
    container-type: inline-size;
}

/* ==========================================================================
   Grid — 3 columnas FLUIDAS siempre (sin breakpoint de tablet). El
   escalado proporcional del slot (ver más abajo) es lo que mantiene la
   tarjeta legible y sin deformar a cualquier ancho entre el móvil y el
   escritorio — la rejilla en sí no necesita un paso intermedio.
   ========================================================================== */
.innovalike-archive-cr__grid {
    /* Medidas proporcionales al ancho del contenedor (cqw = 1% de ese ancho).
       A 990px: gap 15px y columna 320px EXACTOS — idéntico al escritorio de
       siempre. Por debajo, los tres encogen a la vez, así que la maqueta se ve
       igual, solo más pequeña. */
    --cr-gap: 1.5151515152cqw;        /* 15 / 990  */
    --cr-col: 32.3232323232cqw;       /* 320 / 990 */

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Filas PROPORCIONALES a la columna, con span real (E3): un slot de 2
       filas mide (fila + gap + fila), simétrico al de 2 columnas, y un
       anuncio vertical (320×655) encaja sin deformarse.

       La altura de fila se declara EXPLÍCITAMENTE y en la misma proporción
       que la columna, en vez de dejarla en `auto`. Dos razones, ambas
       medidas:

       a) `320px` fijo NO vale: las columnas son fluidas, así que por debajo
          de 1030px la columna baja (a 1024px: 313px) mientras la fila seguía
          en 320 — la tarjeta, que escala por ANCHO, quedaba en 313×313 dentro
          de un slot de 313×320, con 6,78px de hueco muerto bajo cada una.

       b) `auto` TAMPOCO: el navegador dimensiona la fila antes de resolver el
          aspect-ratio de los slots, y el 1x2 (que abarca dos filas)
          distorsiona el reparto — medido: filas de 301,9px con slots de
          313,2px, que las desbordaban y se comían el gap (separación
          vertical de 3,7px frente a 14,67px horizontal).

       Una fila = una columna (el slot 1x1 es cuadrado). Se declara con la
       variable --cr-col, que el propio grid calcula a partir de su ancho
       real (ver más abajo): así la fila encoge exactamente igual que la
       columna, y la separación vertical se mantiene idéntica a la
       horizontal a cualquier ancho. */
    grid-auto-rows: var(--cr-col);
    /* dense (E4): nunca se ve un hueco, aunque un ciclo no cuadre.
       Coste medido y aceptado: el orden visual puede no coincidir con el
       cronológico cuando hay piezas de 2 filas (una noticia posterior sube
       a tapar el hueco lateral que deja un 1x2). */
    grid-auto-flow: row dense;
    list-style: none;
    margin: 0;
    padding: 0;
    /* El gap ESCALA con la tarjeta, no se queda fijo.
       Las columnas son fluidas (1fr), así que entre 1030px y 768px de viewport
       la tarjeta se encoge (escala 1,000 → 0,727) — pero un `gap: 15px` fijo no
       lo hacía, y su peso visual respecto a la tarjeta crecía: a 768px pesaba un
       37% más de lo que le corresponde. Se percibía como una separación
       "dinámica" que antes era fija, porque antes las columnas medían 320px
       fijos y la tarjeta nunca encogía.
       15/990 = 1.5151…% del ancho del grid: a 990px da 15px EXACTOS (idéntico
       al comportamiento actual en escritorio) y por debajo encoge en la misma
       proporción que la tarjeta, manteniendo la maqueta idéntica a cualquier
       ancho. Los 990px del divisor son el `max-width` del contenedor. */
    /* Mismo gap en los dos ejes, ambos proporcionales.
       ⚠️ No usar `%` en el row-gap: en CSS Grid un gap porcentual se resuelve
       siempre contra el ANCHO, y el resultado no cuadraba (medido: 6,61px
       verticales frente a 14,67px horizontales). `cqw` sí funciona porque es
       una unidad de longitud resuelta, no un porcentaje contextual. */
    gap: var(--cr-gap);
}

/* ==========================================================================
   Slots: cada <li class="cr-slot cr-slot--{variant}"> declara su
   relación de aspecto nativa y escala la tarjeta que contiene con
   transform:scale() — la tarjeta se maqueta SIEMPRE a su lienzo nativo
   (320×320 / 655×320, ver innovalike-cr-card.css del plugin) y se escala
   entera, nunca se deforma ni refluye su texto.

   ⚠️ Trampa verificada:
   scale(calc(100cqw / 320)) — dividir entre un NÚMERO — devuelve
   "transform: none" EN SILENCIO (la tarjeta se queda a tamaño nativo y
   desborda su slot, sin error en consola). Hay que dividir entre una
   LONGITUD: 320px. Solo así el resultado de calc() es adimensional y
   scale() lo acepta. */
.cr-slot {
    container-type: inline-size;
    position: relative;
    overflow: hidden;
    /* Sin aspect-ratio en escritorio: la altura la fijan las filas explícitas
       del grid (`grid-auto-rows`, arriba), que ya son proporcionales a la
       columna. Declarar además un aspect-ratio aquí haría que el slot se
       dimensionara por su cuenta y desbordara su fila. En el breakpoint móvil
       sí se usa, porque allí las filas pasan a `auto` (ver más abajo). */
}

/* Tamaño del slot por DATOS, no por variante (E8): PHP emite data-cols /
   data-rows (lo que el slot OCUPA) y no decide la forma de la tarjeta —
   eso lo resuelve el ancho real, más abajo. Las filas ya miden 320px por
   `grid-auto-rows`, así que un span de 2 da 655px exactos sin declarar
   ningún aspect-ratio. */
.cr-slot[data-cols="2"] {
    grid-column: span 2;
}

.cr-slot[data-rows="2"] {
    grid-row: span 2;
}

.cr-slot > .cr-slot__wide,
.cr-slot > .cr-slot__narrow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cr-slot > .cr-slot__wide > .innovalike-cr-card,
.cr-slot > .cr-slot__narrow > .innovalike-cr-card {
    position: absolute;
    top: 0;
    left: 0;
}

/* Qué variante se VE: por defecto la estrecha (1x1a). Un slot de 2 columnas
   muestra la ancha, salvo en móvil (ver el breakpoint, donde todo colapsa a
   1 columna y la estrecha vuelve a ser la correcta). Se emiten las dos y se
   oculta una, en vez de que PHP elija: el servidor no conoce el viewport. */
.cr-slot > .cr-slot__wide {
    display: none;
}

.cr-slot[data-cols="2"][data-rows="1"] > .cr-slot__wide {
    display: block;
}

.cr-slot[data-cols="2"][data-rows="1"] > .cr-slot__narrow {
    display: none;
}

/* Escalado proporcional: el lienzo nativo de cada variante partido
   entre el ancho fluido real del slot (100cqw, unidad de contenedor — ver
   container-type:inline-size arriba) da el factor de escala exacto. Medido:
   slot de 223.3px de ancho → matrix(0.6979…) → 0.6979 × 320 = 223.3px
   exactos. */
.cr-slot > .cr-slot__narrow > .innovalike-cr-card {
    transform: scale(calc(100cqw / 320px));
}

.cr-slot > .cr-slot__wide > .innovalike-cr-card {
    transform: scale(calc(100cqw / 655px));
}

/* ==========================================================================
   Slot de anuncio — placeholder a medida real (E5)
   El CPT `anuncio` se conecta en el paso siguiente; hoy se pinta un hueco a
   la medida exacta que tendrá el banner (320×655 vertical, 655×320
   horizontal) para poder juzgar el layout en pantalla.
   ========================================================================== */
.cr-ad-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: repeating-linear-gradient(
        45deg,
        var(--innovalike-cr-gray-bg, #f2f2f2),
        var(--innovalike-cr-gray-bg, #f2f2f2) 10px,
        #e8e8e8 10px,
        #e8e8e8 20px
    );
    border: 1px dashed #b6b6b6;
    box-sizing: border-box;
    font-family: var(--innovalike-cr-font, sans-serif);
    color: var(--innovalike-cr-gray-text, #4d4d4d);
}

/* Imagen temporal del anuncio (pruebas de diseño): rellena el slot. */
.cr-ad-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cr-ad-placeholder__label {
    font-size: 14px;
    font-weight: 600;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cr-ad-placeholder__size {
    font-size: 12px;
    opacity: 0.7;
}

/* ==========================================================================
   Responsive — único breakpoint del sistema
   ========================================================================== */

/* Móvil: 2 columnas. Las 1x1 ocupan 1 columna (dos por fila); la 2x1 sigue
   ocupando 2 columnas (ancho completo, span 2 heredado de .cr-slot--2x1) —
   mismo mosaico que en escritorio, solo cambian cuántas columnas hay. El
   escalado proporcional (arriba) ya resuelve que la tarjeta siga siendo
   legible sin deformarse a este ancho — no hace falta ninguna regla propia
   de tarjeta aquí, target: el slot solo. */
@media (max-width: 767px) {
    .innovalike-archive-cr {
        padding: 0 15px;
    }

    .innovalike-archive-cr__grid {
        /* UNA sola columna a ancho completo (decisión del 2026-09-21). Con los
           15px de padding lateral del contenedor, a 390px de viewport la tarjeta
           mide 360px y se escala a 1,13 — el título pasa de 7,7px (2 columnas) a
           16,9px. De 360px de viewport en adelante la escala es > 1, así que la
           tarjeta se ve incluso más grande que su tamaño nativo. */
        grid-template-columns: 1fr;
        /* La fila deja de ser proporcional a la columna: a este ancho la
           tarjeta se escala por ENCIMA de su lienzo nativo (345px pintados a
           390px de viewport). `auto` deja que cada slot declare su alto con
           aspect-ratio. */
        grid-auto-rows: auto;
        /* Gap FIJO en móvil: con una sola columna no hay proporción que
           mantener entre tarjeta y separación, y el cálculo proporcional daba
           5,22px (1,51% de los 345px del contenedor) — demasiado apretado.
           15px es el mismo valor que en escritorio a tamaño completo. */
        gap: 15px;
    }

    /* Con filas automáticas, el alto lo fija el aspect-ratio de cada slot.
       Las NOTICIAS se ven todas como 1x1 (cuadradas) en móvil. */
    .cr-slot {
        aspect-ratio: 320 / 320;
    }

    .cr-slot[data-rows="2"] {
        aspect-ratio: 320 / 655;
    }

    /* Los ANUNCIOS conservan su forma real en móvil (decisión del usuario,
       2026-09-21): un banner es una pieza gráfica con proporción fija, y
       recortarlo o estirarlo lo estropearía. Cada uno mantiene su ratio
       nativo sobre el ancho completo de la pantalla:
         - horizontal 655×320 → 345×168 a 390px de viewport
         - vertical   320×655 → 345×706
       Sin esta regla, el horizontal heredaba el 320/320 de arriba y se
       deformaba a cuadrado (medido: ratio 1.000 cuando debía ser 2.047). */
    .cr-slot--ad[data-cols="2"][data-rows="1"] {
        aspect-ratio: 655 / 320;
    }

    .cr-slot--ad[data-cols="2"][data-rows="2"] {
        aspect-ratio: 655 / 655;
    }

    /* Los slots dejan de ocupar 2 columnas.
       ⚠️ El `grid-column: span 2` DEBE neutralizarse: en una rejilla de 1
       columna, un hijo que pide 2 crea una columna implícita y deja a sus
       vecinas con 0px de ancho (invisibles). Es el mismo bug que apareció en
       v1.5.4 — medido de nuevo aquí antes de corregirlo:
       `grid-template-columns` resolvía a "0px 330px". */
    .cr-slot[data-cols="2"] {
        grid-column: auto;
    }

    /* Toda tarjeta de noticia se ve en su variante ESTRECHA (1x1a): la ancha
       se maqueta sobre un lienzo de 655px y a 345px de ancho se saldría del
       slot (medido antes de corregirlo: 706px pintados en un slot de 345px,
       recortados por overflow). Como PHP emite las dos, aquí basta con
       invertir cuál se muestra. */
    .cr-slot[data-cols="2"][data-rows="1"] > .cr-slot__wide {
        display: none;
    }

    .cr-slot[data-cols="2"][data-rows="1"] > .cr-slot__narrow {
        display: block;
    }

    /* El anuncio VERTICAL se queda vertical en móvil (decisión del usuario,
       2026-09-21): conserva su `grid-row: span 2`, así que sigue midiendo
       320+15+320 = 655px de alto sobre el ancho completo de la pantalla. */
}

/* ==========================================================================
   Paginación (funciona sin JS — WordPress core paginate_links())
   ========================================================================== */
.innovalike-archive-cr__pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.innovalike-archive-cr__pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.innovalike-archive-cr__pagination .page-numbers a,
.innovalike-archive-cr__pagination .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid var(--innovalike-cr-cat-primary, #5DAB46);
    color: var(--innovalike-cr-cat-primary, #5DAB46);
    font-family: var(--innovalike-cr-font, sans-serif);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
}

.innovalike-archive-cr__pagination .page-numbers.current {
    background-color: var(--innovalike-cr-cat-primary, #5DAB46);
    color: #fff;
}

.innovalike-archive-cr__pagination .page-numbers.dots {
    border: none;
}

/* Oculta visualmente la paginación por enlaces cuando el JS del "Cargar
   más" toma el control (assets/js/cr-archive.js le añade esta clase) — pero
   el HTML de los enlaces sigue en el DOM, nunca se elimina: si el JS falla
   o no carga, el usuario sigue pudiendo navegar por aquí. */
.innovalike-archive-cr__pagination.is-js-controlled {
    display: none;
}

/* ==========================================================================
   "Cargar más" (mejora progresiva sobre la paginación real)
   ========================================================================== */
.innovalike-archive-cr__load-more-wrap {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.innovalike-archive-cr__load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    height: 44px;
    padding: 0 24px;
    border-radius: 25px;
    border: none;
    background-color: var(--innovalike-cr-btn, #f1f8ff);
    color: var(--innovalike-cr-btn-text, #064C9B);
    font-family: var(--innovalike-cr-font, sans-serif);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    /* Sombra dura desplazada, el patrón de los botones corporativos de la
       intranet (`.innovalike-button-publica`, innovalike-components.css del
       plugin): se acorta al pasar el ratón mientras el botón se desplaza esa
       misma distancia, así que su esquina inferior derecha queda fija y parece
       hundirse. Va en el azul oscuro, que sobre este fondo tan claro es además
       lo que le da silueta contra el blanco de la página.

       El hover NO cambia el color de fondo: el único efecto es el de la
       sombra. */
    box-shadow: 4px 4px 0 0 var(--innovalike-cr-btn-text, #064C9B);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.innovalike-archive-cr__load-more:hover,
.innovalike-archive-cr__load-more:focus-visible {
    box-shadow: 2px 2px 0 0 var(--innovalike-cr-btn-text, #064C9B);
    transform: translate(2px, 2px);
    /* `background-color` y `color` explícitos: el reset del tema padre define
       `button:hover` y, sin esto, pone el texto en blanco — sobre este fondo
       claro da contraste 1.49, ilegible. Verificado en pantalla. */
    background-color: var(--innovalike-cr-btn, #f1f8ff);
    color: var(--innovalike-cr-btn-text, #064C9B);
}

/* Al pulsar, la sombra desaparece del todo. */
.innovalike-archive-cr__load-more:active {
    box-shadow: 0 0 0 0 var(--innovalike-cr-btn-text, #064C9B);
    transform: translate(4px, 4px);
    background-color: var(--innovalike-cr-btn, #f1f8ff);
    color: var(--innovalike-cr-btn-text, #064C9B);
}

.innovalike-archive-cr__load-more:disabled {
    opacity: 0.6;
    cursor: default;
    background-color: var(--innovalike-cr-btn, #f1f8ff);
    color: var(--innovalike-cr-btn-text, #064C9B);
    box-shadow: 2px 2px 0 0 var(--innovalike-cr-btn-text, #064C9B);
    transform: translate(2px, 2px);
}

.innovalike-archive-cr__load-more-spinner {
    display: none;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2px solid var(--innovalike-cr-btn-text, #064C9B);
    border-top-color: transparent;
    border-radius: 50%;
    animation: innovalike-archive-cr-spin 0.7s linear infinite;
}

.innovalike-archive-cr__load-more.is-loading .innovalike-archive-cr__load-more-spinner {
    display: inline-block;
}

@keyframes innovalike-archive-cr-spin {
    to {
        transform: rotate(360deg);
    }
}

.innovalike-archive-cr__load-more-message {
    margin: 0;
    font-family: var(--innovalike-cr-font, sans-serif);
    font-size: 14px;
    color: var(--innovalike-cr-gray-text, #4D4D4D);
    text-align: center;
}

.innovalike-archive-cr__load-more-message--error {
    color: #c0392b;
}