/* =====================================================================
   BYITALY STORE - cms.css
   Pagine CMS: Chi Siamo (img 1) + Settori (img 7) + CMS generiche
   ---------------------------------------------------------------------
   Tema:   byitaly (child di Classic) - PrestaShop 8.2.6
   Autore: Francesco Fiore - www.fiorefrancesco.com - Licenza MIT
   Riferimenti: ANALISI.md §3 e §6
   Markup: blocchi ff_builder (FASE 9). Le classi .ffb-* sono i blocchi
   builder; le fasce USP riusano .ff-usp (footer.css §5).
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. BASE PAGINE CMS
   ---------------------------------------------------------------------
   Il Classic incapsula il CMS in una card bianca stretta: la
   neutralizziamo per avere sezioni full-width come da grafica.
--------------------------------------------------------------------- */
#cms #content,
#cms .page-content {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  max-width: none;
}
#cms #main .page-header { display: none; }  /* i titoli li rendono i blocchi */

/* Pagine CMS generiche/legali (non nelle immagini): contenuto Classic
   leggibile e centrato, nessun altro intervento (regola confermata). */
#cms .ff-cms-plain {
  max-width: 860px;
  margin: 0 auto;
  padding: 48px 0 72px;
}

/* ---------------------------------------------------------------------
   1. BLOCCO HERO SPLIT (Chi Siamo, sezione alta)  [A]
   ---------------------------------------------------------------------
   <section class="ffb-split">
     <div class="ffb-split__media"><img ...></div>
     <div class="ffb-split__body">
       <span class="ff-eyelet">CHI SIAMO</span>
       <h1|h2>...</h1>
       <span class="ff-tricolore"></span>
       <div class="ffb-split__text">[HTML]</div>
     </div>
   </section>
--------------------------------------------------------------------- */
.ffb-split {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: center;
  padding: var(--ff-section-y) 0;
}
.ffb-split--reverse { direction: rtl; }        /* variante specchiata   */
.ffb-split--reverse > * { direction: ltr; }
.ffb-split__media img {
  width: 100%;
  border-radius: var(--ff-radius-lg);
  box-shadow: var(--ff-shadow-sm);
}
.ffb-split__body h1,
.ffb-split__body h2 {
  font-size: var(--ff-fs-h2);
  line-height: 1.2;
  margin: 0 0 6px;
}
.ffb-split__text {
  font-size: var(--ff-fs-body);
  color: var(--ff-text);
  line-height: var(--ff-lh-body);
}
.ffb-split__text p + p { margin-top: 16px; }

/* ---------------------------------------------------------------------
   2. BLOCCO CONTATORI (ff_counters / blocco builder)  [A]
   ---------------------------------------------------------------------
   <div class="ffb-counters">
     <div class="ffb-counter">
       <i class="fa-regular fa-calendar"></i>
       <span class="ffb-counter__num" data-count="20" data-suffix="+">0</span>
       <span class="ffb-counter__label">Anni di esperienza</span>
     </div> x4
   </div>
   counters.js anima data-count all'ingresso in viewport.
--------------------------------------------------------------------- */
.ffb-counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 48px 0;
  border-top: 1px solid var(--ff-border);
  border-bottom: 1px solid var(--ff-border);
}
.ffb-counter {
  text-align: center;
  padding: 8px 20px;
}
.ffb-counter + .ffb-counter { border-left: 1px solid var(--ff-border); }
.ffb-counter i {
  display: block;
  font-size: 1.75rem;
  color: var(--ff-navy);
  margin-bottom: 12px;
}
.ffb-counter__num {
  display: block;
  font-size: var(--ff-fs-counter);
  font-weight: 700;
  color: var(--ff-navy);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;  /* cifre a larghezza fissa: il
                                          count-up non "balla" -> CLS 0 */
}
.ffb-counter__label {
  display: block;
  margin-top: 6px;
  font-size: var(--ff-fs-small);
  color: var(--ff-text-light);
}

/* ---------------------------------------------------------------------
   3. BLOCCO VALORI (4 colonne icona+titolo+testo)  [A]
   ---------------------------------------------------------------------
   <div class="ffb-values">
     <div class="ffb-value">
       <span class="ff-icircle"><i .../></span>
       <h3>...</h3><p>[HTML]</p>
     </div> x4
--------------------------------------------------------------------- */
.ffb-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: var(--ff-section-y) 0;
  text-align: center;
}
.ffb-value .ff-icircle { margin-bottom: 16px; }
.ffb-value h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.ffb-value p {
  font-size: var(--ff-fs-small);
  color: var(--ff-text-light);
  line-height: 1.6;
  margin: 0;
}

/* ---------------------------------------------------------------------
   4. BANNER CTA ("Costruiamo valore insieme.")  [A]
   ---------------------------------------------------------------------
   <div class="ffb-cta ff-card">
     <span class="ff-icircle"><i .../></span>
     <div class="ffb-cta__body"><h3>[HTML]</h3><p>[HTML]</p></div>
     <a class="ff-btn ff-btn--primary">...</a>
--------------------------------------------------------------------- */
.ffb-cta {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 28px 32px;
  margin: 0 0 var(--ff-section-y);
}
.ffb-cta__body { flex: 1 1 auto; }
.ffb-cta__body h3 { font-size: 1.25rem; margin: 0 0 4px; }
.ffb-cta__body p {
  font-size: var(--ff-fs-small);
  color: var(--ff-text-light);
  margin: 0;
}
.ffb-cta .ff-btn { flex-shrink: 0; }

/* ---------------------------------------------------------------------
   5. BLOCCO GRIGLIA CARD (Settori 4 col / riusabile a N col)  [A]
   ---------------------------------------------------------------------
   <div class="ffb-grid ffb-grid--cols-4">
     <article class="ff-card ff-card--hover ffb-gridcard">
       <a class="ffb-gridcard__img"><img loading="lazy" ...></a>
       <div class="ffb-gridcard__body">
         <h3>[HTML]</h3><p>[HTML]</p>
         <a class="ff-btn ff-btn--outline ff-btn--sm">SCOPRI DI PIÙ
           <i class="fa-solid fa-chevron-right"></i></a>
       </div>
     </article> xN
--------------------------------------------------------------------- */
.ffb-grid {
  display: grid;
  gap: var(--ff-gap);
  padding: 12px 0 var(--ff-section-y);
}
.ffb-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.ffb-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.ffb-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.ffb-gridcard { display: flex; flex-direction: column; overflow: hidden; }
.ffb-gridcard__img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ff-bg-soft);
}
.ffb-gridcard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ffb-gridcard:hover .ffb-gridcard__img img { transform: scale(1.05); }
.ffb-gridcard__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 22px 24px;
}
.ffb-gridcard__body h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  margin: 0 0 8px;
}
.ffb-gridcard__body p {
  font-size: 0.8125rem;
  color: var(--ff-text-light);
  line-height: 1.55;
  margin: 0 0 18px;
}
.ffb-gridcard__body .ff-btn { margin-top: auto; align-self: flex-start; }
.ffb-gridcard__body .ff-btn i { font-size: 0.6875rem; }

/* ---------------------------------------------------------------------
   6. INTESTAZIONE PAGINA CMS (blocco header builder)  [A]
   ---------------------------------------------------------------------
   <header class="ffb-pagehead">
     <span class="ff-eyelet">opz.</span>
     <h1>[HTML]</h1>
     <span class="ff-tricolore">opz.</span>
     <div class="ffb-pagehead__text">[HTML]</div>
--------------------------------------------------------------------- */
.ffb-pagehead { padding: 44px 0 10px; }
.ffb-pagehead h1 {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 12px;
}
.ffb-pagehead--title-normal h1 { text-transform: none; }  /* "Siamo qui per te" */
.ffb-pagehead__text {
  max-width: 620px;
  font-size: var(--ff-fs-body);
  color: var(--ff-text);
}