/*
 * Sezione Metodo — aspetto
 *
 * Origine: .page-section.dark-band, .method-box-image, #metodo .method-title,
 * #metodo .method-content, #metodo .page-process di source-clean/styles.css,
 * piu' il blocco @media (max-width: 1180px). Ogni valore letto.
 *
 * ⚠️ I passaggi numerati NON stanno qui: sono .falone-steps del tema,
 * promosso alla seconda occorrenza (home + questa pagina). Qui si
 * sovrascrive solo cio' che in questa sezione e' diverso — nulla, in realta':
 * i valori coincidono. Restano i controlli, che scrivono --falone-steps-*.
 *
 * Indice
 *   1. fascia scura
 *   2. intestazione
 *   3. le due colonne
 *   4. fotografia inquadrata
 */

/* ======================================================================
   1. FASCIA SCURA
   ======================================================================
   ⚠️ Il sorgente usa #111 per .dark-band. Normalizzato su #121212 per
   decisione dell'utente: un solo nero in tutto il sito. */
.falone-method {
  padding: var(--falone-method-pad-y, 112px) var(--falone-method-pad-x, 52px);
  background: var(--falone-method-bg, #111111);   /* modello: #111 */
  color: var(--falone-method-ink, #fff);
}

/* ======================================================================
   2. INTESTAZIONE
   ======================================================================
   .method-title annulla il margine inferiore dell'intestazione condivisa
   (62px) e stringe la larghezza massima da 940 a 820: il distacco dalla
   fotografia lo da' il margine superiore del contenuto. */
.falone-method__head {
  max-width: var(--falone-method-head-max, 820px);
  margin-bottom: 0;
}

.falone-method__h2 {
  /* modello: `h2 { margin-bottom: 24px }` */
  margin: 0 0 var(--falone-h2-gap, 24px);
  color: var(--falone-method-ink, #fff);
}

/* ======================================================================
   3. LE DUE COLONNE
   ======================================================================
   minmax(300px, .44fr) per la fotografia, il resto ai passaggi: la stessa
   proporzione della sezione Processo della home. Il rientro e' sottratto
   alla larghezza, o il contenuto sborderebbe a destra. */
.falone-method__content {
  display: grid;
  grid-template-columns:
    minmax(var(--falone-method-img-min, 300px), var(--falone-method-img-fr, .44fr))
    minmax(0, 1fr);
  gap: var(--falone-method-gap, clamp(24px, 3vw, 52px));
  align-items: start;
  width: calc(100% - var(--falone-indent, 0px));
  margin-top: var(--falone-method-content-top, 34px);
  margin-left: var(--falone-indent, 0px);
}

.falone-method__steps {
  max-width: var(--falone-method-steps-max, 1080px);
  align-self: start;
  /* ⚠️ `margin-left: auto` come nel modello (`.page-process`). Su un elemento
     di griglia non è solo un margine: la larghezza passa a fit-content e il
     blocco si allinea a destra. Sopra i 1180 non si vede (l'elenco sta nella
     sua colonna); sotto, e' quello che tiene l'elenco stretto e a destra
     invece di stenderlo su tutta la fascia. */
  margin: 0 0 0 auto;
}

@media (max-width: 1180px) {
  .falone-method__content { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .falone-method {
    padding: var(--falone-method-pad-y-tablet, 72px) var(--falone-method-pad-x-tablet, 18px);
  }
}

/* ======================================================================
   4. FOTOGRAFIA INQUADRATA
   ======================================================================
   ⚠️ Selettore DISCENDENTE sull'<img>: `.elementor img { border: none;
   box-shadow: none; height: auto }` ha specificita' (0,1,1) e cancellerebbe
   TRE cose insieme — il bordo arancione, l'ombra e il rapporto d'aspetto.
   Presa in pieno nel collage delle Persone e nelle schede delle Garanzie.

   Nel sorgente .method-box-image ha `width: min(100%, 760px)` e
   `margin-top: 34px`, ma #metodo li riscrive a `100%` e `0`: dentro la
   griglia il ritaglio lo decide la colonna. Si porta il risultato. */
.falone-method__content .falone-method__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--falone-method-img-ratio, 16 / 9);
  object-fit: cover;
  margin-top: 0;
  border: 1px solid rgba(247, 148, 29, .62);        /* ripiego */
  box-shadow: 0 28px 54px rgba(0, 0, 0, .32);      /* ripiego */
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .falone-method__content .falone-method__img {
    border-color: color-mix(in srgb,
      var(--falone-method-frame, #f7941d) calc(var(--falone-method-frame-op, .62) * 100%),
      transparent);
    box-shadow:
      0 var(--falone-method-shadow-y, 28px) var(--falone-method-shadow-blur, 54px)
      color-mix(in srgb,
        var(--falone-method-shadow-color, #000) calc(var(--falone-method-shadow-op, .32) * 100%),
        transparent);
  }
}