/* Страница-кейс портфолио (content/portfolio_case_<slug>.tpl.php) — во всю ширину, без обёртки .inner.
   Макет: артефакт «Кейс concity.ru» (Design). Цвета и шрифты — переменные topstudia.css. */
.case{background:var(--paper);color:var(--ink);font-size:17px;line-height:1.6}
.case a{color:#1F5FCC}
.case h1,.case h2,.case h3{color:inherit;max-width:none}
.case-k{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#5A5F66}
.case-dark{background:var(--night);color:var(--text)}
.case-dark .case-k{color:#A7ADB5}
.case-white{background:#fff}
.case-sand{background:#E6E4DD}
.case-sec{padding:80px 0}
.case-row{display:flex;flex-wrap:wrap;gap:40px 64px}
.case-row>*{min-width:0}
.case-side{flex:1 1 300px}
.case-body{flex:2 1 560px}

/* первый экран */
.case-hero{background:var(--night);color:var(--text);padding:40px 0 0;overflow:hidden}
.case-crumbs{font-size:14px;color:#A7ADB5;display:flex;gap:10px;flex-wrap:wrap}
.case .case-crumbs a{color:#A7ADB5;text-decoration:none}
.case .case-crumbs a:hover{color:var(--text)}
.case-hero-grid{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-end;margin-top:36px}
.case-hero-grid>*{flex:1 1 520px;min-width:0}
.case-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--w-orange)}
.case-eyebrow::before{content:"";width:28px;height:2px;background:currentColor}
.case-hero h1{margin-top:18px;font-weight:800;font-size:clamp(40px,6vw,76px);line-height:1.02;letter-spacing:-.03em}
.case-sub{margin-top:14px;font-family:var(--f-h);font-weight:600;font-size:clamp(22px,2.4vw,30px);line-height:1.25;max-width:640px}
.case-lead{margin-top:22px;font-size:18px;line-height:1.6;color:#C9CDD3;max-width:600px}
.case-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.case .btn-cta,.case .btn-cta:hover{color:var(--cta-ink)}
.case .btn-ghost{color:var(--text);border-color:rgba(243,242,238,.35)}
.case .btn-ghost:hover{border-color:var(--text);color:var(--text)}
.case-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);max-width:600px}
.case-meta dt{font-size:13px;color:#A7ADB5}
.case-meta dd{margin-top:6px;font-weight:600}
.case-hero-shots{position:relative}
.case-hero-shots .case-browser{transform:translateY(40px)}
.case-hero-shots .case-phone{position:absolute;right:-18px;bottom:-70px;width:170px}
.case-wires{display:block;width:100%;height:120px}
.case-wires path{fill:none;stroke-width:2.5}

/* браузер и телефон */
.case-browser{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(13,15,18,.35),0 0 0 1px rgba(13,15,18,.08)}
.case-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#E9E8E3}
.case-bar i{width:10px;height:10px;border-radius:50%;background:#C9C7C0}
.case-bar span{margin-left:12px;font-size:12px;line-height:1;font-weight:500;color:#5A5F66;background:#fff;padding:6px 12px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.case-browser img{width:100%;height:auto}
.case-phone{background:var(--night);border-radius:34px;padding:10px;box-shadow:0 30px 60px -20px rgba(13,15,18,.5)}
.case-phone img{width:100%;border-radius:26px}
.case figure{margin:0}
.case img{height:auto}
.case .mobile_menu_select{display:none}
.case figcaption{margin-top:12px;font-size:14px;color:#5A5F66}
.case a.pf-zoom{display:block;cursor:zoom-in}

/* цифры */
.case-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:16px}
.case-stat{background:#fff;border-radius:18px;padding:26px 24px}
.case-stat b{display:block;font-family:var(--f-h);font-weight:800;font-size:44px;line-height:1}
.case-stat span{display:block;margin-top:10px;font-size:15px;color:#4A4F57}

/* было / стало */
.case-h2{margin-top:12px;font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1.1;letter-spacing:-.02em}
.case-ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.case-ba>div{border-radius:18px;padding:28px;background:#E6E4DD}
.case-ba>div.is-after{background:var(--night);color:#E4E6E9}
.case-ba small{display:block;font-size:13px;font-weight:600;color:#5A5F66}
.case-ba .is-after small{color:var(--w-green)}
.case-ba p{margin-top:10px;font-size:17px;line-height:1.6}

/* оглавление */
.case-toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.case .case-toc a{text-decoration:none;color:var(--ink);background:#fff;border-radius:999px;padding:10px 18px;font-size:15px;font-weight:500}
.case .case-toc a:hover{background:var(--night);color:var(--text)}

/* главы: номер + провод своего цвета */
.case-ch{--wire:var(--w-blue);--num:#1F6FE8}
.case-ch.w-orange{--wire:var(--w-orange);--num:#C85F00}
.case-ch.w-green{--wire:var(--w-green);--num:#168A51}
.case-ch.w-brown{--wire:var(--w-brown);--num:#8C5A2E}
.case-dark.case-ch{--num:var(--wire)}
.case-wire{display:flex;align-items:center;gap:12px}
.case-wire b{font-family:var(--f-h);font-weight:800;font-size:15px;line-height:1;color:var(--num)}
.case-wire::after{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--wire);order:3}
.case-wire i{flex:1;height:2px;background:var(--wire);order:2}
.case-ch h2{margin-top:18px;font-weight:700;font-size:34px;line-height:1.12;letter-spacing:-.02em}
.case-ch .case-side p{margin-top:14px;font-size:17px;line-height:1.6;color:#4A4F57}
.case-dark .case-side p{color:#C9CDD3}
.case-ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px 32px}
.case-ul.one{grid-template-columns:1fr;margin-top:24px}
.case-ul li{position:relative;padding-left:22px;font-size:16px;line-height:1.55;color:#2A2E35}
.case-ul li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:2px;background:var(--wire)}
.case-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px;margin-top:48px}

/* карточки */
.case-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.case-card{background:#fff;border-radius:18px;padding:24px}
.case-card h3{font-weight:700;font-size:18px;line-height:1.3;letter-spacing:0}
.case-card p{margin-top:8px;font-size:15px;line-height:1.55;color:#4A4F57}
.case-dark .case-card{background:#16191E;border-radius:20px;padding:26px}
.case-dark .case-card p{color:#C9CDD3}
.case-card.is-wide{grid-column:1/-1;padding:32px;border:1px solid rgba(47,203,122,.35)}
.case-bot{display:flex;align-items:center;gap:14px}
.case-bot>span{width:44px;height:44px;border-radius:50%;background:var(--w-green);display:flex;align-items:center;justify-content:center;flex:none}
.case-bot h3{font-size:22px;line-height:1.2}
.case-bot small{display:block;margin-top:4px;font-size:14px;color:#A7ADB5}
.case-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.case-chips span{border-radius:999px;padding:8px 14px;font-size:14px;background:rgba(47,203,122,.12);color:#BFF0D5}

/* код микроразметки */
.case-code{margin-top:24px;border-radius:16px;background:var(--night);color:#C9CDD3;padding:22px;font:400 14px/1.7 ui-monospace,"Cascadia Mono",Consolas,monospace;overflow-x:auto}
.case-code .k{color:#A7ADB5}.case-code .b{color:#7FB2FF}.case-code .o{color:#FFB370}.case-code .g{color:#6EE0A3}.case-code .r{color:#E0B48C}
.case-code .i1{padding-left:16px}.case-code .i2{padding-left:32px}

/* шаги */
.case-steps{list-style:none;margin-top:28px}
.case-steps li{display:flex;gap:16px;padding:14px 0;border-top:1px solid #E6E4DD;font-size:16px;line-height:1.55}
.case-steps li:last-child{border-bottom:1px solid #E6E4DD}
.case-steps b{font-family:var(--f-h);font-size:14px;line-height:1.6;color:var(--num);min-width:22px}

/* схема выгрузок */
.case-flow{display:flex;align-items:stretch;flex-wrap:wrap}
.case-flow-src{flex:1 1 180px;display:flex;align-items:center}
.case-flow-src>div{width:100%;border-radius:18px;background:var(--night);color:var(--text);padding:26px}
.case-flow-src small{display:block;font-size:13px;color:#A7ADB5}
.case-flow-src strong{display:block;margin-top:6px;font-family:var(--f-h);font-size:22px;line-height:1.2}
.case-flow-src p{margin-top:8px;font-size:14px;color:#C9CDD3}
.case-flow svg{width:80px;height:auto;align-self:stretch}
.case-flow svg path{fill:none;stroke-width:2.5}
.case-flow-dst{flex:1 1 260px;display:flex;flex-direction:column;gap:10px}
.case-flow-dst>div{background:#fff;border-radius:14px;padding:16px 20px}
.case-flow-dst strong{display:block;font-weight:600}
.case-flow-dst span{display:block;margin-top:4px;font-size:14px;color:#4A4F57}

.case-phones{display:flex;gap:24px;justify-content:center}
.case-phones .case-phone{width:220px;max-width:46%}
.case-phones .case-phone+.case-phone{margin-top:48px}

.case-tech{border-top:1px solid #D9D7D0;padding-top:32px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:baseline}
.case-tech div{display:flex;flex-wrap:wrap;gap:8px}
.case-tech span{border:1px solid #C9C7C0;border-radius:999px;padding:7px 14px;font-size:14px}

.case-cta{position:relative;overflow:hidden;padding:88px 0}
.case-cta>svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:300px;opacity:.55}
.case-cta>svg path{fill:none;stroke-width:2}
.case-cta .wrap{position:relative;display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.case-cta h2{font-weight:800;font-size:clamp(32px,4vw,52px);line-height:1.05}
.case-cta p{margin-top:16px;font-size:18px;color:#C9CDD3;max-width:560px}

.wb{stroke:var(--w-blue)}.wo{stroke:var(--w-orange)}.wg{stroke:var(--w-green)}.wr{stroke:var(--w-brown)}

@media (max-width:760px){
  .case-sec{padding:56px 0}
  .case-hero-shots .case-phone,.case-flow svg{display:none}
  .case-meta{grid-template-columns:1fr 1fr}
  .case-flow{gap:10px}
}

/* кейс КОнФЕ.точки: фото на первом экране, схема системы, оплата по шагам, выделенная мысль */
.case-hero-shots .case-photo{position:absolute;right:-18px;bottom:-70px;width:190px}
.case-photo{border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(13,15,18,.5);border:6px solid #fff}
.case-photo img{width:100%}
.case-dark figcaption{color:#A7ADB5}
.case-dark .case-ul li{color:#E4E6E9}
.case-sand .case-card{background:#fff}
.case-arch{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px;align-items:stretch}
.case-node{border-radius:18px;padding:24px;background:#fff;position:relative}
.case-node small{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#5A5F66}
.case-node strong{display:block;margin-top:8px;font-family:var(--f-h);font-size:21px;line-height:1.2}
.case-node p{margin-top:8px;font-size:14px;line-height:1.5;color:#4A4F57}
.case-node.is-core{background:var(--night);color:var(--text)}
.case-node.is-core small{color:var(--w-orange)}
.case-node.is-core p{color:#C9CDD3}
.case-node .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.case-node .tags span{font-size:13px;border-radius:999px;padding:5px 10px;background:#F3F2EE;color:#2A2E35}
.case-node.is-core .tags span{background:#1B1F26;color:#E4E6E9}
.case-link{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;font-size:13px;color:#5A5F66}
.case-link::before,.case-link::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--w-blue),var(--w-orange),var(--w-green),var(--w-brown))}
.case-pay{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:16px}
.case-pay li{position:relative;border-radius:18px;padding:22px;background:#16191E}
.case-pay li b{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--w-green);font-family:var(--f-h);font-size:15px;color:var(--w-green)}
.case-pay li strong{display:block;margin-top:14px;font-family:var(--f-h);font-size:18px;line-height:1.25}
.case-pay li span{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:#C9CDD3}
.case-quote{margin-top:28px;border-radius:18px;padding:24px 26px;background:var(--night);color:var(--text)}
.case-quote strong{display:block;font-family:var(--f-h);font-size:20px;line-height:1.3}
.case-quote span{display:block;margin-top:8px;font-size:15px;color:#C9CDD3}
@media (max-width:760px){.case-hero-shots .case-photo{display:none}}