/*
 * Hero Falone — aspetto
 *
 * Origine: .hero / .hero-media / .hero-media img / .hero-shade /
 * .hero-content / .hero-title / .hero-actions di source-clean/styles.css.
 * Ogni valore letto, nessuno stimato.
 *
 * Ogni variabile ha un ripiego pari al valore dell'originale.
 *
 * Indice
 *   1. sezione
 *   2. fotografie e parallasse
 *   3. velo
 *   4. testo
 *   5. movimento ridotto
 */

/* ======================================================================
   1. SEZIONE
   ======================================================================
   Il sorgente ha min-height 590px E height calc(92vh - 20px): vale il
   maggiore dei due, che e' esattamente cosa fa max(). */
.falone-hero {
  position: relative;
  min-height: max(
    var(--falone-hero-min-h, 590px),
    calc(var(--falone-hero-vh, 92vh) - 20px)
  );
  display: grid;
  align-items: center;
  padding: 94px 52px 52px;   /* scavalcato dal controllo Margini interni */
  overflow: hidden;
  isolation: isolate;        /* confina gli z-index negativi dei livelli */
  color: #fff;
}

/* ======================================================================
   2. FOTOGRAFIE E PARALLASSE
   ======================================================================
   Due livelli: il contenitore si sposta col cursore, le immagini si
   ingrandiscono. Separati perche' su un solo elemento la seconda
   trasformazione cancellerebbe la prima. */
.falone-hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  transform:
    translate3d(
      calc(var(--falone-mx, 0) * var(--falone-hero-shift, 14px) * -1),
      calc(var(--falone-my, 0) * var(--falone-hero-shift, 14px) * -1),
      0
    )
    scale(1.05);   /* margine perche' lo spostamento non scopra i bordi */
  transition: transform .35s ease-out;
}

.falone-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(var(--falone-hero-zoom-from, 1.02));
  transition:
    opacity   var(--falone-hero-fade, 1150ms) var(--falone-ease, ease),
    transform var(--falone-hero-zoom-dur, 6500ms) var(--falone-ease, ease);
}

/* la fotografia in primo piano: visibile e ingrandita fino al valore finale */
.falone-hero__slide.is-active {
  opacity: 1;
  transform: scale(var(--falone-hero-zoom-to, 1.08));
}

/* ======================================================================
   3. VELO
   ======================================================================
   Due sfumature sovrapposte: orizzontale sopra, verticale sotto. Elementor
   non sa esprimere due gradienti in un controllo, quindi qui si compone da
   un colore e cinque coprenze, tutti regolabili dal pannello. */
.falone-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  /* ⚠️ Ripiego in rgba() PRIMA di color-mix(): se il browser non supporta
     color-mix la dichiarazione viene scartata, e senza ripiego il velo
     sparisce e il testo bianco finisce direttamente sulla fotografia. */
  background-image:
    linear-gradient(90deg, rgba(18,18,18,.91), rgba(18,18,18,.61) 46%, rgba(18,18,18,.16)),
    linear-gradient(180deg, rgba(18,18,18,.1), rgba(18,18,18,.7));

  /* Colore dalla palette del Kit, coprenze indipendenti: color-mix ricompone
     le due cose. --falone-velo esiste solo per non ripetere il fallback. */
  --falone-velo: var(--falone-hero-veil-color, #121212);
  background-image:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--falone-velo) calc(var(--falone-hero-veil-left,  .91) * 100%), transparent),
      color-mix(in srgb, var(--falone-velo) calc(var(--falone-hero-veil-mid,   .61) * 100%), transparent) 46%,
      color-mix(in srgb, var(--falone-velo) calc(var(--falone-hero-veil-right, .16) * 100%), transparent)
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--falone-velo) calc(var(--falone-hero-veil-top,    .1) * 100%), transparent),
      color-mix(in srgb, var(--falone-velo) calc(var(--falone-hero-veil-bottom, .7) * 100%), transparent)
    );
}

/* Sotto 820px il sorgente inverte l'ordine e rinforza la sfumatura
   verticale: su schermo stretto il testo occupa tutta la larghezza e non
   basta piu' scurire solo il lato sinistro. */
@media (max-width: 820px) {
  .falone-hero__shade {
    background-image:
      linear-gradient(180deg, rgba(18,18,18,.32), rgba(18,18,18,.86)),
      linear-gradient(90deg,  rgba(18,18,18,.76), rgba(18,18,18,.18));
    background-image:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--falone-velo) 32%, transparent),
        color-mix(in srgb, var(--falone-velo) 86%, transparent)
      ),
      linear-gradient(
        90deg,
        color-mix(in srgb, var(--falone-velo) 76%, transparent),
        color-mix(in srgb, var(--falone-velo) 18%, transparent)
      );
  }
}

/* ======================================================================
   4. TESTO
   ====================================================================== */
.falone-hero__body {
  position: relative;
  z-index: 1;
  width: min(100%, var(--falone-hero-content-w, 1040px));
  margin-left: var(--falone-indent, 0px);
}

.falone-hero__title {
  max-width: 1120px;
  margin: 0 0 22px;
  /* fluido come nel sorgente: a 1440px rende 4,68rem, non il massimo */
  font-size: clamp(
    var(--falone-hero-title-min, 4.2rem),
    var(--falone-hero-title-vw, 10.2vw),
    var(--falone-hero-title-max, 8.6rem)
  );
  line-height: var(--falone-h1-lh, .86);
  color: var(--falone-hero-title-color, #fff);
}

/* nel modello `.hero-title span, .hero-title em { display: block }`: le due
   parti del titolo sono entrambe righe piene, non testo in linea. Misurato:
   lo <span> «La forma» valeva 1040px nel modello e 542,9 da noi. */
.falone-hero__title span,
.falone-hero__title em {
  display: block;
}

/* .falone-h1 del tema porta gia' famiglia, peso e l'<em> in accento
   corsivo: qui non si ripete nulla di quello. */

.falone-hero__copy {
  max-width: var(--falone-hero-copy-w, 620px);
  margin: 0;
  color: rgba(255, 255, 255, .78);   /* ripiego */
  color: color-mix(
    in srgb,
    var(--falone-hero-copy-color, #fff) calc(var(--falone-hero-copy-op, .78) * 100%),
    transparent
  );
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: 1.04rem;
  font-weight: 300;
}

.falone-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

@media (max-width: 480px) {
  /* il sorgente allarga i pulsanti: il contenitore deve seguirli */
  .falone-hero__actions { width: 100%; }
}

/* ======================================================================
   5. MOVIMENTO RIDOTTO
   ======================================================================
   Niente parallasse, niente ingrandimento, niente dissolvenza: la prima
   fotografia resta ferma e visibile. Lo slideshow non parte affatto — se ne
   occupa hero.js, che non avvia il timer. */
@media (prefers-reduced-motion: reduce) {
  .falone-hero__media {
    transform: scale(1.05);
    transition: none;
  }
  .falone-hero__slide {
    transform: none;
    transition: none;
  }
  .falone-hero__slide.is-active { transform: none; }
}