/* =============================================================================
   NOVECENTO — RESPONSIVE.CSS
   Breakpoints: 1280 · 1024 · 768 · 480 · 375
   Mobile-first where possible; desktop overrides otherwise.
   ============================================================================= */

/* ─── 1280 — Large laptop ─────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  :root { --section-py: clamp(4rem, 8vw, 8rem); }

  .exp-grid { gap: 4rem; }
  .exp-img-accent { left: -1.5rem; width: 44%; }

  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1.3fr 1.1fr;
    gap: 2.5rem;
  }
}

/* ─── 1024 — Tablet landscape / small laptop ──────────────────────────────── */
@media (max-width: 1024px) {

  /* Nav: hide desktop links, show burger */
  .navbar-nav  { display: none; }
  .burger      { display: flex; }

  /* Cursor: hide on touch */
  .cursor { display: none; }
  body    { cursor: auto; }
  button, a { cursor: pointer; }

  /* Hero heading smaller */
  :root { --fs-hero: clamp(4.5rem, 10vw, 9rem); }

  /* Experience: single column */
  .exp-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .exp-text { max-width: 100%; }
  .exp-visual {
    max-width: 560px;
    margin-inline: auto;
  }
  .exp-img-accent { bottom: -2.5rem; left: -1rem; }
  .exp-badge { right: 0; bottom: -1rem; }

  /* Menu: 2 cols */
  .menu-grid { grid-template-columns: repeat(2, 1fr); }

  /* Gallery: simplified 3 col */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 300px 300px;
  }
  .gallery-item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
  .gallery-item:nth-child(2) { grid-column: 3; grid-row: 1; }
  .gallery-item:nth-child(3) { grid-column: 3; grid-row: 2; }
  .gallery-item:nth-child(4) { display: none; }
  .gallery-item:nth-child(5) { display: none; }

  /* Location: single column */
  .location-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .map-frame { padding-bottom: 60%; }

  /* Footer: 2 × 2 */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 3rem;
  }
  .footer-brand { grid-column: 1 / 3; }
}

/* ─── 768 — Tablet portrait ──────────────────────────────────────────────── */
@media (max-width: 768px) {

  :root {
    --fs-hero:    clamp(3.8rem, 11vw, 6.5rem);
    --fs-4xl:     clamp(2rem, 6vw, 3.2rem);
    --section-py: clamp(4rem, 8vw, 6rem);
    --nav-h:      68px;
  }

  /* Reservation card */
  .reservation-card { padding: 2.5rem 1.75rem; }
  .reservation-hours {
    flex-direction: column;
    gap: 1.25rem;
  }
  .res-hours-sep { width: 40px; height: 1px; }

  /* Menu: 2 cols still fine */
  .menu-tabs { gap: 0.2rem; }
  .menu-tab  { padding: 0.55rem 1.1rem; font-size: 0.6rem; }

  /* Gallery: 2 col stacked */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 260px 260px 260px;
  }
  .gallery-item:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .gallery-item:nth-child(2) { grid-column: 1; grid-row: 2; }
  .gallery-item:nth-child(3) { grid-column: 2; grid-row: 2; }
  .gallery-item:nth-child(4) { display: none; }
  .gallery-item:nth-child(5) { grid-column: 1 / 3; grid-row: 3; display: block; }

  /* Stats: wrap on mobile */
  .exp-stats {
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
  }
  .stat-sep { display: none; }

  /* Hero: tighter */
  .hero-eyebrow { margin-bottom: 1.25rem; }
  .hero-heading { margin-bottom: 1.25rem; }
  .hero-tagline { margin-bottom: 2rem; font-size: var(--fs-base); }

  /* Footer: single col */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-brand { grid-column: 1; }
  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ─── 480 — Large phone ──────────────────────────────────────────────────── */
@media (max-width: 480px) {

  :root {
    --fs-hero:    clamp(3.2rem, 13vw, 5rem);
    --fs-4xl:     clamp(1.9rem, 7vw, 2.8rem);
    --section-py: 4rem;
    --gutter:     1.25rem;
  }

  /* Menu: single column */
  .menu-grid { grid-template-columns: 1fr; gap: 0; }

  /* Gallery: single column */
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 260px);
  }
  .gallery-item:nth-child(1) { grid-column: 1; grid-row: 1; }
  .gallery-item:nth-child(2) { grid-column: 1; grid-row: 2; }
  .gallery-item:nth-child(3) { grid-column: 1; grid-row: 3; }
  .gallery-item:nth-child(4) { display: none; }
  .gallery-item:nth-child(5) { display: none; }

  /* Hero CTA: stack */
  .hero-cta { flex-direction: column; align-items: flex-start; }
  .hero-cta .btn { width: 100%; text-align: center; }

  /* Experience image: simplified on small mobile */
  .exp-img-accent { display: none; }
  .exp-img-main   { padding-bottom: 100%; }
  .exp-badge      { right: 1rem; bottom: 1rem; font-size: 1rem; padding: 1rem 1.25rem; }

  /* Reservation hours: single col */
  .reservation-hours { gap: 1rem; }
  .res-hours-sep { display: none; }

  /* Location info spacing */
  .loc-item { gap: 1rem; }

  /* Loader smaller */
  .loader-title { font-size: 2.6rem; }
}

/* ─── 375 — Minimum supported (small iPhone SE) ───────────────────────────── */
@media (max-width: 375px) {
  :root {
    --fs-hero:  3rem;
    --gutter:   1rem;
  }
  .menu-tab   { padding: 0.5rem 0.85rem; font-size: 0.58rem; }
  .navbar-logo-text { font-size: 1.3rem; }
}

/* ─── HOVER: only apply magnetic + hover effects on true pointer devices ──── */
@media (hover: none), (pointer: coarse) {
  /* Remove magnetic on touch — GSAP skips it too but belt-and-suspenders */
  .magnetic { transform: none !important; }

  /* Gallery captions always visible on touch */
  .gallery-item figcaption { opacity: 1; }

  /* Menu card image: no scale on touch */
  .menu-card:hover .menu-card-img img { transform: none; }
}

/* ─── PRINT ──────────────────────────────────────────────────────────────── */
@media print {
  .loader, .cursor, .grain,
  .navbar, .hero-scroll,
  .mobile-menu { display: none !important; }

  body { background: #fff; color: #000; }
  .section { padding-block: 2rem; }
}