/* =============================================================================
   PUROTATTO — home (index.html)
   Dal 3/11 (Andrea, call 2/11: la home è «ancora povera») la hero e cinque blocchi: La collezione (le sei schede di categoria,
   tornate: regole .schede-cat in system.css) · primo stacco a tutto schermo (video) · In evidenza · secondo stacco (foto) · I nostri look.
   Prima, dal 29/10, solo hero, In evidenza e i look.
   Tessere del capo, didascalia dei look e testate sono componenti condivisi: css/system.css, sezioni 9 e 10.
   ============================================================================= */

/* Gli stacchi a tutto schermo (3/11, call 2/11; Gianluca: «ti metto a stacco delle foto di campagna grosse nella home», «immagini che
   ci fanno respirare il brand»). I blocchi si decidono adesso perché lo sviluppatore poi li programma fissi (Andrea): il formato è
   questo anche se oggi la foto giusta non c'è. SEGNAPOSTO DA SCATTARE APPOSTA tutti e due: il video lb-15-wide è tagliato da un
   verticale e le foto di campagna sono tutte 4:5; al cliente si chiede un video e una foto orizzontali fatti per questi blocchi.
   Sul computer 16:9 a tutta larghezza, ma mai più alti dello schermo meno l'header fisso (che da qui in giù è pieno): a 1440×900 sono
   alti 796 px, a 1920×1080 976 px, e la foto o il video si taglia sopra e sotto (object-fit). Sul telefono il verticale: il video
   lb-15 in 9:16, la foto intera in 4:5, sempre entro lo schermo. Un solo livello di testo (titolo Hatton sussurrato, come le hero) e
   il bottone a contorno, al centro; dietro un'ombra morbida, niente fasce. */
.stacco {   /* - 1px: il filo sotto l'header pieno */
  position: relative; overflow: hidden; color: var(--bianco); background: #3b312c;
  height: min(56.25vw, calc(100vh - var(--hdr) - 1px)); height: min(56.25vw, calc(100svh - var(--hdr) - 1px));
}
.stacco--video { margin-top: 2px; }                                  /* a filo sotto le schede, con la riga avorio della griglia */
.stacco--foto { margin-top: clamp(64px, 7vw, 112px); }               /* dopo In evidenza la stessa aria che c'è sopra i titoli di sezione */
.stacco-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.9); }
.stacco-media--alto { display: none; }                               /* il verticale solo sul telefono: nascosto non parte mai */
/* A74I1685: viso della modella dentro, al centro il muro di pietra. La foto è larga quanto il blocco e non si può spostare di lato:
   la si ingrandisce dell'8% tenendo fermo il bordo destro, così esce l'intonaco a sinistra e il titolo al centro non tocca più
   i capelli della modella (prima, a 1440 e a 1920, la M ci finiva sopra). Si toglie quando arriva la foto orizzontale vera. */
.stacco--foto .stacco-media { object-position: 50% 32%; transform: scale(1.08); transform-origin: 100% 30%; }
.stacco::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 34% 30% at 50% 50%, rgba(24, 18, 15, .34), rgba(24, 18, 15, 0));
}
.stacco-copy {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 var(--gutter); text-align: center;
}
.stacco-copy .titolo {
  --tr: var(--t-track); font-size: var(--t-hero); line-height: 1.25; margin-bottom: max(22px, var(--t-hero));
  white-space: nowrap;   /* su una riga come le hero: sul telefono «Autunno Inverno 2026» andava a capo */
}

@media (max-width: 759px) {
  .stacco--video { height: min(177.78vw, calc(100vh - var(--hdr) - 1px)); height: min(177.78vw, calc(100svh - var(--hdr) - 1px)); }
  .stacco--foto { height: min(125vw, calc(100vh - var(--hdr) - 1px)); height: min(125vw, calc(100svh - var(--hdr) - 1px)); margin-top: 56px; }
  .stacco-media--largo { display: none; }
  .stacco-media--alto { display: block; }
  .stacco-copy { padding: 0 12px; }
  .stacco::after { background: radial-gradient(ellipse 60% 26% at 50% 50%, rgba(24, 18, 15, .34), rgba(24, 18, 15, 0)); }
  /* La foto intera in 4:5: la modella sta a sinistra, alta a metà; titolo e bottone salgono sul muro sopra la sua testa, centrati */
  .stacco--foto .stacco-media { object-position: 50% 50%; transform: none; }
  .stacco--foto .stacco-copy { justify-content: flex-start; padding-top: 6%; }
  .stacco--foto::after { background: linear-gradient(to bottom, rgba(24, 18, 15, .44), rgba(24, 18, 15, 0) 40%); }   /* velo morbido dall'alto, come quello delle hero sotto il menu: in alto c'è l'architrave chiaro */
}

/* In evidenza (29/10): una fila che scorre di lato, con la tessera del capo nel taglio delle verticali di categoria (2:3).
   Stesso margine a sinistra e stesso spazio fra le tessere della categoria (16 px; sul telefono 8); a destra la fila va a filo
   dello schermo, così l'ultima tessera si vede a metà e dice che si scorre: quattro e mezza sul computer, tre e mezza sul tablet,
   una e mezza sul telefono. A fine corsa resta il margine anche a destra. La larghezza si conta sulla sezione (cqw), non sulla
   finestra, così la barra di scorrimento non sposta i conti. */
.home-evidenza { container-type: inline-size; }
.evidenza-vista { --margine: var(--gutter); --passo: 16px; --vede: 4.5; position: relative; }
.evidenza-fila {
  display: grid; grid-auto-flow: column; gap: var(--passo);
  grid-auto-columns: calc((100cqw - var(--margine) - (var(--vede) - .5) * var(--passo)) / var(--vede));
  margin-left: var(--margine); padding-right: var(--margine);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.evidenza-fila::-webkit-scrollbar { display: none; }
/* Il formato lo dà la tessera condivisa (system.css: oggi .tile in 2:3). Dal 3/11 qui non si forza più l'aspect-ratio: nel giro della
   call 2/11 nome e prezzo vanno sotto la foto (2:3) e la tessera diventa più alta della foto; un 2:3 imposto da qui la schiaccerebbe */
.evidenza-fila > .tile { scroll-snap-align: start; }
/* Dentro la fila le foto di una tessera cambiano solo con le sue freccette: il gesto di lato (dito o trackpad) muove la fila.
   Serve anche overscroll auto: col contain della tessera il gesto si fermava lì e la fila restava ferma */
.evidenza-fila .tile-scorri { overflow-x: hidden; overscroll-behavior-x: auto; }

/* Frecce sottili ai lati, al passaggio: nel margine a sinistra, sulla tessera a metà a destra; spente a inizio e fine corsa.
   Dietro la freccia una targa avorio leggera, larga quanto il margine: sulla foto scura (il gilet nero) la freccia sola spariva */
.evidenza-freccia {
  position: absolute; z-index: 6; top: 50%; width: max(32px, var(--margine)); height: 64px; margin-top: -32px;   /* sul computer nome e prezzo stanno sulla foto (3/11 sera): la tessera è alta quanto la foto */
  display: grid; place-items: center; color: var(--inchiostro); background: rgba(246, 242, 235, .86);
  opacity: 0; transition: opacity .35s var(--ease);
}
.evidenza-freccia .ico { width: 26px; height: 26px; stroke-width: 1.1; transition: transform .3s var(--ease); }
.evidenza-freccia .ico * { vector-effect: non-scaling-stroke; }
.evidenza-freccia--prima { left: 0; }
.evidenza-freccia--dopo { right: 0; }
.evidenza-freccia:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .home-evidenza:hover .evidenza-freccia:not(:disabled), .evidenza-freccia:focus-visible { opacity: 1; }
  .evidenza-freccia--prima:hover .ico { transform: translateX(-2px); }
  .evidenza-freccia--dopo:hover .ico { transform: translateX(2px); }
}

/* La riga di 1 px sotto la fila: il tratto scuro è la parte che si vede (--q, quanto) e si sposta con lo scorrimento (--p, dove) */
.evidenza-riga {
  position: relative; height: 1px; margin: clamp(24px, 2.4vw, 36px) var(--gutter) 0; overflow: hidden;
  background: var(--linea);
}
.evidenza-riga-segno {
  position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--q, 1) * 100%); background: var(--inchiostro);
  transform: translateX(calc(var(--p, 0) * (1 - var(--q, 1)) / var(--q, 1) * 100%));
}
.home-evidenza.is-ferma .evidenza-riga, .home-evidenza.is-ferma .evidenza-freccia { display: none; }   /* tutto in vista: niente da scorrere */

@media (max-width: 1023px) { .evidenza-vista { --vede: 3.5; } }
@media (max-width: 759px) {
  .evidenza-vista { --margine: 8px; --passo: 8px; --vede: 1.5; }
  .evidenza-riga { margin: 20px 8px 0; }
}
/* Sul telefono la fila si muove col dito: niente frecce, e la riga delle foto dentro la tessera non serve (le foto non si sfogliano) */
@media (hover: none), (pointer: coarse) {
  .evidenza-freccia { display: none; }
  .evidenza-fila .tile-riga { display: none; }
}