/* UniHouse — the five improvements chosen by Marco on 2026-10-19 (Step 8 of cd-lab/plans/2026-10-18-unihouse-fraschetta-sito-nostro.md):
   testata, etichette, piatto, foto, movimento. They were the variants of the copy 8092 (prove/miglioramenti/2026-10-18/VARIANTI.md),
   always on here. Values from token.css; tested with taste-skill v2 (direction «place-carries-it», 2026-10-18). */

/* ── v-testata: the building's own photograph carries the first screen ───────────────────────────────────────────── */
[data-nome="Hero"] { min-height: clamp(520px, calc(100svh - 170px), 820px);   /* bar and bando strip are ~170 px: the buttons stay on the first screen */
  display: flex; flex-direction: column; justify-content: flex-end; }
[data-nome="Hero"] .contenitore { width: 100%; }
/* No green wash over the photo: a neutral scrim only under the text, bottom left (the one gradient the house rules allow) */
[data-nome="Hero"] .sez-velo { background: linear-gradient(to top, rgba(10, 20, 15, .82) 0%, rgba(10, 20, 15, .62) 32%, rgba(10, 20, 15, .25) 55%, rgba(10, 20, 15, 0) 72%) !important; }
[data-nome="Hero"].sez-alto-large { padding-top: 0; }
[data-nome="Hero"].sez-basso-large { padding-bottom: 40px; }
[data-nome="Hero"] .pulsanti { margin-bottom: 0; }
[data-nome="Hero"] .sez-foto img { object-position: 50% 40%; }
[data-nome="Hero"] #e1 { display: none; }
[data-nome="Hero"] h1 { font-size: clamp(2.6rem, 6.4vw, 6rem); line-height: 1; letter-spacing: -.025em; max-width: 13ch; margin-bottom: 20px; }
[data-nome="Hero"] .testo { font-size: var(--t-lede); max-width: 44ch; color: #fff; }
@media (max-width: 639px) {
  [data-nome="Hero"] { min-height: 82svh; }
  /* on the phone the text covers most of the photo: the scrim reaches the top of the headline */
  [data-nome="Hero"] .sez-velo { background: linear-gradient(to top, rgba(10, 20, 15, .85) 0%, rgba(10, 20, 15, .7) 55%, rgba(10, 20, 15, .45) 80%, rgba(10, 20, 15, .2) 100%) !important; }
}

/* ── v-etichette: no small uppercase labels above headings; the one with real information becomes a sentence ────────── */
p.titolo--h6:not(#e5) { display: none; }
#e5 { text-transform: none !important; letter-spacing: 0 !important; font: 600 var(--t-lede)/1.4 var(--testo) !important; color: var(--verde) !important; margin-bottom: 8px; }
.scheda-meta { text-transform: none; letter-spacing: 0; font-size: var(--t-piccolo); }
.occhiello { text-transform: none; letter-spacing: 0; font-size: var(--t-testo); }

/* ── v-piatto: no shadows at rest and no hairlines; surfaces separated by one tone step ───────────────────────────────── */
.barra { box-shadow: none; }
.scheda, .uh-flusso, #e7 > .scheda, #e9 > .scheda { box-shadow: none !important; }
.sez--default .schede--default .scheda, .sez--default .scheda--chiara, .sez--default .uh-flusso { background: var(--crema); }
.uh-passo { border: 0 !important; background: #fff !important; }
.uh-ultimo { background: var(--oro-chiaro) !important; }
.riga--divisa > .col, .riga--divisa > .col::before { border: 0 !important; }
.divisore { border: 0; margin: 12px 0; }

/* ── v-foto: the apartments shown by their photographs, large, with the words under them ─────────────────────────────── */
@media (min-width: 640px) { [data-nome="Alloggi"] .schede { --colonne: 2; gap: 48px 32px; } }
[data-nome="Alloggi"] .scheda { background: none !important; color: var(--ink); box-shadow: none !important; border-radius: 0; overflow: visible; }
[data-nome="Alloggi"] .scheda-foto { aspect-ratio: 3 / 2; border-radius: var(--raggio); }
[data-nome="Alloggi"] .scheda-corpo { padding: 16px 0 0; }
[data-nome="Alloggi"] .scheda .titolo { color: var(--verde-scuro) !important; font-size: var(--t-h3); }
[data-nome="Alloggi"] .scheda-testo { color: var(--ink); max-width: 46ch; }

/* ── v-movimento: the hero photo opens like a shutter, section parts rise in once (assets/js/movimento.js) ─────────────── */
/* Not when the reader asked for fewer animations or a simplified page in the accessibility panel (cd-accessibilita). */
@media (prefers-reduced-motion: no-preference) {
  html:not(.cd-a11y-fermo, .cd-a11y-semplice) .js-movimento [data-nome="Hero"] .sez-foto img { animation: uh-otturatore 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  html:not(.cd-a11y-fermo, .cd-a11y-semplice) .js-entra { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--ritardo, 0ms); }
  html:not(.cd-a11y-fermo, .cd-a11y-semplice) .js-entra.dentro { opacity: 1; transform: none; }
  .pulsante { transition: transform .12s ease, background-color .15s, color .15s; }
  .pulsante:active { transform: scale(.97); }
}
/* The photo grows from 1.12 while it opens: its box clips it, so the page never scrolls sideways on the phone */
[data-nome="Hero"] .sez-foto { overflow: hidden; }
@keyframes uh-otturatore { from { clip-path: inset(0 0 100% 0); transform: scale(1.12); } to { clip-path: inset(0); transform: scale(1); } }