/* ============================================================
   Responsive — mobile-first refinements
   Breakpoints: 1024 (tablet/lg), 768 (tablet), 560 (mobile)
   ============================================================ */

/* ---------- <= 1024px ---------- */
@media (max-width: 1024px) {
  .about__grid {
    gap: var(--space-lg);
  }

  .atmosphere__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }

  /* En 2 columnas, piezas uniformes para evitar huecos */
  .atmosphere__item--tall { grid-row: auto; }
  .atmosphere__item--wide { grid-column: auto; }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* ---------- <= 768px ---------- */
@media (max-width: 768px) {
  /* Header compacto para que entren marca + idioma + hamburguesa */
  .header__inner {
    gap: var(--space-sm);
  }

  .brand {
    font-size: 1.15rem;
  }

  .brand__mark {
    width: 28px;
    height: 28px;
  }

  /* Mobile navigation drawer */
  .nav-toggle {
    display: inline-block;
    order: 3;
  }

  .nav {
    position: fixed;
    inset: 0;                 /* pantalla completa */
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-2xl) var(--space-lg);
    background-color: var(--color-surface);
    transform: translateX(100%);
    transition: transform var(--dur-mid) var(--ease-out);
    z-index: 1;   /* dentro del header (z-100); por DEBAJO de los controles */
  }

  /* Marca y controles (idioma + cerrar) por ENCIMA del drawer
     para que la X siga siendo clickeable y el logo visible */
  .brand,
  .header__controls {
    position: relative;
    z-index: 2;
  }

  .nav.is-open {
    transform: translateX(0);
  }

  .nav__list {
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    width: 100%;
    text-align: center;
  }

  .nav__link {
    font-size: 1.4rem;
  }

  /* Backdrop when drawer open */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(59, 51, 45, 0.35);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-mid) var(--ease-soft),
      visibility var(--dur-mid) var(--ease-soft);
    z-index: var(--z-overlay);
  }

  .nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* Hero text remains fully legible (top-down scrim on mobile) */
  .hero__bg {
    background-image:
      linear-gradient(to bottom, rgba(246, 241, 235, 0.88) 0%, rgba(246, 241, 235, 0.62) 60%, rgba(246, 241, 235, 0.42) 100%),
      url("../assets/hero.jpg");
  }

  .about__grid {
    grid-template-columns: 1fr;
  }

  .about__media {
    max-width: 460px;
    margin-inline: auto;
    order: -1;
  }

  .booking__actions {
    grid-template-columns: 1fr;
  }
}

/* ---------- <= 560px ---------- */
@media (max-width: 560px) {
  :root {
    --space-3xl: 4rem;
  }

  .atmosphere__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }

  .atmosphere__item--wide,
  .atmosphere__item--tall {
    grid-column: auto;
    grid-row: auto;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer__list li {
    justify-content: center;
  }

  .footer__socials {
    justify-content: center;
  }
}

/* ---------- Larger screens — extra air ---------- */
@media (min-width: 1440px) {
  .container {
    max-width: 1280px;
  }
}