/*
 * Introduzione Falone — aspetto
 *
 * Origine: .intro-section e i suoi ::before / ::after, .intro-title,
 * .intro-text di source-clean/styles.css. Ogni valore letto.
 *
 * Indice
 *   1. sezione e colonne
 *   2. fotografia e velo
 *   3. testo
 *   4. impilamento sotto 1180 e 820
 */

/* ======================================================================
   1. SEZIONE E COLONNE
   ======================================================================
   Nel sorgente e' una griglia minmax(0,1fr) minmax(360px,.74fr): la
   seconda colonna vale 0.74/1.74 = 42,5% con un minimo di 360px. */
.falone-intro {
  position: relative;
  min-height: var(--falone-intro-min-h, 500px);
  padding: 112px 52px;   /* scavalcato dal controllo Margini interni */

  display: flex;
  align-items: flex-end;   /* align-items: end del sorgente */
  gap: var(--falone-intro-gap, 0px);

  background-color: var(--falone-intro-bg-color, #fff);
  border-bottom: 1px solid var(--falone-intro-border, #e7e7e7);

  overflow: hidden;
  isolation: isolate;      /* confina gli z-index degli pseudo-elementi */
}

.falone-intro__title {
  flex: 1 1 0;
  min-width: 0;
  margin-left: var(--falone-indent, 0px);
}

.falone-intro__text {
  flex: 0 0 auto;
  width: calc(var(--falone-intro-right-w, 42.5%) - var(--falone-indent, 0px));
  min-width: 360px;
  max-width: var(--falone-intro-text-w, 560px);
  align-self: center;      /* il paragrafo e' centrato, il titolo in basso */
  margin-left: var(--falone-indent, 0px);
  padding-left: var(--falone-intro-text-pad, 52px);
}

/* i contenuti stanno sopra fotografia e velo */
.falone-intro > * {
  position: relative;
  z-index: 1;
}

/* ======================================================================
   2. FOTOGRAFIA E VELO
   ======================================================================
   Due pseudo-elementi, come nell'originale: nessun nodo in piu' nel markup.
   ::before porta la fotografia attenuata, ::after il velo che la sbiadisce.

   ⚠️ La fotografia arriva da --falone-intro-bg, scritta dal controllo. Se
   non e' stata scelta nessuna immagine la variabile e' indefinita e lo
   pseudo-elemento resta trasparente: la sezione funziona comunque. */
.falone-intro::before,
.falone-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.falone-intro::before {
  background-image: var(--falone-intro-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: var(--falone-intro-bg-op, .8);
}

.falone-intro::after {
  /* ⚠️ ripiego in rgba() prima di color-mix(): senza, un browser che non lo
     supporta lascerebbe la fotografia a piena forza sotto il testo */
  background-color: rgba(255, 255, 255, .7);
  background-color: color-mix(
    in srgb,
    var(--falone-intro-veil-color, #fff) calc(var(--falone-intro-veil-op, .7) * 100%),
    transparent
  );
}

/* ======================================================================
   3. TESTO
   ====================================================================== */
.falone-intro__h2 {
  max-width: var(--falone-intro-title-w, 960px);
  margin: 0 0 24px;
  color: var(--falone-intro-title-color, #121212);
}
/* famiglia, corpo fluido e l'<em> in accento arrivano da .falone-h2 del tema */

.falone-intro__text,
.falone-intro__text p {
  color: var(--falone-intro-text-color, #666);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  /* 400, come il resto dei paragrafi del sito (es. .falone-split__copy):
     richiesta esplicita del cliente (11/09), il 600 risultava troppo grassetto */
  font-weight: 400;
}

.falone-intro__text p { margin: 0 0 1em; }
.falone-intro__text p:last-child { margin-bottom: 0; }

/* ======================================================================
   4. IMPILAMENTO
   ======================================================================
   Il sorgente passa a colonna unica gia' a 1180px, ma azzera il rientro del
   paragrafo solo a 820px: nella fascia intermedia il testo resta indentato.
   E' voluto, non una dimenticanza. */
@media (max-width: 1180px) {
  .falone-intro { flex-wrap: wrap; }
  .falone-intro__title,
  .falone-intro__text {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  /* il limite di larghezza resta sul paragrafo, non sulla colonna */
  .falone-intro__text p { max-width: var(--falone-intro-text-w, 560px); }
}