/*
 * Override minimi al sito SCALZI (tendina "Contatto preferito" con aspetto
 * personalizzato + referenze per fascia di budget, in fondo al file).
 * Riprende esattamente lo stile dei campi del form: sfondo avorio traslucido,
 * bordo sottile, freccetta crema disegnata in SVG.
 */
.bio-waitlist-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcd2b2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  cursor: pointer;
}

.bio-waitlist-form select::-ms-expand {
  display: none;
}

/* Su iOS il select eredita un colore di sistema: forziamo l'avorio del tema */
.bio-waitlist-form select {
  color: var(--ivory);
}

/* Processo "one to one": le righe orizzontali tra gli step sono ripristinate
   (l'utente le rivuole) — nessun override qui, valgono i bordi di styles.css. */

/* Hero: UNICA modifica ammessa = trasparenza del simbolo "8".
   Layout, posizione del blocco e spaziature restano ESATTAMENTE quelli
   originali di styles.css (8 sopra, SCALZI sotto, claim/sottotitolo al centro,
   bottone "Entra in lista" con spazio sotto — v. riferimento produzione).
   Nessun riposizionamento qui: solo l'8 diventa una filigrana crema.

   Nell'originale l'8 (.bio-hero-emblem) ha opacity 0.76 e l'animazione
   logoEntrance (both) la riporta a 1: appare pieno. Qui la abbassiamo a
   watermark (0.14, crema #DCD2B2) e blocchiamo logoEntrance con animation:none
   così non risale a 1. Tocchiamo SOLO opacity+animation: dimensione, posizione,
   margini e maschera restano quelli di styles.css. La scritta SCALZI davanti
   (.bio-brand) resta piena e non è toccata.
   !important perché .reveal.is-visible imporrebbe opacity:1 a pari specificità. */
.bio-hero .bio-hero-emblem {
  opacity: 0.14 !important;
  animation: none;
  /* Simbolo "8" leggermente più grande dell'originale (era clamp(76px,9vw,104px)):
     fa da filigrana un po' più presente dietro SCALZI, senza spostare nulla
     (il min-height del gruppo sotto compensa l'ingombro). */
  width: clamp(116px, 13.9vw, 160px);
}

/* Centraggio del SOLO gruppo logo+SCALZI: la scritta SCALZI va sovrapposta e
   centrata SOPRA il simbolo "8" (lockup), invece di stare impilata sotto.
   Vincolo assoluto: NON deve muoversi nient'altro (claim, sottotitolo, CTA,
   spaziature restano quelli originali di styles.css). Per questo NON cambiamo
   l'ingombro verticale del brand-group: gli fissiamo una min-height pari alla
   sua altezza originale (emblem + gap + brand) e togliamo il gap, così lo
   spazio che occupava resta identico e il messaggio sotto non si sposta.
   .bio-brand (SCALZI) esce dal flusso e viene centrato sul gruppo. */
.bio-hero .bio-brand-group {
  position: relative;
  gap: 0;
  min-height: calc(
    (clamp(116px, 13.9vw, 160px) * 177 / 120) /* altezza emblem (8) ingrandito */
    + clamp(18px, 3vw, 30px)              /* gap originale del grid */
    + (clamp(150px, 24vw, 220px) * 55 / 360) /* altezza brand (SCALZI) */
  );
  justify-content: center;
  align-content: center;
}

.bio-hero .bio-brand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  margin: 0;
  z-index: 2;
}

/* ------------------------------------------------------------------ *
 * Referenze per fascia di budget (blocco iniettato da
 * crm-budget-referenze.js dentro il drawer "Budget" del form).
 * Riprende il linguaggio visivo del form: separatore crema come
 * .bio-exact-budget-field, etichette maiuscole spaziate come
 * .bio-option-list span, bordi/sfondi avorio traslucidi.
 * Mobile first: griglia a 3 colonne fluide, miniature quadrate — sul
 * telefono resta compatta e non allunga la pagina (max ~2 righe).
 * ------------------------------------------------------------------ */
/* Il blocco è agganciato visivamente alla casella toccata: sfondo crema molto
   tenue, bordo sottile e un filo crema pieno sul lato sinistro che lo lega a
   quello che sta sopra. Il margine negativo di 2px chiude lo stacco dei 8px di
   gap della .bio-option-list senza toccarne il CSS. */
.crm-budget-referenze {
  /* box-sizing + min-width:0: bordo e padding restano DENTRO la colonna e il
     blocco non può mai allargare il pannello del form (niente scroll
     orizzontale della pagina). min-width:0 serve perché dentro una griglia il
     minimo di default è il contenuto, che qui è un carosello largo. */
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  margin: -2px 0 2px;
  border: 1px solid rgba(220, 210, 178, 0.22);
  border-left: 2px solid rgba(220, 210, 178, 0.55);
  border-radius: 8px;
  padding: 12px 12px 14px;
  background: rgba(220, 210, 178, 0.055);
  animation: drawerReveal 220ms ease both;
}

.crm-budget-referenze[hidden] {
  display: none;
}

.crm-budget-referenze-titolo {
  margin: 0 0 10px;
  color: rgba(231, 229, 221, 0.82);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  line-height: 1.36;
  text-transform: uppercase;
}

/* MOBILE (default): mini carosello orizzontale.
   Si scorre col dito, si aggancia allo scatto (scroll-snap) e occupa una sola
   riga di altezza fissa: per quante referenze abbia la fascia, la pagina non
   si allunga mai. La barra di scorrimento è nascosta (il taglio dell'ultima
   miniatura fa capire da solo che si può scorrere). */
.crm-budget-referenze-griglia {
  display: flex;
  gap: 8px;
  /* Lo scorrimento resta CONFINATO qui dentro: la pista non è mai più larga del
     blocco, quindi il carosello non genera mai una barra sulla pagina. */
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Nessun margine negativo: la pista resta larga quanto il testo sopra, così
     la PRIMA miniatura è allineata al titolo e alla nota (niente foto
     appiccicata al bordo). Il padding verticale lascia respiro all'ombra
     del focus/hover senza tagliarla. */
  margin: 0;
  padding: 2px 0 4px;
  overscroll-behavior-x: contain;
}

.crm-budget-referenze-griglia::-webkit-scrollbar {
  display: none;
}

/* Foto ben visibili (richiesta utente 31/7/2026: "non francobolli"): da
   telefono ~1 foto e mezzo a schermo, così si apprezza il gioiello e si capisce
   lo stesso che il carosello continua. La pista resta UNA riga sola di altezza
   fissa, quindi la pagina non si allunga comunque siano tante le referenze. */
.crm-budget-referenza {
  margin: 0;
  flex: 0 0 62%;
  scroll-snap-align: start;
}

/* Il bottone è l'unico elemento interattivo: apre il lightbox della galleria */
.crm-budget-referenza-scatto {
  display: block;
  width: 100%;
  border: 1px solid rgba(231, 229, 221, 0.12);
  border-radius: 8px;
  padding: 0;
  background: rgba(231, 229, 221, 0.045);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 180ms ease, transform 180ms ease,
    box-shadow 180ms ease;
}

/* CINTURA E BRETELLE sulle dimensioni della foto.
   Il 30/7/2026 in produzione le miniature sono uscite giganti (una foto per
   tutto lo schermo) perché Safari serviva da cache la versione PRECEDENTE di
   questo file, senza il blocco referenze: senza regole, l'<img> ripiegava sulla
   sua dimensione naturale e sfondava il layout.
   Qui le misure sono ancorate in tre modi indipendenti, così anche se il CSS
   originale del sito (o un residuo in cache) provasse a sovrascriverle la foto
   resta comunque una miniatura:
   1. width:100% la lega alla colonna del bottone;
   2. max-width:100% le impedisce di superare il contenitore in ogni caso;
   3. height + max-height in px mettono un tetto ASSOLUTO all'altezza, che è la
      dimensione che nel bug faceva allungare la pagina a dismisura.
   Gli !important sono solo su queste quattro proprietà — mirati, non a pioggia:
   servono a battere qualunque regola `... img` più specifica di styles.css che
   dovesse agganciare il nostro contenitore. */
.crm-budget-referenza-scatto img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 150px !important;
  max-height: 150px !important;
  aspect-ratio: auto; /* comanda l'altezza fissa qui sopra, non le proporzioni */
  object-fit: cover; /* niente deformazione: la foto riempie e viene ritagliata */
}

.crm-budget-referenza-scatto:hover {
  border-color: rgba(220, 210, 178, 0.7);
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(220, 210, 178, 0.1);
}

.crm-budget-referenza-scatto:focus-visible {
  outline: none;
  border-color: var(--cream);
  box-shadow: 0 0 0 3px rgba(220, 210, 178, 0.3);
}

.crm-budget-referenze-nota {
  margin: 10px 0 0;
  color: rgba(231, 229, 221, 0.58);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* Schermi molto stretti: miniature un po' più larghe, restano comode da toccare */
@media (max-width: 380px) {
  .crm-budget-referenza {
    flex: 0 0 52%;
  }
}

/* Da tablet in su c'è spazio: griglia, si vedono tutte insieme (niente
   carosello: col mouse lo scorrimento orizzontale è scomodo).
   TRE colonne, non quattro (31/7/2026): la colonna del form è larga al massimo
   ~620px, quindi con 4 colonne le foto restavano sui 140px — troppo piccole per
   apprezzare il gioiello. Con 3 stanno sui 190px e si leggono bene, e la
   griglia va a capo da sola se la fascia ha più di 3 referenze. */
@media (min-width: 700px) {
  .crm-budget-referenze-griglia {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    overflow-x: visible;
    padding: 0;
  }

  .crm-budget-referenza {
    flex: initial;
  }

  .crm-budget-referenza-scatto img {
    height: 170px !important;
    max-height: 170px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-budget-referenze {
    animation: none;
  }

  .crm-budget-referenza-scatto {
    transition: none;
  }

  .crm-budget-referenza-scatto:hover {
    transform: none;
  }
}

/* ============================================================
   Sfondo verde: via le bande orizzontali (banding) — 30/7/2026
   ============================================================

   PROBLEMA. Sulla home lo sfondo foresta mostrava gradini orizzontali netti
   invece di una sfumatura continua. Non è un errore nei gradienti: è il limite
   dei colori a 8 bit. Le due transizioni coinvolte sono lunghissime e
   pochissimo contrastate —
     .bio-hero::after        rgba(231,229,221,.03) -> transparent -> rgba(0,0,0,.08)
                             steso su tutta l'altezza dello schermo (100svh);
     .design-archive-section rgba(16,31,26,.98) -> rgba(20,37,31,.98),
                             cioè 4 valori RGB di escursione su centinaia di px.
   Misurato sullo screenshot della home: 9 fasce piatte spesse da 49 a 254
   pixel, ognuna di UN SOLO livello di luminosità rispetto alla successiva
   (39, 38, 37 ... 31). Il confine tra due livelli, largo quanto la pagina, si
   legge come una riga netta.

   PERCHÉ IL RUMORE E NON PIÙ STOP DI COLORE. Aggiungere stop intermedi non
   risolve: i livelli disponibili a 8 bit restano quelli e cambierebbe solo
   DOVE cadono i gradini. Il dithering è invece la cura vera: una
   micro-variazione casuale fa cadere i pixel di confine ora sul livello sopra
   ora su quello sotto, il bordo netto si sfalda e l'occhio ricompone una
   sfumatura continua. È la stessa tecnica delle immagini a palette ridotta.

   COM'È FATTO. Un feTurbulence SVG inline come data-URI (~250 byte: nessun
   file da scaricare, nessuna libreria), ripetuto a mattonella di 160px, steso
   con opacità bassissima e in soft-light — che lavora sui livelli senza
   schiarire né scurire la media, quindi il colore complessivo dello sfondo
   resta quello di prima. Deve restare IMPERCETTIBILE come texture: il compito
   è togliere le bande, non aggiungere grana. */

/* --- 1. La landing (hero + sfondo generale) ---------------------------
   .bio-landing ha già position:relative e isolation:isolate, e i suoi
   pseudo-elementi sono liberi: il velo va lì. */
.bio-landing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0; /* sopra il gradiente della hero (z-index -1), sotto ai contenuti */
  pointer-events: none; /* mai intercettare i click: sotto c'è "Entra in lista" */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
  opacity: 0.075;
  /* overlay (non soft-light): sui toni molto scuri soft-light è quasi inerte
     e non arriva a spostare i pixel di confine di un livello, che è
     esattamente ciò che serve per rompere le bande. */
  mix-blend-mode: overlay;
}

/* I contenuti della hero restano sopra al velo.
   ⚠️ Solo .bio-hero-shell prende position:relative. La .bio-journey-line (la
   lineetta verticale crema in fondo alla hero) nel sito originale è
   position:absolute con left:50% + translateX(-50%): è così che sta in mezzo.
   Metterle position:relative — come faceva questa regola fino al 31/7/2026 —
   la toglieva dal posizionamento assoluto, quindi left/transform non
   centravano più nulla e la lineetta finiva in fondo a destra della home
   (segnalato dall'utente). Qui le diamo SOLO lo z-index: per un elemento già
   assoluto basta quello a tenerlo sopra al velo, senza toccarne la posizione. */
.bio-hero-shell {
  position: relative;
  z-index: 1;
}

.bio-journey-line {
  z-index: 1;
}

/* --- 2. La sezione "Spunti per design" --------------------------------
   Qui ::before e ::after sono già usati (le due righe luminose in cima e in
   fondo), quindi il rumore si aggiunge come primo layer del background della
   sezione stessa: sta sotto ai contenuti per costruzione, e i gradienti
   originali restano identici, solo spostati di un posto. */
.design-archive-section {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E")
      repeat 0 0 / 160px 160px,
    linear-gradient(180deg, rgba(16, 31, 26, 0.98), rgba(20, 37, 31, 0.98)),
    var(--forest);
}