/*
 * Persone e valori — aspetto
 *
 * Origine: .people-* di source-clean/styles.css. Ogni valore letto.
 *
 * Indice
 *   1. sezione e colonne
 *   2. collage
 *   3. scheda in accento
 *   4. testo
 *   5. pilastri
 *   6. impilamento
 *   7. movimento ridotto
 */

/* ======================================================================
   1. SEZIONE E COLONNE
   ======================================================================
   Griglia del sorgente: minmax(0,.78fr) minmax(0,1fr) — il collage vale
   0.78/1.78 = 43,8%. Nessun margine interno: le due colonne arrivano ai
   bordi. */
.falone-people {
  display: grid;
  grid-template-columns:
    minmax(0, var(--falone-people-visual-fr, .78fr))
    minmax(0, 1fr);
  gap: 0;
  padding: 0;
  background: var(--falone-people-bg, #121212);
  color: var(--falone-people-text, #fff);
}

.falone-people__visual {
  position: relative;
  display: grid;
  align-self: center;
  background: var(--falone-people-collage-bg, #090909);
  isolation: isolate;
}

/* ======================================================================
   2. COLLAGE
   ======================================================================
   Nove celle quadrate: otto fotografie e una scheda in accento. Il
   contenitore e' quadrato (aspect-ratio 1/1), quindi le celle restano
   proporzionate a qualunque larghezza.

   ⚠️ min-height: 0 sulle immagini: dentro una griglia la dimensione minima
   automatica di un elemento sostituito e' il suo contenuto, e senza questo
   le fotografie sfondano la riga. */
.falone-people__collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--falone-people-cols, 3), minmax(0, 1fr));
  grid-template-rows: repeat(var(--falone-people-rows, 3), minmax(0, 1fr));
  gap: var(--falone-people-collage-gap, 10px);
  padding: var(--falone-people-collage-pad, 18px);
  aspect-ratio: 1 / 1;
  background: var(--falone-people-collage-bg, #090909);
}

/* velo appena percettibile sopra il collage, dentro il margine interno */
.falone-people__collage::after {
  content: "";
  position: absolute;
  inset: var(--falone-people-collage-pad, 18px);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18,18,18,.02), rgba(18,18,18,.18));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--falone-people-bg, #121212) calc(var(--falone-people-veil-top, .02) * 100%), transparent),
    color-mix(in srgb, var(--falone-people-bg, #121212) calc(var(--falone-people-veil-bottom, .18) * 100%), transparent)
  );
}

/* ⚠️ Selettore DISCENDENTE, non la sola classe: `.elementor img { height:auto }`
   ha specificita' (0,1,1) e batterebbe `.falone-people__photo` (0,1,0),
   lasciando le fotografie alla loro altezza naturale con del nero sotto.
   Misurato: le celle non si riempivano. */
.falone-people__collage .falone-people__photo {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
  filter: grayscale(var(--falone-people-gray, .18));
  transition:
    filter    var(--falone-people-dur, .45s) var(--falone-ease, ease),
    transform var(--falone-people-dur, .45s) var(--falone-ease, ease);
}

.falone-people__collage .falone-people__photo:hover {
  filter: grayscale(var(--falone-people-gray-hover, 0));
  transform: scale(var(--falone-people-zoom, 1.02));
}

/* ======================================================================
   3. SCHEDA IN ACCENTO
   ====================================================================== */
.falone-people__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  padding: clamp(16px, 2.1vw, 28px);
  background: var(--falone-people-accent, #f7941d);
  color: var(--falone-people-card-text, #121212);

  /* ⚠️ SCARTO DAL SORGENTE, per un difetto misurato.
     Nel sorgente il corpo del titolo e' clamp(1.1rem, 1.9vw, 1.85rem), cioe'
     legato alla FINESTRA. Ma sopra i 1180px il collage vale solo il 44%
     della larghezza, quindi la cella e' piccola (189px a 1440) mentre il
     testo resta grande: il titolo va su 6 righe e chiede 246px. Con
     justify-content: flex-end il troppo esce dal BORDO SUPERIORE e finisce
     nella cella sopra — misurato: l'occhiello 34px fuori.
     Qui il corpo si lega alla CELLA (unita' cqw), cosi' resta proporzionato
     a ogni larghezza. overflow: hidden e' la rete di sicurezza se qualcuno
     scrive un testo molto piu' lungo. */
  container-type: inline-size;
  overflow: hidden;
}

.falone-people__card-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .2em;
  line-height: 1.25;
  text-transform: uppercase;
}

.falone-people__card-title {
  display: block;
  max-width: 12ch;   /* il sorgente manda a capo su misura del testo */
  font-family: var(--falone-font-display, "Jost", sans-serif);
  /* ⚠️ 31/08: i predefiniti tornano ESATTAMENTE al modello,
     clamp(1.1rem, 1.9vw, 1.85rem), su richiesta di replicarlo.
     Il difetto descritto sopra e' del modello e si ripresenta: per
     riproteggere la cella basta impostare su questa sezione
     --falone-people-card-cq: 11cqw e --falone-people-card-min: .95rem,
     che rimettono il corpo in scala sulla CELLA invece che sulla finestra. */
  font-size: clamp(1.1rem, 1.9vw, 1.85rem);
  font-size: clamp(
    var(--falone-people-card-min, 1.1rem),
    var(--falone-people-card-cq, 1.9vw),
    var(--falone-people-card-max, 1.85rem)
  );
  font-weight: 600;
  line-height: .98;
}

/* ======================================================================
   4. TESTO
   ====================================================================== */
.falone-people__copy {
  display: grid;
  align-content: center;
  padding: var(--falone-people-copy-pad-y, 92px) var(--falone-people-copy-pad-x, 52px);
  margin-left: var(--falone-people-indent, 50px);
}

.falone-people__h2 {
  max-width: var(--falone-people-title-w, 820px);
  margin: 0 0 24px;
  color: var(--falone-people-text, #fff);
}

.falone-people__lead {
  max-width: var(--falone-people-lead-w, 740px);
  /* come nel modello, il paragrafo conserva il margine sotto del browser
     (1em = 16,8px a 1.05rem): entra nell'altezza della fascia */
  margin: 0 0 var(--falone-p-gap, 1em);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: 1.05rem;
  font-weight: 300;

  color: rgba(255, 255, 255, .74);   /* ripiego */
  color: color-mix(in srgb,
    var(--falone-people-text, #fff) calc(var(--falone-people-lead-op, .74) * 100%),
    transparent);
}

.falone-people .falone-eyebrow { color: var(--falone-people-accent, #f7941d); }

/* il pulsante non si allarga alla colonna */
.falone-people__btn { justify-self: start; }

/* ======================================================================
   5. PILASTRI
   ======================================================================
   Due colonne con linee di 1px ottenute da gap piu' sfondo del contenitore,
   come le celle degli indicatori in Valore reale. */
.falone-people__pillars {
  display: grid;
  grid-template-columns: repeat(var(--falone-people-pillar-cols, 2), minmax(0, 1fr));
  gap: 1px;
  margin: 42px 0 34px;
  padding: 0;
  list-style: none;
  background: rgba(255, 255, 255, .14);   /* ripiego */
  background: color-mix(in srgb,
    var(--falone-people-text, #fff) calc(var(--falone-people-line-op, .14) * 100%),
    transparent);
}

.falone-people__pillar {
  min-height: var(--falone-people-pillar-h, 190px);
  padding: var(--falone-people-pillar-pad, 28px);
  background: var(--falone-people-pillar-bg, #181818);
}

.falone-people__pillar-num {
  display: block;
  margin-bottom: 24px;
  color: var(--falone-people-accent, #f7941d);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .22em;
}

.falone-people__pillar-title {
  margin: 0 0 12px;
  color: var(--falone-people-text, #fff);
  font-family: var(--falone-font-display, "Jost", sans-serif);
  font-size: clamp(1.35rem, 1.8vw, 1.85rem);
  font-weight: 600;
}

.falone-people__pillar-text {
  margin: 0;
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-weight: 300;

  color: rgba(255, 255, 255, .66);   /* ripiego */
  color: color-mix(in srgb,
    var(--falone-people-text, #fff) calc(var(--falone-people-pillar-op, .66) * 100%),
    transparent);
}

/* ======================================================================
   6. IMPILAMENTO
   ====================================================================== */
@media (max-width: 1180px) {
  .falone-people { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .falone-people__visual { min-height: 0; }
  .falone-people__copy {
    padding: var(--falone-people-copy-pad-y, 72px) var(--falone-people-copy-pad-x, 18px);
  }
  .falone-people__pillars { grid-template-columns: 1fr; }
}

/* ======================================================================
   7. MOVIMENTO RIDOTTO
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .falone-people__photo,
  .falone-people__collage .falone-people__photo:hover {
    transform: none;
    transition: none;
  }
}