/* ---------- Responsive ---------- */
/* El menú del header (hamburguesa/offcanvas) se resuelve en 03-header.css
   con el breakpoint xl de Bootstrap. */

/* Breakpoints alineados con Bootstrap: lg = 992px, md = 768px. Las grillas
   de columnas (.split, tarjetas, footer, formularios...) ya no se ajustan acá:
   son .row/.col-* de Bootstrap y se apilan solas. */
@media (max-width: 991.98px) {
  .hero .container, .page-hero .container { grid-template-columns: 1fr; }
  .hero-split-bleed { grid-template-columns: 1fr; padding: 28px 24px 0; }
  .hero-split-bleed-text { padding-left: 0; padding-right: 0; }
  .hero-split-bleed-media { border-radius: var(--radio); margin-top: 24px; }
  .search-bar { flex-wrap: wrap; border-radius: var(--radio); margin-top: 30px; }
  .search-field { flex: 1 1 50%; border-right: none; border-bottom: 1px solid var(--borde); }
  /* En una sola fila el alto se lo daba align-items:stretch contra los campos
     (.search-bar en 15-listings.css); ya en su propia fila el botón se queda
     con el alto mínimo del texto y sale una pastilla finita, así que acá
     necesita su propio padding vertical. */
  .search-bar__submit { width: 100%; justify-content: center; margin-top: 10px; padding: 16px 30px; }
  .summary-card { position: static; }
  .detalle-gallery { height: 340px; }
}

@media (max-width: 767.98px) {
  .nav-actions { gap: 6px; }
  .logo-img { height: 34px; }
  .hero h1, .page-hero h1 { font-size: 1.9rem; }
  .hero-banner { height: auto; min-height: 300px; }
  .hero-banner-copy { padding: 28px 20px; }
  .hero-banner-copy-text { max-width: 100%; }
  .hero-banner-copy h1 { font-size: 1.6rem; }
  .hero-banner-copy .hero-actions { flex-direction: column; align-items: stretch; }
  .cta-social-row { grid-template-columns: 1fr; }
  .cta-social-row { gap: 18px; }
  .search-field { flex: 1 1 100%; }
  .search-field__panel { left: 0; right: 0; min-width: 0; }
  .form-submit { justify-content: stretch; }
  .form-submit .btn { width: 100%; justify-content: center; }
  .trust-item { padding: 14px 0; }
  .trust-item::after { display: none; }
  .trust-item:not(:last-child) { border-bottom: 1px solid var(--borde); }
  .section { padding: 56px 0; }
  .form-card, .checkout-card { padding: 24px; }
  .quote-band p { font-size: 1.3rem; }
  /* En mobile no hay una cuadrícula distinta por cantidad de fotos (como en
     desktop, ver 24-detalle-alojamiento.css): la primera va arriba a todo
     el ancho y el resto se acomoda solo en 2 columnas, para cualquier
     cantidad — mismo class .detalle-gallery, misma especificidad, pero
     esta hoja carga después y gana. */
  .detalle-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 180px; grid-auto-rows: 110px; height: auto; }
  .detalle-gallery button:first-child { grid-row: 1; grid-column: 1 / 3; }
}