/* ===========================================================
   responsive.css — breakpoints
   tablet 1024 · mobile 768 · small 480
   =========================================================== */

/* ---------------- Tablet ---------------- */
@media (max-width: 1024px) {
  :root { --section-pad-y: 4.5rem; }

  h2 { font-size: var(--fs-2xl); }

  .experiences__strip { grid-template-columns: repeat(2, 1fr); }
  .gallery__grid { column-count: 2; }

  .about__grid,
  .location__grid,
  .services-stack { gap: var(--space-6); }
}

/* ---------------- Mobile ---------------- */
@media (max-width: 768px) {
  :root {
    --section-pad-x: 1.25rem;
    --section-pad-y: 4rem;
  }

  /* Navbar → hamburger */
  .navbar__links { display: none; }
  .navbar__hamburger { display: flex; }

  /* Hero */
  .hero__overlay-intro h1,
  .hero__overlay-final h2 { font-size: var(--fs-3xl); }
  .hero__overlay-intro p { font-size: var(--fs-base); letter-spacing: 0.18em; }
  .hero__overlay-intro .hero__presents { font-size: var(--fs-base); letter-spacing: 0.16em; }
  .hero__overlay-intro .hero__presents::after { width: 52px; }

  /* About → one column */
  .about__grid { grid-template-columns: 1fr; }

  /* Rooms → one column */
  .rooms__grid { grid-template-columns: 1fr; }

  /* Services → stack, media on top */
  .services-stack { grid-template-columns: 1fr; }
  .services-stack__media { height: 300px; order: -1; }

  /* Experiences → horizontal scroll */
  .experiences__strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
  }
  .exp-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  /* Gallery → one column */
  .gallery__grid { column-count: 1; }

  /* Tour viewer shorter */
  .tour-viewer { height: 380px; min-height: 0; }

  /* Location → one column (map on top) */
  .location__grid { grid-template-columns: 1fr; }
  .location__map { order: -1; }
  .location__maplink img { height: 320px; }

  /* Booking form full width */
  .form-row { grid-template-columns: 1fr; }

  /* Lightbox nav closer */
  .lightbox__nav--prev { left: 0.5rem; }
  .lightbox__nav--next { right: 0.5rem; }
  .lightbox__stage { width: 90vw; }

  /* Footer → stack */
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-5); text-align: left; }
  .footer__bar { flex-direction: column; gap: var(--space-1); text-align: center; }
}

/* ---------------- Mobile small ---------------- */
@media (max-width: 480px) {
  .hero__overlay-intro h1,
  .hero__overlay-final h2 { font-size: var(--fs-2xl); }

  .btn { padding: 0.75rem 1.4rem; }
  .booking__ctas { flex-direction: column; }
  .booking__ctas .btn { width: 100%; }
  .gallery__filters { gap: var(--space-1); }
}

/* Storia della via → una colonna su mobile */
@media (max-width: 768px) {
  .history__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .history__media { order: -1; }
  .history__media img { aspect-ratio: 4/3; }
}