/*
 * Guardiamo avanti — aspetto
 *
 * Origine: .future-band / .future-copy / .future-gallery della cattura
 * Impegno.html. Ogni valore letto, compresi i blocchi @media.
 *
 * ⚠️ Non e' la galleria scorrevole della pagina Costruttori: qui le tre
 * fotografie stanno in una griglia fissa a tre colonne, non scorrono, e la
 * PRIMA e' in bianco e nero. Nessun JavaScript.
 */

.falone-future {
  display: grid;
  grid-template-columns:
    minmax(var(--falone-future-copy-min, 260px), var(--falone-future-copy-fr, .62fr))
    minmax(0, var(--falone-future-gallery-fr, 1fr));

  gap: clamp(36px, 4.5vw, 70px);   /* ripiego */
  gap: var(--falone-future-gap,
    clamp(
      var(--falone-future-gap-min, 36px),
      var(--falone-future-gap-vw, 4.5vw),
      var(--falone-future-gap-max, 70px)
    ));
  /* ⚠️ center, non start: il testo si allinea al centro delle fotografie */
  align-items: var(--falone-future-align, center);
  padding:
    var(--falone-future-pad-y, 82px)
    var(--falone-future-pad-x, 52px);
  /* ⚠️ #111 del sorgente normalizzato su #121212 */
  background: var(--falone-future-bg, #121212);
  color: var(--falone-future-ink, #fff);
}

.falone-future__h2 {
  margin: 0 0 var(--falone-future-title-gap, 24px);
  color: var(--falone-future-ink, #fff);
}
/* la scala arriva da .falone-h2--page del tema */

.falone-future__text {
  max-width: var(--falone-future-text-max, 460px);
  margin: 0;
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: .84rem;
  font-weight: 300;
  line-height: 1.75;

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

.falone-future__gallery {
  display: grid;
  grid-template-columns: repeat(var(--falone-future-cols, 3), minmax(0, 1fr));
  gap: var(--falone-future-gallery-gap, 8px);
}

/* ⚠️ Selettore DISCENDENTE: `.elementor img { height: auto }` (0,1,1)
   batterebbe la classe sola e il rapporto d'aspetto non verrebbe rispettato.
   Il rapporto del sorgente e' 16/17.6, cioe' appena piu' alto che largo. */
.falone-future__gallery .falone-future__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--falone-future-ratio, 16 / 17.6);
  object-fit: cover;
}

/* ⚠️ Solo la PRIMA e' in bianco e nero. E' una scelta del sorgente, non un
   errore: crea un ritmo fra le tre. Il controllo la puo' spegnere. */
.falone-future__gallery .falone-future__img:first-child {
  filter: grayscale(var(--falone-future-gray, 1));
}

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

@media (max-width: 820px) {
  .falone-future {
    padding: var(--falone-future-pad-y-tablet, 72px) var(--falone-future-pad-x-tablet, 18px);
  }
  /* impilate, il formato alto non serve: si allargano */
  .falone-future__gallery .falone-future__img { aspect-ratio: var(--falone-future-ratio-tablet, 4 / 3); }
  .falone-future__text br,
  .falone-future__h2 br { display: none; }
}

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