/* =============================================================================
   FooLab — HOME footility.com (attività 1.4 · revisione verticalità 2026-07)
   -----------------------------------------------------------------------------
   Layout della home page vetrina costruita con i componenti <x-foolab.*> (1.2).
   Qui stanno SOLO le regole di composizione/layout specifiche della home
   (prefisso .flh-, FooLab Home): i componenti restano invariati.

   IMPIANTO DELLA REVISIONE
   ------------------------
   1. BAND: ogni sezione è una fascia a piena larghezza (.flh-band) con fondo
      proprio e separatore cartoon. Alternando bg/panel/dark la pagina si legge
      come una sequenza di "slab", non come un elenco continuo.
   2. VERTICALITÀ: ogni band ha padding var(--fl-space-8/9) e le principali
      hanno min-height legata alla viewport, così una sezione = una schermata.
   3. LEGGIBILITÀ: titoli sulla scala fluida --fl-fs-h2/h3, lead su --fl-measure
      con line-height --fl-lh-lead, card con ritmo interno più largo.

   VINCOLO come per foolab-ui.css: nessun valore di brand hardcoded, solo
   var(--fl-*) da foolab-tokens.css, che va caricato PRIMA di questo file.
   Ordine in FooController::index → tokens, ui, chrome, home.
   ========================================================================== */

/* ---- Pagina --------------------------------------------------------------- */
.flh-home{
  background:var(--fl-bg);
  color:var(--fl-ink);
  font-family:var(--fl-font-body);
  font-weight:var(--fl-fw-regular);
  font-size:var(--fl-fs-md);
  line-height:var(--fl-lh-base);
}

/* Container a piena larghezza per le band (estende .flc-section) */
.flh-home .flc-section--full{max-width:var(--fl-container-full)}

/* ---- Band: la fascia-sezione a piena larghezza ---------------------------- */
.flh-band{
  position:relative;
  scroll-margin-top:var(--fl-nav-h);
  padding:var(--fl-space-8) 0;
  /* le sezioni si separano con un TRATTEGGIO, non con una linea piena:
     stacca senza chiudere la fascia come fosse un riquadro */
  border-bottom:var(--fl-dash);
}
.flh-band:last-of-type{border-bottom:0}
.flh-band .flc-section{padding-top:0;padding-bottom:0}

.flh-band--bg{background:var(--fl-bg)}
.flh-band--panel{background:var(--fl-panel)}
.flh-band--tint{background:var(--fl-tint-blue)}
.flh-band--dark{background:var(--fl-surface-dark);color:var(--fl-on-dark)}

/* La band eroe non ha padding proprio: lo gestisce l'hero a tutta altezza */
.flh-band--hero{padding:var(--fl-space-5) 0 var(--fl-space-7);border-bottom:0}

/* ---- Testata di sezione (eyebrow + titolo + lead) ------------------------- */
.flh-head{
  max-width:var(--fl-measure);
  margin:0 0 var(--fl-space-7);
}
.flh-head--wide{max-width:none}
/* L'eyebrow è un'ETICHETTA INCLINATA, la stessa forma "sticker" del badge di
   gruppo: era l'elemento che funzionava meglio del set, quindi diventa il segno
   ricorrente della testata di sezione invece di una barretta anonima. */
.flh-eyebrow{
  display:inline-flex;align-items:center;gap:var(--fl-space-2);
  font-family:var(--fl-font-display);
  font-weight:var(--fl-fw-black);
  font-size:var(--fl-fs-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fl-ink);
  background:var(--fl-yellow);
  border:var(--fl-border-sm);
  border-radius:var(--fl-radius-pill);
  box-shadow:var(--fl-shadow-sm);
  padding:var(--fl-space-1) var(--fl-space-4);
  transform:rotate(-2deg);
  transform-origin:left center;
  margin-bottom:var(--fl-space-4);
  /* dentro un contenitore flex-column l'inline-flex verrebbe stirato a tutta
     larghezza: lo sticker deve restare largo quanto il suo testo */
  align-self:flex-start;
  width:fit-content;
}
.flh-band--dark .flh-eyebrow{
  background:var(--fl-yellow);
  color:var(--fl-ink);
  border-color:var(--fl-panel);
  box-shadow:0 2px 0 var(--fl-panel);
}

.flh-title{
  font-family:var(--fl-font-display);
  font-weight:var(--fl-fw-black);
  font-size:var(--fl-fs-h2);
  line-height:var(--fl-lh-tight);
  margin:0 0 var(--fl-space-3);
}
.flh-lead{
  font-size:var(--fl-fs-lead);
  line-height:var(--fl-lh-lead);
  margin:0 0 var(--fl-space-5);
  opacity:.88;
}
/* Riga tratteggiata che chiude la testata e apre il contenuto della sezione */
.flh-head::after{
  content:"";
  display:block;
  margin-top:var(--fl-space-5);
  border-top:var(--fl-dash-soft);
}
.flh-band--dark .flh-head::after{border-top-color:rgba(242,239,233,.3)}
.flh-band--dark .flh-lead{opacity:.82}

/* ---- Hero ------------------------------------------------------------------
   NON è una card: nessun fondo, nessun bordo, nessuna ombra. Il titolo poggia
   direttamente sulla pagina, nero su bianco come il logo.
------------------------------------------------------------------------------ */
.flh-hero{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  min-height:min(62svh,640px);
  padding:var(--fl-space-6) 0 var(--fl-space-7);
}
.flh-hero-ghost{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--fl-font-brand);
  font-weight:var(--fl-fw-brand);
  font-size:clamp(10rem,22vw,20rem);
  line-height:1;
  color:var(--fl-ink);
  opacity:.035;
  pointer-events:none;
  user-select:none;
}

/* Titolo: il nome grande, la firma piccola sotto e cliccabile */
.flh-hero-title{margin:0 0 var(--fl-space-5);line-height:1}
/* Kg Happy ha UN SOLO peso: chiedendogli il bold il browser applica il finto
   grassetto, che a dimensione grande sporca i contorni e lo rende illeggibile.
   Va sempre a peso normale (--fl-fw-brand), come faceva la home pre-restyle. */
.flh-hero-name{
  display:block;
  font-family:var(--fl-font-brand);
  font-weight:var(--fl-fw-brand);
  font-size:var(--fl-fs-hero);
  line-height:.95;
  letter-spacing:.01em;
  color:var(--fl-ink);
}
.flh-hero-by{
  display:inline-block;
  margin-top:var(--fl-space-3);
  font-family:var(--fl-font-brand);
  font-weight:var(--fl-fw-brand);
  font-size:clamp(1.15rem,2.2vw,1.9rem);
  color:var(--fl-ink);
  opacity:.72;
  text-decoration:underline;
  text-underline-offset:.28em;
  text-decoration-thickness:var(--fl-border-w-xs);
}
.flh-hero-by:hover{opacity:1;color:var(--fl-blue-d)}

.flh-hero-sub{
  font-size:var(--fl-fs-lead);
  line-height:var(--fl-lh-lead);
  max-width:var(--fl-measure);
  margin:0 0 var(--fl-space-6);
  opacity:.82;
}

.flh-hero-stats{display:flex;flex-wrap:wrap;gap:var(--fl-space-3);margin-bottom:var(--fl-space-6)}
.flh-hero-stat{
  background:var(--fl-panel);
  color:var(--fl-ink);
  border:var(--fl-border-sm);
  border-radius:var(--fl-radius-pill);
  box-shadow:var(--fl-shadow-sm);
  padding:var(--fl-space-1) var(--fl-space-4);
  font-family:var(--fl-font-display);
  font-weight:var(--fl-fw-bold);
  font-size:var(--fl-fs-sm);
}

.flh-cta-row{
  display:flex;flex-wrap:wrap;gap:var(--fl-space-4);
  padding-top:var(--fl-space-6);
  border-top:var(--fl-dash-soft);
}

/* Indicatore "continua a scorrere" */
.flh-scroll-hint{
  display:flex;align-items:center;justify-content:center;gap:var(--fl-space-2);
  margin-top:var(--fl-space-6);
  font-family:var(--fl-font-display);
  font-weight:var(--fl-fw-bold);
  font-size:var(--fl-fs-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fl-ink);
  opacity:.55;
  text-decoration:none;
}
.flh-scroll-hint:hover{opacity:1;color:var(--fl-blue-d)}
.flh-scroll-hint i{animation:flh-bob 1.8s ease-in-out infinite}
@keyframes flh-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---- Griglie -------------------------------------------------------------- */
/* Colonne esplicite invece di auto-fit: con auto-fit a 1440px uscivano 4 colonne
   e i gruppi da 5-6 card lasciavano una card orfana sull'ultima riga. Tre colonne
   fisse tengono le card più larghe (testo più leggibile) e le righe piene. */
/* gap >= 2 * --fl-float-out: le icone flottanti di due card adiacenti non
   devono toccarsi (vedi .flc-card--float in foolab-ui.css). */
.flh-grid{display:grid;row-gap:var(--fl-space-7);column-gap:var(--fl-space-8);grid-template-columns:1fr}
@media (min-width:760px){.flh-grid--3,.flh-grid--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){.flh-grid--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1180px){.flh-grid--4{grid-template-columns:repeat(4,1fr)}}

/* ---- Card ------------------------------------------------------------------
   Tutte le card della home usano la variante flottante .flc-card--float:
   icona fuori dal bordo sinistro, segno d'azione fuori dal bordo destro,
   entrambi centrati verticalmente, contenuto centrato verticalmente.
-------------------------------------------------------------------------------*/
.flh-home .flc-card{border-radius:var(--fl-radius-lg)}
.flh-home .flc-card__body{
  font-size:var(--fl-fs-md);
  line-height:var(--fl-lh-lead);
  opacity:.86;
}
.flh-home .flc-card__head{justify-content:flex-start;margin-bottom:var(--fl-space-2)}
.flh-home .flc-card__title{font-size:var(--fl-fs-h3);line-height:var(--fl-lh-tight)}
.flh-home .flc-card__foot{
  margin-top:var(--fl-space-4);
  padding-top:var(--fl-space-3);
  border-top:var(--fl-dash-soft);
  align-items:center;
}

/* Card cliccabili (aprono il modal) */
.flh-card-btn{
  width:100%;text-align:left;
  font-family:inherit;color:inherit;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.flh-card-btn:hover,
.flh-card-link:hover{transform:translateY(-2px);box-shadow:var(--fl-shadow-hover)}
.flh-card-btn:active{transform:translateY(var(--fl-press-y));box-shadow:var(--fl-shadow-pressed)}
.flh-card-btn:focus-visible{outline:var(--fl-border-sm);outline-offset:var(--fl-space-2)}
.flh-card-link{transition:transform .12s ease, box-shadow .12s ease}

/* Il segno d'azione a destra ruota di poco all'hover: unico movimento della card */
.flh-card-btn .flc-card__mark,
.flh-card-link .flc-card__mark{transition:transform .12s ease}
.flh-card-btn:hover .flc-card__mark,
.flh-card-link:hover .flc-card__mark{transform:translateY(-50%) translateX(2px)}

/* Il logo testuale RealPilates arriva da guest.css con "Real" bianco a 30px e
   "PILATES" arancio a 24px: pensato per una card nera a tutta larghezza, dentro
   il riquadro icona era invisibile a metà e sbordava. Qui lo ri-dimensioniamo
   e gli ridiamo contrasto sul fondo chiaro. */
.flc-card__icon--realpilates{overflow:hidden;line-height:1.05}
.flc-card__icon--realpilates .real-pilates-logo{white-space:nowrap}
.flc-card__icon--realpilates .real-pilates-logo .t-real{
  color:var(--fl-ink);
  font-size:14px;
}
.flc-card__icon--realpilates .real-pilates-logo .t-pilates{
  color:var(--fl-orange);
  font-size:9px;
  letter-spacing:.04em;
}

/* ---- Tecnologie ----------------------------------------------------------- */
.flh-tech-row{display:flex;flex-wrap:wrap;gap:var(--fl-space-3)}
.flh-tech{
  display:inline-flex;align-items:center;gap:var(--fl-space-3);
  background:var(--fl-panel);color:var(--fl-ink);
  border:var(--fl-border-sm);
  border-radius:var(--fl-radius-pill);
  box-shadow:var(--fl-shadow-sm);
  padding:var(--fl-space-3) var(--fl-space-5);
  font-family:var(--fl-font-display);
  font-weight:var(--fl-fw-bold);
  font-size:var(--fl-fs-md);
  cursor:pointer;
  transition:var(--fl-transition);
}
.flh-tech i{font-size:var(--fl-fs-lg);color:var(--fl-blue-d)}
.flh-tech:hover{background:var(--fl-tint-yellow);transform:translateY(-2px);box-shadow:var(--fl-shadow)}
.flh-tech:active{transform:translateY(var(--fl-border-w-sm));box-shadow:none}
.flh-tech:focus-visible{outline:var(--fl-border-sm);outline-offset:var(--fl-space-1)}

/* ---- Marchio del gruppo progetti ------------------------------------------ */
.flh-group-mark{margin:0 0 var(--fl-space-5)}
.flh-group-mark .flc-badge{
  display:inline-flex;align-items:center;gap:var(--fl-space-2);
  font-size:var(--fl-fs-md);
  padding:var(--fl-space-2) var(--fl-space-4);
}
.flh-group-logo svg{height:1em;width:auto;display:block}
.flh-group-logo svg *{fill:currentColor}

/* Testata di sezione con il marchio a destra */
.flh-head-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--fl-space-5);flex-wrap:wrap;
  margin-bottom:var(--fl-space-7);
}
.flh-head-row .flh-head{margin-bottom:0;flex:1 1 32ch}
.flh-head-row .flh-group-mark{margin:0}

/* ---- Chiusura: contatti su fondo scuro ------------------------------------ */
.flh-band--dark .flc-card{
  background:var(--fl-panel);
  color:var(--fl-ink);
}
.flh-band--dark .flc-card__icon{background:var(--fl-tint-yellow)}

/* Le card flottanti sporgono di --fl-float-out oltre il bordo: il contenitore
   deve avere almeno quel padding orizzontale, o su schermi stretti l'icona
   finisce fuori dallo schermo. */
.flh-band .flc-section{
  padding-left:calc(var(--fl-space-4) + var(--fl-float-out));
  padding-right:calc(var(--fl-space-4) + var(--fl-float-out));
}

/* ---- Modal (overlay dettaglio) -------------------------------------------- */
.flh-overlay{
  display:none;position:fixed;inset:0;z-index:1100;
  align-items:center;justify-content:center;
  background:rgba(22,35,63,.72);
  padding:var(--fl-space-4);
}
.flh-modal{
  position:relative;
  width:min(620px,100%);max-height:86vh;overflow-y:auto;
  background:var(--fl-panel);color:var(--fl-ink);
  font-family:var(--fl-font-body);
  border:var(--fl-border);
  border-radius:var(--fl-radius-xl);
  box-shadow:var(--fl-shadow-lg);
  padding:var(--fl-space-6) var(--fl-space-5);
  text-align:center;
}
.flh-modal-close{
  position:absolute;top:var(--fl-space-3);right:var(--fl-space-3);
  width:40px;height:40px;line-height:1;
  background:var(--fl-yellow);color:var(--fl-ink);
  border:var(--fl-border-sm);border-radius:var(--fl-radius-pill);
  box-shadow:var(--fl-shadow-sm);
  font-size:var(--fl-fs-lg);font-weight:var(--fl-fw-black);
  cursor:pointer;
}
.flh-modal-close:active{transform:translateY(var(--fl-border-w-sm));box-shadow:none}
.flh-modal-icon{color:var(--fl-blue-d);margin-bottom:var(--fl-space-4)}
.flh-modal-title{
  font-family:var(--fl-font-display);font-weight:var(--fl-fw-black);
  font-size:var(--fl-fs-h3);margin:0 0 var(--fl-space-2);
}
.flh-modal-subtitle{
  font-size:var(--fl-fs-sm);font-weight:var(--fl-fw-bold);
  color:var(--fl-blue-d);margin-bottom:var(--fl-space-3);
}
.flh-modal-text{font-size:var(--fl-fs-md);line-height:var(--fl-lh-lead);margin:0 0 var(--fl-space-4)}
.flh-modal-stack{display:none;flex-wrap:wrap;gap:var(--fl-space-2);justify-content:center;margin-bottom:var(--fl-space-4)}
.flh-modal-highlights{
  display:none;list-style:none;margin:0 0 var(--fl-space-4);padding:0;
  text-align:left;font-size:var(--fl-fs-sm);line-height:var(--fl-lh-lead);
}
.flh-modal-highlights li{
  border:var(--fl-border-xs);border-radius:var(--fl-radius-sm);
  background:var(--fl-tint-grey);
  padding:var(--fl-space-3) var(--fl-space-4);
  margin-bottom:var(--fl-space-2);
}
.flh-modal-link{margin-top:var(--fl-space-2)}

/* ---- Tablet ---------------------------------------------------------------- */
@media (max-width:900px){
  .flh-band{padding:var(--fl-space-7) 0}
  .flh-hero{padding:var(--fl-space-7) var(--fl-space-5);min-height:auto}
  .flh-head,.flh-head-row{margin-bottom:var(--fl-space-6)}
}

/* ---- Mobile ---------------------------------------------------------------- */
@media (max-width:640px){
  .flh-home .flc-hero__ghost{display:none}
  .flh-hero{padding:var(--fl-space-6) var(--fl-space-4)}
  .flh-cta-row{gap:var(--fl-space-3)}
  .flh-cta-row .flc-btn{flex:1 1 100%}
  .flh-grid{gap:var(--fl-space-4)}
  .flh-modal{padding:var(--fl-space-5) var(--fl-space-4)}
  .flh-scroll-hint{display:none}
}

/* ---- Accessibilità: rispetta prefers-reduced-motion ----------------------- */
@media (prefers-reduced-motion:reduce){
  .flh-scroll-hint i{animation:none}
  .flh-card-btn,.flh-card-link,.flh-tech{transition:none}
}