/*
 * Страницы кейсов /cases/<slug>/ и список /cases/ в плакатном дизайне (23.09.2026). Поверх /home-poster.css,
 * /services/vk-reklama/vk-poster.css и /poster-kit.css (первый экран с коллажем, полоса цифр, рваные полосы «Что сделали»
 * берутся оттуда — как на «Сайтах и лендингах»). Здесь только то, чего нет в наборе: контекст, итог-плакат, отчеты,
 * комментарий, карточки кейсов и список с фильтром.
 */

/* ---------- первый экран кейса: коллаж квадратный, заголовок — строки как на главной, кегль по самой длинной строке (--L) ---------- */
/* пропорции коллажа (--fig-ar) ставит сборщик на section#top по размеру файла */
/* кегль: самая длинная строка (--L знаков, знак ≈ .45 кегля) помещается в левую половину экрана */
.hero--case .hero__title{font-size:min(clamp(46px,7.6vw,118px), calc((50vw - var(--g)) / (var(--L,13) * .46)))}
/* квадратный коллаж ниже портретного «Сайтов» (там 780px), наклейка — на его нижнем левом углу, не на тексте */
@media (min-width:1261px){
  /* 24.09.2026: широкий коллаж (Codex отдает 3:2) по высоте 600px занимал до 1000px в ширину и наезжал на H1 —
     высоту ограничиваем так, чтобы ширина была не больше min(44vw, 640px) при любой пропорции --fig-ar */
  .hero--case,.hero--hub{--fh:min(600px,42vw,calc(min(44vw,640px) / (var(--fig-ar,1))));--st-x:0px;--st-y:0px}
  .hero--case .sticker--hero,.hero--hub .sticker--hero{left:-5%;right:auto;bottom:-3%}
}
@media (min-width:981px) and (max-width:1260px){
  .hero--case .hero__fig,.hero--hub .hero__fig{width:min(40vw,480px)}
  .hero--case .sticker--hero,.hero--hub .sticker--hero{left:-6%;right:auto;bottom:-10%}
}
.hero--case .hero__title .hl--k{max-width:40ch}
.hero__lede b{font-weight:700}
.hero__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin:clamp(20px,2vw,28px) 0 0}
.hero__act .link{color:var(--ink)}
/* наклейка кейса не листается: подпись «Итог проекта» — ссылка на плакат ниже */
.hero--case .sticker--hero,.hero--hub .sticker--hero{width:clamp(250px,19vw,300px)}
@media (max-width:980px){
  /* на телефоне и планшете строки заголовка не склеиваются в одну: у кейсов заголовок — название проекта */
  .hero--case .hero__title{font-size:min(10.6vw, calc((100vw - 2 * var(--g)) / (var(--L,13) * .46)))}
  .hero--case .hero__title .hl--2,.hero--case .hero__title .hl--3{display:block;margin-top:0}
  .hero--case .hero__title .hl--2{scale:1 1.5}
  .hero--case .hero__title .hl--3{scale:1 1.33}
  .hero--case .hero__title .marker--m::before{display:none}
}
@media (max-width:700px){
  /* квадратный коллаж ниже портретного «Сайтов»: заходит на заголовок меньше */
  .hero--case,.hero--hub{--art-y:-16vw;--st-y:-53vw}
}

/* ---------- контекст проекта ---------- */
.cx{padding-block:var(--sec)}
.cx__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px 32px;align-items:end;margin-bottom:clamp(28px,3.4vw,52px)}
.cx__head .h2{margin:0}
.cx__head .lead{margin:0;padding-bottom:6px;color:var(--muted)}
.cx__text{columns:2;column-gap:clamp(24px,3vw,56px);padding-top:clamp(22px,2.4vw,34px);border-top:2px solid var(--ink)}
.cx__text p{margin:0 0 14px;font-size:clamp(16px,1.15vw,18px);line-height:1.55;break-inside:avoid}
.cx__text .cx__first{font:700 clamp(21px,1.7vw,27px)/1.3 var(--text);column-span:none}
/* один абзац (стоматологии: первый уже на первом экране) — без колонок, на ширину строки */
.cx__text--one{columns:auto}
.cx__text--one .cx__first{max-width:48ch;margin:0}
.cx__lim{margin-top:clamp(34px,4vw,60px)}
.cx__k{margin:0 0 16px;font:800 15px/1 var(--display);text-transform:uppercase;letter-spacing:.08em}
.cx__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,30px)}
.cx__list li{position:relative;display:flex;align-items:flex-start;gap:14px;padding:clamp(18px,1.8vw,26px);background:var(--sheet);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.cx__list li:nth-child(3n+2){box-shadow:8px 8px 0 var(--blue)}
.cx__list li:nth-child(3n){box-shadow:8px 8px 0 var(--lime)}
.cx__n{flex:none;display:grid;place-items:center;width:38px;height:38px;background:var(--lime);border:2px solid var(--ink);font:900 18px/1 var(--display)}
.cx__list b{font:800 clamp(20px,1.6vw,26px)/1.02 var(--display);text-transform:uppercase;padding-top:4px}

/* ---------- «Что сделали»: полосы «Как проходит разработка» без картинок — заголовок, текст и крупный номер ---------- */
.wsx--case .wsx__h{white-space:normal;text-wrap:balance}
.wsx--case .wsx__big{display:none}
@media (min-width:1280px){
  .wsx--case .wsx__lead{top:calc(80 * var(--u))}
  .wsx--case .wsx__row{grid-template-columns:calc(560 * var(--u)) minmax(0,1fr) calc(230 * var(--u));grid-template-areas:"h goal big";min-height:calc(150 * var(--u));padding-right:calc(40 * var(--u))}
  .wsx--case .wsx__row--5 .wsx__band{--bw:100%}
  .wsx--case .wsx__n{display:none}
  .wsx--case .wsx__h{font-size:calc(50 * var(--u));line-height:.94;max-width:calc(520 * var(--u));scale:1 1.14}
  .wsx--case .wsx__goal{align-self:center;max-width:calc(640 * var(--u));font-weight:500;font-size:max(14px,calc(17 * var(--u)));line-height:1.42}
  .wsx--case .wsx__big{position:relative;z-index:3;grid-area:big;display:block;justify-self:end;align-self:center;font:900 calc(120 * var(--u))/.8 var(--display);letter-spacing:-.02em;color:var(--lime);rotate:-3deg}
  .wsx--case .wsx__row--2 .wsx__big,.wsx--case .wsx__row--4 .wsx__big{color:var(--blue)}
  .wsx--case .wsx__row--5 .wsx__big{color:var(--lime)}
}
@media (max-width:1279.98px){
  .wsx--case .wsx__h{margin-top:30px;font-size:min(9.4cqw,52px);line-height:.95}
  .wsx--case .wsx__goal{font-weight:500}
  .wsx--case .wsx__row{padding-bottom:30px}
}
@media (min-width:700px) and (max-width:1279.98px){
  .wsx--case .wsx__row{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:center}
  .wsx--case .wsx__h{grid-column:1;grid-row:1;margin-top:26px;font-size:min(6.4cqw,56px)}
  .wsx--case .wsx__goal{grid-column:2;grid-row:1;margin-top:26px}
}
@media (max-width:699.98px){
  /* у кейсов в карточках нет картинок: лента без запаса сверху */
  .wsx--case .wsx__slider{margin-top:clamp(28px,7cqw,48px)}
  .wsx--case .wsx__rows{padding-top:8px}
  .wsx--case .wsx__h{margin-top:42px}
  .wsx--case .wsx__foot{display:none}
}

/* ---------- итог: плакат кейса ---------- */
.cres .poster__meta span + span{opacity:.8}
.cres .figure__lead{margin:18px 0 0;max-width:46ch;font:600 clamp(17px,1.3vw,20px)/1.45 var(--text)}
.cres .poster.on-dark .figure__lead{color:var(--on-ink)}
.rlist{grid-column:9/13;align-self:end;list-style:none;margin:0;padding:clamp(28px,3vw,44px) 0 0;display:grid;gap:0}
.rlist li{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font:800 clamp(20px,1.6vw,25px)/1.08 var(--display);text-transform:uppercase}
.rlist li:last-child{border-bottom:0}
.rlist__box{flex:none;display:grid;place-items:center;width:30px;height:30px;margin-top:-2px;background:var(--lime);border:2px solid var(--ink)}
.rlist__box .icon{width:18px;height:18px;stroke:var(--ink);stroke-width:3.4;fill:none;stroke-linecap:square}
.cres .tally dt{text-transform:none}
.rtext{grid-column:1/-1;margin-top:clamp(40px,4vw,64px);padding-top:26px;border-top:2px solid currentColor}
.rtext__k{margin:0 0 12px;font:800 15px/1 var(--display);text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.rtext p:last-child{margin:0;columns:2;column-gap:clamp(24px,3vw,56px);font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:var(--soft)}
.cres .trio dd b{font-size:clamp(20px,1.6vw,25px)}
/* длинные итоги («10,05 млн ₽») не шире своей колонки */
.cres .giant{font-size:clamp(110px,19vw,300px)}

/* ---------- отчеты проекта: скриншоты из CRM, наклеенные листы ---------- */
.cshots{padding-block:var(--sec)}
.cshots__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px 32px;align-items:end;margin-bottom:clamp(40px,4.4vw,70px)}
.cshots__head .h2,.cshots__head .lead{margin:0}
.cshots__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,56px);align-items:start}
.cshot{position:relative;margin:0;padding:10px;background:var(--sheet);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);rotate:-1.2deg}
.cshot--2{rotate:1.4deg;box-shadow:10px 10px 0 var(--blue);margin-top:clamp(20px,3vw,48px)}
.cshot a{display:block}
.cshot img{display:block;width:100%;height:auto}
.cshot figcaption{position:absolute;left:18px;top:-22px;margin:0;max-width:none;white-space:nowrap;font-size:clamp(15px,1.2vw,19px);padding:8px 12px 9px;--r:-3deg}
.cshot--2 figcaption{left:auto;right:18px;--r:2.5deg}

/* ---------- комментарий команды ---------- */
.cq{padding-block:var(--sec)}
.cq__fig{position:relative;margin:0;max-width:1100px}
.cq .qm{display:block;width:clamp(64px,6vw,96px);height:auto;aspect-ratio:84/66;fill:var(--lime);margin-bottom:clamp(14px,1.6vw,24px)}
.cq blockquote{margin:0}
.cq blockquote p{margin:0;font:900 clamp(34px,4.2vw,68px)/.98 var(--display);text-transform:uppercase;text-wrap:balance}
.cq figcaption{margin-top:clamp(18px,2vw,28px);font:700 13px/1.3 var(--text);text-transform:uppercase;letter-spacing:.1em;color:var(--on-ink-soft)}
.cq__end{padding-bottom:0}

/* ---------- карточки кейсов: похожие кейсы и список /cases/ ---------- */
.crel{padding-block:var(--sec)}
.crel__head,.chub__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px 32px;align-items:end;margin-bottom:clamp(36px,3.4vw,48px)}
.crel__head .h2,.crel__head .lead,.chub__head .h2,.chub__head .lead{margin:0}
.crel__head .lead,.chub__head .lead{padding-bottom:6px;color:var(--muted)}
.crel__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(18px,2vw,32px)}
.ccard{display:flex;container-type:inline-size}
.ccard[hidden]{display:none}
.ccard__a{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;width:100%;padding:44cqw clamp(18px,1.7vw,26px) clamp(20px,2vw,28px);background:var(--sheet);color:var(--ink);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);text-decoration:none;transition:translate .2s cubic-bezier(.3,.7,.2,1),box-shadow .2s}
.ccard--on-dark .ccard__a{background:var(--ink);color:var(--on-ink);box-shadow:10px 10px 0 var(--lime)}
.ccard--on-blue .ccard__a{background:var(--blue);color:#fff;box-shadow:10px 10px 0 var(--ink)}
.ccard--on-paper .ccard__a{box-shadow:10px 10px 0 var(--blue)}
.ccard__a:hover{translate:-3px -3px}
.ccard--on-dark .ccard__a:hover{box-shadow:13px 13px 0 var(--lime)}
.ccard--on-blue .ccard__a:hover{box-shadow:13px 13px 0 var(--ink)}
.ccard--on-paper .ccard__a:hover{box-shadow:13px 13px 0 var(--blue)}
.ccard__a:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
/* коллаж кейса — фон карточки под текстом; значения владельца с ползунков (23.09.2026, карточка 423px):
   центр 71%, сдвиг −12px, ширина 73%, наклон 7,5°, затемнение цветом карточки 0,9, текст с 186px, обрезка по карточке.
   Пиксели переведены в доли ширины карточки (cqw), поэтому на телефоне и в три колонки на компьютере одинаково */
.ccard__a{--cb-bg:var(--sheet)}
.ccard--on-dark .ccard__a{--cb-bg:var(--ink)}
.ccard--on-blue .ccard__a{--cb-bg:var(--blue)}
.ccard__pic{position:absolute;z-index:0;left:71%;top:-2.84cqw;width:73%;margin:0;translate:-50% 0;rotate:7.5deg;pointer-events:none}
.ccard__pic::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 25%,var(--cb-bg) 100%);opacity:.9}
.ccard__a>:not(.ccard__pic){position:relative;z-index:1}
.ccard__pic img{display:block;width:100%;height:auto;rotate:-2deg;transition:rotate .3s cubic-bezier(.3,.7,.2,1)}
.ccard:nth-child(2n) .ccard__pic img{rotate:2deg}
.ccard__a:hover .ccard__pic img{rotate:0deg}
.ccard__tag{font:700 12px/1.3 var(--text);text-transform:uppercase;letter-spacing:.07em;opacity:.72}
.ccard__num{margin-top:10px;display:flex;align-items:flex-end;gap:.06em;font:900 clamp(56px,5vw,84px)/.84 var(--display);letter-spacing:-.02em;color:var(--blue);white-space:nowrap}
.ccard--on-dark .ccard__num{color:var(--lime)}
.ccard--on-blue .ccard__num{color:#fff}
.ccard__num small{font-size:.36em;line-height:.9;padding-bottom:.06em}
.ccard__cap{margin-top:8px;font:800 clamp(17px,1.3vw,20px)/1 var(--display);text-transform:uppercase}
.ccard__h{margin:16px 0 18px;padding-top:14px;border-top:2px solid currentColor;font:600 16px/1.35 var(--text);text-transform:none}
.ccard__go{margin-top:auto;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.crel__links{display:flex;flex-wrap:wrap;gap:12px 14px;margin:clamp(40px,4vw,60px) 0 0}
.crel__links a{display:inline-flex;flex-direction:column;gap:3px;padding:10px 14px 11px;background:var(--sheet);color:var(--ink);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--lime);text-decoration:none;font:800 17px/1.05 var(--display);text-transform:uppercase}
.crel__links a i{font:700 11px/1 var(--text);font-style:normal;letter-spacing:.08em;opacity:.65}
.crel__links a:hover{box-shadow:5px 5px 0 var(--blue)}

/* ---------- список /cases/ ---------- */
.chub{padding-block:var(--sec)}
.chub__head{margin-bottom:clamp(24px,2.6vw,40px)}
.chub__filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.chub__filters button{padding:10px 16px 11px;background:var(--sheet);color:var(--ink);border:2px solid var(--ink);font:800 16px/1 var(--display);text-transform:uppercase;letter-spacing:.03em;cursor:pointer}
.chub__filters button:hover{background:var(--lime)}
.chub__filters button.is-active{background:var(--ink);color:var(--lime)}
.chub__filters button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.chub__empty{margin:0;font-size:18px}

/* ---------- форма внизу: пункты под лидом ---------- */
.brief__list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;font:600 17px/1.35 var(--text)}
.brief__list li{position:relative;padding-left:30px}
.brief__list li::before{content:"";position:absolute;left:0;top:.2em;width:16px;height:16px;background:var(--lime);border:2px solid var(--ink)}

/* ================= планшет и телефон ================= */
@media (max-width:1180px){
  .crel__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .cx__head,.cshots__head,.crel__head,.chub__head{grid-template-columns:1fr;gap:16px}
  .cx__list{grid-template-columns:1fr}
  .rlist{grid-column:1/-1}
}
@media (max-width:700px){
  .cx__text{columns:1}
  .cx__list li{box-shadow:6px 6px 0 var(--ink)}
  .cx__list li:nth-child(3n+2){box-shadow:6px 6px 0 var(--blue)}
  .cx__list li:nth-child(3n){box-shadow:6px 6px 0 var(--lime)}
  .rtext p:last-child{columns:1}
  .cshots__grid{grid-template-columns:1fr;gap:48px}
  .cshot{box-shadow:6px 6px 0 var(--ink)}
  .cshot--2{margin-top:0;box-shadow:6px 6px 0 var(--blue)}
  .cshot figcaption{white-space:normal;max-width:80%}
  .crel__list{grid-template-columns:1fr;gap:40px}
  .crel__head{margin-bottom:40px}
  .ccard__a{box-shadow:7px 7px 0 var(--ink)}
  .ccard--on-dark .ccard__a{box-shadow:7px 7px 0 var(--lime)}
  .ccard--on-paper .ccard__a{box-shadow:7px 7px 0 var(--blue)}
  .chub__filters{gap:8px;margin-bottom:40px}
  .chub__filters button{font-size:15px;padding:9px 12px 10px}
  .brief__list{font-size:16px}
}

/* до 380px: после настоящих картинок коллажи стали ниже квадратной заглушки, и у низких (загородные дома, оборудование)
   наклейка поднималась на заголовок на 3–5px — опускаем на 3,5vw */
@media (max-width:380px){
  .hero--case{--st-y:-49.5vw}
}