/* ==========================================================================
   MOSAICO DE RESTAURANTES (/reserva-mesa)
   Rejilla estática 3x3 (9 fotos clicables), NO es un carrusel.
   Bootstrap 4 (.container > .row > .col-12.col-md-4) ya resuelve la rejilla;
   este archivo solo estiliza las celdas, la foto y el rótulo superpuesto.
   Namespace: todo el módulo queda encapsulado bajo ".mosaic".
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE: TABLET Y MÓVIL (menor a 992px)
   Imagen cuadrada por defecto (preset tablet 500x500); se sobreescribe
   a apaisada en el corte de móvil pequeño (preset móvil 750x500).
   -------------------------------------------------------------------------- */
.mosaic {
  padding-top: var(--space-between-sections);
  padding-bottom: var(--space-between-sections);
}

/* Ritmo con el bloque de intro que va justo encima.
   En /reserva-mesa el intro aporta SÓLO el H1 y su filete, así que el título y
   la rejilla son una misma unidad de lectura: el H1 encabeza las fotos. Aun así
   se sumaban dos espacios de sección completos —los 100px de margen inferior
   del intro más los 100px de banda superior del mosaico— y quedaban 200px de
   aire muerto (230px contando los 30px que el filete deja bajo el título) entre
   un titular huérfano y su primera foto.
   El mosaico renuncia a su banda superior cuando le precede un intro y el
   propio intro se queda con medio ritmo: el hueco pasa de 200px a 50px (25px en
   móvil, donde el token vale 50px), suficiente para separar sin desligar. */
.intro-text + .mosaic {
  padding-top: 0;
}

#mosaic .intro-text {
  margin-bottom: calc(var(--space-between-sections) / 2);
}

.mosaic .mosaic__item {
  margin-bottom: 1.5rem;
}

/* Celda: enlace que envuelve foto + rótulo */
.mosaic .mosaic__link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.5rem;
  aspect-ratio: 1 / 1;
  text-decoration: none;
  /* La transición de la celda queda desactivada por defecto y solo se
     activa cuando el usuario no ha pedido movimiento reducido (ver abajo) */
}

.mosaic .mosaic__link picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Imagen: llena la celda y recorta con object-fit; el zoom de hover se
   aplica sobre este elemento, nunca sobre el contenedor con overflow. */
.mosaic .mosaic__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Overlay de refuerzo sobre toda la foto: degradado sutil, siempre visible
   (no depende del hover) para separar visualmente el rótulo de la imagen. */
.mosaic .mosaic__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(20, 29, 40, 0.35) 0%,
    rgba(20, 29, 40, 0) 55%
  );
  opacity: 0.75;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Rótulo con el nombre del restaurante, superpuesto sobre la foto.
   Contraste garantizado con fondo propio (no depende del degradado):
   rgba(20, 29, 40, 0.85) --primary-color con alpha 0.85-- sobre el peor
   caso posible (foto blanca detrás) da una luminancia relativa ~0.048,
   lo que resulta en un contraste de texto blanco ≈ 10,6:1 (supera 4,5:1
   exigido por WCAG 2.1 AA). Al ser un fondo sólido, el rótulo permanece
   siempre legible, con o sin hover: el hover NO es el único medio de
   información. */
.mosaic .mosaic__title {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 0.75rem 1rem;
  background-color: rgba(20, 29, 40, 0.85);
  color: #fff;
  font-family: var(--font-family-1);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  transition: background-color 0.4s ease;
}

/* Hover: zoom suave de la imagen y refuerzo del overlay/rótulo.
   El rótulo ya es visible sin hover; el hover solo lo refuerza. */
.mosaic .mosaic__link:hover .mosaic__image,
.mosaic .mosaic__link:focus-visible .mosaic__image {
  transform: scale(1.08);
}

.mosaic .mosaic__link:hover::before,
.mosaic .mosaic__link:focus-visible::before {
  opacity: 1;
}

.mosaic .mosaic__link:hover .mosaic__title,
.mosaic .mosaic__link:focus-visible .mosaic__title {
  background-color: rgba(20, 29, 40, 0.92);
}

/* Foco visible por teclado: doble anillo (blanco + primary-color) para
   garantizar contraste tanto sobre fondos claros como oscuros de la
   página, ya que la foto de fondo de cada celda es variable.
   Se sustituye el outline por defecto por esta alternativa explícita. */
.mosaic .mosaic__link:focus-visible {
  outline: 3px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--primary-color);
  z-index: 3;
}

/* Móvil pequeño: preset de imagen apaisada 750x500 */
@media (max-width: 767.98px) {
  .mosaic .mosaic__link {
    aspect-ratio: 3 / 2;
  }

  .mosaic .mosaic__title {
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
  }
}

/* --------------------------------------------------------------------------
   DESKTOP PEQUEÑO (992px a 1919px)
   Preset de imagen cuadrada 700x700.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1919.98px) {
  .mosaic .mosaic__item {
    margin-bottom: 2rem;
  }

  .mosaic .mosaic__title {
    padding: 0.875rem 1.125rem;
    font-size: 1.0625rem;
  }
}

/* --------------------------------------------------------------------------
   DESKTOP GRANDE (mayor a 1920px)
   -------------------------------------------------------------------------- */
@media (min-width: 1920px) {
  .mosaic .mosaic__item {
    margin-bottom: 2.5rem;
  }

  .mosaic .mosaic__title {
    padding: 1rem 1.25rem;
    font-size: 1.1875rem;
  }
}

/* --------------------------------------------------------------------------
   MOVIMIENTO REDUCIDO: se desactivan zoom y transiciones.
   El rótulo sigue siendo visible sin necesidad de hover/transición.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mosaic .mosaic__image,
  .mosaic .mosaic__link::before,
  .mosaic .mosaic__title {
    transition: none;
  }

  .mosaic .mosaic__link:hover .mosaic__image,
  .mosaic .mosaic__link:focus-visible .mosaic__image {
    transform: none;
  }
}