/* =====================================================================
   Curated project gallery - shared across all case studies
   Per-page accent: set --csg-accent / --csg-accent-tint / --csg-ink
   on the .csg and .csglb elements (or :root) to theme it.
   ===================================================================== */
.csg, .csglb { --csg-accent: #584AD2; --csg-accent-tint: #EEEBFB; --csg-ink: #2D2D2D; --csg-accent-soft: #B9A3FF; }

.csg { padding: clamp(20px,3vw,34px) 0 clamp(40px,6vw,72px); }
.csg__head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom: clamp(18px,2.2vw,26px); }
.csg__head p { font-size:15px; color:var(--muted); line-height:1.5; max-width:52ch; }
.csg__count { font-size:13px; font-weight:700; color:var(--csg-accent); font-variant-numeric:tabular-nums; letter-spacing:.02em; white-space:nowrap; }

/* group legend chips */
.csg__legend { display:flex; flex-wrap:wrap; gap:8px; margin-bottom: clamp(16px,2vw,22px); }
.csg__chip { font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--muted); background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:8px 15px; cursor:pointer; transition:all .2s var(--ease); display:inline-flex; align-items:center; gap:8px; }
.csg__chip:hover { border-color:var(--csg-accent); color:var(--csg-ink); }
.csg__chip.is-on { background:var(--csg-ink); border-color:var(--csg-ink); color:#fff; }
.csg__chip .n { font-size:11px; font-weight:700; opacity:.6; }

/* featured stage */
.csg__stage { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:clamp(10px,1.6vw,18px); }
.csg__nav { width:48px; height:48px; flex-shrink:0; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--csg-ink);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s var(--ease); box-shadow:var(--sh-sm); }
.csg__nav:hover { background:var(--csg-ink); color:#fff; transform:scale(1.06); border-color:var(--csg-ink); }
.csg__nav svg { width:22px; height:22px; }
.csg__view { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#fff;
  box-shadow:0 1px 2px rgba(20,16,40,.04), 0 18px 40px rgba(20,16,40,.08); cursor:zoom-in; }
.csg__viewbar { height:40px; background:#F2F1F7; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:7px; padding-inline:16px; }
.csg__viewbar i { width:11px; height:11px; border-radius:50%; background:#D6D5DF; }
.csg__viewbar i:nth-child(1){background:#FF6058;} .csg__viewbar i:nth-child(2){background:#FFC130;} .csg__viewbar i:nth-child(3){background:#28CA42;}
.csg__viewbar .url { margin-left:8px; font-size:11.5px; color:var(--faint); font-weight:500; }
.csg__imgwrap { position:relative; background:#fbfbfd; height:clamp(360px,52vh,560px); display:flex; align-items:flex-start; justify-content:center; overflow:hidden; }
.csg__imgwrap img { width:100%; height:100%; object-fit:contain; object-position:top center; transition:opacity .3s var(--ease); }
.csg__expand { position:absolute; top:12px; right:12px; z-index:2; display:inline-flex; align-items:center; gap:7px; padding:8px 13px;
  border-radius:999px; background:rgba(20,16,40,.62); color:#fff; font-size:12px; font-weight:600; backdrop-filter:blur(6px); pointer-events:none; opacity:0; transition:opacity .2s; }
.csg__view:hover .csg__expand { opacity:1; }
.csg__expand svg { width:14px; height:14px; }

.csg__bar { display:flex; align-items:center; gap:14px; margin-top:16px; }
.csg__tag { font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--csg-accent);
  background:var(--csg-accent-tint); border-radius:999px; padding:5px 12px; white-space:nowrap; }
.csg__cap { font-size:15px; color:var(--body); line-height:1.45; }
.csg__pos { margin-left:auto; font-size:13px; font-weight:700; color:var(--faint); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* thumbnail rail, grouped */
.csg__rail { display:flex; gap:clamp(18px,2.4vw,30px); margin-top:clamp(22px,2.8vw,32px); overflow-x:auto; padding-bottom:10px; scrollbar-width:thin; }
.csg__grp { display:flex; flex-direction:column; gap:9px; flex-shrink:0; }
.csg__grplabel { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); padding-left:2px; }
.csg__thumbs { display:flex; gap:9px; }
.csg__thumb { flex:0 0 auto; width:120px; height:78px; border-radius:9px; overflow:hidden; border:2px solid transparent; background:#fff;
  cursor:pointer; opacity:.62; transition:opacity .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); padding:0; }
.csg__thumb img { width:100%; height:100%; object-fit:cover; object-position:top; }
.csg__thumb:hover { opacity:1; transform:translateY(-2px); }
.csg__thumb.is-on { opacity:1; border-color:var(--csg-accent); }
@media (max-width:680px){ .csg__nav { width:40px; height:40px; } .csg__imgwrap { height:clamp(280px,44vh,420px); } }

/* fullscreen lightbox (zoom + scroll) */
.csglb { position:fixed; inset:0; z-index:140; display:none; flex-direction:column; background:rgba(10,9,18,.95); backdrop-filter:blur(8px); }
.csglb.is-open { display:flex; }
.csglb__top { display:flex; align-items:center; gap:16px; padding:14px clamp(14px,3vw,26px); color:#fff; flex-shrink:0; }
.csglb__tag { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--csg-accent-soft); }
.csglb__pos { font-size:14px; color:rgba(255,255,255,.7); font-weight:600; font-variant-numeric:tabular-nums; }
.csglb__zoom { margin-left:auto; display:inline-flex; gap:2px; padding:4px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); }
.csglb__zbtn { min-width:60px; height:34px; border-radius:999px; background:transparent; color:#fff; border:none; font-weight:600; font-size:13px; cursor:pointer; transition:background .2s; }
.csglb__zbtn.is-on, .csglb__zbtn:hover { background:rgba(255,255,255,.2); }
.csglb__close { width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.22); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .2s; }
.csglb__close:hover { background:rgba(255,255,255,.26); }
.csglb__close svg { width:20px; height:20px; }
.csglb__stage { position:relative; flex:1; min-height:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:clamp(8px,2vw,18px); padding:0 clamp(10px,2vw,22px); }
.csglb__nav { width:52px; height:52px; flex-shrink:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.22); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all .2s; z-index:2; }
.csglb__nav:hover { background:rgba(255,255,255,.26); transform:scale(1.06); }
.csglb__nav svg { width:24px; height:24px; }
.csglb__scroll { height:100%; min-height:0; overflow:auto; display:flex; align-items:flex-start; justify-content:center; padding:clamp(10px,2vh,24px) 0; overscroll-behavior:contain; }
.csglb__scroll.is-fit { align-items:center; }
.csglb__scroll::-webkit-scrollbar { width:10px; }
.csglb__scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.22); border-radius:8px; }
.csglb__img { display:block; width:100%; height:auto; border-radius:8px; background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.csglb__img.is-fit { width:auto; max-width:100%; max-height:100%; }
.csglb__cap { color:rgba(255,255,255,.85); font-size:14.5px; text-align:center; max-width:72ch; margin:0 auto; padding:14px clamp(14px,3vw,26px) 20px; line-height:1.45; flex-shrink:0; }
@media (max-width:680px){ .csglb__nav { width:42px; height:42px; } .csglb__zbtn { min-width:48px; } }