/* ===== Carosello "Articoli correlati" =====================================
   Classi prefissate .ccorr-* per non collidere con il carosello della home
   (.caro-*) ne' col tema WordPress legacy delle pagine non convertite.
   Ogni var() ha un fallback: funziona anche dove il design system non e'
   caricato. Generato/gestito da _CAROSELLO/genera_carosello.py
   ========================================================================= */

.ccorr{
  position:relative; overflow:hidden; clear:both;
  margin:56px 0 0; padding:44px 0 40px;
  background:
    radial-gradient(900px 380px at 12% -10%, rgba(216,31,42,.07), transparent 60%),
    radial-gradient(760px 340px at 92% 110%, rgba(31,42,55,.08), transparent 62%),
    var(--bg2,#f5f7fa);
  border-top:1px solid var(--linea,#e6eaef);
  font-family:var(--font-testo,"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif);
  box-sizing:border-box;
}
.ccorr *,.ccorr *::before,.ccorr *::after{box-sizing:border-box}
.ccorr::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--linea,#e6eaef) 1px,transparent 1px),
                   linear-gradient(90deg,var(--linea,#e6eaef) 1px,transparent 1px);
  background-size:64px 64px; opacity:.35;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 85%);
          mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 85%);
}
.ccorr-wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 22px}

.ccorr-head{max-width:760px}
.ccorr-eyebrow{
  font:700 12px/1 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase;
  color:var(--rosso,#D81F2A); margin:0 0 10px;
}
.ccorr-head h2{
  margin:0 0 8px; font-family:var(--font-titoli,"Roboto Slab",Georgia,serif);
  font-size:1.7rem; line-height:1.25; color:var(--navy,#1F2A37);
}
.ccorr-head p{margin:0;font-size:.98rem;line-height:1.6;color:var(--muted,#5b6672)}

.ccorr-viewport{overflow:hidden;padding:22px 2px 26px;cursor:grab}
.ccorr-viewport.is-drag{cursor:grabbing}
.ccorr-viewport.is-drag a{pointer-events:none}
.ccorr-track{display:flex;gap:22px;width:max-content;will-change:transform;margin:0;padding:0;list-style:none}

.ccorr-card{
  position:relative;flex:0 0 320px;width:320px;display:flex;flex-direction:column;
  background:var(--bg,#fff);border:1px solid var(--linea,#e6eaef);border-radius:var(--radius,14px);
  overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:var(--ombra-s,0 2px 10px rgba(31,42,55,.06));
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .3s;
}
.ccorr-card:hover,.ccorr-card:focus-visible{
  transform:translateY(-10px);box-shadow:0 22px 44px rgba(31,42,55,.18);
  border-color:var(--rosso,#D81F2A);text-decoration:none;
}
.ccorr-card:focus-visible{outline:3px solid var(--rosso,#D81F2A);outline-offset:3px}

.ccorr-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#dfe4ea}
.ccorr-media img{
  width:100%;height:100%;object-fit:cover;display:block;margin:0;border:0;max-width:none;
  transform:scale(1.02);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s;filter:saturate(.92);
}
.ccorr-card:hover .ccorr-media img{transform:scale(1.12);filter:saturate(1.05)}
.ccorr-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(31,42,55,0) 45%,rgba(31,42,55,.55));opacity:.85;transition:opacity .4s;
}
.ccorr-card:hover .ccorr-media::after{opacity:.6}

.ccorr-chip{
  position:absolute;left:12px;bottom:12px;z-index:2;
  font:600 11px/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:rgba(216,31,42,.92);padding:7px 11px;border-radius:999px;
  box-shadow:0 4px 14px rgba(216,31,42,.35);
}

.ccorr-body{padding:18px 18px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.ccorr-body h3{
  margin:0;font-family:var(--font-titoli,"Roboto Slab",Georgia,serif);
  font-size:1.06rem;line-height:1.35;color:var(--navy,#1F2A37);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ccorr-body p{
  margin:0;font-size:.9rem;line-height:1.55;color:var(--muted,#5b6672);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ccorr-more{
  margin-top:auto;padding-top:6px;font-weight:700;font-size:.88rem;
  color:var(--rosso,#D81F2A);display:inline-flex;align-items:center;gap:7px;
}
.ccorr-more span{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ccorr-card:hover .ccorr-more span{transform:translateX(6px)}

.ccorr-nav{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:4px}
.ccorr-btn{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--linea,#e6eaef);background:var(--bg,#fff);
  color:var(--navy,#1F2A37);font-size:19px;line-height:1;cursor:pointer;
  box-shadow:var(--ombra-s,0 2px 10px rgba(31,42,55,.06));
  display:grid;place-items:center;transition:background .25s,color .25s,transform .25s,border-color .25s;
}
.ccorr-btn:hover{background:var(--rosso,#D81F2A);border-color:var(--rosso,#D81F2A);color:#fff;transform:scale(1.08)}
.ccorr-btn:focus-visible{outline:3px solid var(--rosso,#D81F2A);outline-offset:3px}
.ccorr-btn[disabled]{opacity:.35;cursor:default;transform:none}

@media (max-width:640px){
  .ccorr{padding:34px 0 30px;margin-top:38px}
  .ccorr-wrap{padding:0 16px}
  .ccorr-head h2{font-size:1.4rem}
  .ccorr-card{flex:0 0 268px;width:268px}
}
@media (prefers-reduced-motion:reduce){
  .ccorr-card,.ccorr-media img,.ccorr-more span{transition:none!important}
}