/*
 * Progetto in evidenza — aspetto
 *
 * Origine: .feature-project / .feature-image / .feature-image img /
 * .feature-copy di source-clean/styles.css. Ogni valore letto.
 *
 * Indice
 *   1. sezione e colonne
 *   2. fotografia
 *   3. testo
 *   4. impilamento sotto 1180
 */

/* ======================================================================
   1. SEZIONE E COLONNE
   ======================================================================
   Griglia del sorgente: minmax(0,1fr) minmax(360px,.74fr) — la colonna di
   testo vale 0.74/1.74 = 42,5%, con un minimo di 360px. */
.falone-feature {
  display: flex;
  align-items: stretch;
  min-height: var(--falone-feature-min-h, 650px);
  background: var(--falone-feature-bg, #121212);
  color: var(--falone-feature-title-color, #fff);
}

.falone-feature__media {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--falone-feature-img-h, 560px);
}

.falone-feature__copy {
  flex: 0 0 auto;
  width: calc(var(--falone-feature-copy-w, 42.5%) - var(--falone-feature-indent, 50px));
  min-width: 360px;
  margin-left: var(--falone-feature-indent, 50px);
  padding: 76px 52px;   /* scavalcato dal controllo Margini interni */

  display: flex;
  flex-direction: column;
  justify-content: center;   /* align-content: center del sorgente */
}

/* ======================================================================
   2. FOTOGRAFIA
   ======================================================================
   Il ritaglio e l'overflow arrivano da .falone-media del tema: qui si
   aggiunge solo che l'immagine riempie l'altezza della colonna.

   ⚠️ Le regole su <img> vanno scritte discendenti: la regola di Elementor
   `.elementor img { height: auto }` ha specificita' (0,1,1) e batterebbe una
   classe sola. */
.falone-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ======================================================================
   3. TESTO
   ====================================================================== */
.falone-feature__h2 {
  margin: 0 0 24px;
  color: var(--falone-feature-title-color, #fff);
}
/* famiglia, corpo fluido e l'<em> in accento arrivano da .falone-h2 */

.falone-feature__text {
  max-width: var(--falone-feature-text-w, 560px);
  /* ⚠️ Nel modello questo paragrafo conserva il margine sotto del browser
     (1em = 16px): e' l'ultimo elemento del grid dell'intestazione, quindi quel
     margine entra nell'altezza della fascia. Con `margin: 0` la sezione
     risultava 16px piu' corta del modello — misurato su tre fasce. */
  margin: 0 0 var(--falone-p-gap, 1em);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-weight: 300;

  /* ⚠️ ripiego in rgba() prima di color-mix(): senza, il paragrafo
     resterebbe bianco pieno su fondo scuro, piu' pesante dell'originale */
  color: rgba(255, 255, 255, .68);
  color: color-mix(
    in srgb,
    var(--falone-feature-text-color, #fff) calc(var(--falone-feature-text-op, .68) * 100%),
    transparent
  );
}

/* justify-self: start del sorgente — il pulsante non si allarga alla colonna */
.falone-feature__btn {
  align-self: flex-start;
  margin-top: 20px;
}

@media (max-width: 480px) {
  /* sotto 480px il sorgente allarga ogni pulsante: qui va tolto il vincolo
     di align-self, o resterebbe della sua larghezza naturale */
  .falone-feature__btn { align-self: stretch; }
}

/* ======================================================================
   4. IMPILAMENTO
   ======================================================================
   Il sorgente passa a colonna unica a 1180px. */
@media (max-width: 1180px) {
  .falone-feature { flex-wrap: wrap; }
  .falone-feature__media,
  .falone-feature__copy {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
}