/* Home · 3DiciFlow e le 9 dimensioni del Flow (components/home/3diciFlow.inc.php) */

.flow { padding: var(--sezione) 0; overflow: hidden; }
.flow__marchio { font-size: min(9rem, (100vw - 2 * var(--gutter)) / 8.6); letter-spacing: 0; line-height: .9; margin-bottom: clamp(2.5rem, 5vw, 4rem); color: var(--blu); }
.flow__marchio .m { color: var(--blu); -webkit-text-stroke: 0; }
.flow__griglia { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.flow__testo p { font-size: 1.125rem; line-height: 1.65; max-width: 62ch; }
.flow__testo p:first-child { font-size: var(--t-lead); font-weight: 700; font-stretch: 110%; }
.flow__goccia { margin: 0; }
.flow__goccia img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(1.1); }
@media (max-width: 900px) { .flow__griglia { grid-template-columns: 1fr; } .flow__goccia { max-width: 26rem; } }

/* Le 9 dimensioni */
.dimensioni { margin-top: clamp(4rem, 8vw, 6.5rem); }
.dimensioni__testa { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: end; margin-bottom: 2rem; }
.dimensioni ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--blu); }
.dimensioni li { padding: 1.5rem 1.5rem 1.75rem 0; border-bottom: 1px solid rgba(0, 26, 68, .3); display: grid; grid-template-columns: 2.75rem 1fr; gap: .25rem .75rem; }
.dimensioni li:not(:nth-child(3n + 1)) { padding-left: 1.5rem; border-left: 1px solid rgba(0, 26, 68, .3); }
.dimensioni .n { grid-row: span 2; font-size: 2.25rem; font-weight: 800; font-stretch: 125%; line-height: 1; font-variant-numeric: tabular-nums; }
.dimensioni h4 { font-size: 1.125rem; font-stretch: 110%; font-weight: 750; line-height: 1.25; margin-top: .2rem; }
.dimensioni li p { font-size: .9375rem; line-height: 1.5; margin: .35rem 0 0; color: #0d3a37; }
@media (max-width: 860px) {
  .dimensioni ol { grid-template-columns: 1fr; }
  .dimensioni li, .dimensioni li:not(:nth-child(3n + 1)) { padding-left: .9rem; border-left: 0; padding-right: .9rem; }
}
.dimensioni__fonte { margin-top: 1.25rem; color: #0d3a37; max-width: 80ch; }

/* Tappe: le 9 dimensioni si accendono quando la linea del Flow ci passa */
.js .dimensioni li .n { color: transparent; -webkit-text-stroke: 1.5px var(--blu); transition: color .45s var(--esce) var(--ritardo, 0s); }
.js .dimensioni li { transition: background-color .6s var(--esce) var(--ritardo, 0s); }
.js .dimensioni ol.composta li .n, .js .dimensioni li.toccata .n { color: var(--blu); }
.js .dimensioni ol.composta li, .js .dimensioni li.toccata { background-color: rgba(0, 26, 68, .05); }

/* Testi giustificati (richiesta della Dottoressa) */
.flow__testo p, .dimensioni li p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }