/* Стили страниц кейсов IT-programma. Грузится ВМЕСТЕ с blog.css:
   шапка, футер, кнопки, токены :root, модалки — оттуда. Здесь только case-специфика. */

/* Контейнер кейса — та же ширина и отступ под фикс-шапку, что у статьи */
.case { max-width:760px; margin:0 auto; padding:140px 0 80px; }
.case-back { display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--muted); text-decoration:none; margin-bottom:26px; transition:color .2s; }
.case-back:hover { color:var(--ink); }
.case-niche { font-size:12.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:12px; }
.case h1 { font-size:clamp(28px,3.6vw,42px); font-weight:800; line-height:1.14; letter-spacing:-0.025em; margin-bottom:16px; }
.case-outcome { font-size:19px; line-height:1.5; color:#2c3340; font-weight:500; margin-bottom:26px; }
.case-outcome b { color:var(--ink); font-weight:700; }

/* Блок-подтверждение: официальный логотип клиента + ссылка на сайт */
.case-proof { display:inline-flex; align-items:center; gap:16px; text-decoration:none; color:inherit;
  border:1px solid var(--line); background:#fff; border-radius:14px; padding:13px 20px;
  box-shadow:0 6px 20px rgba(20,30,60,0.05); transition:transform .2s, box-shadow .2s, border-color .2s; }
.case-proof:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(20,30,60,0.11); border-color:rgba(255,176,32,0.55); }
.case-proof-logo { height:22px; width:auto; display:block; flex-shrink:0; }
.case-proof-sep { width:1px; height:26px; background:var(--line); flex-shrink:0; }
.case-proof-link { font-size:14px; color:var(--accent-ink); font-weight:600; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.case-proof .arr { transition:transform .25s; }
.case-proof:hover .arr { transform:translateX(3px); }

/* Мета-строка: крупный читаемый лейбл + значение */
.case-meta { display:flex; flex-wrap:wrap; gap:20px 44px; margin:28px 0 4px; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.case-meta div { display:flex; flex-direction:column; gap:6px; }
.case-meta .cm-l { font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent-ink); }
.case-meta .cm-v { font-size:16.5px; font-weight:700; color:var(--ink); line-height:1.25; }

/* Тело кейса — типографика как в статье */
.case-body { padding-top:6px; }
.case-body h2 { font-size:22px; font-weight:800; letter-spacing:-0.015em; margin:38px 0 12px; }
.case-body p { font-size:17px; line-height:1.7; color:#2c3340; margin-bottom:16px; }
.case-body p b { color:var(--ink); }

/* SVG-схема архитектуры — тёмная карточка */
.case-schema { margin:26px 0 8px; background:radial-gradient(90% 120% at 78% 0%, rgba(255,176,32,0.14), transparent 55%), #0C0E13;
  border-radius:20px; padding:26px 24px 18px; }
.case-schema svg { display:block; width:100%; height:auto; }
.case-schema figcaption { margin-top:10px; text-align:center; font-size:13px; color:#98A2B3; line-height:1.5; }

/* Как это работает — нумерованные шаги */
.case-steps { list-style:none; counter-reset:step; margin:8px 0 4px; }
.case-steps li { counter-increment:step; position:relative; padding:0 0 20px 52px; }
.case-steps li::before { content:counter(step); position:absolute; left:0; top:-2px; width:34px; height:34px;
  background:var(--accent); color:var(--ink); font-weight:800; font-size:15px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(255,176,32,0.32); }
.case-steps li::after { content:""; position:absolute; left:16px; top:34px; bottom:2px; width:2px; background:var(--line); }
.case-steps li:last-child { padding-bottom:0; }
.case-steps li:last-child::after { display:none; }
.case-steps li b { display:block; font-size:16.5px; font-weight:700; color:var(--ink); margin-bottom:3px; }
.case-steps li span { font-size:15.5px; line-height:1.6; color:#4a5261; }

/* Было / Стало — две карточки */
.ba-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:12px 0 4px; }
.ba-card { border-radius:16px; padding:20px 22px; }
.ba-was { background:#F6F7F9; border:1px solid var(--line); }
.ba-now { background:#FFFBF2; border:1px solid rgba(255,176,32,0.4); }
.ba-lab { font-size:11px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; margin-bottom:8px; }
.ba-was .ba-lab { color:var(--muted); }
.ba-now .ba-lab { color:var(--accent-ink); }
.ba-card p { font-size:15.5px; line-height:1.55; color:#3A4254; margin:0; }

/* Цитата */
.case-quote { margin:30px 0 8px; padding:22px 26px; border-left:3px solid var(--accent);
  background:#FAFAFB; border-radius:0 14px 14px 0; }
.case-quote p { font-size:18px; font-style:italic; line-height:1.55; color:var(--ink); margin:0 0 10px; }
.case-quote cite { font-size:13.5px; font-style:normal; color:var(--muted); }

/* CTA-блок внутри кейса: текст лежит на тёмном фоне — возвращаем светлый цвет,
   иначе правило .case-body p (тёмное) перебивает .article-cta p из blog.css. */
.case-body .article-cta h3 { color:#fff; }
.case-body .article-cta p { color:#C2C9D6; }

/* Низ-зона (.case-foot) и «Читайте также» (.case-related) — общие для кейсов и блога,
   стили живут в blog.css, чтобы статьи блога тоже их использовали. */

@media (max-width:640px){
  .case { padding:112px 0 60px; }
  .case-body p { font-size:16px; }
  .ba-grid { grid-template-columns:1fr; }
  .case-schema { padding:18px 14px 12px; }
  .case-meta { gap:16px 30px; }
}