/* Il video in cima agli esempi (voce 22/10 (3)): lo scheletro, uguale per
   tutti; parole, colori e posizione li da' il foglio di ogni esempio. Il
   poster e' nella pagina ed e' l'LCP; il video (clip.js) arriva dopo. */
.clip{position:relative;display:grid;min-height:var(--clip-h,calc(100svh - 5.5rem));overflow:hidden;background:#141414;isolation:isolate;padding:0}
.clip-film{position:absolute;inset:0;z-index:-1}
.clip-film picture,.clip-film img,.clip-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 1 px piu' stretto per lato del poster: per l'LCP Chrome tiene l'elemento
   piu' grande, e il video non deve mai superare il poster */
.clip-film video{left:1px;width:calc(100% - 2px);opacity:0;transition:opacity .9s ease}
.clip-film.acceso video{opacity:1}
/* il fuoco orizzontale del video e del suo poster (clip_hero.py, FUOCO): stessa
   object-position per l'immagine e per il video, cosi' la fetta del telefono
   e' la stessa e quando il video parte non salta (voce Cowork 24/10 (3)) */
.clip-film.fx-0 img,.clip-film.fx-0 video{object-position:0% 50%}.clip-film.fx-5 img,.clip-film.fx-5 video{object-position:5% 50%}.clip-film.fx-10 img,.clip-film.fx-10 video{object-position:10% 50%}.clip-film.fx-15 img,.clip-film.fx-15 video{object-position:15% 50%}.clip-film.fx-20 img,.clip-film.fx-20 video{object-position:20% 50%}.clip-film.fx-25 img,.clip-film.fx-25 video{object-position:25% 50%}.clip-film.fx-30 img,.clip-film.fx-30 video{object-position:30% 50%}.clip-film.fx-35 img,.clip-film.fx-35 video{object-position:35% 50%}.clip-film.fx-40 img,.clip-film.fx-40 video{object-position:40% 50%}.clip-film.fx-45 img,.clip-film.fx-45 video{object-position:45% 50%}.clip-film.fx-55 img,.clip-film.fx-55 video{object-position:55% 50%}.clip-film.fx-60 img,.clip-film.fx-60 video{object-position:60% 50%}.clip-film.fx-65 img,.clip-film.fx-65 video{object-position:65% 50%}.clip-film.fx-70 img,.clip-film.fx-70 video{object-position:70% 50%}.clip-film.fx-75 img,.clip-film.fx-75 video{object-position:75% 50%}.clip-film.fx-80 img,.clip-film.fx-80 video{object-position:80% 50%}.clip-film.fx-85 img,.clip-film.fx-85 video{object-position:85% 50%}.clip-film.fx-90 img,.clip-film.fx-90 video{object-position:90% 50%}.clip-film.fx-95 img,.clip-film.fx-95 video{object-position:95% 50%}.clip-film.fx-100 img,.clip-film.fx-100 video{object-position:100% 50%}
.clip::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--clip-velo,linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.2) 55%,rgba(0,0,0,.05)))}
.clip-parole{position:relative;z-index:1;padding:clamp(1.5rem,5vw,4rem) var(--bordo,1.5rem) 5.6rem;color:#fff;max-width:56rem}
/* il velo sotto le parole, come nelle anteprime (voce Cowork 26/10 (1)): il
   velo della sezione e' disegnato per una misura dello schermo, e quando le
   parole escono dalla parte scura su un fotogramma chiaro non si leggono.
   Un rettangolo grande quanto il blocco delle parole, sfumato su tutti i lati,
   col colore della pagina in --velo-parole. Misurato con analisi/contrasto-clip.js. */
.clip-parole::before{content:"";position:absolute;z-index:-1;inset:calc(-1 * var(--velo-f,5rem));pointer-events:none;background:var(--velo-parole,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--velo-f,5rem) calc(100% - var(--velo-f,5rem)),transparent),linear-gradient(180deg,transparent,#000 var(--velo-f,5rem) calc(100% - var(--velo-f,5rem)),transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 var(--velo-f,5rem) calc(100% - var(--velo-f,5rem)),transparent),linear-gradient(180deg,transparent,#000 var(--velo-f,5rem) calc(100% - var(--velo-f,5rem)),transparent);mask-composite:intersect}
.clip-nome,.clip-frase{display:block}
.clip-frase{margin-top:.9rem;max-width:32ch}
.clip-btn{display:inline-block;margin-top:1.4rem;text-decoration:none;padding:.95rem 1.5rem;font-weight:700}
.clip-ferma{position:absolute;z-index:3;right:var(--bordo,1.5rem);bottom:1rem;font:600 .8rem/1 system-ui,sans-serif;color:#fff;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.45);border-radius:99px;padding:.65rem 1rem;cursor:pointer}
/* la fonte lascia sempre posto al bottone «Ferma il video» (largo circa 7rem) e
   ai due margini: con 60% o con 100% - 13rem, fra 320 e 360 px andava su quattro
   o cinque righe e copriva il bottone del titolo, o il bottone del video
   (voce Cowork 26/10 (1)) */
.clip-fonte{position:absolute;z-index:2;left:var(--bordo,1.5rem);bottom:1rem;font:400 .75rem/1.3 system-ui,sans-serif;color:#fff;
  background:rgba(0,0,0,.6);padding:.3rem .7rem;border-radius:12px;max-width:calc(100% - 2 * var(--bordo,1.5rem) - 9rem)}

/* ── il secondo video, più giù (voce 23/10 (5)) ─────────────────────────────
   Il poster è la foto; il video ci entra sopra in dissolvenza quando gira. Il
   colore del bottone e della riga li dà il foglio di ogni esempio (--sv-*). */
.secondo{position:relative;overflow:hidden;background:#000;aspect-ratio:16/9;width:100%}
.secondo picture,.secondo img{display:block;width:100%;height:100%;object-fit:cover}
.secondo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.secondo.acceso video{opacity:1}
.secondo-ferma{position:absolute;right:.75rem;bottom:.75rem;z-index:2;font:600 .85rem/1 system-ui,sans-serif;min-height:44px;padding:.65rem .95rem;
  border:1px solid rgba(255,255,255,.55);border-radius:999px;background:var(--sv-fondo,rgba(15,15,15,.78));color:var(--sv-testo,#fff);cursor:pointer}
.secondo-ferma:focus-visible{outline:2px solid #fff;outline-offset:2px}
.secondo-ferma[hidden]{display:none}
.secondo-fonte{position:absolute;left:.75rem;bottom:.75rem;z-index:2;margin:0;font:400 .72rem/1.3 system-ui,sans-serif;color:#fff;
  background:rgba(10,10,10,.72);padding:.3rem .55rem;border-radius:999px;max-width:calc(100% - 11rem)}
@media (prefers-reduced-motion:reduce){.secondo video{transition:none}}

/* i campi restano nel loro riquadro (voce Cowork 26/10 (1)): un input ha una
   larghezza minima propria, e dentro una griglia allargava la cella fino a
   uscire dal modulo (Nome e Telefono affiancati, l'Email del B&B sopra il Nome) */
input,select,textarea{min-width:0;max-width:100%;box-sizing:border-box}
form label,form .riga>*,form .bk-riga>*{min-width:0}