/* I video del sito (25/10/2026): fila «Guarda AcquaStream» nella home, video nelle pagine, lettore.
   Stessa grammatica della fila «per te» (audiences.css): titolo con eyebrow, frecce, locandine con
   la sfumatura in basso. Le locandine sono verticali 9:16 perché i film sono nati per il telefono. */

.guarda-hub {padding:10px clamp(22px,4.6vw,88px) 46px;scroll-margin-top:90px}
.guarda-heading {display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:24px}
.guarda-heading h2 {font-size:clamp(28px,3vw,40px);line-height:1.1;margin:9px 0 0;letter-spacing:-.045em}
.guarda-heading em {color:inherit;font-style:normal}
.guarda-tools {display:flex;align-items:end;gap:22px}
.guarda-tools>p {color:#b4b7bc;font-size:15px;line-height:1.6;margin:0;text-align:right}
.guarda-controls {display:flex;gap:8px}
.guarda-controls button {display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid #ffffff3d;background:#ffffff0d;color:#f5f5f5;cursor:pointer}
.guarda-controls button:hover {border-color:#9aebfd;color:#9aebfd}
.guarda-controls svg {width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.guarda-rail {display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,220px);gap:15px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.guarda-rail::-webkit-scrollbar {display:none}

.guarda-card {display:block;position:relative;isolation:isolate;aspect-ratio:9/16;border-radius:6px;overflow:hidden;color:#f5f5f5;text-decoration:none;background:#1b1d20;scroll-snap-align:start;transition:transform .22s cubic-bezier(.2,0,0,1)}
.guarda-card:after {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#08090bf0 4%,#08090b80 32%,#08090b00 62%)}
.guarda-card img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .45s cubic-bezier(.2,0,0,1)}
.guarda-card:hover {transform:translateY(-5px)}
.guarda-card:hover img {transform:scale(1.04)}
.guarda-card:focus-visible {outline:2px solid #9aebfd;outline-offset:3px}
/* Il play sta in basso a destra: al centro copriva le scritte incise nelle locandine. */
.guarda-play {position:absolute;right:14px;bottom:16px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#9aebfd;box-shadow:0 6px 20px #0009;transition:transform .22s cubic-bezier(.2,0,0,1)}
.guarda-play svg {width:18px;height:18px;margin-left:2px;fill:#102024}
.guarda-card:hover .guarda-play {transform:scale(1.08)}
.guarda-card-copy {position:absolute;inset:auto 64px 16px 16px;display:block}
.guarda-card-copy small {display:block;color:#9aebfd;font:700 13px Arial,Helvetica,sans-serif;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}
.guarda-card-copy strong {display:block;font:700 19px/1.12 Arial,Helvetica,sans-serif;letter-spacing:-.035em;margin-bottom:6px}
.guarda-durata {font:13px Arial,Helvetica,sans-serif;color:#c9ccd1}

/* Nelle pagine dell'archivio: testo a sinistra, film a destra; uno sopra l'altro sul telefono. */
.guarda-pagina {display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:clamp(22px,4vw,48px);align-items:center;margin:44px 0;padding:28px;border:1px solid #ffffff1a;border-radius:10px;background:#ffffff08}
.guarda-pagina h2 {margin:8px 0 12px}
.guarda-pagina-testo p {margin:0 0 10px}
.guarda-card-grande {width:100%}
.guarda-card-grande .guarda-card-copy strong {font-size:21px}

@media (max-width:700px) {
 .guarda-heading {display:block}
 .guarda-tools {justify-content:space-between;margin-top:12px}
 .guarda-tools>p {text-align:left;font-size:14px}
 .guarda-rail {grid-auto-columns:46vw}
 .guarda-pagina {grid-template-columns:1fr;padding:20px}
 .guarda-card-grande {max-width:62vw;justify-self:center}
}

/* Il lettore: verticale e centrato sul computer, a tutto schermo sul telefono. */
/* body dialog.guarda-dialog: style.css, cinema.css e catalogue.css danno a ogni <dialog> 960 px di larghezza,
   un fondo e un bordo; il lettore ha misure sue, verticali. */
body dialog.guarda-dialog {padding:0;border:0;border-radius:10px;background:#000;color:#f5f5f5;box-shadow:0 30px 90px #000b;
 height:min(88svh,900px);width:min(calc(min(88svh,900px) * 9 / 16),96vw);max-width:96vw;max-height:none;overflow:hidden}
body dialog.guarda-dialog::backdrop {background:#050608e0;backdrop-filter:blur(6px)}
/* style.css e flow.css danno ai video nei dialog 16:9 e un'altezza massima: qui il film è verticale e pieno. */
body dialog.guarda-dialog video {display:block;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain;background:#000}
.guarda-chiudi {position:absolute;top:10px;right:10px;z-index:3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff4d;background:#08090bb3;color:#f5f5f5;font-size:24px;line-height:1;cursor:pointer}
.guarda-chiudi:focus-visible,.guarda-fine a:focus-visible,.guarda-fine button:focus-visible {outline:2px solid #9aebfd;outline-offset:3px}
.guarda-fine {position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:28px;text-align:center;background:#08090bdb}
.guarda-fine[hidden] {display:none}
.guarda-fine p {margin:0;font:700 clamp(22px,2.4vw,28px)/1.15 Arial,Helvetica,sans-serif;letter-spacing:-.035em;max-width:16ch}
.guarda-fine .button {min-width:240px}
.guarda-rivedi {background:none;border:0;color:#9aebfd;font:700 14px Arial,Helvetica,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:10px}

@media (max-width:700px) {
 body dialog.guarda-dialog {width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;border-radius:0}
}

@media (prefers-reduced-motion:reduce) {
 .guarda-card,.guarda-card img,.guarda-play {transition:none}
 .guarda-card:hover,.guarda-card:hover img {transform:none}
}