/* 08-reshenie-naym.html: дизайн поверх раскладки прототипа. Только токены из design.css. */
.num{font-family:var(--f-display);font-weight:var(--d-wt);letter-spacing:var(--d-track)}
/* «Как работаем»: номер, заголовок и текст на одном уровне во всех шагах */
@supports (grid-template-rows:subgrid){div.steps{grid-auto-rows:auto}div.steps>div{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}}

/* 20.10: кейсы как на главной — картинка кейса на всю карточку, текст белым поверх */
#cases{max-width:1200px;text-align:left}
#cases .slide{position:relative;overflow:hidden;border-radius:12px;height:560px;padding:48px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--night1)}
#cases .slide>.vbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
#cases .slide:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--night1) 78%,transparent) 0%,color-mix(in srgb,var(--night1) 45%,transparent) 42%,transparent 70%),linear-gradient(0deg,color-mix(in srgb,var(--night1) 55%,transparent) 0%,transparent 45%)}
#cases .slide>*:not(.vbg){position:relative;z-index:1;max-width:600px}
/* 21.10: у кейса банка весы занимают весь кадр — картинка уходит вправо, слева тёмное поле под цифру и текст */
#cases .slide>.vbg[src*="h-bank."]{left:auto;right:0;width:66%}
#cases .slide>*:not(.vbg){max-width:460px}
#cases .slide .num{font-size:clamp(48px,4.6vw,68px);line-height:1.05;margin:0 0 12px;color:var(--on-accent)}
#cases .slide p{font-size:clamp(18px,1.6vw,22px);color:color-mix(in srgb,var(--on-accent) 85%,transparent)}
#cases .slide p b{color:var(--on-accent)}
#cases .slide .who{margin-top:20px;font-size:18px;color:var(--on-accent)}
#cases .slide .who span{color:color-mix(in srgb,var(--on-accent) 75%,transparent)}
#cases .cbars{justify-content:flex-start}
@media (max-width:760px){#cases .slide{height:480px;padding:24px}#cases .slide .num{font-size:48px}#cases .slide p{font-size:18px}}

/* 20.10: на телефоне — картинка 3:2 сверху, текст под ней */
@media (max-width:760px){
  #cases .slide{height:auto;padding:0;justify-content:flex-start}
  #cases .slide>.vbg{position:relative;inset:auto;height:auto;aspect-ratio:3/2}
  #cases .slide>.vbg[src*="h-bank."]{width:100%}
  #cases .slide>*:not(.vbg){max-width:none}
  #cases .slide:after{display:none}
  #cases .slide>*:not(.vbg){padding:0 24px}#cases .slide .num{margin-top:20px}#cases .slide .who{padding-bottom:28px}
}