/* ===================================================================
   TERRA & BRASA — RESPONSIVE
   Enfoque mobile-first: estos ajustes "recogen" el layout de escritorio
   definido en styles.css a medida que el viewport se reduce.
   =================================================================== */

/* ---- Tablets grandes / laptops pequeñas ---- */
@media (max-width: 1100px) {
  .badge-row { grid-template-columns: repeat(2, 1fr); }
  .reason-grid { grid-template-columns: repeat(2, 1fr); }
  .dish-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Tablets ---- */
@media (max-width: 991px) {
  .section-pad { padding-block: var(--space-xl); }

  .historia__grid,
  .reservas__grid,
  .ubicacion__grid {
    grid-template-columns: 1fr;
  }

  .historia__frame { aspect-ratio: 4 / 5; min-height: 320px; }
  .map-frame { min-height: 300px; }

  /* FIX: la clase real es .menu-grid, no .menu-list (por eso el menú
     no colapsaba a una columna y la imagen quedaba apachurrada) */
  .menu-grid { grid-template-columns: 1fr; }

  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 110px;
  }
  .gallery-grid figure:nth-child(1),
  .gallery-grid figure:nth-child(4) {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* ---- Móviles grandes ---- */
@media (max-width: 767px) {
  .hero { padding-top: 5.5rem; min-height: auto; padding-bottom: var(--space-2xl); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__scroll { display: none; }

  .badge-row { grid-template-columns: 1fr; }
  .reason-grid { grid-template-columns: 1fr; }
  .dish-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }

  .form-row { grid-template-columns: 1fr; }
  .reserve-form { padding: var(--space-md); }

  /* Tarjeta de menú: en pantallas angostas la imagen fija de 140px se
     comía todo el ancho. La achicamos y apilamos verticalmente para
     que la foto y el texto respiren. */
  .menu-card {
    flex-direction: column;
    min-height: 0;
  }

  .menu-card__media {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .menu-card__body {
    padding: var(--space-sm) var(--space-md) var(--space-md);
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 130px;
  }
  .gallery-grid figure:nth-child(1),
  .gallery-grid figure:nth-child(4) {
    grid-column: span 2;
    grid-row: span 1;
  }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ---- Móviles pequeños ---- */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .testimonial-card { padding: var(--space-md) var(--space-xs); }
  .intro__quote { font-size: var(--fs-lg); }

  /* En pantallas muy chicas, un poco menos alto para no alargar la página */
  .menu-card__media { aspect-ratio: 4 / 3; }
}