/* manifesto: CSS delle composizioni, portato dallo <style> dei componenti Astro (src/sezioni/manifesto/) e limitato alla classe della sezione. */

/* manifesto/Pelo.astro → .b-manifesto-pelo */
  .manifesto.b-manifesto-pelo { padding: clamp(96px, 22vh, 220px) var(--margine) clamp(48px, 10vh, 110px); display: grid; grid-template-columns: 1fr 2fr; align-items: end; gap: 24px; }
  .b-manifesto-pelo .frase-blocco { grid-column: 2; }
  .b-manifesto-pelo .frase { font: var(--peso-titoli) clamp(2.1rem, 5.2vw, 5.6rem)/1.02 var(--font-titoli); letter-spacing: -0.03em; color: var(--titoli); }
  .b-manifesto-pelo .frase-blocco .pelo { display: block; width: 100%; height: 40px; margin-top: 28px; overflow: visible; }
  .b-manifesto-pelo .frase-blocco .pelo path { fill: none; stroke: var(--extra-salvia); stroke-width: 2; vector-effect: non-scaling-stroke; }
  .b-manifesto-pelo .firma-testo { grid-column: 1; grid-row: 1; }
  @media (max-width: 700px) {
    .manifesto.b-manifesto-pelo { grid-template-columns: 1fr; }
    .b-manifesto-pelo .frase-blocco, .b-manifesto-pelo .firma-testo { grid-column: 1; grid-row: auto; }
  }

/* manifesto/Salute.astro → .b-manifesto-salute */
  .b-manifesto-salute svg { position: absolute; }
  .b-manifesto-salute .salute-scena {
    position: relative; height: 100svh; overflow: hidden;
    /* fisso: l'atmosfera con la superficie a metà è parte dell'effetto salute-bellezza (la linea dell'acqua coincide con --linea), non contenuto */
    background: #e8ebe3 url("../../assets/immagini/linea-acqua.webp") center / cover;
  }
  .b-manifesto-salute .strato { position: absolute; inset: 0; }
  .b-manifesto-salute .sopra { clip-path: inset(0 0 calc(100% - var(--linea, 52%)) 0); }
  .b-manifesto-salute .sotto { clip-path: inset(var(--linea, 52%) 0 0 0); filter: url(#acqua-mossa); }
  .b-manifesto-salute .parola {
    position: absolute; left: 0; right: 0; text-align: center; white-space: nowrap; text-transform: uppercase;
    font: var(--peso-titoli) clamp(3.4rem, 13vw, 13rem)/.9 var(--font-titoli); letter-spacing: -0.04em; color: var(--fondo-scuro);
  }
  .b-manifesto-salute .sotto .parola { color: #d7e3da; opacity: .85; }
  .b-manifesto-salute .parola.bellezza { top: 18%; }
  .b-manifesto-salute .parola.salute { top: 62%; }
  /* Senza JS: ordine finale, come con movimento ridotto. */
  @media (scripting: none) {
    .b-manifesto-salute .parola.bellezza { top: 62%; }
    .b-manifesto-salute .parola.salute { top: 18%; }
  }

  .b-manifesto-salute .didascalia {
    position: absolute; left: var(--margine); right: var(--margine); bottom: 28px; z-index: 3;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
    color: var(--testo-su-scuro); font-size: var(--scala-1); font-weight: 600; line-height: 1.25;
  }
  .b-manifesto-salute .didascalia strong { font-weight: inherit; }
  .b-manifesto-salute .didascalia .firma { color: var(--salvia-chiara); }
  /* Il testo intero arriva a fine corsa: nascosto solo con JS e movimento pieno. Serve da subito, prima che parta il motore:
     l'effetto legge l'opacità di partenza quando crea la scena. */
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .b-manifesto-salute .didascalia { opacity: 0; }
  }
  @media (max-width: 860px) {
    .b-manifesto-salute .didascalia { right: calc(var(--margine) + 72px); bottom: 32px; }
  }
  @media (max-width: 700px) {
    /* fisso: la stessa atmosfera dell'effetto, in versione ridotta per il telefono */
    .b-manifesto-salute .salute-scena { background-image: url("../../assets/immagini/linea-acqua-960.webp"); }
  }