/*
 * [bb_categories] — diseño "Categorias" (Claude Design), variante grid.
 * Tiles cuadrados: la geometría queda reservada con aspect-ratio (sin CLS).
 */

.bb-cats {
    padding: 3.5rem 0;
}

.bb-cats__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2rem;
    color: var(--bb-ink) !important; /* el tema fuerza color en h1-h6 */
    text-align: center;
    margin: 0 0 .5rem;
}

.bb-cats__subtitle {
    margin: 0 0 2.25rem;
    text-align: center;
    color: var(--bb-ink-2);
    font-size: 1rem;
}

.bb-cats__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.75rem;
}

.bb-cats__grid li {
    margin: 0;
}

.bb-cats__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .875rem;
    text-decoration: none;
    color: var(--bb-ink);
}

.bb-cats__card:hover {
    color: var(--bb-purple);
    text-decoration: none;
}

.bb-cats__media {
    display: block;
    width: 100%;
    aspect-ratio: 1; /* reserva el cuadrado antes de que llegue la imagen */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    position: relative;
}

/* Fondos pastel §2.5: se ven mientras carga la imagen y en tiles sin imagen */
.bb-cats__media--lavanda { background: var(--bb-purple-50); }
.bb-cats__media--cielo   { background: var(--bb-sky-50); }
.bb-cats__media--durazno { background: var(--bb-coral-50); }
.bb-cats__media--manteca { background: var(--bb-cream); }
.bb-cats__media--menta   { background: var(--bb-mint); }

.bb-cats__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tile sin imagen: inicial grande en el violeta de marca */
.bb-cats__initial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 3.5rem;
    color: var(--bb-purple);
    opacity: .55;
}

.bb-cats__name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.125rem;
    text-align: center;
    transition: color .2s;
}

.bb-cats__card:focus-visible {
    outline: 2px solid var(--bb-purple-deep);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ---------- Variante round ("Categorias v2"): compacta, círculos de 96px ---------- */

.bb-cats--round {
    padding: 2rem 0;
}

.bb-cats--round .bb-cats__title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.bb-cats--round .bb-cats__subtitle {
    margin-bottom: 1.5rem;
}

.bb-cats--round .bb-cats__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.bb-cats--round .bb-cats__grid li {
    width: 110px;
}

.bb-cats--round .bb-cats__card {
    gap: .625rem;
}

.bb-cats--round .bb-cats__media {
    width: 6rem;  /* 96px */
    height: 6rem;
    margin: 0 auto;
    border-radius: 50%;
}

.bb-cats--round .bb-cats__initial {
    font-size: 2.25rem;
}

.bb-cats--round .bb-cats__name {
    font-size: .9375rem; /* 15px */
}

/* ---------- Variante mosaic ("Categorias v3"): bento con imagen a sangre ----------

   CONTRATO DE MEDIDAS (los artes llevan texto: no se pueden recortar):
   todos los tiles tienen SIEMPRE una de dos proporciones, en cualquier pantalla.

     Apaisada  3:1  → cargar 1200×400  (tiles anchos W y hero F en desktop,
                                        ancho completo en mobile)
     Vertical  3:4  → cargar 600×800   (tiles altos T en desktop,
                                        mitades en mobile)

   Desktop: 12 columnas; la ALTURA DE FILA se calcula con container queries a
   partir del ancho del bento, de modo que el tile ancho (6 col × 1 fila) sea
   exactamente 3:1: R = (50cqw − gap/2) / 3. Con eso el tile alto (3 col × 2
   filas) queda en ~3:4,3 y el hero (12 col × 2 filas) en ~2,9:1 — el error lo
   introduce el gap y es < 8%: mantené texto y sujeto dentro del 85% central
   (safe area) y nunca se pierde nada. Mobile: cada tile lleva su aspect-ratio
   exacto (3:1 a ancho completo, 3:4 en mitades): cero recorte.

   Formas: T = alto 3×2 (vertical) · W = ancho 6×1 (apaisada) · F = hero 12×2
   (apaisada). Patrones por cantidad (data-count), sin huecos:
     1: F · 2: W W · 3: F / W W · 4: T W W T · 5: F / T W W T ·
     6: T W W T / W W · 7: F / T W W T / W W · 8: T W W T / T W W T
   El PHP del shortcode espeja estas formas ($mosaic_desktop_shapes) para
   elegir el arte de cada posición. */

.bb-cats__bento {
    container-type: inline-size; /* ancla de los cqw de las filas */
}

.bb-cats--mosaic .bb-cats__grid {
    --bb-cats-gap: 16px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 175px; /* fallback sin container queries */
    grid-auto-rows: calc((50cqw - var(--bb-cats-gap) / 2) / 3); /* tile 6×1 = 3:1 exacto */
    gap: var(--bb-cats-gap);
}

/* El tile es un link con la imagen a sangre completa (sin texto visible;
   el nombre de la categoría va en el aria-label del link). */
.bb-cats__tile {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform .2s ease, box-shadow .2s ease;
}

.bb-cats__tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-pop);
}

.bb-cats__tile:focus-visible {
    outline: 2px solid var(--bb-purple-deep);
    outline-offset: 2px;
}

.bb-cats__tile .bb-cats__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Patrones desktop por cantidad (ver contrato arriba). Áreas: fila-inicio / col-inicio / fila-fin / col-fin. */

/* 8: T W W T / T W W T */
.bb-cats--mosaic [data-count="8"] li:nth-child(1) { grid-area: 1 / 1 / 3 / 4; }
.bb-cats--mosaic [data-count="8"] li:nth-child(2) { grid-area: 1 / 4 / 2 / 10; }
.bb-cats--mosaic [data-count="8"] li:nth-child(3) { grid-area: 2 / 4 / 3 / 10; }
.bb-cats--mosaic [data-count="8"] li:nth-child(4) { grid-area: 1 / 10 / 3 / 13; }
.bb-cats--mosaic [data-count="8"] li:nth-child(5) { grid-area: 3 / 1 / 5 / 4; }
.bb-cats--mosaic [data-count="8"] li:nth-child(6) { grid-area: 3 / 4 / 4 / 10; }
.bb-cats--mosaic [data-count="8"] li:nth-child(7) { grid-area: 4 / 4 / 5 / 10; }
.bb-cats--mosaic [data-count="8"] li:nth-child(8) { grid-area: 3 / 10 / 5 / 13; }

/* 7: F / T W W T / W W */
.bb-cats--mosaic [data-count="7"] li:nth-child(1) { grid-area: 1 / 1 / 3 / 13; }
.bb-cats--mosaic [data-count="7"] li:nth-child(2) { grid-area: 3 / 1 / 5 / 4; }
.bb-cats--mosaic [data-count="7"] li:nth-child(3) { grid-area: 3 / 4 / 4 / 10; }
.bb-cats--mosaic [data-count="7"] li:nth-child(4) { grid-area: 4 / 4 / 5 / 10; }
.bb-cats--mosaic [data-count="7"] li:nth-child(5) { grid-area: 3 / 10 / 5 / 13; }
.bb-cats--mosaic [data-count="7"] li:nth-child(6) { grid-area: 5 / 1 / 6 / 7; }
.bb-cats--mosaic [data-count="7"] li:nth-child(7) { grid-area: 5 / 7 / 6 / 13; }

/* 6: T W W T / W W */
.bb-cats--mosaic [data-count="6"] li:nth-child(1) { grid-area: 1 / 1 / 3 / 4; }
.bb-cats--mosaic [data-count="6"] li:nth-child(2) { grid-area: 1 / 4 / 2 / 10; }
.bb-cats--mosaic [data-count="6"] li:nth-child(3) { grid-area: 2 / 4 / 3 / 10; }
.bb-cats--mosaic [data-count="6"] li:nth-child(4) { grid-area: 1 / 10 / 3 / 13; }
.bb-cats--mosaic [data-count="6"] li:nth-child(5) { grid-area: 3 / 1 / 4 / 7; }
.bb-cats--mosaic [data-count="6"] li:nth-child(6) { grid-area: 3 / 7 / 4 / 13; }

/* 5: F / T W W T */
.bb-cats--mosaic [data-count="5"] li:nth-child(1) { grid-area: 1 / 1 / 3 / 13; }
.bb-cats--mosaic [data-count="5"] li:nth-child(2) { grid-area: 3 / 1 / 5 / 4; }
.bb-cats--mosaic [data-count="5"] li:nth-child(3) { grid-area: 3 / 4 / 4 / 10; }
.bb-cats--mosaic [data-count="5"] li:nth-child(4) { grid-area: 4 / 4 / 5 / 10; }
.bb-cats--mosaic [data-count="5"] li:nth-child(5) { grid-area: 3 / 10 / 5 / 13; }

/* 4: T W W T */
.bb-cats--mosaic [data-count="4"] li:nth-child(1) { grid-area: 1 / 1 / 3 / 4; }
.bb-cats--mosaic [data-count="4"] li:nth-child(2) { grid-area: 1 / 4 / 2 / 10; }
.bb-cats--mosaic [data-count="4"] li:nth-child(3) { grid-area: 2 / 4 / 3 / 10; }
.bb-cats--mosaic [data-count="4"] li:nth-child(4) { grid-area: 1 / 10 / 3 / 13; }

/* 3: F / W W */
.bb-cats--mosaic [data-count="3"] li:nth-child(1) { grid-area: 1 / 1 / 3 / 13; }
.bb-cats--mosaic [data-count="3"] li:nth-child(2) { grid-area: 3 / 1 / 4 / 7; }
.bb-cats--mosaic [data-count="3"] li:nth-child(3) { grid-area: 3 / 7 / 4 / 13; }

/* 2: W W */
.bb-cats--mosaic [data-count="2"] li:nth-child(1) { grid-area: 1 / 1 / 2 / 7; }
.bb-cats--mosaic [data-count="2"] li:nth-child(2) { grid-area: 1 / 7 / 2 / 13; }

/* 1: F */
.bb-cats--mosaic [data-count="1"] li:nth-child(1) { grid-area: 1 / 1 / 3 / 13; }

/* Mobile: 2 columnas, cada tile con su proporción exacta (auto rows). */
@media (max-width: 720px) {
    .bb-cats--mosaic .bb-cats__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
        gap: 12px;
    }
    /* Anula los patrones desktop. El :nth-child(n) iguala la especificidad
       (0,3,1) de los grid-area por data-count: sin él, este reset pierde y
       los tiles siguen pidiendo columnas 4-13 que ya no existen. */
    .bb-cats--mosaic [data-count] li:nth-child(n) {
        grid-area: auto;
        aspect-ratio: 3 / 4; /* mitad de columna: arte vertical */
    }
    /* Ancho completo: arte apaisada (espejo de $mosaic_mobile_shapes en el PHP) */
    .bb-cats--mosaic [data-count="8"] li:nth-child(1),
    .bb-cats--mosaic [data-count="8"] li:nth-child(6),
    .bb-cats--mosaic [data-count="7"] li:nth-child(1),
    .bb-cats--mosaic [data-count="6"] li:nth-child(1),
    .bb-cats--mosaic [data-count="6"] li:nth-child(6),
    .bb-cats--mosaic [data-count="5"] li:nth-child(1),
    .bb-cats--mosaic [data-count="3"] li:nth-child(1),
    .bb-cats--mosaic [data-count="1"] li:nth-child(1) {
        grid-column: 1 / -1;
        aspect-ratio: 3 / 1;
    }
}

/* Mobile: tiles un poco más chicos para entrar de a 2 */
@media (max-width: 480px) {
    .bb-cats__grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 1rem;
    }
    .bb-cats__name {
        font-size: 1rem;
    }
    .bb-cats--round .bb-cats__grid {
        gap: 1.25rem;
    }
    .bb-cats--round .bb-cats__grid li {
        width: 96px;
    }
    .bb-cats--round .bb-cats__name {
        font-size: .875rem;
    }
}