/* Карточки кейсов и страница архива.
   Сами страницы кейсов живут на case-page.css — стили старого генератора
   detail-страниц отсюда удалены вместе с ним. */
:root{
  --case-paper:#f1ece2;
  --case-ink:#111;
  --case-grid:rgba(17,17,17,.052);
  --case-shell:min(1420px,calc(100vw - 96px));
}

/* ---------- Карточка кейса (главная + архив) ---------- */
.case-grid-v2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px!important;align-items:stretch}
.case-card{display:grid;grid-template-rows:40px minmax(355px,1fr) auto;min-width:0;background:var(--case-paper);color:var(--case-ink);border:3px solid var(--case-ink);box-shadow:8px 8px 0 var(--case-ink);text-decoration:none;overflow:hidden;transform:none;transition:box-shadow .16s ease,translate .16s ease}
.case-card:hover{translate:0 -2px;box-shadow:8px 10px 0 var(--case-ink)}
.case-card:focus-visible{outline:3px solid var(--case-ink);outline-offset:4px}
.case-card-top{display:flex;align-items:center;padding:0 14px;border-bottom:3px solid var(--case-ink);font:10px/1 var(--ui);text-transform:uppercase;letter-spacing:.035em}
.case-card-top span:last-child{display:none}
.case-scene{position:relative;overflow:hidden;background:var(--accent);isolation:isolate}
.case-scene:before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--case-grid) 1px,transparent 1px),linear-gradient(90deg,var(--case-grid) 1px,transparent 1px);background-size:52px 52px;opacity:.72}
.case-scene-orbit{position:absolute;width:62%;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);border-radius:50%;right:-13%;top:12%;opacity:.58}
.case-scene img{position:absolute;z-index:2;left:50%;bottom:0;transform:translateX(-50%);height:96%;width:auto;max-width:96%;object-fit:contain;transition:transform .22s ease}
.case-card:hover .case-scene img{transform:translateX(-50%) translateY(-2px)}
.case-card--geosatva .case-scene img{height:99%;max-width:105%}
.case-card-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding:20px 18px 18px;border-top:3px solid var(--case-ink);background:var(--case-paper)}
.case-card-copy h3{margin:0;font:clamp(34px,2.9vw,52px)/.9 var(--display);max-width:13ch}
.case-card-role{margin:9px 0 10px;font:10px/1.25 var(--ui);text-transform:uppercase}
.case-card-task{margin:0;max-width:48ch;font:13px/1.38 var(--ui)}
.case-card-link{align-self:end;white-space:nowrap;padding:10px 12px;font:10px/1 var(--ui);border:2px solid transparent;transition:background .14s ease,color .14s ease,border-color .14s ease}
.case-card:hover .case-card-link,
.case-card:focus-visible .case-card-link{background:var(--case-ink);color:var(--case-paper);border-color:var(--case-ink)}

/* ---------- Страница архива ---------- */
/* styles.css красит html в #050505 с !important ради overscroll на главной.
   Здесь из-за этого при резиновой прокрутке вылезала черная полоса. */
html:has(body.cases-page){background:var(--case-paper)!important}
.cases-page{background:var(--case-paper)!important;color:var(--case-ink)!important;background-image:linear-gradient(var(--case-grid) 1px,transparent 1px),linear-gradient(90deg,var(--case-grid) 1px,transparent 1px)!important;background-size:48px 48px!important}
.cases-standalone-main{width:var(--case-shell)!important;max-width:none!important;padding:76px 0 96px!important;margin:auto!important}
.cases-standalone-hero{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(320px,.62fr)!important;gap:64px!important;align-items:end!important;margin:0 0 52px!important;padding:0!important}
.cases-standalone-hero>p{display:none!important}
.cases-standalone-hero h1{font:clamp(54px,5.5vw,84px)/.9 var(--display)!important;margin:0!important;max-width:12ch}
.cases-standalone-hero>span{font:15px/1.5 var(--ui)!important;max-width:35rem!important;margin:0 0 4px!important}
.archive-case-grid-page{padding-bottom:10px}
.archive-footer{width:var(--case-shell)!important;margin:56px auto 0!important;padding:24px 0!important;border:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;font-size:13px!important}
.archive-footer:before{display:none!important}
.archive-footer a,.archive-footer span{font-size:13px}

@media(max-width:1100px){
  :root{--case-shell:min(100% - 48px,1100px)}
  .case-grid-v2{gap:24px!important}
  .case-card{grid-template-rows:38px minmax(300px,1fr) auto}
  .case-card-copy{grid-template-columns:1fr}
  .case-card-link{justify-self:start}
}

@media(max-width:760px){
  :root{--case-shell:calc(100vw - 28px)}
  .case-grid-v2{grid-template-columns:1fr;gap:24px!important}
  .case-card{grid-template-rows:38px minmax(330px,56vh) auto;box-shadow:6px 6px 0 #111}
  .case-card-copy h3{font-size:40px}
  .case-card-task{font-size:12px}
  .case-card-link{padding-left:0}
  .cases-standalone-main{padding:42px 0 70px!important}
  .cases-standalone-hero{grid-template-columns:1fr!important;gap:18px!important;margin-bottom:34px!important}
  .cases-standalone-hero h1{font-size:54px!important}
  .cases-standalone-hero>span{font-size:14px!important;max-width:31rem!important}
  .archive-footer{flex-direction:column;align-items:flex-start!important;gap:16px;margin-top:32px!important}
}

@media(prefers-reduced-motion:reduce){
  .case-card,.case-scene img,.case-card-link{transition:none}
}

/* =====================================================
   Мобильная лента кейсов
   ===================================================== */
@media(max-width:760px){
  /* Сверху и снизу секции было слишком много воздуха, из-за чего архив
     «проваливался» под шапку и терял связь с ней. */
  .cases-standalone-main{padding:26px 0 44px!important}
  .cases-standalone-hero{margin-bottom:26px!important}

  /* Карточки читаются как одна лента, а не как отдельные плакаты. */
  .case-grid-v2{gap:18px!important}
  .case-card{grid-template-rows:36px minmax(300px,46vh) auto!important}

  /* Портрет держится нижней кромкой сцены. Из-за hover-сдвига (он остается
     активным после тапа) под фигурой появлялась пустая полоса. */
  .case-card .case-scene img{transform:translateX(-50%)!important;bottom:0!important}
  .case-card:hover .case-scene img,
  .case-card:active .case-scene img,
  .case-card:focus .case-scene img{transform:translateX(-50%)!important}

  /* «Смотреть кейс» стояла в потоке текста и рвалась по строкам. */
  .case-card-copy{grid-template-columns:1fr!important;gap:14px!important;padding:18px 16px 16px!important}
  .case-card-link{
    display:inline-flex!important;align-items:center!important;
    justify-self:start!important;white-space:nowrap!important;
    min-height:40px!important;padding:0 14px 0 0!important;
    font-size:11px!important;line-height:1!important;
  }
}

/* На странице архива сцена карточки была вытянутой, и объект GeoSatva
   упирался в кромки. Квадратный кадр даёт ему поместиться целиком. */
.cases-page .case-card{grid-template-rows:40px auto auto!important}
.cases-page .case-scene{aspect-ratio:1/1!important;min-height:0!important}
.cases-page .case-scene img{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%)!important;
  height:auto!important;width:auto!important;
  max-width:88%!important;max-height:88%!important;
  bottom:auto!important;
}
.cases-page .case-card:hover .case-scene img{transform:translate(-50%,calc(-50% - 2px))!important}
@media(max-width:760px){
  .cases-page .case-card{grid-template-rows:36px auto auto!important}
}