/* ============================================================
   CASE STUDY — Vendemmia, Cantina Giuseppe Sedilesu
   ============================================================ */
.cs{ --crema:#F4EDE1; --cs-viola:#5B43C9; --cs-lav:#EFEBFA; --cs-line:rgba(22,17,9,.16);
  background:var(--crema); color:var(--ink); padding:clamp(80px,12vh,150px) var(--pad);
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); grid-template-areas:"head player" "cards player" "foot player";
  grid-template-rows:auto auto 1fr; column-gap:clamp(36px,6vw,120px); }
.cs__head{ grid-area:head; }
.cs__cards{ grid-area:cards; }
.cs__foot{ grid-area:foot; align-self:end; }
.cs__player{ grid-area:player; align-self:start; position:sticky; top:clamp(80px,10vh,110px); display:flex; flex-direction:column; align-items:center; gap:16px; }
.cs__eyebrow{ font:500 11px/1 var(--ff-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink); margin:0 0 clamp(22px,3vh,36px); }
.cs__title{ font-family:var(--ff-display); font-weight:800; font-variation-settings:"wght" 820; font-size:clamp(44px,7.4vw,124px); line-height:.8; letter-spacing:-.035em; word-spacing:-.06em; margin:0; text-wrap:balance; }
.cs__title span{ display:block; }
.cs__title em{ font-style:normal; color:var(--accent); }
.cs__client{ font:600 clamp(17px,1.4vw,21px)/1 var(--ff-sans); margin:clamp(26px,3.6vh,40px) 0 10px; }
.cs__desc{ font:400 clamp(14px,1.05vw,16px)/1 var(--ff-mono); color:var(--ink-soft); max-width:46ch; margin:0; }
.cs__cards{ list-style:none; margin:clamp(34px,5vh,56px) 0 0; padding:0; max-width:640px; }
.cs__cards li + li{ border-top:1px solid var(--cs-line); }
.cs__cards li:has(.cs__card[aria-pressed="true"]) + li,.cs__cards li:has(+ li .cs__card[aria-pressed="true"]) + li{ border-top-color:transparent; }
.cs__card{ position:relative; width:100%; display:grid; grid-template-columns:clamp(96px,9vw,136px) minmax(0,1fr) auto; align-items:center; gap:clamp(14px,1.6vw,24px);
  padding:14px; border:1px solid transparent; border-radius:10px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease); }
.cs__card:hover{ background:rgba(22,17,9,.035); }
.cs__card[aria-pressed="true"]{ background:var(--cs-lav); border-color:var(--accent); }
.cs__card:focus-visible{ outline:3px solid var(--cs-viola); outline-offset:3px; }
.cs__thumb{ position:relative; aspect-ratio:16/10; border-radius:6px; overflow:hidden; background:#E4DACA; display:grid; place-items:center; }
.cs__thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.cs__thumb-empty{ font:500 10px/1 var(--ff-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); text-align:center; padding:6px; }
.cs__num{ display:block; font:500 11px/1 var(--ff-mono); letter-spacing:.14em; color:var(--ink); margin-bottom:8px; }
.cs__ct{ display:block; font-family:var(--ff-display); font-weight:800; font-variation-settings:"wght" 800; font-size:clamp(20px,1.6vw,26px); line-height:.95; letter-spacing:-.02em; }
.cs__cs{ display:block; font:400 12px/1 var(--ff-mono); letter-spacing:.04em; color:var(--ink-soft); margin-top:5px; }
.cs__ico{ width:44px; height:44px; border-radius:50%; border:1px solid var(--ink); display:grid; place-items:center; color:var(--ink); transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.cs__ico svg{ width:14px; height:14px; margin-left:2px; }
.cs__card[aria-pressed="true"] .cs__ico{ background:var(--accent); border-color:var(--accent); color:#fff; }
.cs__on{ position:absolute; top:10px; right:12px; display:none; font:600 9.5px/1 var(--ff-mono); letter-spacing:.16em; color:var(--accent); }
.cs__card[aria-pressed="true"] .cs__on{ display:block; }
.cs__credits{ font:400 12px/1 var(--ff-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin:clamp(40px,6vh,72px) 0 12px; }
.cs__link{ font:500 15px/1 var(--ff-sans); color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.cs__link:hover{ color:var(--accent); }
.cs__link:focus-visible{ outline:3px solid var(--cs-viola); outline-offset:3px; border-radius:2px; }
/* player */
.cs__player{ padding-right:clamp(40px,3.6vw,56px); width:fit-content; max-width:100%; justify-self:center; }
.cs__ctl{ width:0; min-width:100%; }
.cs__player::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:1px; background:var(--accent); }
.cs__note{ position:absolute; left:calc(100% + 6px); bottom:0; margin:0; pointer-events:none; }
.cs__note span{ display:block; writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--ff-display); font-weight:300; font-variation-settings:"wght" 300; font-size:12px; line-height:1; letter-spacing:.02em; color:var(--accent); white-space:nowrap; }
.cs__frame{ position:relative; height:min(78vh,820px); width:calc(min(78vh,820px) * 9 / 16); max-width:100%; aspect-ratio:auto; flex:none; border-radius:14px; overflow:hidden; background:#E4DACA; }
.cs__frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#E4DACA; transition:opacity .28s var(--ease); }
.cs__frame.is-swap video{ opacity:0; }
.cs__big{ position:absolute; left:50%; top:50%; width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%; border:1.5px solid rgba(255,255,255,.85); background:rgba(22,18,11,.18);
  color:#fff; display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(3px); transition:transform .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease); }
.cs__big svg{ width:26px; height:26px; margin-left:4px; }
.cs__big:hover{ transform:scale(1.06); background:rgba(22,18,11,.3); }
.cs__frame.is-playing .cs__big{ opacity:0; pointer-events:none; }
.cs__frame.is-playing:hover .cs__big,.cs__big:focus-visible{ opacity:1; pointer-events:auto; }
.cs__big:focus-visible{ outline:3px solid #fff; outline-offset:4px; }
.cs__lbl{ position:absolute; left:16px; bottom:22px; font:500 11px/1 var(--ff-mono); letter-spacing:.14em; text-transform:uppercase; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.45); pointer-events:none; }
.cs__bar{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.45); }
.cs__bar i{ position:absolute; inset:0; background:var(--accent); transform-origin:left; transform:scaleX(var(--p,0)); }
.cs__seek{ position:absolute; left:0; right:0; bottom:-8px; width:100%; height:24px; margin:0; opacity:0; cursor:pointer; }
.cs__seek:focus-visible + .cs__bar{ outline:2px solid #fff; outline-offset:2px; }
.cs__msg{ position:absolute; left:14px; right:14px; top:14px; padding:10px 12px; border-radius:8px; background:rgba(22,18,11,.82); color:#fff; font:500 13px/1 var(--ff-sans); }
.cs__empty{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:24px; font:500 12px/1 var(--ff-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.cs__ctl{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cs__watch{ display:inline-flex; align-items:center; gap:10px; border:0; background:none; padding:10px 0; min-height:44px; font:500 15px/1 var(--ff-sans); color:var(--ink); cursor:pointer; }
.cs__watch svg{ width:14px; height:14px; color:var(--accent); }
.cs__watch:hover{ color:var(--accent); }
.cs__tools{ display:flex; gap:8px; }
.cs__tool{ width:44px; height:44px; border-radius:50%; border:1px solid var(--cs-line); background:transparent; color:var(--ink); display:grid; place-items:center; cursor:pointer; }
.cs__tool:hover{ border-color:var(--ink); }
.cs__tool svg{ width:17px; height:17px; }
.cs__watch:focus-visible,.cs__tool:focus-visible{ outline:3px solid var(--cs-viola); outline-offset:3px; border-radius:30px; }
.cs__watch:disabled,.cs__tool:disabled,.cs__big:disabled{ opacity:.4; cursor:not-allowed; }
.cs__frame:fullscreen{ border-radius:0; height:100%; width:100%; aspect-ratio:auto; background:#000; }
.cs__frame:fullscreen video{ object-fit:contain; background:#000; }
@media (max-width:900px){
  .cs{ grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "player" "cards" "foot"; grid-template-rows:auto; padding:clamp(64px,10vh,96px) 18px; }
  .cs__player{ position:relative; top:auto; margin-top:30px; padding-right:0; padding-bottom:12px; margin-bottom:24px; }
  .cs__player::after{ top:auto; left:0; width:auto; height:1px; bottom:0; }
  .cs__note{ left:0; right:auto; bottom:auto; top:calc(100% + 6px); }
  .cs__note span{ writing-mode:horizontal-tb; transform:none; white-space:normal; }
  .cs__frame{ width:calc(100vw - 36px) !important; height:calc((100vw - 36px) * 16 / 9) !important; max-width:none; aspect-ratio:auto; }
  .cs__player{ width:100% !important; justify-self:stretch; }
  .cs__title{ font-size:clamp(40px,11vw,64px); }
  .cs__cards{ margin-top:26px; max-width:none; }
  .cs__card{ grid-template-columns:84px minmax(0,1fr) auto; padding:10px; gap:12px; }
  .cs__ico{ width:44px; height:44px; }
  .cs__credits{ margin-top:36px; }
}
@media (prefers-reduced-motion: reduce){ .cs__frame video,.cs__card,.cs__big,.cs__ico{ transition:none !important; } }

/* sezioni chiare: stesso sfondo di "02 — Di cosa mi occupo" */
#loghi,#vendemmia,#prova,#tavolo{ background:var(--bg) !important; --crema:var(--bg); }

/* galleria 01–04: solo video, con caricamento */
.gallery__panel{ background:#16120B; }
.gallery__panel .gallery__vid{ opacity:1 !important; pointer-events:auto; transition:opacity .6s ease, filter .6s ease; }
.gallery__panel:not(.is-loaded) .gallery__vid{ opacity:0 !important; }
.gallery__addvid{ display:none !important; }
.gallery__load{ position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; z-index:1; border-radius:50%; border:2px solid rgba(255,255,255,.18); border-top-color:var(--accent); animation:galSpin .9s linear infinite; pointer-events:none; transition:opacity .4s ease; }
.gallery__panel.is-loaded .gallery__load{ opacity:0; animation:none; }
@keyframes galSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .gallery__load{ animation-duration:2.4s; } }
/* case study: "In visione" staccato dal pulsante play su telefono e tablet */
@media (max-width:900px){ .cs__card{ padding:24px 10px 10px; } .cs__on{ top:8px; right:10px; } }
video.gallery__vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }