/* fix-pk-cases — правки ПК 07.11 (блок «Кейсы», #cases). Попап #m-case здесь не трогаем.
   ПК = от 1280px (как в mobile-top.css: всё мобильное — внутри max-width:1279 и ниже). Механика (плейсхолдер, плавное появление) — везде. */

/* ---------- 5. загрузка картинок: плейсхолдер в цвет окна (без белого), экран проявляется после decode() ----------
   cases.js ставит .js-ld на сетку и .is-ld на экран (.mk-win__scr / .mk-phone__scr), когда его первая картинка декодирована */
.case .mk-win__scr--fix{background:#15161a}
.cases__grid.js-ld .mk-win__scr > *,.cases__grid.js-ld .mk-phone__scr > *{transition:opacity .45s ease}
.cases__grid.js-ld .mk-win__scr:not(.is-ld) > *,.cases__grid.js-ld .mk-phone__scr:not(.is-ld) > *{opacity:0}

/* ---------- 6. одно плавное появление карточек при доскролле (cases.js: .is-wait на сетке до первого показа) ---------- */
.cases__grid.is-wait > .case:not(.is-shown){opacity:0}

/* ---------- 2. ниша и тип — один вид: один размер, без капса; тип — чип-кнопка, клик включает фильтр ---------- */
.cmeta__niche,.cmeta__tag{font:500 13px/16px var(--f-text);letter-spacing:0;text-transform:none}
.cmeta__niche{color:rgba(255,255,255,.55)}
button.cmeta__tag{height:26px;padding:0 11px;border:0;cursor:pointer;color:rgba(251,208,128,.9);
  transition:background-color var(--t-med) ease,color var(--t-med) ease,box-shadow var(--t-med) ease}
button.cmeta__tag:hover{color:var(--c-ink);background-color:rgba(251,208,128,.9);box-shadow:inset 0 0 0 1px transparent}
button.cmeta__tag:focus-visible{outline-offset:2px}

/* ---------- 3. «Смотреть кейс»: без контура на ховере — плавная заливка фирменным градиентом слева направо ---------- */
.case .case__open{box-shadow:none;background-color:rgba(255,255,255,.07);color:rgba(255,255,255,.82);isolation:isolate}
.case .case__open::before{padding:0;-webkit-mask:none;mask:none;background:var(--g-btn);opacity:1;z-index:-1;
  clip-path:inset(0 100% 0 0 round 999px);transition:clip-path .55s cubic-bezier(.65,0,.35,1)}
.case .case__open > *{position:relative}
.case:hover .case__open,.case .case__open:focus-visible{color:var(--c-ink);background-color:rgba(255,255,255,.07);box-shadow:none}
.case:hover .case__open::before,.case .case__open:focus-visible::before{opacity:1;clip-path:inset(0 0 0 0 round 999px)}

/* ---------- 4. «Показать ещё»: стрелка вниз и полупрозрачный счётчик скрытых кейсов (разметку кнопки ставит cases.js) ---------- */
.cases__more .cases__more-btn{gap:10px;padding:0 26px 0 30px;box-shadow:none;background-color:rgba(255,255,255,.07);color:rgba(255,255,255,.82)}
.cases__more .cases__more-btn::before{display:none}
.cases__more .cases__more-btn:hover{color:var(--c-white);background-color:rgba(255,255,255,.12);box-shadow:none}
.cases__more-n{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.75);font:600 12px/1 var(--f-text);font-variant-numeric:tabular-nums;
  transition:background-color var(--t-med) ease,color var(--t-med) ease}
.cases__more-btn:hover .cases__more-n{background:rgba(251,208,128,.22);color:var(--c-white)}
.cases__more-ic{width:12px;height:12px;flex:none;transition:transform var(--t-med) var(--ease)}
.cases__more-btn:hover .cases__more-ic{transform:translateY(2px)}

@media (min-width:1280px){
  /* ---------- 1. без внутренней плашки-фона: ПК-окно и телефон прямо на стекле карточки ---------- */
  .case .case__media,.case:nth-child(3n+2) .case__media,.case:nth-child(3n) .case__media{background:none}
  .case .case__media::after{display:none}
  /* композиция целиком внутри сцены (ничего не обрезается краем): окно слева сверху, телефон заходит на него справа снизу */
  .case .mk--desk.has-phone .mk-win{left:4cqw;top:5cqw;width:76cqw}
  .case .mk--desk:not(.has-phone) .mk-win{left:7cqw;top:4.5cqw;width:86cqw}
  .case .mk-phone--side{right:4cqw;top:15cqw;width:22cqw}
  .cases__grid[data-n="1"] .case .mk--desk.has-phone .mk-win{left:6cqw;top:4cqw;width:64cqw}
  .cases__grid[data-n="1"] .case .mk-phone--side{right:9cqw;top:6.5cqw;width:19cqw}

  /* ---------- 7. скругление телефона пропорционально его ширине (--pw), одинаково в 3, 2 и 1 колонку ---------- */
  .case .mk-phone{--pw:23cqw;padding:calc(var(--pw) * .04);border-radius:calc(var(--pw) * .2)}
  .case .mk-phone__scr{border-radius:calc(var(--pw) * .16)}
  .case .mk-phone__isl{top:calc(var(--pw) * .078);height:calc(var(--pw) * .07)}
  .case .mk-phone--side{--pw:22cqw}
  .case .mk--phones .mk-phone--front{--pw:33cqw}
  .case .mk--phones .mk-phone--back{--pw:29cqw}
  .cases__grid[data-n="1"] .case .mk-phone--side{--pw:19cqw}
  .cases__grid[data-n="1"] .case .mk--phones .mk-phone--front{--pw:24cqw}
  .cases__grid[data-n="1"] .case .mk--phones .mk-phone--back{--pw:21cqw}
}