/* ═══════════════════════════════════════════════════════════
   ATELIER DEI LUOGHI — responsive.css  v2
   Da includere DOPO style_C_baskerville.css in tutte le pagine:
     <link rel="stylesheet" href="css/responsive.css?v=2">

   Breakpoint:
   ┌─ 1100px  tablet landscape  – riduce gap e padding, hamburger
   ├─ 768px   tablet portrait   – collassa griglie a 1 colonna
   └─ 480px   mobile            – padding minimi, aggiustamenti tipografici
═══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────
   HAMBURGER — struttura base
   (visibile da 1100px in giù)
───────────────────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 200;
  flex-shrink: 0;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--oro);
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  transform-origin: center;
}

/* Stato aperto: X */
nav.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
nav.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; width: 0; }
nav.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Overlay dietro il menu — sempre nel DOM, visibile solo quando nav-open */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 140;
}
nav.nav-open ~ .nav-overlay { /* gestito da JS */ }

/* Gallery carousel: nascosto su desktop */
.gallery-carousel { display: none; }


/* ═══════════════════════════════════════
   BREAKPOINT 1100px — Tablet landscape
   Hamburger attivo, link nascosti
═══════════════════════════════════════ */
@media (max-width: 1100px) {

  /* Navbar */
  nav { padding: 0 32px; }

  /* Mostra hamburger, nasconde link orizzontali */
  .nav-toggle { display: flex; }

  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: fixed;
    top: 0; right: 0;
    width: min(320px, 85vw);
    height: 100vh;
    background: rgba(28, 35, 48, 0.98);
    backdrop-filter: blur(16px);
    padding: 88px 32px 40px;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    z-index: 150;
    overflow-y: auto;
    box-shadow: -4px 0 32px rgba(0,0,0,0.3);
    pointer-events: none;
  }

  nav.nav-open .nav-links {
    transform: translateX(0);
    pointer-events: auto;
  }

  .nav-links li {
    width: 100%;
    border-bottom: 0.5px solid rgba(201, 168, 76, 0.1);
  }

  .nav-links a {
    display: block;
    padding: 16px 0;
    font-size: 11px;
    letter-spacing: 0.35em;
    color: rgba(232, 224, 200, 0.8);
  }

  .nav-cta {
    border: none !important;
    padding: 16px 0 !important;
    color: var(--oro) !important;
    background: transparent !important;
  }

  /* Logo: riduce leggermente */
  .nav-brand { font-size: 12px; }

  /* Sezioni — padding laterale ridotto */
  .section-inner { padding-left: 32px; padding-right: 32px; }
  .aree-wrap,
  .gallery-strip,
  .footer-grid,
  .footer-bottom { padding-left: 32px; padding-right: 32px; }
  .newsletter-inner { padding: 0 32px; }

  /* Chi siamo */
  .chi-siamo-grid { gap: 48px; }
  .visual-foto { height: 480px; }

  /* Destinazioni: rimane a 3 colonne */
  .aree-grid { grid-template-columns: repeat(3, 1fr); }

  /* Servizi: rimane a 3 colonne ma padding ridotti */
  .servizio-card { padding: 36px 28px 36px; }
  .servizi-logo-wrap { gap: 0 36px; }
  .servizi-logo-centro { padding: 32px 20px; }
  .servizi-divisore { margin: 36px 0; }

  /* Gallery */
  .gallery-strip { padding: 0; }
  .gallery-item { flex-basis: 320px; height: 380px; }
  .gallery-item:first-child,
  .gallery-item:last-child { flex-basis: 280px; }

  /* Blog */
  .blog-grid { gap: 22px; }

  /* FAQ */
  .faq-grid { gap: 0 48px; }

  /* Contatti */
  .contatti-grid { gap: 48px; }

  /* Footer */
  .footer-grid { gap: 32px; }

  /* Privacy / Articolo / Itinerario */
  .privacy-inner { padding: 0 32px; }
  .article-hero-topbar,
  .article-hero-content { padding-left: 32px; padding-right: 32px; }
  .itin-hero-topbar,
  .itin-hero-content { padding-left: 32px; padding-right: 32px; }
  #direzione-tecnica { padding: 22px 32px !important; }
}


/* ═══════════════════════════════════════
   BREAKPOINT 768px — Tablet portrait
   Griglie a colonna singola
═══════════════════════════════════════ */
@media (max-width: 768px) {

  nav { padding: 0 24px; height: 64px; }

  /* Logo: nasconde il tagline su tablet */
  .nav-tagline { display: none; }
  .nav-brand { font-size: 12px; letter-spacing: 0.28em; }

  /* scroll-hint */
  .scroll-hint { display: none; }

  /* Padding verticale sezioni */
  #chi-siamo    { padding: 72px 0 64px; }
  #servizi      { padding: 72px 0 64px; }
  #aree         { padding: 72px 0; }
  #gallery      { padding: 72px 0; }
  #blog         { padding: 72px 0; }
  #testimonianze{ padding: 72px 0; }
  #faq          { padding: 72px 0; }
  #contatti     { padding: 72px 0; }
  #newsletter   { padding: 56px 0; }

  /* Padding laterale sezioni */
  .section-inner { padding-left: 24px; padding-right: 24px; }
  .aree-wrap,
  .gallery-strip { padding: 0; }

  /* ── Chi siamo: colonna singola ── */
  .chi-siamo-grid { grid-template-columns: 1fr; gap: 40px; }
  .visual-foto { height: 420px; }

  /* ── Servizi: colonna singola ── */
  .servizi-grid { grid-template-columns: 1fr; gap: 2px; }
  .servizio-card { padding: 40px 28px; }
  .servizi-intro { font-size: 16px; }
  .servizi-divisore { margin: 32px 0; }
  .servizi-divisore-centro { padding: 0 16px; }

  /* ── Servizi: logo centrale nascosto, punti in lista verticale ── */
  .servizi-logo-wrap {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .servizi-logo-centro { display: none; }
  .servizi-punti-col { gap: 24px; }
  .servizi-punti-sx { order: 1; }
  .servizi-punti-dx { order: 2; margin-top: 24px; }
  .servizi-punto,
  .servizi-punto--dx {
    text-align: left;
    padding-left: 16px;
    padding-right: 0;
    border-left: 0.5px solid rgba(201,168,76,0.25);
  }
  .servizi-punto::after,
  .servizi-punto--dx::after,
  .servizi-punto--dx::before { display: none; }
  .servizi-punto--dx .servizi-punto-num,
  .servizi-punto--dx .servizi-punto-titolo { padding-left: 0.38em; padding-right: 0; }
  .servizi-punto--dx .servizi-punto-titolo { text-align: left; }

  /* ── Destinazioni: colonna singola ── */
  .aree-grid { grid-template-columns: 1fr; gap: 3px; margin-top: 36px; }

  .area-card {
    height: auto;
    min-height: 380px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .area-bg,
  .area-overlay {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    min-height: 380px;
  }
  .area-overlay {
    background: linear-gradient(
      to bottom,
      rgba(28,35,48,0.55) 0%,
      rgba(13,35,32,0.15) 35%,
      rgba(13,35,32,0.75) 65%,
      rgba(13,35,32,0.95) 100%
    ) !important;
  }
  .area-content {
    position: relative;
    z-index: 2;
    padding: 28px 24px;
    margin-top: 160px;
  }
  .area-tag { font-size: 10px; letter-spacing: 0.35em; }
  .area-desc { max-height: none !important; opacity: 1 !important; }
  .area-arrow { opacity: 1 !important; transform: translateY(0) !important; }

  /* ── Gallery: nasconde griglia, mostra carousel ── */
  .gallery-strip { display: none; }
  .gallery-carousel {
    display: block;
    position: relative;
    margin: 36px 0 0;
    overflow: hidden;
  }
  .gallery-carousel-track {
    display: flex;
    transition: transform 0.45s ease;
    will-change: transform;
  }
  .gallery-carousel-slide {
    position: relative;
    flex: 0 0 100%;
    height: 300px;
    overflow: hidden;
    cursor: pointer;
  }
  .gallery-carousel-slide .gallery-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.55s ease;
  }
  .gallery-carousel-overlay {
    position: absolute;
    inset: 0;
    background: rgba(28,35,48,0);
    transition: background 0.3s;
    display: flex;
    align-items: flex-end;
    padding: 20px 24px;
  }
  .gallery-carousel-overlay span {
    font-family: var(--font-sans);
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--oro-l);
    opacity: 0;
  }
  .gallery-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(28,35,48,0.55);
    border: 0.5px solid rgba(201,168,76,0.3);
    color: var(--oro);
    font-size: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
    backdrop-filter: blur(4px);
  }
  .gallery-carousel-arrow:hover { background: rgba(28,35,48,0.85); }
  .gallery-carousel-arrow--prev { left: 12px; }
  .gallery-carousel-arrow--next { right: 12px; }
  .gallery-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 14px 0 4px;
  }
  .gallery-carousel-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(201,168,76,0.3);
    border: none; cursor: pointer; padding: 0;
    transition: all 0.3s;
  }
  .gallery-carousel-dot.active {
    background: var(--oro);
    width: 20px;
    border-radius: 2px;
  }

  /* ── Blocco itinerari ── */
  .blocco-itinerari { padding: 48px 0; }
  .blocco-itinerari-inner { padding: 0 24px; gap: 24px; }

  /* ── Blog: colonna singola ── */
  .blog-grid { grid-template-columns: 1fr; gap: 36px; }
  .blog-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .blog-card:nth-child(1) .blog-img { height: 240px; }
  .blog-img { height: 200px; }

  /* ── Testimonianze: colonna singola ── */
  .testi-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }

  /* ── FAQ: colonna singola ── */
  .faq-grid { grid-template-columns: 1fr; gap: 0; margin-top: 36px; }

  /* ── Contatti: colonna singola ── */
  .contatti-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 36px; }
  .form-row { grid-template-columns: 1fr; }

  /* ── Newsletter ── */
  .newsletter-inner { padding: 0 24px; }
  .newsletter-form { flex-direction: column; border: none; gap: 0; }
  .newsletter-form input {
    border: 0.5px solid rgba(46,61,85,0.3);
    margin-bottom: 2px;
  }
  .newsletter-form button { padding: 14px 20px; width: 100%; }

  /* ── Footer: colonna singola ── */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .footer-bottom {
    padding-left: 24px;
    padding-right: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* ── Direzione tecnica ── */
  #direzione-tecnica {
    padding: 18px 24px !important;
    flex-wrap: wrap;
    gap: 16px !important;
  }
  #direzione-tecnica span { white-space: normal !important; }

  /* ── Lightbox ── */
  .lightbox-stage { padding: 56px 40px 16px; }
  .lightbox-arrow { font-size: 28px; padding: 8px 10px; }
  .lightbox-thumb { width: 48px; height: 36px; }

  /* ── Privacy ── */
  .privacy-inner { padding: 0 24px; }
  #privacy { padding: 100px 0 72px; }

  /* ── Articolo ── */
  .article-hero-topbar { padding: 0 24px; }
  .article-hero-content { padding: 0 24px 40px; }
  .article-wrap { padding: 48px 24px 72px; }
  .article-footer { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* ── Itinerario ── */
  .itin-hero-topbar,
  .itin-hero-content { padding-left: 24px; padding-right: 24px; }
  .itin-wrap { padding: 48px 24px 72px; }
  .itin-footer { flex-direction: column; align-items: flex-start; gap: 16px; }
  .itin-cta { padding: 48px 24px; }
  .itin-parte-img { height: 280px; }
}


/* ═══════════════════════════════════════
   BREAKPOINT 480px — Mobile piccolo
═══════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Navbar ── */
  nav { padding: 0 20px; }
  .nav-tagline { display: none; }
  .nav-brand { font-size: 11px; white-space: nowrap; }
  .nav-logo-icon { width: 24px; height: 28px; }

  /* ── Hero ── */
  .slide-content { left: 6%; right: 6%; bottom: 16%; }
  .slide-sub { font-size: 14px; }
  .hero-dots { bottom: 24px; }

  /* ── Padding globale ── */
  .section-inner { padding-left: 20px; padding-right: 20px; }
  .aree-wrap { padding-left: 0; padding-right: 0; }

  /* ── Chi siamo ── */
  .visual-foto { height: 300px; }
  .chi-siamo-cta { margin-top: 20px; }

  /* ── Servizi ── */
  .servizio-card { padding: 32px 20px; }
  .servizio-title { font-size: 22px; }
  .servizi-intro { font-size: 15px; }
  .servizi-divisore { margin: 24px 0; }
  .servizi-divisore-centro { padding: 0 12px; gap: 10px; }
  .servizi-divisore-label { font-size: 7.5px; letter-spacing: 0.35em; }
  .servizi-punti-col { gap: 20px; }
  .servizi-punto-testo { font-size: 13px; }

  /* ── Destinazioni ── */
  .area-card { min-height: 320px; }

  /* ── Gallery carousel ── */
  .gallery-carousel-slide { height: 260px; }

  /* ── Blog ── */
  .blog-img,
  .blog-card:nth-child(1) .blog-img { height: 180px; }

  /* ── Testimonianze ── */
  .testi-card { padding: 24px 20px; }

  /* ── FAQ ── */
  .faq-question { font-size: 15px; }

  /* ── Contatti ── */
  .form-submit {
    width: 100%;
    text-align: center;
    justify-content: center;
    align-self: stretch;
  }

  /* ── Newsletter ── */
  .newsletter-inner { padding: 0 20px; }

  /* ── Footer ── */
  .footer-grid,
  .footer-bottom { padding-left: 20px; padding-right: 20px; }

  /* ── Direzione tecnica ── */
  #direzione-tecnica { padding: 16px 20px !important; }

  /* ── Privacy ── */
  .privacy-inner { padding: 0 20px; }
  .privacy-block h2 { font-size: 18px; }

  /* ── Articolo ── */
  .article-hero-topbar { padding: 0 20px; }
  .article-hero-content { padding: 0 20px 32px; }
  .article-wrap { padding: 40px 20px 64px; }

  /* ── Itinerario ── */
  .itin-hero-topbar,
  .itin-hero-content { padding-left: 20px; padding-right: 20px; }
  .itin-wrap { padding: 40px 20px 64px; }
  .itin-cta { padding: 40px 20px; }
}