/* ==========================================================================
   EXPERIENCE PASS — landing 2
   Enne Effe + BouMatic

   Token, reset, tipografia, container e footer: style.css
   Qui vivono solo gli stili della sezione .pass e del blocco form.
   ========================================================================== */


/* --------------------------------------------------------------------------
   TOKEN LOCALI
   -------------------------------------------------------------------------- */

.pass{

  /* Superficie del pannello form: è esattamente il grigio che Zoho usa come
     sfondo del proprio form. Coincidendo, il pannello e l'iframe si leggono
     come un unico blocco invece che come due schede sovrapposte. */
  --form-surface: #edeff4;

  /* Altezza riservata all'iframe Zoho.

     Il form NON comunica la propria altezza alla pagina (non invia alcun
     postMessage), quindi non è ridimensionabile via JS: lo spazio va
     riservato a priori dal CSS.

     Altezze misurate sul form reale, a caricamento completato
     (larghezza iframe -> altezza del form). Rimisurate dopo l'aggiunta
     del campo telefono: sopra i ~450px il form si è accorciato di ~110px,
     sotto è rimasto invariato.

       280px -> 1115    418px -> 1037    558px ->  960
       335px -> 1056    483px ->  996    640px ->  971
       380px -> 1037    496px ->  996

     Il massimo è ~1115px e la variazione fra un breakpoint e l'altro è
     minima: un valore unico copre tutte le larghezze, senza doverlo
     differenziare per media query.

     Attenzione: la fascia critica non è il mobile ma il desktop stretto.
     A due colonne l'iframe è molto più stretto del viewport — tocca il
     minimo di ~388px intorno ai 940-960px di viewport, e resta sotto i
     480px fino a ~1230px — quindi il form sta nel formato alto (1037px)
     proprio dove ci si aspetterebbe quello largo. Da qui il valore base.

     Il valore è tenuto poco sopra il massimo della fascia: il form Zoho ha
     già un proprio padding sotto al pulsante di invio, quindi ogni pixel in
     più riservato qui si somma a quello e appesantisce la chiusura del
     pannello. Da qui la scaletta per larghezza nei breakpoint mobile.

     L'iframe resta scrollabile internamente (nessun scrolling="no"): se un
     invio a vuoto fa comparire tutti i messaggi di errore insieme — ~24px
     ciascuno — il form si allunga oltre lo spazio riservato e resta
     comunque raggiungibile.

     Se in futuro si aggiungono o rimuovono campi nel form Zoho,
     rimisurare e aggiornare questo valore. */
  --form-h: 1050px;

  /* Padding verticale della sezione, usato anche nel calcolo dell'altezza
     della colonna di testo. */
  --pass-pad: clamp(56px,6vw,88px);
}


/* ==========================================================================
   01 · SEZIONE
   ========================================================================== */

.pass{
  position:relative;
  display:flex;
  align-items:center;

  min-height:100vh;
  min-height:100svh;

  background:var(--navy);

  /* `clip` e non `hidden`: `hidden` renderebbe .pass un contenitore di
     scroll, con effetti collaterali sullo scorrimento della pagina. */
  overflow:clip;
}


/* ==========================================================================
   02 · SFONDO
   ========================================================================== */

.pass__media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.pass__bg{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}


/* Scrim — due gradienti sovrapposti.
   Orizzontale: protegge la colonna di testo a sinistra.
   Verticale: chiude sopra e sotto, dove l'immagine è più chiara. */

.pass__scrim{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(24,27,49,.96) 0%,
      rgba(24,27,49,.91) 42%,
      rgba(24,27,49,.64) 72%,
      rgba(24,27,49,.46) 100%
    ),
    linear-gradient(
      180deg,
      rgba(24,27,49,.40) 0%,
      rgba(24,27,49,.12) 45%,
      rgba(24,27,49,.58) 100%
    );
}


/* ==========================================================================
   03 · LINEA ARANCIONE LATERALE
   ========================================================================== */

.pass__accent{
  position:absolute;
  z-index:2;
  top:0;
  bottom:0;
  left:clamp(14px,2.2vw,34px);
  width:1px;
  background:var(--orange);
  pointer-events:none;
}


/* ==========================================================================
   04 · GRIGLIA
   ========================================================================== */

.pass__inner{
  position:relative;
  z-index:1;

  display:grid;
  grid-template-columns:
    minmax(0,1.02fr)
    minmax(420px,.88fr);

  gap:clamp(48px,6vw,96px);

  /* Le due colonne partono dall'alto. Il testo NON è centrato sull'altezza
     del form (~1300px): lo centra sulla prima schermata la regola
     min-height di .pass__content, qui sotto. */
  align-items:start;

  padding-block:var(--pass-pad);
}


/* ==========================================================================
   05 · COLONNA TESTO
   ========================================================================== */

.pass__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;

  /* Il testo è centrato verticalmente sulla prima schermata, non
     sull'altezza totale della sezione.

     Il form è alto ~1300px e rende la sezione molto più alta del viewport:
     centrare il testo su quell'altezza lo farebbe partire oltre metà
     schermo — su un 1366x768 i loghi cadrebbero a ~390px, con la
     descrizione sotto la piega. Centrandolo su 100svh il blocco resta
     centrato in ciò che si vede all'apertura, e resta fermo. */
  min-height:calc(100svh - 2 * var(--pass-pad));
}


/* --------------------------------------------------------------------------
   LOGHI
   -------------------------------------------------------------------------- */

.pass__brand{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.5vw,22px);
  margin-bottom:clamp(36px,4.5vw,60px);
}

.pass__logo{
  display:block;
  width:auto;
}

.pass__logo--ef{height:clamp(44px,4.6vw,64px)}
.pass__logo--bm{height:clamp(19px,1.9vw,26px)}

.pass__divider{
  width:1px;
  height:clamp(32px,3.6vw,46px);
  background:rgba(255,255,255,.26);
}


/* --------------------------------------------------------------------------
   KICKER
   -------------------------------------------------------------------------- */

.pass__kicker{
  margin-bottom:clamp(14px,1.5vw,18px);
  font-size:clamp(.75rem,.95vw,.875rem);
  font-weight:600;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange);
}


/* --------------------------------------------------------------------------
   TITOLO
   -------------------------------------------------------------------------- */

.pass__title{
  max-width:11ch;
  font-size:clamp(2.75rem,6vw,5.75rem);
  font-weight:800;
  line-height:.88;
  letter-spacing:-.04em;
  text-transform:uppercase;
  color:var(--white);

  /* Il titolo cade sulla parte più illustrata dello sfondo: una ombra molto
     morbida lo stacca senza introdurre un effetto "testo con ombra". */
  text-shadow:0 2px 24px rgba(16,18,35,.45);
}

.pass__title span{
  display:block;
  color:var(--orange);
}


/* --------------------------------------------------------------------------
   SOTTOTITOLO
   -------------------------------------------------------------------------- */

.pass__subtitle{
  position:relative;
  max-width:34ch;
  margin-top:clamp(26px,3vw,38px);
  padding-top:clamp(22px,2.4vw,30px);

  font-size:clamp(1.0625rem,1.45vw,1.375rem);
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.012em;
  color:var(--white);
}

/* Regola breve: separa titolo e sottotitolo senza aggiungere un altro colore */
.pass__subtitle::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:clamp(48px,5vw,72px);
  height:2px;
  background:var(--orange);
}


/* --------------------------------------------------------------------------
   DESCRIZIONE
   -------------------------------------------------------------------------- */

.pass__description{
  max-width:56ch;
  margin-top:clamp(22px,2.4vw,32px);

  font-size:clamp(.9375rem,1vw,1.0625rem);

  /* 400 e non 300: a questo corpo il peso sottile, su fondo fotografico,
     perde troppo contrasto. */
  font-weight:400;
  line-height:1.7;
  color:rgba(255,255,255,.9);
}

.pass__description p + p{
  margin-top:1em;
}


/* ==========================================================================
   06 · PANNELLO FORM
   ========================================================================== */

.pass__form-wrap{
  width:100%;
  min-width:0;
}

.pass-form{
  width:100%;
  overflow:hidden;

  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-box);

  background:var(--form-surface);
  color:var(--ink);

  /* Unica ombra della pagina: il pannello è l'elemento su cui si deve agire,
     e su fondo scuro la sola hairline non basta a staccarlo. */
  box-shadow:0 24px 60px -28px rgba(0,0,0,.65);
}


/* --------------------------------------------------------------------------
   TESTATA

   Padding solo sulla testata: l'iframe resta a tutta larghezza del pannello,
   così il form Zoho — che ha già i propri margini interni — guadagna spazio
   utile, soprattutto su mobile.
   -------------------------------------------------------------------------- */

.pass-form__head{
  padding:clamp(26px,2.6vw,34px) clamp(24px,2.6vw,36px) 0;
}

.pass-form__title{
  font-size:clamp(1.5rem,2.2vw,2.125rem);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.025em;
  color:var(--navy);
}

.pass-form__title::after{
  content:"";
  display:block;
  width:44px;
  height:2px;
  margin-top:clamp(14px,1.4vw,18px);
  background:var(--orange);
}


/* ==========================================================================
   07 · IFRAME ZOHO
   ========================================================================== */

.pass-form__embed{
  position:relative;
  width:100%;
  min-width:0;
}

.pass-form__embed iframe{
  display:block;
  width:100% !important;
  max-width:100%;
  height:var(--form-h) !important;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}


/* ==========================================================================
   08 · LAPTOP
   ========================================================================== */

@media (max-width:1200px){

  .pass__inner{
    grid-template-columns:
      minmax(0,1fr)
      minmax(390px,.92fr);
    gap:clamp(36px,4.5vw,64px);
  }

  .pass__brand{margin-bottom:32px}
}


/* ==========================================================================
   09 · TABLET — la griglia diventa una colonna sola
   ========================================================================== */

@media (max-width:900px){

  .pass{
    align-items:flex-start;
    min-height:0;
  }

  /* In colonna singola il testo non è più confinato a sinistra: lo scrim
     diventa verticale e più coprente, altrimenti l'immagine attraversa
     i paragrafi. */
  .pass__scrim{
    background:
      linear-gradient(
        180deg,
        rgba(24,27,49,.96) 0%,
        rgba(24,27,49,.92) 38%,
        rgba(24,27,49,.88) 68%,
        rgba(24,27,49,.94) 100%
      );
  }

  .pass__inner{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(40px,6vw,56px);
    justify-items:center;
    padding-block:clamp(48px,7vw,72px);
  }

  /* In colonna singola il testo torna alto quanto il suo contenuto. */
  .pass__content{min-height:0}

  .pass__content,
  .pass__form-wrap{
    width:100%;
    max-width:640px;
  }

  .pass__title{
    max-width:none;
    font-size:clamp(3rem,9vw,4.75rem);
  }

  .pass__subtitle{max-width:38ch}
  .pass__description{max-width:64ch}
}


/* ==========================================================================
   10 · MOBILE
   ========================================================================== */

@media (max-width:560px){

  /* La linea verticale, a 14px dal bordo, competerebbe con il testo:
     su mobile sparisce. */
  .pass__accent{display:none}

  .pass__inner{
    gap:36px;
    padding-block:36px 48px;
  }

  .pass__brand{
    gap:12px;
    margin-bottom:32px;
  }

  .pass__logo--ef{height:44px}
  .pass__logo--bm{height:19px}
  .pass__divider{height:32px}

  .pass__kicker{
    margin-bottom:12px;
    font-size:.6875rem;
    letter-spacing:.16em;
  }

  .pass__title{
    font-size:clamp(2.5rem,12.5vw,3.4rem);
    line-height:.9;
  }

  .pass__subtitle{
    max-width:none;
    margin-top:22px;
    padding-top:20px;
    font-size:1.0625rem;
    line-height:1.42;
  }

  .pass__description{
    max-width:none;
    margin-top:20px;
    font-size:.9375rem;
    line-height:1.7;
  }

  .pass-form{border-radius:10px}

  .pass-form__head{padding:24px 20px 0}

  .pass-form__title{font-size:1.5rem}
}


/* ==========================================================================
   10b · ALTEZZA FORM SUI TELEFONI

   Sotto i 560px l'iframe è largo quanto il viewport meno i margini, e il
   form Zoho cambia altezza al variare della larghezza. Una scaletta per
   fasce evita di riservare su un telefono da 390px lo spazio che serve a
   uno da 320px: sarebbero ~110px di grigio vuoto sotto al pulsante.

   Le fasce vanno dalla più larga alla più stretta, così la più specifica
   sovrascrive la precedente.
   ========================================================================== */

/* iframe ~410px o meno -> form 1037px */
@media (max-width:450px){
  .pass{--form-h:1080px}
}

/* iframe ~340px o meno -> form 1056px */
@media (max-width:380px){
  .pass{--form-h:1100px}
}

/* iframe ~300px o meno -> form 1115px */
@media (max-width:340px){
  .pass{--form-h:1160px}
}


/* ==========================================================================
   11 · MOBILE STRETTI
   ========================================================================== */

@media (max-width:380px){

  .pass__inner{
    padding-inline:20px;
  }

  .pass__title{font-size:clamp(2.25rem,12vw,2.75rem)}

  .pass__logo--ef{height:40px}
  .pass__logo--bm{height:17px}

  .pass-form__head{padding:22px 18px 0}
}


/* ==========================================================================
   12 · DESKTOP BASSI

   Su schermi larghi ma poco alti il blocco testo va compattato, altrimenti
   il form — che è alto e non comprimibile — spinge tutto fuori schermo.
   ========================================================================== */

@media (min-width:901px) and (max-height:820px){

  .pass__inner{padding-block:44px}

  .pass__brand{margin-bottom:26px}

  .pass__title{font-size:clamp(2.75rem,4.6vw,4.25rem)}

  .pass__subtitle{
    margin-top:22px;
    padding-top:20px;
    font-size:1.0625rem;
  }

  .pass__description{
    margin-top:18px;
    font-size:.9375rem;
    line-height:1.6;
  }
}


/* ==========================================================================
   13 · SCHERMI MOLTO LARGHI
   ========================================================================== */

@media (min-width:1600px){

  .pass__inner{
    grid-template-columns:
      minmax(0,1.1fr)
      minmax(480px,.8fr);
  }
}