/* =========================================================================
   NVL HOME — estilos exclusivos de templates/home.php: ritmo de sección,
   alternancia de fondo, parrilla de categorías, tarjeta de categoría y
   destacados.

   EL HÉROE YA NO ESTÁ AQUÍ (2026-10-24): se mudó entero a nvl-home-hero.css
   cuando la vista de categoría pasó a usar el mismo componente. Esta hoja
   depende de aquella, así que la cascada no cambia de orden.

   Depende de nvl-home-hero.css (y esa, de nvl-components.css, que a su vez
   depende de nvl-base.css) — ver inc/assets.php. Mobile-first.
   docs/home-especificacion-visual.md §4 y §5.1 son la fuente de cada regla.
   ========================================================================= */

/* --- Ritmo vertical propio de la Home (no altera el de categoría) -------- */

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

@media (min-width: 768px) {
    .nvl-section--spacious {
        padding-block: var(--nvl-space-4xl);
    }
}

@media (min-width: 1280px) {
    .nvl-section--spacious {
        padding-block: var(--nvl-space-5xl);
    }
}

/* --- Alternancia de fondo (bookend oscuro) -------------------------------- */

.nvl-home-section--surface {
    background: var(--nvl-color-surface);
}

.nvl-home-section--alt {
    background: var(--nvl-color-section-alt);
}

/* --- Parrilla de categorías ------------------------------------------------ */

#categorias {
    scroll-margin-top: var(--nvl-space-xl);
}

/* CUENTAS EXPLÍCITAS, NUNCA auto-fit. Aquí estuvo el defecto que el owner
   reportó el 2026-10-21: `repeat(auto-fit, minmax(min(100%, 18rem), 1fr))`
   colapsa las pistas vacías, así que con UNA categoría el grid computaba
   `1256px 0px 0px 0px` y la tarjeta medía 1256×1093 —4.3 veces la de cuatro—
   mientras la foto se ampliaba un 64% desde un archivo de 768. Con cinco
   imprimía cuatro y una huérfana estirada a todo el ancho.
   Es la misma doctrina que la parrilla hermana de productos ya tenía escrita
   (nvl-product-card.css): el número de columnas es una DECISIÓN, no una
   propiedad emergente de un track mínimo. Si una anchura futura pide otra
   cuenta, se añade un escenario; no se vuelve a un track mínimo. */

.nvl-category-grid {
    --nvl-cat-cols: 1;
    display: grid;
    list-style: none;
    gap: var(--nvl-space-md);
    grid-template-columns: repeat(var(--nvl-cat-cols), minmax(0, 1fr));
}

@media (min-width: 640px) {
    .nvl-category-grid {
        --nvl-cat-cols: 2;
        gap: var(--nvl-space-lg);
    }

    /* Con una o dos tarjetas no hay tres columnas que llenar: se reduce la
       cuenta y se topa el ancho del BLOQUE —no el de la tarjeta— para que las
       pistas sigan siendo iguales entre sí y la foto no se estire.
       Las dos reglas se declaran UNA SOLA VEZ y aquí, aunque gobiernen también
       el tramo de ≥1024: el :has() pesa más que la clase suelta, así que gana
       sobre el `--nvl-cat-cols: 3` de abajo sin depender del orden.
       SIN SOPORTE DE :has() se queda la cuenta por defecto del tramo —tres
       columnas— y una categoría sola mide 397px. Acotado y nunca el defecto. */
    .nvl-category-grid:has(> li:only-child) {
        --nvl-cat-cols: 1;
        max-inline-size: var(--nvl-category-card-max);
    }

    .nvl-category-grid:has(> li:nth-child(2):last-child) {
        --nvl-cat-cols: 2;
        max-inline-size: calc(2 * var(--nvl-category-card-max) + var(--nvl-space-xl));
    }
}

@media (min-width: 1024px) {
    .nvl-category-grid {
        --nvl-cat-cols: 3;
        gap: var(--nvl-space-xl);
    }
}

/* --- Tarjeta de categoría (components/category-card.php) -----------------

   LA FOTOGRAFÍA ES LA TARJETA y el texto va encima, replicando la referencia
   que eligió el owner el 2026-10-21 (vivealcien.mx). Ya no es una caja blanca
   con una banda de foto arriba: no hay borde, no hay sombra y no hay cuerpo
   blanco. Tampoco hay señal de acción —el «Ver peces →» se retiró con su
   campo ACF—: la baldosa entera es la puerta.

   El alto lo fija la PROPORCIÓN, así que desaparecen el height:100% y el
   flex-grow que igualaban las tarjetas de una fila: ahora se igualan solas.

   APILADO CON GRID Y NADA POSICIONADO, y esto no es una preferencia. El área
   pulsable de la tarjeta es .nvl-category-card__link::after con inset:0, que
   se ancla al ancestro POSICIONADO más cercano: si el cuerpo se posicionara en
   absoluto para superponerlo, ese ::after se encogería al cuerpo y dejaría de
   ser pulsable la mitad superior de la tarjeta, en silencio y sin error. Con
   media y cuerpo en la misma celda de una rejilla de una sola celda, ninguno
   de los dos está posicionado, el orden de pintado es el del DOM —el cuerpo
   encima— y el único ancestro posicionado sigue siendo la tarjeta. */

.nvl-category-card {
    position: relative;
    display: grid;
    grid-template-areas: "nvl-category-stack";
    aspect-ratio: var(--nvl-ratio-card);
    border-radius: var(--nvl-radius-xl);
    overflow: hidden;
    /* Suelo bajo la foto mientras carga. Una categoría sin imagen no llega a
       imprimirse: templates/home.php la descarta antes. */
    background: var(--nvl-color-secondary);
}

.nvl-category-card__media,
.nvl-category-card__body {
    grid-area: nvl-category-stack;
}

.nvl-category-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--nvl-duration-slower) var(--nvl-ease-out);
}

/* El velo viaja con el CUERPO y no con la tarjeta: así su garantía de
   contraste se mide contra una caja de alto casi constante en vez de contra
   una foto que va de 160 a 330px de alto. El padding superior es lo que le da
   recorrido para desvanecerse; la cuenta está en el token (nvl-base.css). */
.nvl-category-card__body {
    align-self: end;
    /* POR QUÉ ESTO NO SE PUEDE QUITAR. El acercamiento del hover aplica un
       `transform` a la imagen, y un transform convierte al elemento en contexto
       de apilado: pasa a pintarse en la capa de los descendientes posicionados,
       POR ENCIMA de este cuerpo, que es un ítem de rejilla sin posicionar. Sin
       esta línea, al pasar el puntero la foto tapa el velo y el texto y la
       tarjeta se queda en un color plano, sin error de consola. Verificado en
       el navegador el 2026-10-21, después de que el owner lo viera en staging.
       `isolation` y no `transform: translateZ(0)` ni `will-change`: aquellos
       crearían también BLOQUE CONTENEDOR para los descendientes absolutos, y el
       ::after del enlace —que es lo que hace pulsable la tarjeta entera— se
       encogería a este cuerpo. `isolation` crea el contexto y no el bloque. */
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: var(--nvl-space-3xs);
    padding: var(--nvl-space-md);
    padding-block-start: var(--nvl-space-3xl);
    background-image: var(--nvl-gradient-category);
}

.nvl-category-card__title {
    font-size: var(--nvl-text-lg);
    font-weight: var(--nvl-weight-extrabold);
    line-height: var(--nvl-leading-heading);
    color: var(--nvl-color-surface);
}

@media (min-width: 768px) {
    .nvl-category-card__title {
        font-size: var(--nvl-text-xl);
    }
}

.nvl-category-card__link {
    color: inherit;
    text-decoration: none;
}

/* Un solo tab stop por tarjeta, y el área pulsable es la tarjeta entera.
   CONTRATO CON assets/js/nvl-analytics.js, que engancha esta clase para emitir
   select_content y lee su href: ni la clase ni el elemento <a> se renombran,
   y el `cue` nunca vuelve a ser un segundo enlace. */
.nvl-category-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.nvl-category-card__text {
    font-size: var(--nvl-text-sm);
    line-height: var(--nvl-leading-relaxed);
    color: var(--nvl-color-surface);
    /* La bajada es un textarea sin límite y aquí va sobre la foto: dos líneas
       son el presupuesto (~60 caracteres a 397px de ancho). Lo que sobre se
       recorta en vez de empujar el bloque hacia arriba hasta tapar la imagen. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
    .nvl-category-card:hover .nvl-category-card__image {
        transform: scale(1.05);
    }
}

/* Alto contraste: el velo es background-image y el texto pasa al color forzado
   del sistema, así que sobre la fotografía quedaría ilegible. Se retira la
   imagen y el bloque se apoya en la superficie del sistema. Se pierde la foto
   y se conserva la puerta, que es lo que el usuario necesita. */
@media (forced-colors: active) {
    .nvl-category-card {
        border: var(--nvl-border-hairline) solid CanvasText;
    }

    .nvl-category-card__media {
        display: none;
    }

    .nvl-category-card__body {
        background: Canvas;
    }
}

/* --- Productos destacados: misma rejilla que el catálogo, densidad compacta
   El modificador YA NO cambia el número de columnas: hereda la escalera de
   .nvl-product-grid (nvl-product-card.css) — 1 columna, 2 desde 640px y 3
   desde 1024px—, que es la de la parrilla de categoría. Antes iba una columna
   por delante en cada tramo (2 / 3 / 4) y las tarjetas quedaban demasiado
   estrechas: a 1024px el botón disponía de 198px útiles y "Agregar al
   carrito" pide ~207px, así que la etiqueta se partía en dos líneas y la fila
   entera crecía al agregar. La regla es que el texto del botón no se abrevia
   ni se achica: si no cabe, se le da ancho a la tarjeta.

   Lo compacto de esta parrilla es solo su DENSIDAD interna —título, cuerpo y
   acciones, en nvl-product-card.css— y estos huecos más cerrados. */

.nvl-product-grid--compact {
    gap: var(--nvl-space-xs);
}

@media (min-width: 640px) {
    .nvl-product-grid--compact {
        gap: var(--nvl-space-md);
    }
}

@media (min-width: 1024px) {
    .nvl-product-grid--compact {
        gap: var(--nvl-space-lg);
    }
}

/* --- Movimiento reducido: selectores propios de la Home ------------------- */
/* El del pez del héroe viaja con su animación, en nvl-home-hero.css. */

@media (prefers-reduced-motion: reduce) {
    /* La tarjeta ya no se eleva ni tiene señal de acción que desplazar: desde
       el rediseño del 2026-10-21 lo único que se mueve es el acercamiento de
       la fotografía. */
    .nvl-category-card__image {
        transition: none;
    }

    .nvl-category-card:hover .nvl-category-card__image {
        transform: none;
    }
}