/* ============================================================
   Sine Tempore — Centro Estetico
   Regole responsive
   ------------------------------------------------------------
   Da caricare DOPO colors.css e style.css.
   ============================================================ */

/* ------------------------------------------------------------
   Breakpoints di Bootstrap (riferimento)
   ------------------------------------------------------------
   Nome   Min-width    "Down" (max-width)
   xs     0            —
   sm     576px        575.98px
   md     768px        767.98px
   lg     992px        991.98px
   xl     1200px       1199.98px
   xxl    1400px       1399.98px

   Le media query "down" usano (breakpoint successivo − 0.02px),
   come fa Bootstrap, per evitare sovrapposizioni con i min-width.
   ------------------------------------------------------------ */

/* ── < xxl (max 1399.98px) ─────────────────────────────────── */
@media (max-width: 1399.98px) {
  /* Header → menu mobile (hamburger) già da < xxl: le voci del menu sono
     lunghe ("Trattamenti con Dispositivi Mantis") e sotto i 1400px i link
     e la CTA "Prenota Ora" non hanno spazio a sufficienza: si
     sovrapporrebbero al logo. */
  /* Il backdrop (.nav-backdrop, z-index 55) è fratello dell'header nel
     DOM, mentre il menu e il toggle vivono DENTRO l'header, che con
     position:fixed + z-index:50 crea un proprio stacking context.
     Senza questo rialzo il backdrop coprirebbe l'intero header,
     bloccando i click sulle voci e sulla X. */
  .site-header { z-index: 70; }

  /* Il toggle deve stare sopra il pannello aperto (.main-nav, z-index 60)
     così la X resta visibile e cliccabile. */
  .nav-toggle { display: flex; position: relative; z-index: 80; }

  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    /* dvh = altezza visibile reale: su mobile 100vh conta anche lo spazio
       sotto la barra del browser e taglierebbe il fondo del pannello.
       La riga con vh resta come fallback per i browser più vecchi. */
    height: 100vh;
    height: 100dvh;
    width: min(78vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    /* "safe center": le voci restano centrate, ma se il contenuto è più alto
       del pannello (viewport bassi) l'allineamento torna in alto e si può
       scorrere, invece di tagliare la prima e l'ultima voce. */
    justify-content: safe center;
    overflow-y: auto;
    gap: 32px;
    padding: 32px 40px;
    background: var(--bg);
    box-shadow: -8px 0 40px color-mix(in srgb, var(--brown) 14%, transparent);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s ease, visibility .35s ease;
    z-index: 60;
  }
  .main-nav.is-open { transform: translateX(0); visibility: visible; }

  /* Nel pannello le voci sono allineate a sinistra: il ritorno a capo
     forzato del markup resta, ma la seconda riga parte dal margine. */
  .nav-link { font-size: 15px; text-align: left; }

  /* Il puntino divisore ha senso solo con le voci in fila: nel pannello
     verticale finirebbe fuori dal bordo sinistro. */
  .nav-link + .nav-link::before { content: none; }

  /* su mobile la CTA del header si nasconde e appare quella nel menu */
  .nav-cta { display: none; }
  .nav-cta-mobile { display: inline-block; }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--dark) 35%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s, visibility .35s;
    z-index: 55;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
}

/* ── < lg (max 991.98px) ───────────────────────────────────── */
@media (max-width: 991.98px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .hero-title { font-size: 52px; }

  /* Carosello loghi: da 4 a 3 visibili (il JS legge questo valore) */
  .logos { --logos-per-view: 3; }

  /* L'altezza (97px) arriva dalla regola base in style.css: qui si
     riduce solo il padding orizzontale per i tablet/mobile. */
  .site-header { padding: 0 24px; }
}

/* ── < md (max 767.98px) ───────────────────────────────────── */
@media (max-width: 767.98px) {
  .section { padding: 72px 24px; }
  .section-title { font-size: 34px; }

  .hero { min-height: 520px; }
  .hero-title { font-size: 42px; }
  .hero-sub { font-size: 17px; }

  .grid-3,
  .grid-2 { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }

  /* gallery passa a impilamento verticale */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 200px;
  }
  .gallery-grid .g-tall { grid-column: 1 / span 2; grid-row: auto; }
  .gallery-grid .g-1 { grid-column: 1; grid-row: auto; }
  .gallery-grid .g-2 { grid-column: 2; grid-row: auto; }
  .gallery-grid .g-wide { grid-column: 1 / span 2; grid-row: auto; }

  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-list { padding-left: 0; }
  /* A tutta larghezza la mappa quadrata diventerebbe alta quanto lo schermo
     (fino a ~720px su tablet verticale): 4:3 basta a mostrare la zona. */
  .contact-map { aspect-ratio: 4 / 3; }

  /* Carosello loghi: 2 visibili, con meno aria ai lati di ogni logo
     (su schermi stretti il marchio deve restare leggibile) */
  .logos { --logos-per-view: 2; }
  .logos__item { padding: 0 12px; }

  /* Servizi (dettaglio): immagine sempre sopra il testo, entrambi al 100% */
  .services-intro { padding: 64px 24px 0; }
  .service-row__inner { grid-template-columns: 1fr; gap: 32px; }
  .service-row--reverse .service-row__media { order: 0; }
  .service-row__title { font-size: 30px; }

  /* Trattamenti (schede con copertina): una colonna, spaziature ridotte */
  .tz-group + .tz-group { margin-top: 56px; }
  .tz-group__head { margin-bottom: 26px; }
  .tz-group__title { font-size: 26px; }
  .tz-card__title { font-size: 21px; left: 20px; right: 20px; bottom: 16px; }
  .tz-card__body { padding: 18px 22px 20px; }
  .tz-card__detail { padding: 4px 22px 22px; }

  /* Trattamenti (righe alternate): titoletti di gruppo più compatti */
  .trt-group-head { padding: 32px 24px 0; }
  .trt-group-title { font-size: 28px; }
  .trt-group-head + .service-row { padding-top: 32px; }

  /* Estetica Base (elenco servizi): immagine un po' più grande, nome ridotto */
  .eb-item { gap: 18px; padding: 16px 0; }
  .eb-item__media { flex-basis: 26%; max-width: 26%; }
  .eb-item__name { font-size: 21px; }

  /* Pagine di solo testo (legali): corpo e titoletti più compatti */
  .page-body { font-size: 16px; }
  .page-body h2 { font-size: 25px; }
  .page-body h3 { font-size: 20px; }

  /* Footer allineato alle sezioni (padding 24px come .section) */
  .site-footer { padding: 40px 24px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ── < sm (max 575.98px) ───────────────────────────────────── */
@media (max-width: 575.98px) {
  .hero-title { font-size: 34px; }

  /* Bottone a contorno (hero, 404): con la spaziatura desktop "Scopri i
     Trattamenti di Estetica Base" andrebbe su due righe già a 390px. */
  .btn-outline { letter-spacing: 1.5px; padding: 17px 24px; }

  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gallery-grid .g-tall,
  .gallery-grid .g-1,
  .gallery-grid .g-2,
  .gallery-grid .g-wide { grid-column: 1; }
}

/* ── Schermi bassi in orizzontale (smartphone ruotati) ─────────
   Unica query sull'altezza: riusa il valore sm (575.98px) e si somma ai
   blocchi per larghezza qui sopra, per questo sta in fondo. Senza, su un
   telefono in landscape (alto ~360–430px) header da 97px e hero da
   520–640px lasciano sotto la piega sottotitolo e bottone. */
@media (max-height: 575.98px) and (orientation: landscape) {
  :root { --header-height: 72px; }
  .brand img { height: 42px; }

  /* La hero riempie lo schermo sotto l'header e non oltre */
  .hero {
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
  }
  .hero-inner { padding: 28px 24px; }
  .hero-title { font-size: 36px; }
  .hero-sub { margin-top: 12px; font-size: 16px; }
  .hero-inner > .btn-outline { margin-top: 22px; }

  /* Mappa mai più alta dello schermo, così resta tutta visibile */
  .contact-map {
    aspect-ratio: auto;
    height: 70vh;
    height: 70svh;
  }
}