/**
 * Archivo de industria (taxonomy-industria.php): hero, intro y franja de
 * marcas ya salen de .page-hero/.section/.section-head de layout.css,
 * .ax-marcas__grilla de marcas.css (plugin) y .ax-producto de carrusel.css
 * (plugin) — acá solo la grilla del catálogo (subcategorías o, si no tiene,
 * productos directos), que es una grilla de verdad (no el carrusel-que-envuelve
 * de .ax-carrusel--grilla, que centra la última fila) y por eso no usa esas
 * clases. Mismo criterio que .envasados-categorias-grid (envasados.css).
 *
 * Como la tarjeta vive fuera de .ax-carrusel, hay que repetirle acá las
 * variables que .ax-producto necesita (--ax-rojo del botón, --ax-marca-* del
 * logo de marca): sin esto quedan sin definir y el botón sale sin fondo hasta
 * el :hover, que sí trae un rojo fijo en la propia hoja de estilos. Mismo
 * motivo para el tamaño del logo de marca más abajo: carrusel.css solo lo
 * define anidado en .ax-carrusel.
 */

/* Intro y marcas van pegadas una a la otra: sin padding-block de .section
   de este lado (5rem) para que no se note el doble espacio entre las dos. */
.section.industria-intro {
    padding-bottom: 0;
}

.section.industria-marcas {
    padding: 2.5rem 0 0;
}

.section.industria-catalogo {
    padding-top: 3rem;
    padding-bottom: 5rem;
}

/* Sin marcas ni catálogo, el hero (o la intro) queda pegado al footer sin
   esto: ninguna otra sección de la página aporta el padding-bottom de abajo. */
#main.industria-archive--vacia {
    padding-bottom: 5rem;
}

/* marcas.css le pone margin-block-start: 4rem para separar un bloque del
   anterior en la página Marcas, donde hay varios uno debajo del otro. Acá
   solo hay uno y el padding-top de arriba ya hace ese espacio: sin esto
   quedaba doble. */
.industria-marcas .ax-marcas__bloque {
    margin-block-start: 0;
}

/* En el teléfono marcas suma un poco de aire propio abajo (arriba ya tiene
   el suyo): sin esto, entre el final de las marcas y el buscador solo queda
   el padding-top de industria-catalogo, que es el mismo en todos los
   tamaños. */
@media (max-width: 767px) {
    .section.industria-marcas {
        padding-bottom: 2.5rem;
    }
}

.industria-catalogo-grid {
    --ax-ratio: 5/6;
    --ax-rojo: var(--color-brand-red, #de1a1c);
    --ax-marca-alto: 34px;
    --ax-marca-ancho: 42%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (max-width: 767px) {
    .industria-catalogo-grid {
        gap: 1rem;
    }
}

/* Una columna en pantallas muy angostas: dos tarjetas de producto a 350px
   dejan el nombre y el botón sin lugar. */
@media (max-width: 350px) {
    .industria-catalogo-grid {
        grid-template-columns: 1fr;
    }
}

/* El buscador (industria-catalogo.js) le pone el atributo hidden a las
   tarjetas que no calzan, pero .ax-producto ya trae "display: flex" en
   carrusel.css — misma especificidad que el [hidden] del navegador, y como
   esa regla de carrusel.css se carga después, le gana. Sin esto la tarjeta
   queda con el atributo puesto (se ve en el inspector) pero nunca desaparece
   de la pantalla. Mismo motivo que .ax-carrusel__diapo[hidden] en
   carrusel.css. */
.industria-catalogo-grid .ax-producto[hidden] {
    display: none;
}

/* Mismo motivo que ".ax-carrusel .ax-producto__marca img" en carrusel.css:
   sin el contenedor delante, un tope de ancho global (Elementor u otro reset
   de la misma especificidad) puede ganarle a esta regla y estirar el logo a
   la caja completa. */
.industria-catalogo-grid .ax-producto__marca img {
    width: auto;
    height: auto;
    max-width: var(--ax-marca-ancho);
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
}

.industria-catalogo-vacio {
    grid-column: 1 / -1;
    color: var(--color-muted);
    text-align: center;
    padding-block: 2rem;
}

/* Buscador: reusa .ax-carrusel__buscador-* de carrusel.css (imagen, tamaño,
   colores ya vienen de ahí), la clase .ax-carrusel acá al lado es solo para
   heredar --ax-rojo y la regla de .ax-carrusel__buscador-limpiar, que en esa
   hoja vive anidada bajo .ax-carrusel — sin .ax-panel adentro el JS del
   carrusel no arranca (ver industria-catalogo.js), así que no hay efecto de
   carrusel de más. */
.industria-catalogo-buscador {
    --ax-rojo: var(--color-brand-red, #de1a1c);
    margin-bottom: 3rem;
}

/* carrusel.css no le pone width al input (ese buscador nace pensado para
   convivir con otros elementos en la cabecera del carrusel, no para ocupar
   una fila entera): acá sí debe ser 100% del contenedor. */
.industria-catalogo-buscador .ax-carrusel__buscador-input {
    width: 100%;
}

@media (min-width: 640px) {
    .industria-catalogo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1025px) {
    .industria-catalogo-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}