/* Ctrl Studio, blog (prefisso cb-). Stessa grammatica della sezione Lavori: fondo carta, filetti, mono per i dati.
   Tre viste dagli stessi dati: copertina (articolo grande + lista), indice, griglia. */
.cb {
  --cb-paper: #f4f4f4;
  --cb-ink: #121212;
  --cb-text: #212121;
  --cb-muted: #5f5f66;
  --cb-rule: #d4d4db;
  --cb-wash: #e8e8ec;
  --cb-blue: #2e50ff;
  --cb-white: #ffffff;
  --cb-f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cb-f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --cb-ease: cubic-bezier(.165, .84, .44, 1);
  position: relative;
  background: var(--cb-paper);
  color: var(--cb-text);
  font-family: var(--cb-f-sans);
  padding-block: clamp(4rem, 9vw, 7.5rem);
  padding-left: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 4vw, 56px), env(safe-area-inset-right, 0px));
}
.cb *, .cb *::before, .cb *::after { box-sizing: border-box; }
.cb [hidden] { display: none !important; }
.cb :focus-visible { outline: 2px solid var(--cb-blue); outline-offset: 3px; }
.cb a { color: inherit; text-decoration: none; text-transform: none; letter-spacing: normal; }
/* lo stile globale del sito mette padding e margine alle immagini: qui no */
.cb img { margin: 0; padding: 0; border: 0; max-width: none; }
/* reset a specificita' bassa (:where): batte gli stili globali sui tag ma lascia vincere le classi cb- */
.cb :where(h2, h3, p, ol, li, figure) { margin: 0; padding: 0; }
.cb :where(ol) { list-style: none; }
.cb :where(li) { max-width: none; }
/* in Webflow le Collection List portano solo i dati: blog.js costruisce le viste */
.cb .w-dyn-list { display: none; }
.cb-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- testata ---------- */
.cb-head { display: grid; gap: 1.6rem; margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.cb-eyebrow { display: flex; justify-content: space-between; gap: 1rem; padding-top: .9rem; border-top: 1px solid var(--cb-ink); font: 500 .75rem/1 var(--cb-f-mono); text-transform: uppercase; letter-spacing: .09em; color: var(--cb-muted); }
.cb-eyebrow b { font-weight: 500; color: var(--cb-ink); }
.cb-eyebrow sup { font-size: .62rem; color: var(--cb-blue); margin-left: .2em; letter-spacing: 0; }
.cb-lede { max-width: 46ch; font: 500 clamp(1.45rem, 2.55vw, 2.35rem)/1.12 var(--cb-f-sans); letter-spacing: -.034em; color: var(--cb-ink); text-wrap: balance; }

/* ---------- comandi: ordine, ricerca, viste, categorie ---------- */
.cb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; padding-block: .75rem; border-top: 1px solid var(--cb-rule); }
.cb-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--cb-rule); border-radius: 100vw; }
.cb-sort, .cb-view { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border: 0; border-radius: 100vw; background: none; color: var(--cb-muted); font: 500 .72rem/1 var(--cb-f-mono); text-transform: uppercase; letter-spacing: .06em; transition: background .2s, color .2s; white-space: nowrap; }
.cb-sort:hover, .cb-view:hover { color: var(--cb-ink); }
.cb-sort[aria-pressed="true"], .cb-view[aria-pressed="true"] { background: var(--cb-ink); color: var(--cb-white); }
.cb-view kbd { font: 500 .62rem/1 var(--cb-f-mono); padding: .16rem .3rem .2rem; border: 1px solid currentColor; border-bottom-width: 2px; border-radius: .25rem; opacity: .55; }
.cb-views { margin-left: auto; }
.cb-search { position: relative; flex: 1 1 14rem; max-width: 22rem; }
.cb-search input { width: 100%; height: 2.45rem; margin: 0; padding: 0 1rem 0 2.2rem; border: 1px solid var(--cb-rule); border-radius: 100vw; background: var(--cb-white); color: var(--cb-ink); font: 400 .9rem/1 var(--cb-f-sans); letter-spacing: -.01em; box-shadow: none; outline: none; -webkit-appearance: none; appearance: none; }
.cb-search input::placeholder { color: var(--cb-muted); opacity: 1; }
.cb-search input:focus { border-color: var(--cb-ink); }
.cb-search::before { content: ""; position: absolute; left: .95rem; top: 50%; width: .6rem; height: .6rem; margin-top: -.42rem; border: 1.5px solid var(--cb-muted); border-radius: 50%; pointer-events: none; }
.cb-search::after { content: ""; position: absolute; left: 1.5rem; top: 50%; width: .35rem; height: 1.5px; margin-top: .22rem; background: var(--cb-muted); transform: rotate(45deg); pointer-events: none; }
.cb-chips { display: flex; flex-wrap: wrap; gap: .25rem; padding-block: .65rem; border-top: 1px solid var(--cb-rule); border-bottom: 1px solid var(--cb-rule); }
.cb-chip { appearance: none; cursor: pointer; display: inline-flex; align-items: baseline; gap: .3em; padding: .55rem .8rem; border: 1px solid transparent; border-radius: 100vw; background: none; color: var(--cb-muted); font: 500 .72rem/1 var(--cb-f-mono); text-transform: uppercase; letter-spacing: .06em; transition: color .2s, border-color .2s; white-space: nowrap; }
.cb-chip:hover { color: var(--cb-ink); }
.cb-chip[aria-pressed="true"] { color: var(--cb-ink); border-color: var(--cb-ink); }
.cb-chip sup { font-size: .6rem; color: var(--cb-blue); letter-spacing: 0; }
@media (hover: none), (max-width: 760px) { .cb-view kbd { display: none; } }
@media (max-width: 760px) {
  .cb-search { order: 3; flex-basis: 100%; max-width: none; }
  .cb-views { margin-left: 0; }
  .cb-chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-right: 2.5rem; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .cb-chips::-webkit-scrollbar { display: none; }
  .cb-chip { flex: none; }
}

/* ---------- elementi comuni ---------- */
.cb-out { padding-top: clamp(1.8rem, 3vw, 2.6rem); transition: opacity .18s var(--cb-ease), transform .18s var(--cb-ease); }
.cb-out.is-swapping { opacity: 0; transform: translateY(6px); }
.cb-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; font: 500 .72rem/1.3 var(--cb-f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--cb-muted); font-variant-numeric: tabular-nums; }
.cb-kicker i { font-style: normal; opacity: .6; }
.cb-badge { font: 500 .6rem/1 var(--cb-f-mono); text-transform: uppercase; letter-spacing: .08em; padding: .3rem .45rem .28rem; border: 1px solid currentColor; border-radius: 100vw; color: var(--cb-blue); white-space: nowrap; }
.cb-t { font: 500 1.2rem/1.15 var(--cb-f-sans); letter-spacing: -.025em; color: var(--cb-ink); text-wrap: balance; }
.cb-sum { max-width: 52ch; font: 400 1rem/1.5 var(--cb-f-sans); letter-spacing: -.012em; color: #3a3a3f; }
.cb-by { display: inline-flex; align-items: center; gap: .55rem; font: 400 .9rem/1.2 var(--cb-f-sans); color: var(--cb-text); }
.cb-av { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; background: var(--cb-wash); flex: none; }
.cb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.cb-date { font: 500 .72rem/1 var(--cb-f-mono); letter-spacing: .04em; color: var(--cb-muted); font-variant-numeric: tabular-nums; }
.cb-fig { position: relative; overflow: hidden; aspect-ratio: 3 / 2; max-width: 100%; background: var(--cb-wash); border: 1px solid var(--cb-rule); }
.cb-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--cb-ease); }
@media (hover: hover) and (pointer: fine) {
  .cb a:hover .cb-fig img { transform: scale(1.025); }
  .cb a:hover .cb-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
}
.cb-empty { padding-block: 3rem; font: 400 1rem/1.5 var(--cb-f-sans); color: var(--cb-muted); }
.cb-empty button { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; color: var(--cb-ink); font: inherit; text-decoration: underline; text-underline-offset: .2em; }
.cb-more-wrap { display: flex; justify-content: center; padding-top: clamp(2rem, 4vw, 3rem); }
.cb-more { appearance: none; cursor: pointer; display: inline-flex; align-items: baseline; gap: .4rem; padding: .9rem 1.45rem; border: 0; border-radius: 100vw; background: var(--cb-ink); color: var(--cb-white); font: 500 .78rem/1 var(--cb-f-sans); text-transform: uppercase; letter-spacing: -.02em; transition: letter-spacing .2s var(--cb-ease); }
.cb-more:hover { letter-spacing: .03em; }
.cb-more sup { font: 500 .62rem/1 var(--cb-f-mono); color: #9fb0ff; letter-spacing: 0; }

/* ============ COPERTINA: articolo grande + lista, poi gli altri a due colonne ============ */
.cb-cover { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: start; }
.cb-lead { display: grid; gap: 1rem; }
.cb-lead .cb-t { font-size: clamp(1.6rem, 2.6vw, 2.35rem); line-height: 1.06; letter-spacing: -.035em; }
.cb-side { display: grid; border-top: 1px solid var(--cb-ink); }
.cb-side li { border-bottom: 1px solid var(--cb-rule); }
.cb-sitem { display: grid; gap: .7rem; padding-block: 1.25rem; }
.cb-sitem .cb-t { font-size: clamp(1.15rem, 1.55vw, 1.45rem); }
.cb-rest-head { display: flex; justify-content: space-between; gap: 1rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: .9rem; border-top: 1px solid var(--cb-ink); font: 500 .75rem/1 var(--cb-f-mono); text-transform: uppercase; letter-spacing: .09em; color: var(--cb-muted); }
.cb-rest-head b { font-weight: 500; color: var(--cb-ink); }
.cb-cards { display: grid; gap: clamp(2.2rem, 4vw, 3.4rem) clamp(1rem, 2vw, 1.6rem); padding-top: clamp(1.6rem, 3vw, 2.4rem); }
.cb-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cb-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 0; }
.cb-card { display: grid; gap: .8rem; align-content: start; min-width: 0; }
.cb-cards-2 .cb-card .cb-t { font-size: clamp(1.2rem, 1.7vw, 1.55rem); }
@media (max-width: 960px) {
  .cb-cover { grid-template-columns: minmax(0, 1fr); }
  .cb-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cb-cards-2, .cb-cards-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ============ INDICE: righe, anteprima a righe al passaggio del mouse ============ */
/* il sito mette display:flex su ol: qui serve una colonna piena */
.cb-index { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--cb-ink); }
.cb-row a { display: grid; grid-template-columns: 3.4rem minmax(0, 2.6fr) minmax(0, 1.1fr) minmax(0, 1fr) 5.2rem 1.4rem; grid-template-areas: "code title cat by date arrow"; align-items: center; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--cb-rule); transition: opacity .3s var(--cb-ease); }
.cb-row .cb-code { grid-area: code; font: 500 .72rem/1.3 var(--cb-f-mono); color: var(--cb-muted); font-variant-numeric: tabular-nums; }
.cb-row .cb-title { grid-area: title; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; min-width: 0; }
.cb-row .cb-t { font-size: clamp(1.05rem, 1.45vw, 1.3rem); transition: transform .4s var(--cb-ease); }
.cb-row .cb-rcat { grid-area: cat; font: 500 .72rem/1.3 var(--cb-f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--cb-muted); }
.cb-row .cb-rby { grid-area: by; font: 400 .88rem/1.3 var(--cb-f-sans); color: var(--cb-text); }
.cb-row .cb-date { grid-area: date; text-align: right; }
.cb-row .cb-arrow { grid-area: arrow; justify-self: end; color: var(--cb-muted); font: 400 1.05rem/1 var(--cb-f-sans); transition: transform .35s var(--cb-ease), color .2s; }
.cb-row .cb-thumb { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cb-index:hover .cb-row:not(:hover) a { opacity: .34; }
  .cb-row a:hover .cb-t { transform: translateX(.45rem); text-decoration: none; }
  .cb-row a:hover .cb-arrow { transform: rotate(-45deg); color: var(--cb-blue); }
}
@media (max-width: 760px) {
  .cb-row a { grid-template-columns: 2.4rem minmax(0, 1fr) 4.6rem; grid-template-areas: "code title thumb" "code cat thumb"; gap: .3rem .9rem; padding-block: .9rem; }
  .cb-row .cb-rby, .cb-row .cb-date, .cb-row .cb-arrow { display: none; }
  .cb-row .cb-code { align-self: start; padding-top: .2rem; }
  .cb-row .cb-thumb { display: block; grid-area: thumb; width: 4.6rem; aspect-ratio: 3 / 2; }
}
/* anteprima che segue il cursore */
.cb-peek { --cb-paper: #f4f4f4; --cb-ink: #121212; --cb-rule: #d4d4db; position: fixed; left: 0; top: 0; z-index: 60; width: clamp(16rem, 24vw, 24rem); aspect-ratio: 3 / 2; pointer-events: none; opacity: 0; transform: translate3d(-999px, -999px, 0); transition: opacity .22s cubic-bezier(.165, .84, .44, 1); background: var(--cb-paper); border: 1px solid var(--cb-rule); box-shadow: 0 18px 40px -24px rgba(18, 18, 18, .45); }
.cb-peek.is-on { opacity: 1; }
.cb-peek canvas, .cb-peek img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.cb-peek-tag { position: absolute; left: .55rem; bottom: .5rem; z-index: 1; font: 500 .6rem/1 "Geist Mono", ui-monospace, Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--cb-ink); background: var(--cb-paper); padding: .3rem .4rem; }

@media (prefers-reduced-motion: reduce) {
  .cb *, .cb-out, .cb-peek { transition: none !important; }
}

/* ---------- versione corta in home (.cb-home): solo viste, rimando al blog ---------- */
.cb-home .cb-head { margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem); }
.cb-home .cb-bar { justify-content: space-between; border-bottom: 1px solid var(--cb-rule); margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.cb-home .cb-views { margin-left: 0; }
.cb-bar-note { font: 500 .72rem/1 var(--cb-f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--cb-muted); }
.cb-home .cb-out { min-height: 12rem; }
.cb-all { display: grid; grid-template-columns: minmax(0, 1fr) auto 1.4rem; align-items: center; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); padding-block: 1.25rem; border-top: 1px solid var(--cb-ink); border-bottom: 1px solid var(--cb-ink); color: var(--cb-ink) !important; text-decoration: none !important; text-transform: none !important; }
.cb-all-label { font: 500 clamp(1.3rem, 2.15vw, 1.95rem)/1.08 var(--cb-f-sans); letter-spacing: -.03em; transition: transform .4s var(--cb-ease); }
.cb-all-note { font: 500 .74rem/1.3 var(--cb-f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--cb-muted); text-align: right; }
.cb-all-note b { font-weight: 500; color: var(--cb-blue); }
.cb-all-arrow { justify-self: end; font: 400 1.05rem/1 var(--cb-f-sans); transition: transform .35s var(--cb-ease), color .2s; }
.cb-all:hover .cb-all-label { transform: translateX(.45rem); }
.cb-all:hover .cb-all-arrow { transform: rotate(-45deg); color: var(--cb-blue); }
@media (max-width: 760px) {
  .cb-home .cb-bar-note { display: none; }
  .cb-all { grid-template-columns: minmax(0, 1fr) 1.4rem; gap: .3rem .9rem; }
  .cb-all-note { grid-row: 2; text-align: left; }
  .cb-all-arrow { grid-row: 1 / 3; grid-column: 2; }
  .cb-all-label { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .cb-all-label, .cb-all-arrow { transition: none; } .cb-all:hover .cb-all-label { transform: none; } }