/* ===================================
   REJILLA DE CATEGORÍAS [categories_grid]
   Reutiliza la tarjeta .room-card de style.css (carrusel de habitaciones);
   aquí solo va la rejilla y los ajustes de accesibilidad.

   Columnas por ANCHO DEL CONTENEDOR (container query), no del viewport:
   el shortcode puede ir en una columna BeBuilder de cualquier ancho.
   Ancho mínimo de tarjeta medido = 280px (por debajo, con las acciones
   visibles, el botón RESERVAR se sale por abajo de la tarjeta de 420px
   y se corta: 270px → +29px, 250px → +52px, 280px → cabe).
   Umbrales = n·280 + (n−1)·20 (gap):
     2 cols ≥ 580px · 3 cols ≥ 880px · 4 cols ≥ 1180px
   =================================== */

.categories-grid {
    container-type: inline-size;
    container-name: categories-grid;
}

.categories-grid__list {
    --categories-grid-cols: 1;
    --categories-grid-gap: calc(var(--spacing-sm) * 2);
    display: grid;
    grid-template-columns: repeat(var(--categories-grid-cols), minmax(0, 1fr));
    gap: var(--categories-grid-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.categories-grid__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Misma especificidad (0,2,0) en todas: gana la regla posterior. */
@container categories-grid (width >= 580px) {
    .categories-grid .categories-grid__list {
        --categories-grid-cols: 2;
    }

    .categories-grid--1-cols .categories-grid__list {
        --categories-grid-cols: 1;
    }
}

@container categories-grid (width >= 880px) {
    .categories-grid--3-cols .categories-grid__list {
        --categories-grid-cols: 3;
    }
}

@container categories-grid (width >= 1180px) {
    .categories-grid--4-cols .categories-grid__list {
        --categories-grid-cols: 4;
    }
}

/* .room-card__content usa width/height 100% + padding sin border-box:
   en la rejilla se desborda 64px y el texto queda descentrado y cortado. */
.categories-grid__card .room-card__content {
    box-sizing: border-box;
}

/* Teclado: la tarjeta original solo revela acciones con :hover. */
.categories-grid__card:focus-within .room-card__content {
    top: 0;
}

.categories-grid__card:focus-within .room-card__actions {
    opacity: 1;
}

/* Sin recorte para que el contorno de foco se vea entero; enlace centrado. */
.categories-grid__card .room-card__actions {
    overflow: visible;
}

.categories-grid__card .room-card__link {
    align-self: center;
}

.categories-grid__card .room-card__link:focus-visible,
.categories-grid__card .room-card__btn:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 4px;
}

/* Táctil: sin hover, las acciones se muestran siempre. */
@media (hover: none) {
    .categories-grid__card .room-card__content {
        top: 0;
    }

    .categories-grid__card .room-card__actions {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .categories-grid__card,
    .categories-grid__card .room-card__content,
    .categories-grid__card .room-card__actions {
        transition: none;
    }
}