/*
 * Competenze — aspetto
 *
 * Origine: .services-section / .section-heading / .service-grid /
 * .service-card e i suoi ::after, img, span, p di source-clean/styles.css.
 *
 * Ritaglio, ingrandimento in hover e velo NON stanno qui: arrivano da
 * .falone-media, .falone-media--zoom e .falone-veil del tema. Qui si
 * aggiungono solo i valori specifici di questa sezione.
 *
 * Indice
 *   1. sezione e intestazione
 *   2. griglia
 *   3. scheda
 *   4. fotografia: bianco e nero e hover
 *   5. movimento ridotto
 */

/* ======================================================================
   1. SEZIONE E INTESTAZIONE
   ====================================================================== */
.falone-services {
  padding: 112px 52px;   /* scavalcato dal controllo Margini interni */
  background: var(--falone-services-bg, #f5f4f1);
}

.falone-services__head {
  display: grid;
  gap: 24px;
  max-width: var(--falone-services-head-w, 940px);
  margin-left: var(--falone-indent, 0px);
  margin-bottom: var(--falone-services-head-gap, 62px);
}

.falone-services__h2 {
  /* il modello lascia il margine di base `h2 { margin-bottom: 24px }`, che
     dentro il grid si somma al gap di 24 */
  margin: 0 0 var(--falone-h2-gap, 24px);
  color: var(--falone-services-title-color, #121212);
}
/* famiglia e corpo fluido arrivano da .falone-h2 del tema */

.falone-services__intro {
  max-width: var(--falone-services-head-text-w, 590px);
  /* ⚠️ Nel modello questo paragrafo conserva il margine sotto del browser
     (1em = 16px): e' l'ultimo elemento del grid dell'intestazione, quindi quel
     margine entra nell'altezza della fascia. Con `margin: 0` la sezione
     risultava 16px piu' corta del modello — misurato su tre fasce. */
  margin: 0 0 var(--falone-p-gap, 1em);
  color: var(--falone-services-text-color, #666);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-weight: 300;
}

/* l'occhiello qui e' grigio, non accento: variante .muted del sorgente.
   Il colore arriva dal controllo, che ha il grigio come default. */
/* ⚠️ Nel modello questo occhiello e' `<p class="eyebrow muted">` DENTRO
   `.section-heading`, e prende due cose dalla cascata che gli altri
   occhielli non hanno:
     · il colore #b7b7b7 da `.eyebrow.muted`  (0,2,0)
     · il peso 300 da `.section-heading > p`  (0,1,1), che batte
       `.eyebrow` (0,1,0) e ne annulla l'800
   Qui sono dichiarati espliciti perche' il nostro markup non ha quella
   nidificazione. Il commento precedente diceva che il grigio stava «nel
   ripiego del CSS»: non c'era, e l'occhiello restava arancione.
   Specificita' pari a `.falone-eyebrow`, ma questo foglio si stampa dopo. */
.falone-services__eyebrow {
  color: var(--falone-eyebrow-muted, #b7b7b7);
  /* ⚠️ Il peso 300 (fedelta' al modello, vedi sopra) e' stato tolto l'11/09:
     richiesta esplicita del cliente, risultava troppo leggero rispetto agli
     occhielli standard del sito (800). Il colore resta dichiarato ma e'
     comunque sovrascritto dalla regola !important di components.css §13. */
  /* .section-heading > p del modello limita anche l'occhiello a 590px */
  max-width: var(--falone-services-eyebrow-w, 590px);
  /* ⚠️ Qui c'era `margin-bottom: 0`. Nel modello `.eyebrow` ha 18px di
     margine sotto, e dentro un grid quel margine si SOMMA al gap: fra
     occhiello e titolo il modello lascia 42px, noi 24. */
  margin-bottom: var(--falone-eyebrow-gap, 18px);
}

/* ======================================================================
   2. GRIGLIA
   ======================================================================
   ⚠️ L'unita' fr sta DENTRO minmax(), mai dentro un calc(): `calc(1fr * n)`
   renderebbe invalida tutta la grid-template-columns, che verrebbe scartata,
   e le schede si impilerebbero in una colonna. */
.falone-services__grid {
  display: grid;
  grid-template-columns: repeat(var(--falone-services-cols, 4), minmax(0, 1fr));
  gap: var(--falone-services-gap, 14px);
}

/* ======================================================================
   3. SCHEDA
   ======================================================================
   position, overflow e isolation arrivano da .falone-media. Il velo da
   .falone-veil, che usa --falone-veil-card: e' esattamente il gradiente di
   questa sezione, quindi non si ridefinisce. */
.falone-services__card {
  display: grid;
  align-content: end;      /* il testo sta in basso */
  min-height: var(--falone-services-card-h, 420px);
  padding: var(--falone-services-card-pad, 28px);
  background: var(--falone-services-card-bg, #121212);
  color: var(--falone-services-card-title-color, #fff);
  text-decoration: none;   /* le schede cliccabili sono <a> */
}

/* la fotografia sta sotto il velo (-1) e sotto il testo */
.falone-services__card img {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.falone-services__num {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 1;
  color: var(--falone-services-card-accent, #f7941d);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  /* ⚠️ SCARTO DAL SORGENTE, chiesto dall'utente il 05/08: +2px sui numeri
     piccoli. Il sorgente dice `.72rem` = 11,52px misurati. */
  font-size: var(--falone-services-num-size, .72rem);   /* modello: .72rem */
  font-weight: 800;
  letter-spacing: .2em;
}

.falone-services__body {
  position: relative;
  z-index: 1;
}

.falone-services__label {
  margin: 0 0 10px;
  color: var(--falone-services-card-accent, #f7941d);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.falone-services__title {
  margin: 0;
  color: var(--falone-services-card-title-color, #fff);
  font-family: var(--falone-font-display, "Jost", sans-serif);
  /* il modello non dichiara un peso su .service-card h3: vale il 600 della
     regola di base. Il 700 era uno scarto. */
  font-weight: var(--falone-services-title-weight, 600);

  /* ⚠️ Il testo della scheda e' ancorato in BASSO (`align-content: end`):
     un titolo di due righe spinge in su l'occhiello che gli sta sopra, e
     nella fila da quattro gli occhielli finiscono a quote diverse —
     misurato 296px contro 330, cioe' esattamente una riga.
     Riservando lo spazio di due righe, i titoli corti occupano lo stesso
     ingombro di quelli lunghi e gli occhielli tornano in linea. Non e' un
     ritaglio: un titolo di tre righe cresce comunque. */
  line-height: var(--falone-services-title-lh, 1.12);
  min-height: calc(
    var(--falone-services-title-righe, 2) *
    var(--falone-services-title-lh, 1.2) * 1em
  );
}

/* chi naviga da tastiera deve vedere dove si trova: nell'originale manca */
.falone-services__card:focus-visible {
  outline: 2px solid var(--falone-services-card-accent, #f7941d);
  outline-offset: 3px;
}

/* ======================================================================
   4. FOTOGRAFIA: BIANCO E NERO E HOVER
   ======================================================================
   La transizione (durata --falone-dur-media, .65s) e l'ingrandimento
   1.04 -> 1.1 arrivano da .falone-media--zoom. Qui solo i valori di
   grigio e coprenza, che sono propri di questa sezione. */
.falone-services__card img {
  filter: grayscale(var(--falone-services-gray, 1));
  opacity: var(--falone-services-op, .74);
}

.falone-services__card:hover img,
.falone-services__card:focus-within img {
  filter: grayscale(var(--falone-services-gray-hover, 0));
  opacity: var(--falone-services-op-hover, .96);
}

/* ======================================================================
   5. MOVIMENTO RIDOTTO
   ======================================================================
   L'ingrandimento e' gia' annullato da .falone-media--zoom del tema.
   Colore e coprenza restano: sono informazione, non movimento. */
@media (prefers-reduced-motion: reduce) {
  .falone-services__card img { transition: none; }
}