/* Кейсы: карусель на главной, список на /cases и попап со схемой.
   Токены — /assets/brand.css. Все селекторы скоупятся от .cases, .case-list и .case-zoom. */

/* ---------- карточка кейса: схема + текст ---------- */
.case-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: var(--paper); border: 1px solid var(--mist); border-radius: 12px; overflow: hidden; }
.case-card > .case-thumb { position: relative; display: grid; align-content: center; margin: 0; padding: 20px; border: 0; border-right: 1px solid var(--mist); background: var(--paper); cursor: zoom-in; font: inherit; color: inherit; text-align: left; }
.case-card > .case-thumb > img { display: block; width: 100%; height: auto; }
.case-card > .case-thumb > .case-thumb-hint { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 8px; background: var(--ink); color: var(--paper); font: 600 13.5px/1 var(--font-text); }
.case-card > .case-thumb > .case-thumb-hint > svg { width: 15px; height: 15px; }
.case-card > .case-thumb:hover, .case-card > .case-thumb:focus-visible { background: var(--steel-tint); }
.case-card > .case-thumb:hover > .case-thumb-hint { background: var(--steel-deep); }
.case-card > .case-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(22px, 3vw, 36px); }
.case-card > .case-body > .case-title { margin: 0; font: 600 clamp(19px, 1.9vw, 23px)/1.25 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.case-card > .case-body > .case-text { margin: 14px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--graphite); text-wrap: pretty; }
/* кружок-разделитель в заголовке кейса: «Кейс ○ название» */
.case-card .case-dot, .case-item .case-dot { display: inline-block; width: .56em; height: .56em; margin: 0 .22em; border: .13em solid var(--steel); border-radius: 50%; vertical-align: .06em; box-sizing: border-box; }
.case-more { color: var(--steel-deep); font-weight: 700; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.case-more:hover { text-decoration-thickness: 3px; }

/* ---------- карусель ----------
   Стрелки и точки видны, только когда карточек больше одной. Смену раз в N секунд включает
   атрибут data-cases-auto="N" на .cases (см. cases.js). */
.cases { margin-top: 44px; }
.cases > .cases-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cases > .cases-head > .cases-all { font-size: 15.5px; }
.cases > .cases-view { position: relative; }
.cases > .cases-view > .cases-track { position: relative; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.cases > .cases-view > .cases-track::-webkit-scrollbar { display: none; }
.cases > .cases-view > .cases-track > .case-card { flex: 0 0 100%; scroll-snap-align: start; }
.cases > .cases-view > .cases-arrow { display: none; position: absolute; z-index: 2; top: 50%; width: 42px; height: 42px; margin-top: -21px; padding: 0; place-items: center; border: 1px solid var(--mist); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; }
.cases > .cases-view > .cases-arrow > svg { width: 22px; height: 22px; }
.cases > .cases-view > .cases-arrow--prev { left: -21px; }
.cases > .cases-view > .cases-arrow--next { right: -21px; }
.cases > .cases-view > .cases-arrow:hover { border-color: var(--ink); background: var(--steel-tint); }
.cases > .cases-dots { display: none; justify-content: center; gap: 4px; margin-top: 12px; }
.cases > .cases-dots > button { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.cases > .cases-dots > button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--steel); box-sizing: border-box; }
.cases > .cases-dots > button[aria-current="true"]::before { background: var(--steel); }
.cases:has(.cases-track > :nth-child(2)) > .cases-view > .cases-arrow { display: grid; }
.cases:has(.cases-track > :nth-child(2)) > .cases-dots { display: flex; }

/* ---------- попап со схемой на весь экран ---------- */
.case-zoom { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--font-text); }
.case-zoom[open] { display: flex; flex-direction: column; }
.case-zoom::backdrop { background: rgba(6, 6, 6, .6); }
.case-zoom > .case-zoom-bar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 12px 20px; border-bottom: 1px solid var(--mist); }
.case-zoom > .case-zoom-bar > .case-zoom-title { flex: 1 1 240px; min-width: 0; margin: 0; font: 600 16px/1.3 var(--font-display); letter-spacing: -0.01em; }
.case-zoom > .case-zoom-bar > .case-zoom-close { width: 42px; height: 42px; border: 1px solid var(--mist); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.case-zoom > .case-zoom-bar > .case-zoom-close:hover { border-color: var(--ink); }
.case-zoom > .case-zoom-stage { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px; background: var(--fog); display: grid; }
.case-zoom > .case-zoom-stage > img { display: block; margin: auto; width: max(100%, 1100px); max-width: 1700px; height: auto; background: var(--paper); border: 1px solid var(--mist); }

@media (max-width: 820px) {
  /* на узком экране стрелки стоят в строке «Все кейсы», справа: по бокам карточки для них нет места */
  .cases > .cases-head { min-height: 42px; }
  .cases > .cases-view > .cases-arrow { top: -58px; margin-top: 0; }
  .cases > .cases-view > .cases-arrow--prev { left: auto; right: 52px; }
  .cases > .cases-view > .cases-arrow--next { right: 0; }
  .case-card { grid-template-columns: 1fr; }
  .case-card > .case-thumb { padding: 14px; border-right: 0; border-bottom: 1px solid var(--mist); }
}
@media (prefers-reduced-motion: no-preference) {
  .cases > .cases-view > .cases-track { scroll-behavior: smooth; }
}