/* Кейсы Томск.ру (/cases/*). Подключается только на этом шаблоне (libs/_add.php).
   Палитра и приёмы — те же, что на /price: бирюзовый #00A7B0, белые карточки,
   тёмный градиентный герой. */

.case-page *, .case-page *::before, .case-page *::after { box-sizing: border-box; }
.case-page { font-variant-numeric: normal; }
.case-page .num { font-variant-numeric: tabular-nums; }

/* У .wrapper темы стоит overflow: hidden — при нём браузер считает его границей
   прокрутки и sticky в сайдбаре не липнет. На этой странице за края ничего не
   выходит, поэтому здесь — и только здесь — возвращаем visible.
   overflow: clip не подходит: со sticky он ведёт себя так же, как hidden.
   Класс page-template-page-cases-php ставит сам WordPress по имени шаблона. */
.page-template-page-cases-php .wrapper { overflow: visible; }

/* Колонка чтения. 720px — примерно как в статье (690) и как у большинства
   лонгридов: длиннее строка уже плохо читается. */
/* Сетка «текст + сайдбар». Сайдбар стоит вровень с заглавной плашкой и тянется
   на все ряды: он навигация, поэтому должен начинаться сверху, а не висеть
   ниже шапки кейса. Заодно колонка получает высоту всей сетки — без этого
   sticky внутри не к чему липнуть.
   Порядок областей в разметке (hero, side, body, cta) совпадает с мобильным,
   поэтому на узком экране навигация сама встаёт сразу под шапку кейса.
   minmax(0, 1fr), а не 1fr: иначе колонка раздувается под min-content ленты
   карточек и страница уезжает вбок (у .wrapper здесь overflow: visible,
   так что обрезать её больше некому). */
/* Ширину всей колонки — шапки, текста, инфографики и нижнего блока — задаёт
   сетка, поэтому они всегда одной ширины. Отдельный max-width у текста
   ставить нельзя: тогда шапка и нижний блок окажутся шире, и правый край
   перестанет сходиться. */
.case-layout {
	display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "hero" "side" "body" "cta";
}
.case-hero { grid-area: hero; }
.case-side { grid-area: side; }
.case-body { grid-area: body; }
.case-cta  { grid-area: cta; }
/* Размеры взяты со страницы новости, а не выдуманы: там колонка материала 770,
   сайдбар 370, зазор 30 (bootstrap col-lg-8 / col-lg-4 темы). Так кейс совпадает
   с остальным сайтом по сетке, а строка держит те же ~85 знаков, что и в статьях.
   Брейкпоинт 992px — тот же, на котором в теме включается col-lg. */
@media (min-width: 992px) {
	.case-layout {
		grid-template-columns: minmax(0, 1fr) 370px;
		grid-template-areas: "hero side" "body side" "cta side";
		gap: 26px 30px;
	}
	.case-side { height: 100%; }
	/* Нижний отступ снимаем с блока и отдаём контейнеру: margin входит в ряд
	   сетки, из-за него колонка сайдбара тянулась ниже самого блока и почти
	   упиралась в подвал. Padding контейнера в грид-области не входит. */
	.case-layout .case-cta { margin-bottom: 0; }
	.case-layout { padding-bottom: 40px; }
}

/* Шапка сайта fixed и занимает 97px: и sticky-сайдбар, и переходы по
   оглавлению должны вставать под неё, а не под неё заезжать. */
.case-side__inner { position: static; }
@media (min-width: 992px) {
	.case-side__inner { position: sticky; top: 113px; }
}
/* Ограничение высоты с прокруткой — только на низком окне, где сайдбар реально
   не помещается. Держать overflow-y: auto всегда нельзя: высоты внутри дробные,
   scrollHeight выходит на пиксель больше clientHeight, и браузер рисует полосу
   прокрутки там, где прокручивать нечего. */
@media (min-width: 992px) and (max-height: 640px) {
	.case-side__inner { max-height: calc(100vh - 133px); overflow-y: auto; }
}
.case-sec { scroll-margin-top: 113px; }

/* ── Шапка ─────────────────────────────────────────────────────────── */
.case-hero {
	color: #fff; border-radius: 20px; padding: 30px 22px; margin-bottom: 22px;
	position: relative; overflow: hidden;
	background:
		radial-gradient(115% 130% at 82% -20%, rgba(101, 214, 220, .42), rgba(101, 214, 220, 0) 58%),
		linear-gradient(142deg, #0A2E33 0%, #0D4B52 46%, #0A6D75 78%, #00A7B0 130%);
}
@media (min-width: 700px) { .case-hero { padding: 44px 40px; } }
.case-hero__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7FE3E8; margin: 0 0 14px; }
.case-hero__title { font-size: 26px; font-weight: 700; line-height: 1.12; letter-spacing: -.03em; margin: 0 0 16px; color: #fff; }
@media (min-width: 700px) { .case-hero__title { font-size: 38px; } }
.case-hero__format { font-size: 14px; color: #C2D5D7; margin: 0 0 24px; }
.case-hero__format span { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7FE3E8; margin-right: 10px; }
.case-hero__metric { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); }
.case-hero__metric b { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
@media (min-width: 700px) { .case-hero__metric b { font-size: 54px; } }
.case-hero__metric span { font-size: 14px; color: #C2D5D7; }

/* ── Витрина /cases ────────────────────────────────────────────────── */
.case-hero_index { margin-bottom: 26px; }
.case-hero__lead { font-size: 15px; line-height: 1.6; color: #C2D5D7; margin: 0; max-width: 60ch; }
@media (min-width: 700px) { .case-hero__lead { font-size: 16px; } }

.case-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 30px; }
@media (min-width: 620px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .case-grid { grid-template-columns: repeat(3, 1fr); } }

/* Карточка кейса: сверху клиент, крупная цифра результата, ниже заголовок.
   Цифра — главное, ради чего кейс открывают, поэтому она и держит карточку. */
.case-promo {
	display: flex; flex-direction: column; gap: 14px; background: #fff; border-radius: 18px;
	padding: 22px 20px; text-decoration: none; color: inherit;
	border: 2px solid transparent; transition: border-color .16s ease, transform .16s ease;
}
@media (hover: hover) { .case-promo:hover { border-color: #CFE9EB; transform: translateY(-2px); } }
.case-promo:focus-visible { outline: 2px solid #00A7B0; outline-offset: 2px; }
.case-promo__client { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9B9DA1; }
.case-promo__metric b { display: block; font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: #00787E; }
.case-promo__metric span { display: block; font-size: 13px; color: #5F6668; margin-top: 6px; line-height: 1.4; }
.case-promo__title { font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: #000; }
.case-promo__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid #EFEFEF; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.case-promo__format { font-size: 12.5px; color: #7C8286; }
.case-promo__go { font-size: 13px; font-weight: 700; color: #00A7B0; white-space: nowrap; }
@media (hover: hover) { .case-promo:hover .case-promo__go { color: #000; } }

/* ── Сайдбар ───────────────────────────────────────────────────────── */
.case-side__label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9B9DA1; margin: 0 0 10px; }

/* ── Переключатель кейсов ──────────────────────────────────────────── */
/* Обычные ссылки: каждый кейс — свой адрес, поэтому работает и «открыть
   в новой вкладке», и отправка ссылки клиенту. */
.case-tabs { display: grid; gap: 8px; grid-template-columns: 1fr; margin-bottom: 26px; }
@media (min-width: 620px) and (max-width: 999px) {
	.case-tabs { grid-template-columns: repeat(3, 1fr); }
	.case-tabs .case-side__label { grid-column: 1 / -1; }
}
.case-tab {
	display: block; background: #fff; border-radius: 14px; padding: 13px 16px;
	border: 2px solid transparent; text-decoration: none; color: inherit;
	transition: border-color .16s ease, background .16s ease;
}
@media (hover: hover) { .case-tab:hover { border-color: #CFE9EB; } }
.case-tab:focus-visible { outline: 2px solid #00A7B0; outline-offset: 2px; }
/* Активный кейс отмечаем так же, как выбранную услугу на /price: светлая
   заливка и полоска слева. Сплошной #00A7B0 рядом с градиентной плашкой
   читался как другой, спорящий цвет — здесь оба элемента стоят бок о бок. */
.case-tab.is-active { background: #E7F6F7; border-color: #E7F6F7; box-shadow: inset 3px 0 0 #00A7B0; }
.case-tab__name { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: #000; }
.case-tab__hint { display: block; font-size: 12px; color: #7C8286; margin-top: 3px; line-height: 1.35; }
.case-tab.is-active .case-tab__name { color: #00787E; }

/* ── Оглавление ────────────────────────────────────────────────────── */
/* Пять пунктов на телефоне только съедали бы экран, а до текста ещё нужно
   долистать — там оглавление скрыто, переключатель кейсов остаётся. */
.case-toc { display: none; }
@media (min-width: 1000px) { .case-toc { display: block; } }
/* Общая система координат для линии, маркера и пунктов: и маркер, и ссылки
   меряются от .case-toc__body, поэтому у списка своего position быть не должно. */
.case-toc__body { position: relative; }
.case-toc__list { list-style: none; margin: 0; padding: 0; }
.case-toc__list li { margin: 0; }
.case-toc__list a {
	display: block; padding: 7px 0 7px 16px; font-size: 14px; line-height: 1.4;
	color: #5F6668; text-decoration: none; transition: color .18s ease;
}
@media (hover: hover) { .case-toc__list a:hover { color: #000; } }
.case-toc__list a:focus-visible { outline: 2px solid #00A7B0; outline-offset: 2px; border-radius: 4px; }
.case-toc__list a.is-active { color: #00787E; font-weight: 600; }

/* Линия-подложка на всю высоту списка и бегающий по ней маркер.
   Маркер двигается через transform — это не вызывает пересчёт вёрстки. */
.case-toc__body::before {
	content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px;
	background: #E2E7E7; border-radius: 2px;
}
.case-toc__marker {
	position: absolute; left: 0; width: 2px; border-radius: 2px; background: #00A7B0;
	transition: transform .28s cubic-bezier(.4, 0, .2, 1), height .28s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
	opacity: 0; will-change: transform;
}
.case-toc.is-ready .case-toc__marker { opacity: 1; }

/* ── Секции и текст ────────────────────────────────────────────────── */
.case-sec { margin-bottom: 44px; }
.case-sec__title { font-size: 22px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 14px; padding-top: 14px; position: relative; color: #000; }
@media (min-width: 700px) { .case-sec__title { font-size: 26px; } }
.case-sec__title::before { content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 4px; border-radius: 2px; background: #00A7B0; }
.case-p { font-size: 16px; line-height: 1.65; color: #23282A; margin: 0 0 14px; }
@media (min-width: 700px) { .case-p { font-size: 17px; } }
.case-p b { font-weight: 700; }
.case-lead { font-size: 18px; line-height: 1.5; font-weight: 600; letter-spacing: -.01em; color: #000; margin: 0 0 14px; }
@media (min-width: 700px) { .case-lead { font-size: 20px; } }

/* Состав кампании: «6 видеороликов», «13 публикаций» и т.п. */
.case-formats { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .case-formats { grid-template-columns: repeat(3, 1fr); } }
.case-formats li { background: #fff; border-radius: 14px; padding: 16px; }
.case-formats b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: #00787E; line-height: 1; margin-bottom: 6px; }
.case-formats span { font-size: 13px; line-height: 1.4; color: #5F6668; }

/* ── Инфографика ───────────────────────────────────────────────────── */
.case-fig { margin: 22px 0 0; position: relative; }
.case-fig img { display: block; }

/* Общие детали: подпись клиента, три цифры, итог. Цвета задают обёртки:
   тёмная плашка (.case-fig_dark) или светлая панель (.case-fig__panel). */
.case-fig__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.case-fig__stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .case-fig__stats { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.case-fig__stats li { padding-top: 12px; border-top: 1px solid; }
.case-fig__stats b { display: block; font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
@media (min-width: 700px) { .case-fig__stats b { font-size: 40px; } }
.case-fig__stats span { display: block; font-size: 14px; line-height: 1.4; margin-top: 8px; }

.case-fig__total { margin: 0 0 24px; }
.case-fig__total:last-child { margin-bottom: 0; }
.case-fig__total b { display: block; font-size: 56px; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
@media (min-width: 700px) { .case-fig__total b { font-size: 76px; } }
.case-fig__total span { display: block; font-size: 15px; margin-top: 10px; }
.case-fig__foot { margin: 20px 0 0; font-size: 14px; font-weight: 600; }

/* Полоса-разбивка: ширины сегментов пропорциональны долям (flex-grow из PHP),
   цвета сегментов и точек легенды идут по одному порядку. */
.case-fig__bar { display: flex; gap: 3px; height: 12px; border-radius: 6px; overflow: hidden; margin: 0 0 18px; }
.case-fig__bar span { display: block; flex: 1 1 0; }
.case-fig__bar span:nth-child(1), .case-fig__stats_legend li:nth-child(1)::before { background: #fff; }
.case-fig__bar span:nth-child(2), .case-fig__stats_legend li:nth-child(2)::before { background: #7FE3E8; }
.case-fig__bar span:nth-child(3), .case-fig__stats_legend li:nth-child(3)::before { background: #00A7B0; }
.case-fig__bar span:nth-child(4), .case-fig__stats_legend li:nth-child(4)::before { background: #0A6D75; }
.case-fig__stats_legend li { border-top: 0; padding: 0 0 0 20px; position: relative; }
.case-fig__stats_legend li::before { content: ""; position: absolute; left: 0; top: 9px; width: 11px; height: 11px; border-radius: 50%; }
.case-fig__stats_legend b { font-size: 28px; }
@media (min-width: 700px) { .case-fig__stats_legend b { font-size: 32px; } }

/* Тёмная плашка на градиенте шапки кейса — результат без фото */
.case-fig_dark {
	overflow: hidden; border-radius: 18px; color: #fff;
	background:
		radial-gradient(115% 130% at 82% -20%, rgba(101, 214, 220, .42), rgba(101, 214, 220, 0) 58%),
		linear-gradient(142deg, #0A2E33 0%, #0D4B52 46%, #0A6D75 78%, #00A7B0 130%);
}
.case-fig_dark .case-fig__stats li { border-color: rgba(255, 255, 255, .24); }
.case-fig_dark .case-fig__stats span, .case-fig_dark .case-fig__total span { color: #C2D5D7; }
.case-fig_dark .case-fig__foot { color: #7FE3E8; }
.case-fig__inner { position: relative; z-index: 2; padding: 24px 20px; display: flex; flex-direction: column; justify-content: flex-end; }
@media (min-width: 700px) { .case-fig__inner { padding: 34px 36px; } }

/* Светлая панель под коллажем: тёмный текст, бирюзовые цифры */
.case-fig__panel { background: #fff; padding: 22px 20px; display: flex; flex-direction: column; gap: 22px; color: #23282A; }
@media (min-width: 700px) { .case-fig__panel { padding: 28px 30px; } }
.case-fig__panel .case-fig__eyebrow { color: #00787E; }
.case-fig__panel .case-fig__stats li { border-color: #E6EBEB; }
.case-fig__panel .case-fig__stats b, .case-fig__panel .case-fig__total b { color: #00787E; }
.case-fig__panel .case-fig__stats span, .case-fig__panel .case-fig__total span { color: #5F6668; }
.case-fig__panel .case-fig__foot { color: #00787E; }
.case-fig__panel .case-fig__bar span:nth-child(1), .case-fig__panel .case-fig__stats_legend li:nth-child(1)::before { background: #0A2E33; }

/* Коллаж: мозаика из 1–3 фото без затемнения, цифры карточкой ниже.
   Три снимка — большой слева на две строки и два справа; два — рядом 3:2. */
.case-fig_collage { display: grid; gap: 10px; }
.case-fig__mosaic { display: grid; gap: 8px; aspect-ratio: 2 / 1; grid-template-columns: 1fr; }
.case-fig__mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; min-height: 0; }
.case-fig__mosaic_2 { grid-template-columns: 3fr 2fr; }
.case-fig__mosaic_3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 10; }
.case-fig__mosaic_3 img:first-child { grid-row: 1 / -1; }
@media (min-width: 700px) { .case-fig__mosaic_3 { aspect-ratio: 2 / 1; } }
.case-fig_collage .case-fig__panel { border-radius: 16px; }

/* Обёртка набегающего числа (cases.js): наследует всё от цифры и не подпадает
   под правила подписей — иначе «54» на время анимации стало бы мелким серым. */
.case-page .case-fig__count {
	display: inline-block !important; font: inherit !important; color: inherit !important;
	letter-spacing: inherit !important; margin: 0 !important;
	/* !important: правила подписей (.case-fig__panel .case-fig__stats span и т.п.)
	   специфичнее любого разумного селектора для этой обёртки */
}

/* Движение (все варианты, cases.js ставит is-pre до появления и is-in при
   появлении на экране). Без скрипта классов нет — всё видно сразу. */
.case-fig.is-pre .case-fig__stats li, .case-fig.is-pre .case-fig__steps li, .case-fig.is-pre .case-fig__total, .case-fig.is-pre .case-fig__foot, .case-fig.is-pre .case-fig__eyebrow { opacity: 0; transform: translateY(16px); }
.case-fig.is-in .case-fig__stats li, .case-fig.is-in .case-fig__steps li, .case-fig.is-in .case-fig__total, .case-fig.is-in .case-fig__foot, .case-fig.is-in .case-fig__eyebrow {
	opacity: 1; transform: none;
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--i, 0) * 110ms + 120ms);
}
.case-fig.is-in .case-fig__eyebrow { transition-delay: 0s; }
.case-fig__bar span { transform-origin: left center; }
.case-fig.is-pre .case-fig__bar span { transform: scaleX(0); }
.case-fig.is-in .case-fig__bar span { transform: none; transition: transform 1s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 160ms + 500ms); }
@media (prefers-reduced-motion: reduce) {
	.case-fig.is-pre .case-fig__stats li, .case-fig.is-pre .case-fig__steps li, .case-fig.is-pre .case-fig__total, .case-fig.is-pre .case-fig__foot, .case-fig.is-pre .case-fig__eyebrow, .case-fig.is-pre .case-fig__bar span { opacity: 1; transform: none; }
	.case-fig.is-in * { transition: none !important; }
}

/* Механики: нумерованные карточки */
.case-fig__steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .case-fig__steps { grid-template-columns: repeat(3, 1fr); } }
.case-fig__steps li { counter-increment: step; background: #fff; border-radius: 16px; padding: 20px 18px 22px; }
.case-fig__steps li::before { content: counter(step, decimal-leading-zero); display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: #00A7B0; margin-bottom: 14px; }
.case-fig__steps b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: #000; margin-bottom: 8px; }
.case-fig__steps span { display: block; font-size: 14px; line-height: 1.5; color: #5F6668; }

/* ── Каналы ────────────────────────────────────────────────────────── */
.case-channel { margin: 22px 0; }
.case-channel__title { font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #7C8286; margin: 0 0 12px; }

/* Лента карточек: свайп на мобиле, стрелки на десктопе. */
.case-rail { position: relative; }
.case-rail__track {
	display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; padding-bottom: 4px;
	scrollbar-width: none; -ms-overflow-style: none;
}
.case-rail__track::-webkit-scrollbar { display: none; }
/* Ширина карточки — доля от видимой части ленты, а не фиксированные пиксели:
   так в ряд всегда встаёт целое число карточек и справа не висит огрызок.
   На телефоне намеренно оставлен «выглядывающий» край — это единственный
   признак, что ленту можно листать (стрелок там нет). */
.case-rail__track > * { scroll-snap-align: start; flex: 0 0 78%; }
@media (min-width: 560px) { .case-rail__track > * { flex-basis: calc((100% - 12px) / 2); } }
@media (min-width: 1000px) { .case-rail__track > * { flex-basis: calc((100% - 24px) / 3); } }

/* top проставляет cases.js — по центру кадра карточки (без подписи под ним).
   Значение здесь только на случай, если скрипт ещё не отработал. */
.case-rail__nav {
	position: absolute; top: 33%; transform: translateY(-50%);
	width: 38px; height: 38px; border-radius: 50%;
	border: 0; background: #fff; color: #23282A; cursor: pointer; z-index: 2;
	box-shadow: 0 3px 14px rgba(0, 0, 0, .18);
	display: flex; align-items: center; justify-content: center;
}
.case-rail__nav[hidden] { display: none; }
.case-rail__nav svg { width: 9px; height: 13px; }
/* Стрелки вынесены за край ленты, чтобы не накрывать крайние карточки */
.case-rail__nav_prev { left: -19px; }
.case-rail__nav_next { right: -19px; }
@media (hover: hover) { .case-rail__nav:hover { background: #00A7B0; color: #fff; } }
.case-rail__nav:focus-visible { outline: 2px solid #00A7B0; outline-offset: 2px; }
/* На узких экранах стрелки не нужны — там свайп */
@media (max-width: 767px) { .case-rail__nav { display: none !important; } }

/* Карточка публикации */
.case-card { display: block; background: #fff; border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; }
.case-card__thumb { display: block; background: #D9D9D9; aspect-ratio: 16 / 9; }
.case-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-card__body { display: block; padding: 12px 14px 14px; }
.case-card__cat { display: inline-block; font-size: 11px; font-weight: 600; color: #fff; background: #00A7B0; border-radius: 20px; padding: 3px 10px; margin-bottom: 8px; }
.case-card__title { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: #000; margin-bottom: 10px; }
@media (hover: hover) { .case-card:hover .case-card__title { color: #00787E; } }
.case-card__meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: #9B9DA1; }
.case-card__date, .case-card__views { background-position: 0 50%; background-repeat: no-repeat; background-size: 14px; padding-left: 19px; }
.case-card__date { background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0C4.49 0 0 4.49 0 10C0 15.51 4.49 20 10 20C15.51 20 20 15.51 20 10C20 4.49 15.51 0 10 0ZM14.35 13.57C14.21 13.81 13.96 13.94 13.7 13.94C13.57 13.94 13.44 13.91 13.32 13.83L10.22 11.98C9.45 11.52 8.88 10.51 8.88 9.62V5.52C8.88 5.11 9.22 4.77 9.63 4.77C10.04 4.77 10.38 5.11 10.38 5.52V9.62C10.38 9.98 10.68 10.51 10.99 10.69L14.09 12.54C14.45 12.75 14.57 13.21 14.35 13.57Z' fill='%239B9DA1'/%3E%3C/svg%3E"); }
.case-card__views { background-image: url("data:image/svg+xml,%3Csvg width='20' height='18' viewBox='0 0 20 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.25 6.14969C16.94 2.51969 13.56 0.429688 10 0.429688C8.22 0.429688 6.49 0.949688 4.91 1.91969C3.33 2.89969 1.91 4.32969 0.75 6.14969C-0.25 7.7197 -0.25 10.2697 0.75 11.8397C3.06 15.4797 6.44 17.5597 10 17.5597C11.78 17.5597 13.51 17.0397 15.09 16.0697C16.67 15.0897 18.09 13.6597 19.25 11.8397C20.25 10.2797 20.25 7.7197 19.25 6.14969ZM10 13.0397C7.76 13.0397 5.96 11.2297 5.96 8.9997C5.96 6.76969 7.76 4.95969 10 4.95969C12.24 4.95969 14.04 6.76969 14.04 8.9997C14.04 11.2297 12.24 13.0397 10 13.0397Z' fill='%239B9DA1'/%3E%3Cpath d='M9.9984 6.14062C8.4284 6.14062 7.14844 7.4206 7.14844 9.0006C7.14844 10.5706 8.4284 11.8506 9.9984 11.8506C11.5684 11.8506 12.8584 10.5706 12.8584 9.0006C12.8584 7.4306 11.5684 6.14062 9.9984 6.14062Z' fill='%239B9DA1'/%3E%3C/svg%3E"); }

/* Одна статья: карточка шире, в одну колонку */
.case-single .case-card { max-width: 340px; }

.case-more { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: #00787E; text-decoration: none; border-bottom: 1px solid rgba(0, 120, 126, .35); }
@media (hover: hover) { .case-more:hover { color: #000; border-color: #000; } }

/* Подборка VK Видео */
.case-playlist {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	background: #fff; border-radius: 16px; padding: 16px 18px; text-decoration: none; color: inherit;
	border: 2px solid transparent; transition: border-color .16s ease;
}
@media (hover: hover) { .case-playlist:hover { border-color: #CFE9EB; } }
.case-playlist:focus-visible { outline: 2px solid #00A7B0; outline-offset: 2px; }
.case-playlist__play { width: 44px; height: 44px; border-radius: 50%; background: #0077FF; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.case-playlist__play svg { width: 20px; height: 20px; }
.case-playlist__text { flex: 1 1 200px; min-width: 0; }
.case-playlist__name { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: #000; }
.case-playlist__meta { display: block; font-size: 13px; color: #7C8286; margin-top: 3px; line-height: 1.4; }
.case-playlist__go { font-size: 13px; font-weight: 600; color: #00787E; white-space: nowrap; }

/* Клипы ВК — вертикальный кадр 9:16 */
.case-clip { display: block; text-decoration: none; color: inherit; }
/* Клипы вертикальные и мельче — их в ряду помещается больше */
.case-rail__track .case-clip { flex: 0 0 44%; }
@media (min-width: 560px) { .case-rail__track .case-clip { flex-basis: calc((100% - 36px) / 4); } }
@media (min-width: 1000px) { .case-rail__track .case-clip { flex-basis: calc((100% - 36px) / 4); } }
.case-clip__frame { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #E7EFF0; }
.case-clip__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-clip__empty {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
	font-size: 12px; line-height: 1.5; color: #7C9A9D; border: 2px dashed #A9D9DD; border-radius: 14px;
}
.case-clip__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; }
.case-clip__play svg { width: 20px; height: 20px; margin-left: 2px; }
@media (hover: hover) { .case-clip:hover .case-clip__play { background: #0077FF; transform: translate(-50%, -50%) scale(1.08); } }
/* Плеер ВК подставлен по клику (cases.js): обложка и кнопка прячутся */
.case-clip__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.case-clip.is-playing .case-clip__play, .case-clip.is-playing img { display: none; }
.case-clip.is-playing .case-clip__frame { background: #000; }

/* ── Призыв в конце ────────────────────────────────────────────────── */
.case-cta {
	display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
	background: #fff; border-radius: 20px; padding: 24px 22px; margin: 10px 0 40px;
}
@media (min-width: 700px) { .case-cta { padding: 30px 34px; } }
.case-cta__text { flex: 1 1 300px; }
.case-cta__text h2 { font-size: 22px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 8px; }
.case-cta__text p { font-size: 14px; line-height: 1.55; color: #5F6668; margin: 0; }
.case-cta__btn { flex: none; font-size: 15px; font-weight: 700; color: #fff; background: #00A7B0; border-radius: 26px; padding: 14px 26px; text-decoration: none; transition: background .16s ease; }
@media (hover: hover) { .case-cta__btn:hover { background: #000; } }
.case-cta__btn:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.case-rail__track { scroll-behavior: auto; }
	.case-tab, .case-card, .case-playlist, .case-cta__btn { transition: none; }
}