/* ooobs — страница кейсов /cases. Дизайн-2026. Самодостаточно, не влияет на другие страницы. */

body.ooobs-cases-2026 .cases-hero { padding: 43px 0 44px; }
body.ooobs-cases-2026 .cases-hero .home-lead { max-width: 720px; }
body.ooobs-cases-2026 .cases-hero-note { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; }
body.ooobs-cases-2026 .cases-hero-note span { font-size: 12px; color: var(--o-muted); display: inline-flex; align-items: center; gap: 8px; }
body.ooobs-cases-2026 .cases-hero-note span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--o-link); }

/* Сетка карточек */
body.ooobs-cases-2026 .cases-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 6px; }

body.ooobs-cases-2026 .case-card { display: flex; flex-direction: column; background: var(--o-surface); border: 1px solid var(--o-line); border-radius: var(--o-radius); overflow: hidden; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
body.ooobs-cases-2026 .case-card:hover { border-color: #8a9e8f; transform: translateY(-2px); box-shadow: 0 10px 30px -18px rgba(32, 43, 37, .35); }

/* Скриншот: рамка 16:10, картинка кладётся поверх плейсхолдера */
body.ooobs-cases-2026 .case-shot { position: relative; aspect-ratio: 16 / 10; background: var(--o-soft); border-bottom: 1px solid var(--o-line); overflow: hidden; }
body.ooobs-cases-2026 .case-card:nth-child(3n+2) .case-shot { background: #f4e9db; }
body.ooobs-cases-2026 .case-card:nth-child(3n) .case-shot { background: #e6ebe8; }
body.ooobs-cases-2026 .case-shot img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
body.ooobs-cases-2026 .case-shot-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--o-muted); }
body.ooobs-cases-2026 .case-shot-ph span { opacity: .75; }

body.ooobs-cases-2026 .case-tag { position: absolute; z-index: 2; top: 13px; left: 13px; background: rgba(255, 255, 255, .92); border: 1px solid var(--o-line); border-radius: 999px; padding: 5px 11px; font-size: 11px; letter-spacing: .02em; color: var(--o-muted); }

/* Тело карточки */
body.ooobs-cases-2026 .case-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; flex: 1; min-width: 0; }
body.ooobs-cases-2026 .case-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; min-width: 0; }
body.ooobs-cases-2026 .case-body h3 { font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: -.5px; color: var(--o-ink); min-width: 0; }
body.ooobs-cases-2026 .case-site { min-width: 0; font-size: 12px; color: var(--o-link); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
body.ooobs-cases-2026 .case-site svg { width: 13px; height: 13px; }
body.ooobs-cases-2026 .case-desc { color: var(--o-muted); font-size: 14px; line-height: 1.6; }

body.ooobs-cases-2026 .case-work { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--o-line); }
body.ooobs-cases-2026 .case-work-label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--o-muted); margin-bottom: 7px; }
body.ooobs-cases-2026 .case-work-text { font-size: 14px; line-height: 1.6; color: var(--o-ink); }
body.ooobs-cases-2026 .case-work-text[data-placeholder] { color: #a9b2ab; font-style: italic; }

/* Планшет / телефон */
@media (max-width: 960px) {
  body.ooobs-cases-2026 .cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 620px) {
  body.ooobs-cases-2026 .cases-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body.ooobs-cases-2026 .case-body h3 { font-size: 22px; }
  body.ooobs-cases-2026 .case-head { flex-wrap: wrap; gap: 6px; }
}

/* Заголовок группы внутри /cases */
body.ooobs-cases-2026 .cases-group { margin-top: 10px; margin-bottom: 26px; }
body.ooobs-cases-2026 .cases-group:not(:first-child) { margin-top: 64px; }

/* Карточка-продукт (внутренняя ссылка на разбор) */
body.ooobs-cases-2026 .case-card--prod .case-shot { display: flex; align-items: center; justify-content: center; }
body.ooobs-cases-2026 .case-card--prod .case-shot svg { width: 46px; height: 46px; color: var(--o-link); opacity: .9; }
body.ooobs-cases-2026 .case-card--prod .case-more { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--o-line); font-size: 13px; color: var(--o-link); display: inline-flex; align-items: center; gap: 7px; }
body.ooobs-cases-2026 .case-card--prod .case-more svg { width: 15px; height: 15px; }

/* Лого-бар интеграций в начале /cases */
body.ooobs-cases-2026 .cases-logos { background: var(--o-surface); }
body.ooobs-cases-2026 .cases-logos-kicker { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--o-muted); }
body.ooobs-cases-2026 .logos-group { margin-top: 28px; }
body.ooobs-cases-2026 .logos-group:first-of-type { margin-top: 22px; }
body.ooobs-cases-2026 .logos-group-label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: #9aa69c; margin-bottom: 13px; }
body.ooobs-cases-2026 .logos-grid { display: flex; flex-wrap: wrap; gap: 12px; }
body.ooobs-cases-2026 .logo-tile { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-width: 92px; min-height: 60px; padding: 0 20px; background: var(--o-surface); border: 1px solid var(--o-line); border-radius: 12px; font-size: 15px; font-weight: 500; letter-spacing: -.2px; color: var(--o-ink); text-align: center; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
body.ooobs-cases-2026 .logo-tile:hover { border-color: #8a9e8f; transform: translateY(-2px); box-shadow: 0 10px 26px -18px rgba(32, 43, 37, .35); }
body.ooobs-cases-2026 .logo-ico { height: 26px; width: 26px; object-fit: contain; display: block; flex-shrink: 0; border-radius: 5px; }
body.ooobs-cases-2026 .logo-name { white-space: nowrap; }
@media (max-width: 620px) {
  body.ooobs-cases-2026 .logos-grid { gap: 9px; }
  body.ooobs-cases-2026 .logo-tile { min-width: 72px; min-height: 54px; padding: 0 14px; gap: 9px; font-size: 14px; }
  body.ooobs-cases-2026 .logo-ico { height: 22px; width: 22px; }
}

/* ================= Детальная страница кейса (/kejs-*) ================= */
body.ooobs-case-2026 .case-block .home-container { max-width: 900px; }
body.ooobs-case-2026 .case-detail-hero { padding: 40px 0 42px; }
body.ooobs-case-2026 .case-detail-hero .home-lead { max-width: 760px; }
body.ooobs-case-2026 .case-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--o-muted); margin-bottom: 22px; }
body.ooobs-case-2026 .case-crumbs a { color: var(--o-muted); }
body.ooobs-case-2026 .case-crumbs a:hover { color: var(--o-ink); }
body.ooobs-case-2026 .case-crumbs span { color: #b4bdb5; }
body.ooobs-case-2026 .case-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
body.ooobs-case-2026 .case-meta span { font-size: 12px; color: var(--o-link); background: #fff; border: 1px solid var(--o-line); border-radius: 999px; padding: 6px 12px; }

body.ooobs-case-2026 .case-block h2 { font-size: clamp(28px, 3vw, 38px); }
body.ooobs-case-2026 .case-block p { margin-top: 16px; color: var(--o-ink); line-height: 1.75; }
body.ooobs-case-2026 .case-block code { background: #fff; border: 1px solid var(--o-line); border-radius: 6px; padding: 1px 6px; font-size: .92em; }
body.ooobs-case-2026 .case-block h3 { margin-top: 28px; font-size: 13px; letter-spacing: .07em; color: var(--o-muted); text-transform: uppercase; font-weight: 500; }

body.ooobs-case-2026 .case-problem ul { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 12px; }
body.ooobs-case-2026 .case-problem li { position: relative; padding-left: 30px; line-height: 1.6; }
body.ooobs-case-2026 .case-problem li::before { content: '✕'; position: absolute; left: 0; top: 0; color: #b9533f; font-size: 13px; font-weight: 700; }

body.ooobs-case-2026 .case-steps { list-style: none; padding: 0; margin-top: 20px; display: grid; gap: 14px; counter-reset: step; }
body.ooobs-case-2026 .case-steps li { counter-increment: step; position: relative; padding: 18px 20px 18px 58px; background: var(--o-surface); border: 1px solid var(--o-line); border-radius: 14px; line-height: 1.6; }
body.ooobs-case-2026 .case-steps li::before { content: counter(step); position: absolute; left: 18px; top: 17px; width: 26px; height: 26px; border-radius: 50%; background: var(--o-soft); color: var(--o-link); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
body.ooobs-case-2026 .case-steps strong { color: var(--o-ink); }

body.ooobs-case-2026 .case-result ul { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 12px; }
body.ooobs-case-2026 .case-result li { position: relative; padding-left: 30px; line-height: 1.6; }
body.ooobs-case-2026 .case-result li::before { content: ''; position: absolute; left: 3px; top: 6px; width: 10px; height: 6px; border-left: 2px solid var(--o-link); border-bottom: 2px solid var(--o-link); transform: rotate(-45deg); }

body.ooobs-case-2026 .case-note { background: var(--o-soft); border: 1px solid var(--o-line); border-radius: var(--o-radius); padding: 26px 28px; }
body.ooobs-case-2026 .case-note-k { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--o-link); font-weight: 500; }
body.ooobs-case-2026 .case-note p { margin-top: 10px; }
body.ooobs-case-2026 .case-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
body.ooobs-case-2026 .case-facts span { font-size: 12px; color: var(--o-muted); background: #fff; border: 1px solid var(--o-line); border-radius: 999px; padding: 7px 13px; }
body.ooobs-case-2026 .case-facts b { color: var(--o-ink); font-weight: 600; }

body.ooobs-case-2026 .case-quote { border-left: 3px solid var(--o-peach); padding: 4px 0 4px 22px; margin-top: 26px; font-size: 18px; line-height: 1.6; color: var(--o-ink); }
body.ooobs-case-2026 .case-nav-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--o-link); }

body.ooobs-case-2026 .case-screenshot { margin: 0; }
body.ooobs-case-2026 .case-screenshot img { width: 100%; height: auto; display: block; border: 1px solid var(--o-line); border-radius: 14px; box-shadow: 0 22px 54px -30px rgba(32, 43, 37, .55); }
body.ooobs-case-2026 .case-screenshot figcaption { margin-top: 11px; font-size: 12px; line-height: 1.5; color: var(--o-muted); text-align: center; }

@media (max-width: 620px) {
  body.ooobs-case-2026 .case-block h2 { font-size: 26px; }
}