/* ============================================================
   SFVDT-Responsive.css — Adattamento tablet e mobile
   Breakpoint in em (rispettano lo zoom), misure in rem.
   ============================================================ */

/* animazione comparsa (usata da SFVDT-Animazioni.js) */
.appari { opacity: 0; transform: translateY(1.125rem); transition: opacity .6s ease, transform .6s ease; }
.appari.visibile { opacity: 1; transform: none; }

/* transizione cambio pagina AJAX */
#contenuto.in-uscita { opacity: 0; transform: translateY(0.5rem); }
#contenuto { transition: opacity .25s ease, transform .25s ease; }

/* ---------- TABLET ---------- */
@media (max-width: 61.25em) {
  .sito-footer .griglia { grid-template-columns: 1fr 1fr; }
  .griglia--4 { grid-template-columns: repeat(2, 1fr); }
  .griglia--3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 1.875rem; }
  .split.inverti .testo { order: 2; }
}

/* ---------- MENU A PANINO (nome brand lungo + molte voci: collassa ~1200px) ---------- */
@media (max-width: 75em) {
  .menu-toggle { display: block; }

  .menu-principale {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: #fff; flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.625rem 1rem 1.25rem; border-bottom: var(--bordo-sottile) solid var(--c-bordo);
    box-shadow: var(--ombra); transform: translateY(-130%); transition: transform .3s ease;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .menu-principale.aperto { transform: translateY(0); }
  .menu-principale a { padding: 0.875rem 0.75rem; border-bottom: var(--bordo-sottile) solid var(--c-neutro); border-radius: 0; }

  /* il bottone Prenota resta visibile, in versione compatta */
  .btn-prenota-header { padding: 0.5625rem 0.9375rem; font-size: 0.9rem; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 47.5em) {
  .griglia--2, .griglia--3, .griglia--4 { grid-template-columns: 1fr; }
  .sito-footer .griglia { grid-template-columns: 1fr; }

  .sezione { padding: 3.25rem 0; }
  .hero { padding: 5rem 0; }
  .hero p { font-size: 1.08rem; }
  .cta-finale { padding: 2.125rem 1.375rem; }
  .form, .riquadro-contatti { padding: 1.375rem; }

  .prof-testata { flex-direction: column; gap: 1.25rem; }
  .prof-foto { width: 100%; max-width: 15rem; aspect-ratio: 4/3; }

  .sito-logo .nome b { font-size: 0.82rem; }
  .sito-logo .nome span { font-size: 0.56rem; }
  .sito-logo img { height: 2.625rem; }
}

/* ---------- PICCOLI ---------- */
@media (max-width: 26.25em) {
  .sito-logo .nome span { display: none; }
  .sito-logo .nome b { font-size: 0.76rem; }
  .hero .azioni { flex-direction: column; }
  .hero .azioni .btn { width: 100%; justify-content: center; }
  .contenitore { padding-inline: 1rem; }
}

/* riduci animazioni se richiesto dall'utente */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .appari { opacity: 1; transform: none; }
}