/* ==========================================================================
   LyamFlow — Landing / Responsive
   --------------------------------------------------------------------------
   Il layout è già fluido (clamp + grid auto): qui ci sono solo i punti in cui
   la composizione deve cambiare davvero, non ridursi.
   Ultimo foglio caricato, quindi vince sugli altri a parità di specificità.
   ========================================================================== */

/* ------------------------------------------------------- ≤ 1280px — laptop */
@media (max-width: 80em) {
  .lf-hero__chip--a {
    left: 0.5rem;
  }
  .lf-hero__chip--b {
    right: 0.5rem;
  }
  .lf-hero__chip--c {
    left: 8%;
  }
}

/* -------------------------------------------------------- ≤ 1024px — tablet */
@media (max-width: 64em) {
  .lf {
    --lf-section: clamp(4.5rem, 10vw, 7rem);
  }

  /* Le sezioni prodotto passano da affiancate a impilate:
     prima si legge, poi si guarda. */
  .lf-show__layout,
  .lf-show--flip .lf-show__layout,
  .lf-faq__layout,
  .lf-chaos__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .lf-show--flip .lf-show__copy {
    order: 0;
  }

  /* Niente sticky su tablet: l'altezza dello schermo non basta a farlo funzionare */
  .lf-chaos__sticky,
  .lf-faq__aside {
    position: static;
  }

  .lf-chaos__list {
    padding-block: 2rem 0;
  }

  .lf-chaos__item:nth-child(odd),
  .lf-chaos__item:nth-child(even) {
    margin-inline: 0;
  }

  /* Bento a due colonne */
  .lf-feat {
    --lf-feat-span: 3;
  }
  .lf-feat--wide,
  .lf-feat--full {
    --lf-feat-span: 6;
  }

  .lf-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lf-plans {
    grid-template-columns: minmax(0, 1fr);
    max-width: 32rem;
    margin-inline: auto;
  }

  /* Il piano consigliato sale in cima quando la griglia diventa una colonna */
  .lf-plan--hero {
    order: -1;
  }
}

/* ---------------------------------------------------------- ≤ 768px — mobile */
@media (max-width: 48em) {
  .lf {
    --lf-section: clamp(3.5rem, 12vw, 5.5rem);
  }

  /* La navigazione desktop lascia il posto al menu a tutto schermo */
  .lf__nav-links {
    display: none;
  }

  /*
   * Nella barra ci sta un pulsante solo, e su telefono è "Accedi": chi apre
   * il sito da mobile è più spesso un cliente che deve rientrare nel proprio
   * gestionale che non un curioso che prova la demo. La demo resta nel menu,
   * a un tocco di distanza.
   */
  .lf__nav-actions .lf-btn--primary {
    display: none;
  }

  /*
   * Qui "Accedi" non è più una voce di contorno ma l'unica azione della
   * barra, quindi prende un filo di bordo per leggersi come pulsante e
   * un'altezza da dito (44px, il minimo comodo su touch) invece dei 36
   * pensati per il mouse.
   */
  .lf__nav-actions .lf-btn--ghost {
    display: inline-flex;
    height: 2.75rem;
    color: var(--lf-fg);
    border: 1px solid var(--lf-line-bright);
  }

  .lf__burger {
    display: flex;
  }

  .lf-hero {
    min-height: auto;
    padding-block: 8rem 4rem;
  }

  /* Le schede fluttuanti dell'hero affollerebbero lo schermo del telefono */
  .lf-hero__chip--a,
  .lf-hero__chip--b {
    display: none;
  }

  .lf-hero__chip--c {
    left: 50%;
    bottom: -1.25rem;
    transform: translateX(-50%);
  }

  .lf-hero__scroll {
    display: none;
  }

  .lf-hero__device {
    --lf-hero-rx: 10deg;
  }

  .lf-hero__proof {
    gap: 1.25rem 2rem;
  }

  .lf-hero__proof div {
    flex: 1 1 40%;
  }

  /* Bento a colonna singola */
  .lf-feat,
  .lf-feat--wide,
  .lf-feat--full {
    --lf-feat-span: 6;
    min-height: 0;
  }

  /* Prima/Dopo: 16:9 su telefono diventa una fessura, meglio 4:3 */
  .lf-fix__compare {
    aspect-ratio: 4 / 3;
  }

  .lf-fix__gains {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
   * Su telefono il modello 3D non parte mai (troppi MB, vedi phone-3d.js):
   * il palco torna a essere un contenitore qualsiasi e il telefono in CSS
   * riprende il flusso, centrato sotto il tablet invece che sovrapposto.
   */
  .lf-show__combo .lf-phone3d {
    position: relative;
    right: auto;
    bottom: auto;
    width: 60%;
    max-width: none;
    aspect-ratio: auto;
    margin: -18% auto 0;
  }

  .lf-show__combo .lf-phone3d > .lf-phone3d__fallback {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    transform: none;
  }

  .lf-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .lf-footer__bottom {
    justify-content: center;
    text-align: center;
  }

  /*
   * Dentro i mockup l'interfaccia deve restare leggibile, non solo piccola:
   * a questa larghezza il MacBook mostra la versione "compatta" dell'app
   * (niente sidebar, statistiche 2×2), esattamente come fa il gestionale vero.
   */
  .lf-mac .ui__side {
    display: none;
  }

  .lf-mac .ui__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lf-mac .ui__grid--2-1,
  .lf-mac .ui__grid--1-1 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Alcune card della dashboard non entrano: si nascondono, non si comprimono */
  .lf-mac [data-ui-optional] {
    display: none;
  }
}

/* ------------------------------------------------------------ ≤ 420px — small */
@media (max-width: 26.25em) {
  .lf-hero__cta,
  .lf-final__cta {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .lf-hero__cta .lf-btn,
  .lf-final__cta .lf-btn {
    width: 100%;
  }

  .lf-fix__gains {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------- Schermi molto larghi */
@media (min-width: 100em) {
  .lf {
    --lf-maxw: 1360px;
  }
}

/* --------------------------------------------------- Fallback backdrop-filter */
/*
 * Dove il blur non esiste (Firefox con la feature spenta, browser vecchi) il
 * vetro diventerebbe un pannello trasparente illeggibile: si passa a una
 * superficie piena, stesso colore, contrasto garantito.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lf-card,
  .lf-quote,
  .lf-plan,
  .lf__nav.is-stuck .lf__nav-inner,
  .lf-hero__chip,
  .lf-btn--glass {
    background: hsl(224 20% 9%);
  }
}

/* --------------------------------------------------------- Dispositivi touch */
@media (hover: none) {
  /* Gli effetti che dipendono dal puntatore non hanno senso: si spengono,
     lasciando lo stato "a riposo" che è già completo. */
  .lf-spot::after {
    display: none;
  }

  .lf-tilt {
    transform: none !important;
  }

  .lf-hero__mouse-glow {
    opacity: 0;
  }
}