/* ============================================================
   Griglia "ultimi video dai social" — Salviamo i Castagni
   File separato come topbar.css: fuori dalla portata del purge
   di Tailwind e dentro la CSP 'self'.
   ============================================================ */

.sc-wrap{ position:relative; }

/* mobile: carosello che scorre con lo scatto, si capisce che continua */
.sc-grid{
  display:flex; gap:.9rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.25rem .25rem 1rem; margin:0 -.25rem;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.sc-grid::-webkit-scrollbar{ display:none; }
.sc-card{ flex:0 0 63%; scroll-snap-align:center; }

@media (min-width:640px){
  .sc-grid{ display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; margin:0; padding:0; gap:1.1rem; }
  .sc-card{ flex:none; }
}
@media (min-width:1024px){
  .sc-grid{ grid-template-columns:repeat(6,1fr); gap:1rem; }
}

.sc-card{
  display:block; text-decoration:none; color:inherit;
  transition:transform .28s ease;
}
.sc-card:hover{ transform:translateY(-4px); }

/* ⚠️ thumb e didascalia sono <span> dentro un <a>: senza display:block
   restano inline e la didascalia esce dalla card, finendo sopra al bottone. */
.sc-thumb{
  display:block; position:relative; aspect-ratio:9/16; overflow:hidden;
  border-radius:.5rem; background:#42240d;
  box-shadow:0 4px 16px rgba(66,36,13,.18);
}
.sc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.sc-card:hover .sc-thumb img{ transform:scale(1.06); }

/* velo scuro in basso: la data resta leggibile su qualsiasi fotogramma */
.sc-thumb::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(to top,rgba(0,0,0,.62),transparent);
  pointer-events:none;
}

.sc-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:999px;
  background:rgba(255,248,241,.92); color:#42240d;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  transition:transform .28s ease, background .28s ease;
}
.sc-card:hover .sc-play{ transform:translate(-50%,-50%) scale(1.12); background:#F5C24B; }
.sc-play svg{ width:18px; height:18px; margin-left:2px; }

.sc-date{
  position:absolute; left:.6rem; bottom:.55rem; z-index:1;
  color:#fff8f1; font-size:12px; font-weight:600; letter-spacing:.02em;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

.sc-cap{
  display:block; margin:.6rem .1rem 0; font-size:13.5px; line-height:1.45;
  color:#50443d;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}


/* Segnaposto: tengono lo spazio prima che i video arrivino, cosi' la sezione
   non spinge giu' il resto della pagina quando si riempie. Tinta della
   superficie: se il json mancasse e restassero a vista, si leggono come
   spazio vuoto, non come riquadri rotti. */
.sc-skel{ pointer-events:none; }
.sc-skel .sc-thumb{ background:#f3e7ce; box-shadow:none; }
.sc-skel .sc-thumb::after{ display:none; }
/* stessa misura esatta di .sc-cap (13.5px x 1.45 x 2 righe): se il
   segnaposto e la didascalia non combaciano, la pagina fa un saltino */
.sc-cap-skel{ display:block; font-size:13.5px; line-height:1.45; height:2.9em; margin:.6rem .1rem 0; }

/* la sezione non esiste finche' non ci sono post: niente buco vuoto in home */
.sc-wrap[hidden]{ display:none; }