/* ==========================================================================
   Book Demo — 37:1732 · responsive

   PROVVISORIO. Il mockup mobile non esiste: ogni valore qui dentro e una mia
   scelta di riflusso, NON una misura di Figma. Quando arriveranno i frame
   mobile questo file si sostituisce in blocco.

   REGOLA INVIOLABILE: nessuna riga fuori da @media. A >= 1512 la sezione
   resta identica al mockup (1512 x 991: Text 1432x93, gap 40,
   Card Calendly 1140x698 con radius 16 e bordo 1px #e8e8e8).

   ---------------------------------------------------------------------------
   LA CARD CALENDLY: COMPRIMERE FINO A UN PUNTO, POI SCORRERE

   Il contenitore 37:1759 non ospita layout nostro: ospita l'inline widget di
   Calendly (decisione del cliente, spec 05 §4), che ha un layout PROPRIO e
   una larghezza minima propria. Sotto quella soglia comprimere il
   contenitore non comprime l'embed: lo fa sfondare, e a sfondare sarebbe la
   PAGINA.

   Scelta MIA, in due tempi:

     1. Sopra la soglia — il contenitore e fluido in LARGHEZZA: `width: 100%`
        con tetto a 1140 (il valore Figma, che resta esatto da 1220px di
        viewport in su). L'embed si riadatta da solo: qui non c'e niente da
        proteggere.

     2. Sotto la soglia — il contenitore resta largo quanto lo schermo, ma
        il suo CONTENUTO tiene un `min-width` e il contenitore SCORRE in
        orizzontale al proprio interno (`overflow-x: auto`).
        Questo e uno scroll interno VOLUTO: la pagina non scorre mai, perche
        il contenitore e sempre al 100% ed e lui a clippare. Vale anche per
        l'audit: uno scroll dentro un box con overflow non aumenta
        document.scrollWidth.

   SOGLIA: 680px di larghezza utile per l'embed (valore MIO). E la misura
   sotto la quale il widget Calendly non riesce piu a tenere calendario e
   colonna oraria affiancati in modo utilizzabile. La regola si attiva a
   767px di viewport: li la larghezza utile e 767 - 2*24 = 719px, ancora
   sopra i 680, quindi la barra di scorrimento NON compare al confine e si
   apre progressivamente man mano che lo schermo si stringe. Nessun salto.

   ALTERNATIVA SCARTATA: lasciar comprimere l'embed fino a 320px, contando
   sul suo layout mobile. Scartata perche il layout mobile di Calendly non e
   documentato in questa fase e perche il contenitore Figma (1140x698 con
   bordo e radius) e disegnato attorno alla vista desktop del widget: uno
   scroll orizzontale esplicito e reversibile, una compressione no.

   PERCHE L'ALTEZZA 698 NON DIVENTA UN aspect-ratio
   La consegna chiede di rendere fluidi con `aspect-ratio` i .ph che hanno
   dimensioni fisse in px. Qui non ce ne sono: l'unico .ph della sezione
   (.demo__calendly-ph) e gia 100% x 100% e segue il contenitore.
   Sul contenitore un aspect-ratio 1140/698 sarebbe anzi SBAGLIATO: i 698px
   non sono un'altezza di layout nostro che si riflowa, sono l'altezza
   PROPRIA dell'embed Calendly, che non dipende dalla larghezza (il widget e
   un iframe con la sua altezza dichiarata, 698 in Figma / 700 oggi in
   produzione su vidim.it). Legarla alla larghezza darebbe 421px a 768 e
   210px a 375: una feritoia che, con `overflow-y` clippato, taglierebbe il
   calendario senza modo di recuperarlo. L'altezza resta quindi 698 e a
   diventare fluida e solo la larghezza — che e esattamente la dimensione
   lungo cui l'embed sa (fino a un certo punto) riadattarsi.
   Effetto collaterale utile: nessun salto di altezza al breakpoint 768/767,
   la card cambia solo larghezza lungo tutta la scala.

   Quando l'embed vero sostituira il .ph, le due regole restano valide senza
   modifiche: il `min-width` va spostato sul div .calendly-inline-widget
   (che oggi lo dichiara inline a 1140px) e il contenitore continua a fare
   da finestra scorrevole.
   ========================================================================== */


/* --------------------------------------------------------------------------
   <= 1511 · Desktop compresso — la sezione diventa fluida
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  /* 1432 era il container di Figma. */
  .demo__head,
  .demo__h2,
  .demo__lead {
    width: 100%;
  }

  /* 1140 fissi -> larghezza fluida con tetto al valore Figma. L'altezza
     resta 698 (altezza propria dell'embed, non un'altezza di layout: vedi
     la nota in testa al file). Da 1220px di viewport in su la card e ancora
     esattamente 1140 x 698, cioe identica al mockup.
     `overflow: hidden` (clip content SI in Figma) resta. */
  .demo__calendly {
    width: 100%;
    max-width: 1140px;
  }
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet
   A 944px di larghezza l'embed sta ancora comodo (soglia 680): si stringe
   solo il ritmo verticale della sezione.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .demo { gap: var(--space-4); }   /* 40 -> 32. MIO. */
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile — la card smette di comprimersi e comincia a scorrere
   Vedi la nota lunga in testa al file.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .demo { gap: var(--space-3); }   /* 32 -> 16. MIO. */

  /* Lo scroll interno voluto. L'altezza NON cambia (resta i 698 della
     sezione): l'embed e alto uguale a ogni larghezza, e con `overflow-y`
     clippato un'altezza minore taglierebbe il calendario senza rimedio.
     overflow-y: hidden perche in verticale non deve scorrere niente —
     e anche obbligato, `overflow-x: auto` da solo non lascerebbe `visible`
     sull'altro asse. */
  .demo__calendly {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;   /* MIO: lo swipe orizzontale sulla card
                                         non trascina la pagina/la history */
  }

  /* Il pavimento dell'embed. Sul .ph di oggi serve a rendere visibile e
     verificabile il comportamento; domani lo dichiarera l'inline widget. */
  .demo__calendly-ph {
    min-width: 680px;              /* MIO — vedi SOGLIA in testa al file */
  }
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   A 375px la finestra e larga 343px su 680px di contenuto: si scorre per
   una buona meta della larghezza. Nessuna regola in piu — l'altezza resta 698,
   che e quanto occupa l'embed Calendly anche oggi in produzione su un
   telefono. Non ci sono altre misure fisse da sciogliere in questa sezione:
   testa e lead sono gia al 100% e il gutter lo gestisce il core.
   -------------------------------------------------------------------------- */