/* Ctrl Studio, sezione Lavori (prefisso cw-)
   Una sola larghezza per titolo e lista. Tre viste dalla stessa markup: indice, griglia, lista.
   Fondo carta, niente card nere, niente mockup device. */
.cw {
  --cw-paper: #f4f4f4;
  --cw-ink: #121212;
  --cw-text: #212121;
  --cw-muted: #5f5f66;
  --cw-rule: #d4d4db;
  --cw-wash: #e8e8ec;
  --cw-blue: #2e50ff;
  --cw-white: #ffffff;
  --cw-f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cw-f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --cw-gl: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left, 0px));
  --cw-gr: max(clamp(16px, 4vw, 56px), env(safe-area-inset-right, 0px));
  --cw-ease: cubic-bezier(.165, .84, .44, 1);
  position: relative;
  background: var(--cw-paper);
  color: var(--cw-text);
  font-family: var(--cw-f-sans);
  padding-block: clamp(4rem, 9vw, 7.5rem);
  padding-left: var(--cw-gl);
  padding-right: var(--cw-gr);
}
.cw *, .cw *::before, .cw *::after { box-sizing: border-box; }
.cw [hidden] { display: none !important; }
.cw :focus-visible { outline: 2px solid var(--cw-blue); outline-offset: 3px; }
.cw a { color: inherit; }
/* variante scura, per pagine a fondo nero (es. /lavori): data-cw-tone="dark" sulla sezione */
.cw[data-cw-tone="dark"] { --cw-paper: #000000; --cw-ink: #f4f4f4; --cw-text: #d6d6db; --cw-muted: #8f8f97; --cw-rule: #2b2b30; --cw-wash: #141416; --cw-white: #121212; }
.cw[data-cw-tone="dark"] .cw-desc { color: #c2c2c8; }
.cw[data-cw-tone="dark"] .cw-badge[data-tone="new"], .cw[data-cw-tone="dark"] .cw-chip sup, .cw[data-cw-tone="dark"] .cw-eyebrow sup { color: #7d93ff; }

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

/* ---------- barra filtri + viste ---------- */
.cw-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; padding-block: .75rem; border-top: 1px solid var(--cw-rule); border-bottom: 1px solid var(--cw-rule); }
.cw-filters, .cw-views { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; border: 0; }
.cw-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(--cw-muted); font: 500 .72rem/1 var(--cw-f-mono); text-transform: uppercase; letter-spacing: .06em; transition: color .2s, border-color .2s; }
.cw-chip:hover { color: var(--cw-ink); }
.cw-chip[aria-pressed="true"] { color: var(--cw-ink); border-color: var(--cw-ink); }
.cw-chip sup { font-size: .6rem; color: var(--cw-blue); letter-spacing: 0; }
.cw-views { padding: 3px; border: 1px solid var(--cw-rule); border-radius: 100vw; gap: 2px; }
.cw-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(--cw-muted); font: 500 .72rem/1 var(--cw-f-mono); text-transform: uppercase; letter-spacing: .06em; transition: background .2s, color .2s; }
.cw-view:hover { color: var(--cw-ink); }
.cw-view[aria-pressed="true"] { background: var(--cw-ink); color: var(--cw-white); }
.cw-view kbd { font: 500 .62rem/1 var(--cw-f-mono); padding: .16rem .3rem .2rem; border: 1px solid currentColor; border-bottom-width: 2px; border-radius: .25rem; opacity: .55; }
@media (hover: none), (max-width: 760px) { .cw-view kbd { display: none; } }
@media (max-width: 760px) {
  .cw-filters { flex: 1 1 100%; 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); }
  .cw-filters::-webkit-scrollbar { display: none; }
  .cw-chip { flex: none; white-space: nowrap; }
}

/* ---------- elementi comuni ---------- */
/* in Webflow la Collection List porta solo i dati: lavori.js la sostituisce con la lista */
.cw .w-dyn-list { display: none; }
.cw .cw-list { display: block; list-style: none; margin: 0; padding: 0; }
.cw .cw-item { position: relative; margin: 0; max-width: none; }
.cw-hit { position: absolute; inset: 0; z-index: 1; border-radius: 2px; }
.cw-hit:focus-visible { outline-offset: -2px; }
.cw-code, .cw-sector, .cw-service, .cw-year, .cw-kicker { font: 500 .74rem/1.3 var(--cw-f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--cw-muted); font-variant-numeric: tabular-nums; }
.cw-title { grid-area: title; display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .65rem; min-width: 0; }
.cw-name { margin: 0; font: 500 1.2rem/1.08 var(--cw-f-sans); letter-spacing: -.03em; color: var(--cw-ink); }
.cw-badge { font: 500 .6rem/1 var(--cw-f-mono); text-transform: uppercase; letter-spacing: .08em; padding: .3rem .45rem .28rem; border: 1px solid currentColor; border-radius: 100vw; color: var(--cw-muted); white-space: nowrap; }
.cw-badge[data-tone="new"] { color: var(--cw-blue); }
.cw-media, .cw-side { position: relative; margin: 0; overflow: hidden; background: var(--cw-wash); border: 1px solid var(--cw-rule); max-width: 100%; }
.cw-media { aspect-ratio: 3 / 2; }
.cw-side { aspect-ratio: 4 / 5; }
.cw-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.cw-side .cw-img { object-position: left top; }
.cw-alt { opacity: 0; transition: opacity .55s var(--cw-ease); }
.cw-desc { grid-area: desc; margin: 0; max-width: 44ch; font: 400 1rem/1.5 var(--cw-f-sans); letter-spacing: -.012em; color: #3a3a3f; }
.cw-meta { grid-area: meta; margin: 0; display: grid; }
.cw-meta div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding-block: .55rem; border-top: 1px solid var(--cw-rule); }
.cw-meta div:last-child { border-bottom: 1px solid var(--cw-rule); }
.cw-meta dt { font: 500 .68rem/1.4 var(--cw-f-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--cw-muted); }
.cw-meta dd { margin: 0; font: 400 .9rem/1.4 var(--cw-f-sans); color: var(--cw-text); min-width: 0; }
.cw-actions { grid-area: acts; position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.3rem; }
.cw-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.3rem; border-radius: 100vw; background: var(--cw-ink); color: var(--cw-white) !important; text-decoration: none; font: 500 .76rem/1 var(--cw-f-sans); text-transform: uppercase; letter-spacing: -.02em; transition: letter-spacing .2s var(--cw-ease); }
.cw-btn:hover { letter-spacing: .03em; }
.cw-ext { color: var(--cw-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .15rem; font: 500 .76rem/1 var(--cw-f-sans); text-transform: uppercase; letter-spacing: -.02em; transition: letter-spacing .2s var(--cw-ease); }
.cw-ext:hover { letter-spacing: .03em; }
.cw-arrow { grid-area: arrow; justify-self: end; color: var(--cw-muted); font: 400 1.05rem/1 var(--cw-f-sans); transition: transform .35s var(--cw-ease), color .2s; }

/* ============ VISTA INDICE ============ */
.cw[data-view="indice"] .cw-item { display: grid; grid-template-columns: 3.6rem minmax(0, 2.3fr) minmax(0, 1.25fr) minmax(0, 1.25fr) 3.4rem 1.4rem; grid-template-areas: "code title sector service year arrow"; align-items: center; gap: 1rem; padding-block: 1.05rem; border-bottom: 1px solid var(--cw-rule); transition: opacity .3s var(--cw-ease); }
.cw[data-view="indice"] .cw-code { grid-area: code; }
.cw[data-view="indice"] .cw-sector { grid-area: sector; }
.cw[data-view="indice"] .cw-service { grid-area: service; }
.cw[data-view="indice"] .cw-year { grid-area: year; text-align: right; }
.cw[data-view="indice"] .cw-name { font-size: clamp(1.3rem, 2.15vw, 1.95rem); transition: transform .4s var(--cw-ease); }
.cw[data-view="indice"] .cw-media,
.cw[data-view="indice"] .cw-side,
.cw[data-view="indice"] .cw-desc,
.cw[data-view="indice"] .cw-meta,
.cw[data-view="indice"] .cw-actions,
.cw[data-view="indice"] .cw-kicker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cw[data-view="indice"] .cw-list:hover .cw-item:not(:hover) { opacity: .34; }
  .cw[data-view="indice"] .cw-item:hover .cw-name { transform: translateX(.45rem); }
  .cw[data-view="indice"] .cw-item:hover .cw-arrow { transform: rotate(-45deg); color: var(--cw-blue); }
}
@media (max-width: 760px) {
  .cw[data-view="indice"] .cw-item { grid-template-columns: 2.4rem minmax(0, 1fr) 4.6rem; grid-template-areas: "code title thumb" "code sector thumb"; gap: .3rem .9rem; padding-block: .9rem; }
  .cw[data-view="indice"] .cw-service, .cw[data-view="indice"] .cw-year, .cw[data-view="indice"] .cw-arrow { display: none; }
  .cw[data-view="indice"] .cw-code { align-self: start; padding-top: .2rem; }
  .cw[data-view="indice"] .cw-media { display: block; grid-area: thumb; width: 4.6rem; }
  .cw[data-view="indice"] .cw-name { font-size: 1.25rem; }
}

/* anteprima che segue il cursore (solo indice, solo puntatore fine) */
.cw-peek { --cw-paper: #f4f4f4; --cw-ink: #121212; --cw-rule: #d4d4db; --cw-f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --cw-ease: cubic-bezier(.165, .84, .44, 1); 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 var(--cw-ease); background: var(--cw-paper); border: 1px solid var(--cw-rule); box-shadow: 0 18px 40px -24px rgba(18, 18, 18, .45); }
.cw-peek.is-on { opacity: 1; }
.cw-peek canvas, .cw-peek img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
.cw-peek-tag { position: absolute; left: .55rem; bottom: .5rem; z-index: 1; font: 500 .6rem/1 var(--cw-f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--cw-ink); background: var(--cw-paper); padding: .3rem .4rem; }

/* ============ VISTA GRIGLIA ============ */
.cw[data-view="griglia"] .cw-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.2rem, 4vw, 3.4rem) clamp(1rem, 2vw, 1.6rem); padding-top: clamp(1.8rem, 3vw, 2.6rem); }
.cw[data-view="griglia"] .cw-item { display: grid; grid-template-areas: "media" "title" "kicker"; align-content: start; gap: .7rem; min-width: 0; }
.cw[data-view="griglia"] .cw-media { grid-area: media; }
.cw[data-view="griglia"] .cw-kicker { grid-area: kicker; }
.cw[data-view="griglia"] .cw-code,
.cw[data-view="griglia"] .cw-sector,
.cw[data-view="griglia"] .cw-service,
.cw[data-view="griglia"] .cw-year,
.cw[data-view="griglia"] .cw-arrow,
.cw[data-view="griglia"] .cw-side,
.cw[data-view="griglia"] .cw-desc,
.cw[data-view="griglia"] .cw-meta,
.cw[data-view="griglia"] .cw-actions { display: none; }
.cw[data-view="griglia"] .cw-img { transition: transform .8s var(--cw-ease), opacity .55s var(--cw-ease); }
@media (hover: hover) and (pointer: fine) {
  .cw[data-view="griglia"] .cw-item:hover .cw-alt { opacity: 1; }
  .cw[data-view="griglia"] .cw-item:hover .cw-img { transform: scale(1.025); }
}
/* progetto in evidenza: riga intera, immagine grande + testo */
.cw[data-view="griglia"] .cw-item[data-featured] { grid-column: 1 / -1; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr; grid-template-areas: "media title" "media kicker" "media desc" "media acts" "media ."; gap: .9rem clamp(1.2rem, 3vw, 2.6rem); }
.cw[data-view="griglia"] .cw-item[data-featured] .cw-name { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
.cw[data-view="griglia"] .cw-item[data-featured] .cw-desc,
.cw[data-view="griglia"] .cw-item[data-featured] .cw-actions { display: flex; }
.cw[data-view="griglia"] .cw-item[data-featured] .cw-desc { display: block; }
@media (max-width: 1100px) { .cw[data-view="griglia"] .cw-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cw[data-view="griglia"] .cw-list { grid-template-columns: minmax(0, 1fr); }
  .cw[data-view="griglia"] .cw-item[data-featured] { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "media" "title" "kicker" "desc" "acts"; }
}

/* ============ VISTA LISTA ============ */
.cw[data-view="lista"] .cw-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, .48fr); grid-template-rows: auto auto auto auto auto 1fr; grid-template-areas: "kicker media side" "title media side" "desc media side" "meta media side" "acts media side" ". media side"; gap: 1rem clamp(1rem, 2.4vw, 2rem); padding-block: clamp(2rem, 4vw, 3.2rem); border-bottom: 1px solid var(--cw-rule); }
.cw[data-view="lista"] .cw-media { grid-area: media; align-self: start; }
.cw[data-view="lista"] .cw-side { grid-area: side; align-self: end; }
.cw[data-view="lista"] .cw-kicker { grid-area: kicker; }
.cw[data-view="lista"] .cw-name { font-size: clamp(1.75rem, 2.9vw, 2.7rem); }
.cw[data-view="lista"] .cw-code,
.cw[data-view="lista"] .cw-sector,
.cw[data-view="lista"] .cw-service,
.cw[data-view="lista"] .cw-year,
.cw[data-view="lista"] .cw-arrow { display: none; }
.cw[data-view="lista"] .cw-hit { display: none; }
@media (max-width: 960px) {
  .cw[data-view="lista"] .cw-item { grid-template-columns: minmax(0, 1fr) minmax(0, .4fr); grid-template-rows: none; grid-template-areas: "kicker kicker" "title title" "media side" "desc desc" "meta meta" "acts acts"; }
}
@media (max-width: 560px) {
  .cw[data-view="lista"] .cw-item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kicker" "title" "media" "desc" "meta" "acts"; }
  .cw[data-view="lista"] .cw-side { display: none; }
}

/* cambio vista: dissolvenza breve */
.cw-list.is-swapping { opacity: 0; transform: translateY(6px); }
.cw-list { transition: opacity .18s var(--cw-ease), transform .18s var(--cw-ease); }

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