/* ============================================================
   YouTube (Il Salotto della Blu) - regole di pagina
   Si carica dopo style.css. Usa solo i token di :root e non
   ridefinisce i componenti condivisi (.vfeat, .vgrid, .vcard,
   .vmore stanno nel blocco YOUTUBE di style.css): aggiunge la
   riga di data (e ospite) sotto i titoli, il titolo della griglia,
   il rimando all'Open House sotto la puntata sul cantiere
   Minghetti, i movimenti della pagina e la finestra del video
   (<dialog class="ytm">, creata da main.js al primo clic).
   ============================================================ */

/* ── testata ─────────────────────────────────────────────────
   Ferma all'apertura, come in tutte le pagine. */

/* telefono: il testo introduttivo resta leggibile ma più raccolto
   (16px su interlinea 1,5 invece di 17px su 1,6) */
@media (max-width:680px){
  .phead--yt .phead__x{font-size:1rem;line-height:1.5;margin-top:12px}
  .phead--yt .phead__cta{margin-top:22px}
}

/* ── miniature ───────────────────────────────────────────────
   Le miniature del Salotto hanno titolo e domanda stampati al
   centro: il pulsante play va in basso a sinistra (la durata
   resta in basso a destra), così non copre il testo né i volti. */
.yt .vcard__ph .vcard__play{inset:auto auto 12px 12px;width:46px;height:46px}
.yt .vcard__ph .vcard__play .ic{width:18px;height:18px}
.yt .vfeat .vcard__play{inset:auto auto 18px 18px;width:64px;height:64px}
.yt .vfeat .vcard__play .ic{width:24px;height:24px}
@media (max-width:680px){
  .yt .vfeat .vcard__play{inset:auto auto 12px 12px;width:52px;height:52px}
  .yt .vfeat .vcard__play .ic{width:20px;height:20px}
}

/* hover e focus: la miniatura si alza di poco e ingrandisce la foto,
   il pulsante play diventa navy e cresce */
.yt .vcard__ph{
  transition:transform .45s cubic-bezier(.2,.6,.2,1),box-shadow .45s cubic-bezier(.2,.6,.2,1);
}
.yt .vcard__ph img{transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.yt .vcard__play{
  transition:background-color .25s ease,color .25s ease,transform .35s cubic-bezier(.2,.6,.2,1);
}
.yt :is(.vcard,.vfeat):hover .vcard__ph,
.yt .vcard__ph:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.yt :is(.vcard,.vfeat):hover .vcard__ph img,
.yt .vcard__ph:focus-visible img{transform:scale(1.06)}
.yt :is(.vcard,.vfeat):hover .vcard__play,
.yt .vcard__ph:focus-visible .vcard__play{background:var(--blu-900);color:#fff;transform:scale(1.1)}
.yt .vcard:hover .vcard__t a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.yt .vfeat:hover .vfeat__t a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}


/* ── puntata in evidenza ─────────────────────────────────────
   Il titolo è un link (stesso video della miniatura) fuori dal
   giro del Tab: la miniatura è l'unica fermata. */
.vfeat__t a{text-decoration:none}
.vfeat__t a:hover{text-decoration:underline;text-underline-offset:4px}
.vfeat__b .vcard__m{margin-top:18px}
@media (max-width:680px){
  .yt .vfeat__x{font-size:1rem;line-height:1.5;margin-top:10px}
  .yt .vfeat__b .vcard__m{margin-top:14px}
}

/* ── griglia delle puntate ───────────────────────────────── */
.yt__h{margin-bottom:24px}
/* titoli e testo senza una parola sola sull'ultima riga */
.yt .vcard__t,.yt .vfeat__t,.yt .vfeat__x{text-wrap:pretty}

/* data di uscita (e ospite della puntata, se c'è), con icona */
.vcard__m{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:.875rem;line-height:1.5;color:var(--muted)}
.vcard__m > span{display:inline-flex;align-items:flex-start;gap:7px}
.vcard__m .ic{width:15px;height:15px;flex:none;margin-top:.2em;color:var(--blu-900)}

/* rimando all'Open House sotto la puntata sul cantiere Minghetti */
.vcard__more{margin-top:10px}
.vcard__more .linkish{font-size:.875rem;line-height:1.45}

/* su telefono la riga di data sta subito sotto il titolo, che
   ha già 12px di area di tocco in più (style.css) */
@media (max-width:680px),(pointer:coarse){
  .vcard__t + .vcard__m{margin-top:0}
}
@media (max-width:680px){
  .yt .vcard__t{line-height:1.3}
}

/* ── entrata allo scroll ─────────────────────────────────────
   main.js mette .yt-rv su puntata in evidenza, titolo e card che
   all'apertura sono sotto la prima schermata (quelle già visibili
   restano ferme) e aggiunge .is-in quando entrano; --yt-d sfasa le
   card che entrano insieme. Usa translate e scale (non transform),
   così gli hover restano indipendenti. */
.yt-rv{
  opacity:0;translate:0 26px;
  transition:opacity .7s ease var(--yt-d,0ms),translate .8s cubic-bezier(.2,.6,.2,1) var(--yt-d,0ms);
}
.yt-rv.is-in{opacity:1;translate:none}
/* ultima puntata: la foto si assesta e il testo arriva da destra */
.vfeat.yt-rv{translate:none}
.vfeat.yt-rv .vcard__ph img{scale:1.12;transition:transform .7s cubic-bezier(.2,.6,.2,1),scale 1.4s cubic-bezier(.2,.6,.2,1)}
.vfeat.yt-rv.is-in .vcard__ph img{scale:1}
.vfeat.yt-rv .vfeat__b{
  opacity:0;translate:28px 0;
  transition:opacity .8s ease .2s,translate .9s cubic-bezier(.2,.6,.2,1) .2s;
}
.vfeat.yt-rv.is-in .vfeat__b{opacity:1;translate:none}
@media (max-width:900px){
  .vfeat.yt-rv .vfeat__b{translate:0 18px}
}

/* ── finestra del video ──────────────────────────────────────
   <dialog class="ytm"> a tutto schermo: velo navy sfocato, video
   16:9 al centro, titolo e X sopra. Si apre con un leggero zoom. */
.ytm{
  --focus:var(--blu-300);
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;
  padding:16px 0;border:0;background:transparent;color:#fff;overflow:hidden;
}
.ytm[open]{display:grid;place-items:center}
.ytm::backdrop{
  background:rgba(19,29,88,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .25s ease;
}
.ytm.is-open::backdrop{opacity:1}
html:has(.ytm[open]){overflow:hidden}
.ytm__in{
  width:calc(100% - 2 * var(--pad));
  width:min(1200px,calc(100% - 2 * var(--pad)),calc((100vh - 150px) * 16 / 9));
  width:min(1200px,calc(100% - 2 * var(--pad)),calc((100dvh - 150px) * 16 / 9));
  opacity:0;transform:translateY(18px) scale(.97);
  transition:opacity .22s ease,transform .35s cubic-bezier(.2,.7,.2,1);
}
.ytm.is-open .ytm__in{opacity:1;transform:none}
.ytm__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.ytm__t{font-size:1.0625rem;font-weight:600;line-height:1.35;color:#fff;text-wrap:balance}
.ytm__close{
  flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(10,16,48,.6);color:#fff;
  transition:background-color .2s ease,border-color .2s ease,transform .3s cubic-bezier(.2,.6,.2,1);
}
.ytm__close:hover{border-color:#fff;background:rgba(255,255,255,.12);transform:rotate(90deg)}
.ytm__close .ic{width:20px;height:20px}
.ytm__frame{
  aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
}
.ytm__frame iframe{display:block;width:100%;height:100%;border:0}
@media (max-width:680px){
  .ytm__t{font-size:1rem}
  .ytm__bar{margin-bottom:12px}
}
/* telefono in orizzontale: meno spazio sopra il video */
@media (max-height:500px){
  .ytm{padding:8px 0}
  .ytm__in{width:min(1200px,calc(100% - 2 * var(--pad)),calc((100dvh - 76px) * 16 / 9))}
  .ytm__bar{margin-bottom:8px}
  .ytm__close{width:44px;height:44px}
}

@media (prefers-reduced-motion:reduce){
  .phead--yt .phead__h1,.phead--yt .phead__x,.phead--yt .phead__cta{animation:none}
  .yt :is(.vcard,.vfeat):hover .vcard__ph,.yt .vcard__ph:focus-visible{transform:none}
  .yt :is(.vcard,.vfeat):hover .vcard__ph img,.yt .vcard__ph:focus-visible img{transform:none}
  .ytm__close:hover{transform:none}
}