/* =====================================================================
   NSG — Cases grid (/cases)
   Темна (ink) сторінка-галерея. Повторно використовує компоненти home.css
   (.case, .kicker, header, footer). Тут — page-head, фільтри, сітка, лічильник.
   ===================================================================== */

.casepage{background:var(--ink);color:#fff;position:relative;overflow:hidden;min-height:100vh}
/* єдиний суцільний ambient-шар на всю сторінку — без шва між екранами */
.casepage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 32% at 86% -2%, rgba(74,198,241,.15), transparent 60%),
    radial-gradient(52% 26% at -2% 6%, rgba(0,114,153,.12), transparent 64%),
    radial-gradient(rgba(74,198,241,.16) 1px, transparent 1.4px) 0 0/40px 40px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 90%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 90%,transparent 100%)}
.casepage>*{position:relative;z-index:1}

/* активний пункт меню (поточна сторінка) */
.nav-links a.cur{color:var(--cyan-light)}
header.on-dark .nav-links a.cur{color:var(--cyan-light)}
.nav-links a.cur::after{transform:scaleX(1)}

/* ---- PAGE HEAD ---- */
.cpg-head{position:relative;padding:clamp(140px,20vh,224px) 0 clamp(30px,4vw,56px)}
/* окремі шари голови прибрано — фон тепер суцільний (.casepage::before) */
.cpg-head .glow,.cpg-head .hexgrid{display:none}
.cpg-head .constellation{position:absolute;inset:0;z-index:0;pointer-events:none}
.cpg-head .wrap{position:relative;z-index:2}

.cpg-top{display:grid;grid-template-columns:1fr .92fr;gap:clamp(24px,3vw,56px);align-items:end}
.cpg-head .kicker{color:var(--cyan);margin-bottom:18px}
.cpg-head h1{font-size:clamp(64px,13.4vw,184px);font-weight:700;letter-spacing:-.05em;line-height:.84;color:#fff}
.cpg-lede{color:rgba(255,255,255,.7);font-size:clamp(17px,1.5vw,21px);line-height:1.5;max-width:44ch;
  margin:0 0 6px;padding-bottom:6px}

/* ---- FILTERS ---- */
.cpg-filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(30px,3.6vw,52px)}
.fbtn{position:relative;display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.74);
  background:transparent;border:1px solid rgba(255,255,255,.2);padding:12px 18px;border-radius:2px;
  cursor:pointer;line-height:1;transition:color .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease)}
.fbtn .fct{font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.4);transition:color .22s var(--ease)}
.fbtn:hover{border-color:var(--cyan);color:#fff}
.fbtn:hover .fct{color:var(--cyan-light)}
.fbtn.on{background:var(--cyan);border-color:var(--cyan);color:var(--ink);font-weight:600}
.fbtn.on .fct{color:rgba(0,24,36,.55)}

/* ---- META / COUNT ---- */
.cpg-meta{display:flex;align-items:center;gap:18px;margin-top:clamp(24px,2.6vw,38px);
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cpg-meta .bar{height:1px;flex:1;background:rgba(255,255,255,.12)}
.cpg-meta b{color:var(--cyan);font-weight:500}

/* ---- GRID ---- */
.cpg-grid-sec{position:relative;padding:clamp(34px,4vw,60px) 0 clamp(80px,12vw,168px)}
.cpg-grid-sec .wrap{position:relative;z-index:1}

.cases-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,40px)}

/* card: повторно використовуємо .case з home.css, прибираємо flex-розмір галереї */
.cases-grid .case{flex:none;width:auto;display:block}
.cases-grid .case .cover{aspect-ratio:16/10}
.cases-grid .case h3{font-size:clamp(20px,2vw,28px);margin-top:22px}
.cases-grid .case .tags{margin-top:14px}
.cases-grid .case.filtered-out{display:none}
/* поява/перерозкладка при фільтрації */
.cases-grid .case.cg-pop{animation:cgPop .5s cubic-bezier(.19,1,.22,1) both}
@keyframes cgPop{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cases-grid .case.cg-pop{animation:none}}

/* reveal-стагер у сітці */
.cases-grid .case:nth-child(2n){--d:.07s}
.cases-grid .case:nth-child(3n){--d:.12s}

/* нижній CTA-рядок картки */
.cg-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.cg-go{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cyan);display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.cg-go .arr{transition:transform .28s var(--ease)}
.cases-grid .case:hover .cg-go .arr{transform:translateX(6px)}

/* ---- картка-плейсхолдер (обкладинку буде додано) ---- */
.case.is-soon .cover{background:linear-gradient(140deg,#021b29,#012230);
  display:flex;align-items:center;justify-content:center}
.case.is-soon .cover .soon-hex{width:84px;height:96px;opacity:.7}
.case.is-soon .cover .soon-hex polygon{fill:none;stroke:rgba(74,198,241,.5);stroke-width:1.2;vector-effect:non-scaling-stroke}
.case.is-soon .cover .soon-lbl{position:absolute;left:0;right:0;bottom:18px;text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.46)}
.case.is-soon h3{color:rgba(255,255,255,.86)}

/* ---- empty state ---- */
.cg-empty{padding:clamp(60px,9vw,120px) 0;text-align:center}
.cg-empty[hidden]{display:none}
.cg-empty .eh{display:inline-block;width:54px;height:62px;margin-bottom:20px}
.cg-empty .eh polygon{fill:none;stroke:rgba(74,198,241,.5);stroke-width:1.2;vector-effect:non-scaling-stroke}
.cg-empty p{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0}

/* ---- SENTINEL (тригер автозавантаження) ---- */
.cg-sentinel{width:100%;height:1px}
.cg-sentinel.busy{height:46px;position:relative;margin-top:6px}
.cg-sentinel.busy::after{content:"";position:absolute;left:50%;top:50%;width:130px;height:1px;
  transform:translate(-50%,-50%);overflow:hidden;
  background:linear-gradient(90deg,transparent,rgba(74,198,241,.7),transparent);
  background-size:60px 100%;background-repeat:no-repeat;animation:pgLoad 1.2s linear infinite}
@keyframes pgLoad{0%{background-position:-60px 0}100%{background-position:190px 0}}
@media(prefers-reduced-motion:reduce){.cg-sentinel.busy::after{animation:none;background:rgba(74,198,241,.4)}}

/* ---- PAGER ---- */
.cg-pager{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-top:clamp(40px,5vw,72px)}
.cg-pager[hidden]{display:none}
.pg-nums{display:flex;gap:8px}
.pg-num,.pg-arrow{font-family:var(--mono);font-size:14px;min-width:44px;height:44px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;background:transparent;
  color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.2);border-radius:2px;cursor:pointer;
  line-height:1;transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.pg-num:hover,.pg-arrow:hover:not(:disabled){border-color:var(--cyan);color:#fff}
.pg-num.is-loaded:not(.on){border-color:rgba(74,198,241,.42);color:rgba(255,255,255,.92)}
.pg-num.on{background:var(--cyan);border-color:var(--cyan);color:var(--ink);font-weight:600}
.pg-arrow:disabled{opacity:.3;cursor:default}
.pg-status{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-left:8px;white-space:nowrap}

/* ---- responsive ---- */
@media(max-width:980px){
  .cpg-top{grid-template-columns:1fr;gap:20px}
  .cpg-lede{max-width:54ch}
}
@media(max-width:680px){
  .cases-grid{grid-template-columns:1fr;gap:24px}
  .cpg-head{padding-top:clamp(120px,18vh,150px)}
  .cpg-filters{gap:8px}
  .fbtn{padding:11px 14px;font-size:12px}
  .pg-status{display:none}
}