/* =========================================================
   QUANDOSERVER — RESPONSIVE / MEDIA QUERIES
   Caricare DOPO style.css
   Correzioni marcate [FIX n]
   ========================================================= */

/* =========================================================
   TABLET
   [FIX 21] Breakpoint spostato da 900 a 1024 per allinearsi a
   quello di Elementor. Prima, tra 901 e 1024px, Elementor
   impaginava in modalità tablet mentre questo CSS era ancora in
   modalità desktop: due sistemi che si contraddicevano, con il
   menu desktop sopra un layout tablet.
   ========================================================= */

@media (max-width: 1024px) {

  /* [FIX 1] la variabile segue il breakpoint, così lo spazio
     riservato sotto l'header resta corretto */
  :root { --topbar-h: 92px; }

  .hero, .concept { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: 46px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }

  .topbar {
    min-height: var(--topbar-h);
    padding: 10px 16px;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .brand { gap: 14px; }
  .brand-mark.vintage-logo { width: 68px; height: 68px; }
  .brand-name { font-size: 1.2em; }

  .topbar.scrolled { min-height: 62px; padding: 7px 12px; }
  .topbar.scrolled .brand { gap: 10px; }
  .topbar.scrolled .brand-mark.vintage-logo { width: 40px; height: 40px; }
  .topbar.scrolled .brand-name { font-size: 1.05em; }   /* [FIX 5] prima era identico */

  .menu-toggle {
    display: flex;
    margin-left: auto;
  }

  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 4px;
    padding-top: 6px;
  }
  .nav.open { display: flex; }

  .nav a {
    width: 100%;
    min-height: var(--tap);
    justify-content: center;
    text-align: center;

    /* [FIX 22] Era 13px: nel menu a tendina il testo era più
       piccolo che ovunque altrove sul sito. */
    font-size: 15px;
    padding: 12px 16px;
  }

  /* Il pulsante CTA nel menu a tendina occupa tutta la riga */
  .nav .qs-menu-button > a {
    width: 100%;
    margin-left: 0;
    margin-top: 6px;
  }

  .qs-hero-slider { min-height: 620px; }

  .qs-slide { padding-top: var(--header-space); }   /* [FIX 10] */

  .qs-slide-content {
    width: min(680px, calc(100% - 48px));
    margin-left: 24px;
  }
  .qs-slide-content h1,
  .qs-slide-content h2 {
    font-size: clamp(42px, 9vw, 72px);
    line-height: 1.06;          /* [FIX 9] */
  }
  .qs-slide-content p { font-size: 18px; }

  .qs-slider-arrow { width: 48px; height: 48px; }   /* [FIX 6] erano 42px */

  /* [FIX 23] Il footer non aveva NESSUNA regola responsive:
     restava a tre colonne anche su tablet e telefono. */
  .qs-footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    padding: 40px 0 34px;
  }
  .qs-footer-contact {
    grid-column: 1 / -1;
    justify-self: start;
  }
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1025px) {          /* [FIX 21] era 901 */
  .menu-toggle { display: none; }
  .nav { display: flex !important; }
}


/* =========================================================
   NOTEBOOK CON SCHERMO BASSO
   [FIX 24] Questi blocchi erano un rimedio al titolo che finiva
   sotto l'header. Ora che la slide riserva lo spazio con il flex
   (FIX 10 in style.css) lo spostamento del top non serve più:
   restano solo gli aggiustamenti di dimensione del testo, che
   hanno senso a prescindere.
   ========================================================= */

@media (min-width: 1025px) and (max-height: 800px) {
  .qs-slide-content h1,
  .qs-slide-content h2 {
    font-size: clamp(44px, 5.2vw, 72px);
    line-height: 1.04;
    margin-bottom: 16px;
  }
  .qs-kicker { margin-bottom: 10px; }
  .qs-slide-content p {
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 20px;
  }
}

@media (min-width: 1025px) and (max-height: 680px) {
  .qs-slide-content h1,
  .qs-slide-content h2 { font-size: clamp(40px, 4.6vw, 62px); }
  .qs-slide-content p { font-size: 16px; }
  .qs-hero-slider { min-height: 600px; }
}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 560px) {

  :root { --topbar-h: 78px; }        /* [FIX 1] */

  main {
    width: 100%;
    max-width: none;
    /* [FIX 25] Erano 10px: troppo stretti, il testo tocca i bordi */
    padding-left: 16px;
    padding-right: 16px;
  }

  /* [FIX 26] La regola usava il selettore `footer`, ma il footer
     del sito ha classe .qs-footer: la larghezza su telefono non
     veniva mai applicata. */
  .topbar,
  .qs-footer { width: calc(100% - 24px); max-width: none; }

  h1 { font-size: 44px; line-height: 1.04; }   /* [FIX 9] */

  .grid, .stats { grid-template-columns: 1fr; }
  .concept, .card { padding: 22px; }
  .card { min-height: 0; }

  /* [FIX 27] Spaziature verticali ridotte: con i valori desktop
     (90px sotto stats e areas, 64px sotto concept) la pagina
     diventa lunghissima e piena di vuoti su schermo piccolo. */
  .stats { margin: 16px 0 48px; }
  .areas { padding: 16px 0 48px; }
  .concept { margin-bottom: 36px; }

  .topbar { min-height: var(--topbar-h); padding: 9px 12px; }
  .brand { gap: 10px; }
  .brand-mark.vintage-logo { width: 58px; height: 58px; }
  .brand-name { font-size: 1.15em; }

  .topbar.scrolled { min-height: 58px; padding: 6px 10px; }
  .topbar.scrolled .brand-mark.vintage-logo { width: 36px; height: 36px; }
  .topbar.scrolled .brand-name { font-size: 1em; }     /* [FIX 5] */

  .qs-slider-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  .qs-hero-slider {
    width: 100% !important;
    height: 100vh;
    height: 100dvh;
    min-height: 560px;
  }

  .qs-slide-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.58) 38%, rgba(0,0,0,.86) 100%);
  }

  /* [FIX 10] Il contenuto era in position:absolute con bottom:18%,
     cioè una percentuale dell'altezza schermo: su telefoni alti
     lasciava un vuoto sotto, su quelli bassi con titolo di tre
     righe usciva dall'alto. Ora è allineato in fondo dal flex del
     genitore, con un margine in pixel controllato. */
  .qs-slide {
    align-items: flex-end;
    padding-top: calc(var(--header-space) - 20px);
    padding-bottom: clamp(84px, 14vh, 140px);
  }

  .qs-slide-content {
    position: relative;
    width: calc(100% - 36px);
    left: auto;
    bottom: auto;
    top: auto;
    margin-left: 18px;
    transform: none;
  }

  .qs-kicker {
    font-size: 12px;              /* [FIX 22] era 11px */
    line-height: 1.3;
    margin-bottom: 12px;
  }

  .qs-slide-content h1,
  .qs-slide-content h2 {
    font-size: clamp(36px, 11vw, 52px);
    line-height: 1.06;
    letter-spacing: -.045em;
    margin-bottom: 18px;
  }

  .qs-slide-content p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  .qs-claim { font-size: 13px; margin: -6px 0 16px; }

  .qs-slider-arrow { display: none; }

  .qs-slider-dots { bottom: 16px; gap: 0; }

  /* Su telefono i pallini diventano essi stessi area di tocco */
  .qs-slider-dot {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    transform: none;
  }
  .qs-slider-dot::after { content: none; }
  .qs-slider-dot::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.55);
    background: transparent;
    transition: background .2s ease, transform .2s ease;
  }
  .qs-slider-dot.is-active { background: transparent; transform: none; }
  .qs-slider-dot.is-active::before {
    background: var(--accent);
    transform: translate(-50%, -50%) scale(1.2);
  }

  /* --- Footer su telefono [FIX 23] ------------------------ */

  .qs-footer-main {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 32px 0 28px;
  }
  .qs-footer-contact {
    justify-self: start;
    min-width: 0;
  }
  .qs-footer-bottom {
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
  }
  .qs-footer-bottom-spacer { display: none; }
  .qs-footer-info,
  .qs-footer-bottom-right { grid-column: 1; }
  .qs-footer-column a.qs-footer-ticket { width: 100%; }
}


/* =========================================================
   COOKIEYES SU TELEFONO
   [FIX 28] Il banner occupava 390px su 840, quasi metà schermo.
   ========================================================= */

@media (max-width: 767px) {

  .qs-form-row { grid-template-columns: 1fr; gap: 0; }

  .cky-consent-container {
    max-height: 55dvh !important;
    overflow-y: auto !important;
  }

  .cky-notice { padding: 0 16px !important; }
  .cky-title { font-size: 16px !important; margin-bottom: 8px !important; }
  .cky-notice-des p { font-size: 13.5px !important; line-height: 1.5 !important; }

  .cky-notice-btn-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .cky-notice-btn-wrapper .cky-btn { width: 100% !important; }

  .cky-btn-revisit-wrapper {
    width: 52px !important;
    height: 52px !important;
  }
}

@media (max-height: 700px) {
  .cky-preference-center { max-height: 100dvh !important; }
}


/* =========================================================
   ACCESSIBILITÀ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* [FIX 29] Prima veniva azzerata solo la durata della
     transizione, ma lo zoom della slide restava: la scala
     scattava comunque, in modo più brusco di prima. */
  .qs-slide::before,
  .qs-slide.is-active::before {
    transform: none !important;
  }
}