/* ==== Hotel Manglares Lodge — Capa responsive ====
   Las pantallas del sitio usan estilos inline (style={{...}}), por eso estas
   reglas usan !important para poder sobreescribir columnas/paddings en los
   breakpoints. Cargar DESPUÉS de styles.css. */

/* ---------- Tablet (<= 980px) ---------- */
@media (max-width: 980px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .home-band { grid-template-columns: 1fr !important; gap: 36px !important; }
  .rd-body { grid-template-columns: 1fr !important; gap: 36px !important; }
  .rd-aside { position: static !important; top: auto !important; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr !important; row-gap: 34px !important; }
}

/* ---------- Móvil (<= 640px) ---------- */
@media (max-width: 640px) {
  .container { padding-left: 20px !important; padding-right: 20px !important; }
  .section-pad { padding-top: 56px !important; padding-bottom: 56px !important; }

  .grid-3, .grid-2 { grid-template-columns: 1fr !important; }
  .home-band { gap: 28px !important; }

  .hero-title { font-size: 40px !important; line-height: 1.08 !important; }
  .hero-lead { font-size: 17px !important; }
  .rd-body h1 { font-size: 34px !important; }

  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px 24px !important; }
  .footer-brand { grid-column: 1 / -1 !important; }

  .form-row { grid-template-columns: 1fr !important; }

  /* Detalle de habitación — galería apilada */
  .rd-gallery { grid-template-columns: 1fr !important; height: auto !important; }
  /* En móvil el video/foto principal se muestra vertical (formato tipo celular) */
  .rd-gallery-main { height: auto !important; aspect-ratio: 3 / 4 !important; }
  .rd-gallery-sub { grid-template-rows: none !important; grid-template-columns: 1fr 1fr !important; height: 150px !important; }
}

/* ---------- Menú móvil (hamburguesa) ---------- */
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; border: none; background: transparent;
  cursor: pointer; border-radius: var(--radius-md);
}
.nav-toggle span { display: block; height: 2px; width: 100%; border-radius: 2px; transition: background var(--dur) var(--ease-out); }
.mobile-menu a { padding: 4px 0; }

/* Evita que hijos de grids fuercen overflow por su min-content */
.rd-body > div { min-width: 0; }

/* Etiquetas de amenidades legibles sobre la banda verde de Servicios
   (AmenityList fija color al ink oscuro; aquí forzamos crema). El círculo
   del icono conserva su fondo claro. */
.amenity-dark span { color: var(--cream-100) !important; }