/* ============================================================
   MALSCH ITALIA — Homepage
   Owner: front-page.php.

   La pagina ha un solo ritmo, ripetuto: TESTA (titolo a sinistra,
   ambientata a destra) → GRIGLIA → link all'archivio. Le sezioni si
   separano solo con lo spazio, come nel resto del tema: nessun bordo,
   nessun riquadro, nessuna ombra, nessun raggio.
   Il colore lo portano le quattro foto dell'hero e le tre ambientate
   di sezione: l'impaginato resta bianco (regola 80/15/5).

   Qui non si ridefinisce nessun token: solo composizione.
   ============================================================ */

/* --- Hero ---------------------------------------------------------
   Il meccanismo a slide (.hero__slide / .hero__progress) è quello di
   main.js e non si tocca: qui cambia solo la vestizione della caption,
   che ora ha una riga in più (il payoff del marchio). */

/* La caption è cresciuta (quattro righe, non più due) e i render nuovi sono
   molto più chiari delle foto di prima: col solo velo dal basso il titolo
   bianco scendeva sotto 3:1 su un quinto della sua area nella slide della
   sala attività (misurato a 1440px con Chromium).
   La correzione NON è un velo più scuro su tutta la foto — che spegnerebbe
   proprio i render appena arrivati — ma una seconda velatura da sinistra,
   dove il testo c'è davvero: la metà destra dell'immagine resta luminosa
   com'era (misurata: identica), e l'area sotto il titolo torna sopra 3:1.
   Resta un gradiente, non un pannello: la foto continua a vedersi. */
.hero__slide::after {
  background:
    linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0.12) 45%, rgba(0,0,0,0) 70%),
    linear-gradient(to right, rgba(0,0,0,0.34), rgba(0,0,0,0.1) 40%, rgba(0,0,0,0) 60%),
    linear-gradient(to bottom, rgba(0,0,0,0.28), rgba(0,0,0,0) 24%);
}

.hero__caption {
  /* la riga del titolo non deve mai attraversare tutto lo schermo */
  max-width: min(680px, 88vw);
}

/* Payoff ufficiale del marchio: minuscolo come lo scrive il logo,
   in tono minore rispetto all'H1 — gerarchia per dimensione. */
.hero__payoff {
  margin: 0 0 var(--space-1);
  max-width: none;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
}

/* Sotto i 700px la caption ha quattro righe e i pallini di avanzamento
   stanno sullo stesso bordo inferiore: si alza la caption invece di
   spostare i pallini (che il JS usa come sono). */
@media (max-width: 699px) {
  .hero__caption { bottom: calc(48px + var(--space-4)); }
  .hero__payoff { font-size: 0.875rem; }

  /* Su telefono la caption occupa quasi tutta la larghezza e sale più in
     alto (il titolo va a tre righe): la velatura da sinistra non la copre
     più. Qui torna una sola velatura dal basso, ma più alta — misurata
     slide per slide a 390px: sotto il titolo nessuna area scende sotto
     3:1, e la parte alta della foto resta scoperta. */
  .hero__slide::after {
    background:
      linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0.46) 34%, rgba(0,0,0,0.12) 58%, rgba(0,0,0,0) 75%),
      linear-gradient(to bottom, rgba(0,0,0,0.28), rgba(0,0,0,0) 24%);
  }
}

/* --- «La nostra ricetta» ------------------------------------------
   Il riassunto di /azienda/ (opzione malsch_ricetta_breve), centrato e
   più grande del corpo. Il peso resta 400: la gerarchia la fa la
   dimensione, non il grassetto. Le parole si accendono allo scroll —
   la classe .scroll-color è nel markup, l'effetto in 50-scroll-color. */

.home-ricetta { text-align: center; }

.home-ricetta__testo {
  /* più largo di --measure perché il corpo è più grande: a questa
     dimensione 900px valgono ~55 caratteri per riga, la stessa misura
     di lettura di un testo a 18px dentro 720px. */
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(1.1875rem, 1rem + 1vw, 1.875rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.home-ricetta__link {
  max-width: none;
  margin: var(--space-4) 0 0;
}

/* Su schermo stretto la stessa frase occupa nove righe: centrate si
   leggono male (ogni riga riparte da un punto diverso). Sotto i 700px
   il blocco torna a sinistra, come tutto il resto della pagina. */
@media (max-width: 699px) {
  .home-ricetta { text-align: left; }
  .home-ricetta__testo { margin-inline: 0; }
}

/* --- Testa di sezione (arredi, progetti) ---------------------------
   Titolo e riga di testo a sinistra, ambientata a destra; il testo si
   appoggia al bordo basso della foto. Sotto i 900px si impila:
   prima il titolo, poi la foto. */

.home-head {
  row-gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.home-head__text > :last-child { margin-bottom: 0; }

.home-head__media { margin: 0; }
.home-head__media img {
  width: 100%;
  aspect-ratio: 3 / 2;      /* il formato nativo dei render di sezione */
  object-fit: cover;
  background: var(--color-bg-alt); /* il posto della foto si vede anche prima del load */
}

@media (min-width: 900px) {
  .home-head {
    align-items: end;
    margin-bottom: var(--space-8);
  }
  .home-head__text { grid-column: 1 / span 5; }
  .home-head__media { grid-column: 7 / span 6; }
}

/* --- Griglie di linea ----------------------------------------------
   Le copertine nuove degli arredi sono ambientate verticali 4:5, già
   tagliate sul formato del riquadro: devono riempirlo, non starci
   dentro con la cornice bianca che main.css riserva agli still life.
   La classe la mette front-page.php contando le copertine verticali
   della linea, non guardando lo slug: i letti (still life su fondo
   bianco, fuori scope in questo giro) restano come prima e cambieranno
   da soli il giorno in cui avranno le loro ambientate. */

.home-linea--foto .card--overlay .card__media img {
  object-fit: cover;
  padding: 0;
}

/* --- Filosofia -----------------------------------------------------
   I quattro pilastri incolonnati a sinistra, il dettaglio fotografico
   a destra che resta fermo mentre si legge (sticky, non fisso: si
   ferma dentro la sezione e riparte con lei). */

.home-filosofia .grid { row-gap: var(--space-6); }

.home-filosofia .pilastri {
  display: grid;
  row-gap: var(--space-6);
}

.home-filosofia__media { margin: 0; }
.home-filosofia__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--color-bg-alt);
}

@media (min-width: 900px) {
  .home-filosofia__testo { grid-column: 1 / span 6; }
  .home-filosofia__media {
    grid-column: 8 / span 5;
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
    align-self: start;
  }
}

/* Impilata, la foto va in apertura: in coda ai quattro pilastri
   resterebbe orfana in fondo alla sezione. */
@media (max-width: 899px) {
  .home-filosofia__media { order: -1; }
  .home-filosofia__media img { aspect-ratio: 3 / 2; }
}

/* --- Reduced motion -------------------------------------------------
   Lo sticky non è movimento richiesto dall'utente ma può disturbare
   chi ha chiesto meno moto: la colonna torna a scorrere con la pagina. */
@media (prefers-reduced-motion: reduce) {
  .home-filosofia__media { position: static; }
}