/* ==========================================================================
   COMPONENTS — Sezione "Request a demo" (Intuendi Landing 2026)
   Usa i token di tokens.css. Caricare DOPO tokens.css e base.css.
   ========================================================================== */

/* Layout a 2 colonne: hero (scuro) + form (HubSpot) ----------------------- */
.demo {
  display: flex;
  min-height: 100vh;
}

/* Ogni colonna impila i propri blocchi in verticale, centrati */
.demo__hero,
.demo__form {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-hero-pad);
}

/* ---- Colonna hero (scura) ---------------------------------------------- */
.demo__hero {
  position: relative;
  background-color: var(--color-bg-hero);
  overflow: hidden;
}

/* immagine di sfondo onde blu */
.demo__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/hero/hero-waves.jpg") center / cover no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* contenuti sopra lo sfondo onde */
.demo__hero>* {
  position: relative;
}

.hero__content {
  width: 100%;
  max-width: 580px;
}

/* Wrapper testimonianza: trasparente nella colonna scura (desktop) */
.demo__social {
  width: 100%;
  max-width: 580px;
}

.hero__title {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

.hero__title em {
  font-family: var(--font-mono);
  font-style: italic;
  color: var(--color-accent);
}

.hero__subtitle {
  margin-top: var(--space-5);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

/* ---- KPI ---------------------------------------------------------------- */
.kpis {
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.kpi {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}

.kpi:last-child {
  border-bottom: 0;
}

.kpi__value {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  color: var(--color-accent);
}

.kpi__label {
  margin-top: var(--space-2);
  font-size: var(--text-base);
  color: var(--color-text-primary);
}

.kpi__label strong {
  font-weight: var(--weight-bold);
}

/* ---- Card testimonianza (effetto vetro) -------------------------------- */
.testimonial {
  margin-top: var(--space-10);
  padding: var(--space-6);
  background-color: var(--color-surface-glass);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
}

.testimonial__quote {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text-primary);
}

.testimonial__person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
}

.testimonial__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial__name {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

.testimonial__role {
  font-size: var(--text-xs);
  color: var(--color-text-primary);
}

.testimonial__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-5);
}

.testimonial__logos img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Altezze individuali per bilanciare otticamente i loghi */
.logo--tannico {
  height: 8px;
}

.logo--wells {
  height: 29px;
}

.logo--baterias {
  height: 26px;
}

.logo--guzzi {
  height: 20px;
}

/* ---- Colonna form (HubSpot) -------------------------------------------- */
.demo__form {
  background-color: var(--white);
}

.form__content {
  width: 100%;
  max-width: 604px;
}

.form__title {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--color-text-on-light);
}

.form__subtitle {
  margin-top: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

.form__embed {
  margin-top: var(--space-6);
}

/* Il form HubSpot è in un iframe cross-origin: non possiamo togliere il
   padding interno dei campi (~40px). Lo compensiamo spostando l'intero
   frame a sinistra e allargandolo, così i campi si allineano a sinistra
   con titolo/sottotitolo senza perdere larghezza a destra. */
.form__embed .hs-form-frame {
  display: block;
  margin-left: -40px;
  width: calc(100% + 40px);
}

/* Fallback altezza: l'embed HubSpot usa un <iframe> con height:100% che si
   auto-ridimensiona via postMessage. Riserviamo un'altezza minima così il
   form resta visibile anche prima/senza il resize (es. in localhost). */
.form__embed .hs-form-frame iframe {
  width: 100%;
  min-height: 520px;
  border: 0;
}

/* Nota tempo di risposta sotto il form */
.form__note {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

.form__note strong {
  font-weight: var(--weight-bold);
}

/* ---- Responsive: mobile ------------------------------------------------
   Ordine mobile (da Figma): hero → form → testimonianza → nota.
   Le colonne si "sciolgono" con display:contents così i 4 blocchi
   diventano figli diretti della griglia e si riordinano con `order`. */
@media (max-width: 768px) {
  .demo {
    display: grid;
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .demo__hero,
  .demo__form {
    display: contents;
  }

  /* il ::before onde del desktop non va renderizzato sul mobile
     (con display:contents resterebbe agganciato al viewport) */
  .demo__hero::before {
    content: none;
  }

  /* I 4 blocchi: ognuno porta il proprio sfondo e padding */
  .hero__content,
  .demo__social,
  .form__content,
  .form__note {
    width: 100%;
    max-width: none;
    min-width: 0; /* evita che l'iframe full-width allarghi la traccia griglia */
    padding: var(--space-10);
  }

  .hero__content {
    order: 1;
    position: relative;
    overflow: hidden;
    color: var(--color-text-primary);
    background-color: var(--color-bg-hero);
  }

  /* onde come overlay tenue su navy pieno (niente blend-mode) */
  .hero__content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url("../assets/hero/hero-waves.jpg") center / cover no-repeat;
    opacity: 0.06;
    pointer-events: none;
  }

  /* sfumatura navy in basso: spegne la zona chiara dell'immagine
     che emerge in fondo al hero sul formato verticale */
  .hero__content::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to bottom, transparent 50%, var(--color-bg-hero) 100%);
    pointer-events: none;
  }

  /* testo sopra entrambi gli overlay */
  .hero__content>* {
    position: relative;
    z-index: 3;
  }

  .form__content {
    order: 2;
    background-color: var(--white);
  }

  /* nota subito sotto al form (su desktop resta in fondo alla colonna) */
  .form__note {
    order: 3;
    margin-top: 0;
    padding-top: 0;
    background-color: var(--white);
  }

  /* sfondo bianco attorno alla card: crea lo spazio ai lati */
  .demo__social {
    order: 4;
    background-color: var(--white);
  }

  /* card navy piena (niente effetto vetro: lo sfondo dietro è bianco) */
  .testimonial {
    margin-top: 0;
    background-color: var(--color-bg-hero);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* form a tutta larghezza viewport (10px di margine per lato).
     La larghezza va sul wrapper: l'iframe HubSpot ha width:100% inline,
     quindi eredita la larghezza del frame invece di un override diretto. */
  .form__embed .hs-form-frame {
    width: calc(100vw - 20px);
    margin-left: calc(10px - var(--space-10));
  }
}