/* ==========================================================================
   LAYOUT — sezioni (Section), righe (Row), griglie (Group)
   ========================================================================== */

/* ---------- SEZIONI · classe sul modulo Section ---------- */
.et_pb_section.sy-section{padding:92px 0;}
.et_pb_section.sy-section-light{background-color:var(--sy-bianco);}
.et_pb_section.sy-section-alt{background-color:var(--sy-alt);}
.et_pb_section.sy-section-grigio{background:linear-gradient(180deg,#f8fbff 0%,#eef4fa 100%);}
.et_pb_section.sy-section-dark{background-color:var(--sy-nero);color:#e7edf3;}
.et_pb_section.sy-section-darker{background-color:var(--sy-nero-scuro);color:#e7edf3;}

/* Hero, mini CTA e bande usano tutta la larghezza (la sezione ha già 24px di padding laterale) */
:is(.sy-hero,.sy-page-hero,.sy-mini-cta,.sy-banda) > .et_pb_row{width:100%;max-width:none;}

/* ---------- RIGHE · classe sul modulo Row ---------- */
/* Le colonne a tutta larghezza su tablet/telefono devono poter andare a capo */
.et_pb_row.et_flex_row{flex-wrap:wrap;}

/* Due colonne affiancate centrate verticalmente (ex .feature-row / .due-col) */
.et_pb_row.sy-feature-row{align-items:center;}
/* Colonne invertite su desktop (immagine a destra) */
.et_pb_row.sy-reverse{flex-direction:row-reverse;}
@media (max-width:980px){
  .et_pb_row.sy-reverse{flex-direction:column;}
}

/* ---------- GRIGLIE · classe sul modulo Group (o Column) ---------- */
/* Griglia auto-fit: le card vanno a capo da sole. Larghezza minima con sy-grid-NNN */
.et_pb_module.sy-grid,
.et_pb_column.sy-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(var(--sy-grid-min,300px),1fr));
  gap:var(--sy-grid-gap,18px);
  margin-top:26px;
  width:100%;
}
.sy-grid-230{--sy-grid-min:230px;}
.sy-grid-240{--sy-grid-min:240px;}
.sy-grid-250{--sy-grid-min:250px;}
.sy-grid-280{--sy-grid-min:280px;}
.sy-grid-300{--sy-grid-min:300px;}
.sy-grid-320{--sy-grid-min:320px;}
.sy-gap-22{--sy-grid-gap:22px;}

/* Colonne fisse: 3 o 4 su desktop, 2 su tablet, 1 su mobile */
.et_pb_module.sy-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.et_pb_module.sy-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1050px){
  .et_pb_module.sy-cols-4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:820px){
  .et_pb_module.sy-cols-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:620px){
  .et_pb_module.sy-cols-3,
  .et_pb_module.sy-cols-4{grid-template-columns:1fr;}
}

/* ---------- INTESTAZIONE DI SEZIONE · classe sul Group ---------- */
/* Blocco label + titolo + descrizione centrato (ex div inline max-width:720px) */
.et_pb_module.sy-head-center{
  align-items:center;
  text-align:center;
  max-width:720px;
  margin-left:auto;margin-right:auto;--sy-mb:8px;
  width:100%;
}
.sy-head-center .et_pb_module{text-align:center;}
.et_pb_module.sy-head-center .sy-desc{margin-left:auto;margin-right:auto;--sy-mb:8px;}