/* ==========================================================
  RESPONSIVE.CSS — Consultas de Medios (Primero Móvil)
   ----------------------------------------------------------
   Puntos de quiebre:
     - Base:      0 – 767px   (móvil, estilos por defecto)
     - Tablet:    768px+      (grillas de 2 columnas)
     - Escritorio:1024px+     (grillas de 3 columnas)
     - Ancho:     1280px+     (más aire lateral)
   ========================================================== */

/* ========================
  BASE / MÓVIL (por defecto)
  ======================== */

/* Hero: imagen más pequeña en móvil sin perder el alto completo */
@media (max-width: 47.99rem) {
  .hero {
    background-size: 125% auto;
    background-position: center center;
    min-height: 100svh;
  }
}

/* Grilla de atención: una sola columna en móvil */
.schedule__grid {
  grid-template-columns: 1fr;
}

/* Ubicación: apilado en móvil */
.location__wrapper {
  grid-template-columns: 1fr;
}

/* ========================
   TABLET — 768px+
   ======================== */
@media (min-width: 48rem) {
  /* Atención: centrar lista */
  .schedule__grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin-inline: auto;
  }

  /* Ubicación: centrar mapa */
  .location__wrapper {
    grid-template-columns: 1fr;
    max-width: 900px;
    margin-inline: auto;
  }
}

/* ========================
   ESCRITORIO — 1024px+
   ======================== */
@media (min-width: 64rem) {
  /* Productos: forzar 3 columnas */
  .products__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ========================
   ANCHO — 1280px+
   ======================== */
@media (min-width: 80rem) {
  /* Aumentar aire lateral del contenedor */
  .container {
    padding-inline: var(--space-xl);
  }
}

/* ========================
  MEDIA QUERY DE CURSOR
  ======================== */
/* Aplicar efectos al pasar el cursor solo en dispositivos con puntero fino */
@media (hover: none) {
  .card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
  }

  .card:hover .card__image {
    transform: none;
  }

  .btn--primary:hover,
  .btn--secondary:hover,
  .btn--outline:hover {
    transform: none;
  }

  .schedule__item:hover {
    transform: none;
  }

  .card:hover,
  .drink-card:hover {
    transform: none;
  }
}