/*
 * Griglia di schede a filetto (Perche') — aspetto
 *
 * Origine: .page-card-grid / .page-card-grid.five / .page-card di
 * source-clean/styles.css, piu' i due blocchi @media. Ogni valore letto.
 *
 * ⚠️ I filetti non sono bordi: sono lo SFONDO della griglia visto
 * attraverso un gap di 1px. Con dei border si raddoppierebbero fra due
 * schede vicine e i bordi esterni comparirebbero dove non li vuoi.
 */

.falone-cards {
  padding: var(--falone-cards-pad-y, 112px) var(--falone-cards-pad-x, 52px);
  background: var(--falone-cards-bg, #fff);
}

.falone-cards__h2 {
  /* modello: `h2 { margin-bottom: 24px }` */
  margin: 0 0 var(--falone-h2-gap, 24px);
  color: var(--falone-cards-title-color, #262626);
}

.falone-cards__grid {
  display: grid;
  grid-template-columns: repeat(var(--falone-cards-cols, 5), minmax(0, 1fr));
  gap: var(--falone-cards-line-w, 1px);
  background: var(--falone-cards-line, #e7e7e7);
}

.falone-cards__card {
  min-height: var(--falone-cards-min-h, 240px);
  padding: var(--falone-cards-pad, 32px);
  background: var(--falone-cards-card-bg, #fff);
}

.falone-cards__title {
  margin: 0 0 var(--falone-cards-title-gap, 16px);
  color: var(--falone-cards-card-title, #262626);
  font-family: var(--falone-font-display, "Jost", sans-serif);
  /* la formula sta qui: il controllo scrive un fisso solo se compilato */
  font-size: var(--falone-cards-card-title-size, clamp(1.35rem, 1.8vw, 1.9rem));
  font-weight: 600;
}

.falone-cards__text {
  margin: 0;
  color: var(--falone-cards-text-color, #666);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-weight: 400;
}

/* Il sorgente scala 5 -> 3 -> 1. Le due soglie sono i breakpoint del Kit. */
@media (max-width: 1180px) {
  .falone-cards__grid { grid-template-columns: repeat(var(--falone-cards-cols-tablet, 3), minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .falone-cards { padding: var(--falone-cards-pad-y-tablet, 72px) var(--falone-cards-pad-x-tablet, 18px); }
  .falone-cards__grid { grid-template-columns: 1fr; }
}

/* ======================================================================
   ICONA A CONTORNO — 31/08, stesso meccanismo di falone-colgrid
   ====================================================================== */
.falone-cards__icon,
.falone-cards__icon svg {
  display: block;
  width: var(--falone-cards-icon-w, 44px);
  height: var(--falone-cards-icon-h, 44px);
  margin-bottom: var(--falone-cards-icon-gap, 20px);
  color: var(--falone-cards-icon-color, #f7941d);
  fill: var(--falone-cards-icon-fill, currentColor);
  stroke: var(--falone-cards-icon-stroke, none);
  line-height: 1;
}

.falone-cards__icon--contorno {
  --falone-cards-icon-fill: none;
  --falone-cards-icon-stroke: currentColor;
}

.falone-cards__icon--contorno .falone-svgicon {
  stroke-width: var(--falone-cards-icon-tratto, 1.7);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.falone-cards__icon--contorno .falone-svgicon,
.falone-cards__icon--contorno .falone-svgicon path {
  vector-effect: non-scaling-stroke;
}