/*
 * Schede servizio con fotografia a lato — aspetto
 *
 * Origine: screen del progetto grafico fornito dall'utente il 05/08 per la
 * pagina Efficientamento Energetico, fascia «I servizi».
 *
 * ⚠️ NON C'E' UN SORGENTE: le misure vengono dai widget sorelli e sono una
 * scelta dichiarata, non un valore letto.
 *
 * ⚠️ Non e' falone-colgrid: li' le celle sono una FILA con divisori fatti col
 * gap, senza fotografia. Qui sono schede su fondo proprio, disposte su piu'
 * righe, ognuna con un'immagine a fianco del testo.
 *
 * Nessun JavaScript.
 *
 * Indice
 *   1. fascia
 *   2. griglia
 *   3. scheda
 *   4. impilamento
 */

/* ======================================================================
   1. FASCIA
   ====================================================================== */
.falone-svc {
  padding:
    var(--falone-svc-pad-top, 92px)
    var(--falone-svc-pad-x, 52px)
    var(--falone-svc-pad-bottom, 92px);
  background: var(--falone-svc-bg, #f5f4f1);
  color: var(--falone-svc-ink, #262626);
}

.falone-svc__head { margin-bottom: var(--falone-svc-head-gap, 48px); }

.falone-svc__h2 {
  max-width: none;
  margin: 0;
  color: var(--falone-svc-title-color, #262626);
}

.falone-svc__head,
.falone-svc__grid { margin-left: var(--falone-indent, 0px); }

/* ======================================================================
   2. GRIGLIA
   ====================================================================== */
.falone-svc__grid {
  display: grid;
  grid-template-columns: repeat(var(--falone-svc-cols, 3), minmax(0, 1fr));
  gap: var(--falone-svc-gap, 20px);
}

/* ======================================================================
   3. SCHEDA
   ======================================================================
   Due colonne: a sinistra numero, icona, titolo e testo; a destra la
   fotografia, che occupa tutta l'altezza della scheda. */
/* ⚠️ La scheda ha un'ALTEZZA MINIMA. Senza, si stringe sul contenuto e
   diventa un rettangolo basso: nello screen le schede sono alte, quasi
   quadrate, con la fotografia a striscia verticale sul lato destro. E' la
   differenza che si nota di piu' a colpo d'occhio, e non dipende dal corpo
   del testo ma dalla proporzione della scheda. */
.falone-svc__card {
  min-height: var(--falone-svc-card-h, 200px);
  display: grid;
  grid-template-columns:
    minmax(0, var(--falone-svc-testo-fr, 1fr))
    var(--falone-svc-foto-w, 96px);
  gap: var(--falone-svc-card-gap, 16px);
  align-items: stretch;
  padding: var(--falone-svc-card-pad, 22px);
  background: var(--falone-svc-card-bg, #fff);
}

/* numero e icona affiancati, come nello screen */
.falone-svc__riga {
  display: flex;
  align-items: center;
  gap: var(--falone-svc-riga-gap, 14px);
  margin-bottom: var(--falone-svc-riga-bottom, 22px);
}

.falone-svc__num {
  display: block;
  /* ⚠️ NERO per decisione dell'utente del 06/08: nello screen il numero e'
     grigio attenuato, ma la richiesta vince. In origine condivideva il colore
     con l'icona ed era arancione. */
  color: var(--falone-svc-num-color, var(--falone-black, #121212));
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: var(--falone-svc-num-size, .68rem);
  font-weight: 800;
  letter-spacing: .18em;
}

/* ⚠️ Icona a contorno: fill e stroke sull'<svg>, piu' `vector-effect` anche
   sui `path` — non e' una proprieta' ereditata, e senza il tratto
   scalerebbe con la misura dell'icona. Stessa nota di colgrid.css. */
.falone-svc__card .falone-svc__icon,
.falone-svc__card .falone-svc__icon svg {
  display: block;
  width: var(--falone-svc-icon-w, 30px);
  height: var(--falone-svc-icon-h, 30px);
  margin-bottom: 0;   /* lo stacco lo da' la riga, non l'icona */
  color: var(--falone-svc-icon-color, var(--falone-accent, #f7941d));
  fill: none;
  stroke: currentColor;
}

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

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

.falone-svc__title {
  margin: 0 0 var(--falone-svc-title-gap, 10px);
  color: var(--falone-svc-card-title, #262626);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: var(--falone-svc-ct-size, .92rem);
  font-weight: 700;
  line-height: var(--falone-svc-ct-lh, 1.3);
}

.falone-svc__text {
  margin: 0;
  /* ⚠️ NERO come il numero, per decisione dell'utente del 06/08. Nello
     screen e' grigio attenuato (2,81:1 su bianco); cosi' il contrasto sale a
     18,88:1. Vedi la nota sul controllo in class-servicecards.php. */
  color: var(--falone-svc-text-color, var(--falone-black, #121212));
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: var(--falone-svc-cx-size, .76rem);
  font-weight: 300;
  line-height: var(--falone-svc-cx-lh, 1.7);
}

/* ⚠️ Selettore DISCENDENTE sull'<img>: `.elementor img { height: auto }` ha
   specificita' (0,1,1) e batterebbe una classe sola, lasciando la foto alla
   sua altezza naturale invece di riempire la colonna. */
.falone-svc__foto {
  align-self: stretch;
  min-height: var(--falone-svc-foto-min-h, 108px);
  background: var(--falone-svc-foto-bg, #e7e7e7);
  overflow: hidden;
}

.falone-svc__foto .falone-svc__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ⚠️ Riquadro senza fotografia. Delle sei immagini dello screen ne mancano
   diverse in libreria: senza questo resterebbe un rettangolo grigio piatto
   che si legge come immagine rotta. Stessa scelta gia' fatta su
   falone-works e falone-beforeafter: appena si assegna l'immagine dal
   pannello la classe sparisce da se'. */
.falone-svc__foto--vuota {
  background:
    linear-gradient(135deg, rgba(247, 148, 29, .1), rgba(247, 148, 29, .03) 62%);
  box-shadow: inset 0 0 0 1px rgba(247, 148, 29, .22);
}

/* ======================================================================
   4. IMPILAMENTO
   ====================================================================== */
@media (max-width: 1180px) {
  .falone-svc__grid {
    grid-template-columns: repeat(var(--falone-svc-cols-tablet, 2), minmax(0, 1fr));
  }
}

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

  /* la fotografia passa sotto il testo: una colonna da 96px accanto a un
     testo gia' stretto lascerebbe poche parole per riga */
  .falone-svc__card { grid-template-columns: 1fr; }
  .falone-svc__foto { min-height: var(--falone-svc-foto-min-h-tablet, 140px); }
  /* impilata, l'altezza minima non serve piu' */
  .falone-svc__card { min-height: 0; }
}

/* la colonna del testo resta in alto: senza, con la scheda piu' alta il
   contenuto si centrerebbe verticalmente e perderebbe l'allineamento con
   il bordo superiore della fotografia */
.falone-svc__testo { align-self: start; }