/* Кейсы /about/cases/ — задача Б24 61992.
 *
 * Селекторы через #cases-page по той же причине, что у вакансий (css/jobs.css):
 * файл подключается через SetAdditionalCSS раньше собственных стилей сайта,
 * и при равной специфичности классовые правила сайта перебивали бы типографику.
 * !important — только там, где сайт сам пишет !important:
 * `.main-blocks-content-default h1 { font-size:28px !important }`,
 * `button { color:#000 !important }`, `.main-blocks-content-default a { color:#000 }`.
 *
 * Сетка и шкала (ревизия 29.10.2026):
 *   отступы — только 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 (токены --cases-s*);
 *   кегли   — 12 (подписи капсом) / 14 (мелкий) / 16 (основной) / 20 (подзаголовки, карточки) /
 *             28 (h2) / 44 (h1);
 *   ритм    — блоки страницы кейса и группы списка стоят в колонке с gap, а не на margin/padding
 *             каждого блока: расстояние между любыми двумя соседями одинаковое.
 * Базовые правила (p, ul, li, h3, a) ограничены своими блоками: у #cases-page специфичность id,
 * и без ограничения они перебивали стили карточек каталога в блоке «Товары из капсулы».
 */

#cases-page {
	--cases-yellow: #ffe500;
	--cases-yellow-dk: #ebc531;
	--cases-black: #000000;
	--cases-graphite: #474a55;
	--cases-white: #ffffff;
	--cases-wash: #f6f5f0;
	--cases-line: #e4e2da;
	--cases-text: #2b2c31;
	--cases-muted: #6f7178;
	--cases-on-dark: #c9cacf;
	--cases-radius-md: 14px;
	--cases-radius-lg: 20px;

	--cases-s1: 4px;
	--cases-s2: 8px;
	--cases-s3: 12px;
	--cases-s4: 16px;
	--cases-s5: 24px;
	--cases-s6: 32px;
	--cases-s7: 48px;
	--cases-s8: 64px;

	/* шаг между блоками страницы и внутренние поля панелей; на телефоне меньше */
	--cases-section-gap: var(--cases-s8);
	--cases-panel-pad: var(--cases-s7);
	--cases-card-pad: var(--cases-s5);

	font-family: 'Montserrat', system-ui, sans-serif;
	color: var(--cases-text);
	margin: 0;
	padding: 0 0 var(--cases-s8);
}

#cases-page *,
#cases-page *::before,
#cases-page *::after {
	box-sizing: border-box;
}

/* ─── базовая типографика своих блоков ───────────────── */
#cases-page h1,
#cases-page .cases-h2,
#cases-page .cases-h3 {
	margin: 0;
	text-wrap: balance;
	color: var(--cases-text);
}

#cases-page h1 {
	font-size: clamp(32px, 3.2vw, 44px) !important;
	line-height: 1.05;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

#cases-page .cases-h2 {
	font-size: clamp(24px, 2vw, 28px);
	line-height: 1.15;
	font-weight: 700;
	text-transform: uppercase;
}

#cases-page .cases-h3 {
	font-size: 16px;
	line-height: 1.25;
	font-weight: 700;
}

#cases-page p:not(.cases-products__cards *) {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

#cases-page a:not(.cases-products__cards *) {
	color: inherit;
}

#cases-page ul:not(.cases-products__cards *),
#cases-page ol:not(.cases-products__cards *) {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* У сайта `.main-content ul li:before` рисует жёлтую точку у любого пункта списка — в своих списках убираем. */
#cases-page li:not(.cases-products__cards *)::before {
	content: none;
}

#cases-page .cases-eyebrow,
#cases-page .cases-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

#cases-page .cases-eyebrow {
	color: var(--cases-muted);
}

#cases-page .cases-prose {
	display: grid;
	gap: var(--cases-s3);
	max-width: 72ch;
}

#cases-page .cases-link {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	border-bottom: 2px solid var(--cases-yellow);
	padding-bottom: 2px;
}

/* ─── кнопки ─────────────────────────────────────────── */
#cases-page .cases-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cases-s2);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.2;
	border-radius: var(--cases-radius-md);
	padding: var(--cases-s4) var(--cases-s5);
	border: 0;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.18s;
}

#cases-page .cases-btn--primary {
	background: var(--cases-yellow);
	color: var(--cases-black) !important;
}

#cases-page .cases-btn--primary:hover {
	background: var(--cases-yellow-dk);
}

#cases-page .cases-btn:focus-visible,
#cases-page .cases-card__link:focus-visible,
#cases-page .cases-link:focus-visible,
#cases-page .cases-back:focus-visible {
	outline: 3px solid var(--cases-black);
	outline-offset: 2px;
}

/* ─── список: вступление и группы ───────────────────── */
#cases-page .cases-lead {
	display: grid;
	gap: var(--cases-s4);
	padding-top: var(--cases-s2);
	margin-bottom: var(--cases-s7);
}

#cases-page .cases-lead p:not(.cases-products__cards *) {
	font-size: 20px;
	line-height: 1.5;
	max-width: 60ch;
	color: var(--cases-graphite);
}

#cases-page .cases-group + .cases-group {
	margin-top: var(--cases-s8);
}

#cases-page .cases-group__head {
	display: grid;
	gap: var(--cases-s3);
	margin-bottom: var(--cases-s6);
}

#cases-page .cases-group__desc {
	display: grid;
	gap: var(--cases-s2);
	font-size: 16px;
	line-height: 1.6;
	max-width: 72ch;
	color: var(--cases-graphite);
}

#cases-page .cases-empty:not(.cases-products__cards *) {
	padding: var(--cases-s7) 0;
	color: var(--cases-muted);
}

/* ─── карточки кейсов ────────────────────────────────── */
/* Упор на фото: две крупные карточки в ряд, под фото только название и подзаголовок. */
#cases-page .cases-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cases-s7) var(--cases-s6);
}

#cases-page .cases-card {
	margin: 0;
	min-width: 0;
}

#cases-page .cases-card__link {
	display: flex;
	flex-direction: column;
	gap: var(--cases-s4);
	height: 100%;
	text-decoration: none;
}

#cases-page .cases-card__img {
	display: block;
	aspect-ratio: 4 / 3;
	max-width: 100%;
	background: var(--cases-wash);
	border-radius: var(--cases-radius-lg);
	overflow: hidden;
	transition: box-shadow 0.25s;
}

#cases-page .cases-card__link:hover .cases-card__img {
	box-shadow: 0 14px 36px rgba(255, 229, 0, 0.45);
}

#cases-page .cases-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
}

#cases-page .cases-card__link:hover .cases-card__img img {
	transform: scale(1.04);
}

#cases-page .cases-card__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--cases-s1) var(--cases-s4);
	padding: 0 var(--cases-s1);
}

#cases-page .cases-card__title {
	grid-column: 1;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--cases-text);
}

#cases-page .cases-card__subtitle {
	grid-column: 1;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--cases-graphite);
}

/* Стрелка справа от названия: жёлтеет при наведении на карточку */
#cases-page .cases-card__arrow {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid var(--cases-line);
	font-size: 20px;
	line-height: 1;
	color: var(--cases-text);
	transition: background 0.18s, border-color 0.18s;
}

#cases-page .cases-card__link:hover .cases-card__arrow {
	background: var(--cases-yellow);
	border-color: var(--cases-yellow);
}

/* Нечётное число кейсов в группе: первый — во всю ширину (фото слева, текст справа),
   остальные идут парами, и в последнем ряду никто не остаётся один. */
@media (min-width: 901px) {
	#cases-page .cases-grid:not(.cases-grid--related) > .cases-card:first-child:nth-last-child(odd) {
		grid-column: 1 / -1;
	}

	#cases-page .cases-grid:not(.cases-grid--related) > .cases-card:first-child:nth-last-child(odd) .cases-card__link {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: end;
		gap: var(--cases-s6);
	}

	#cases-page .cases-grid:not(.cases-grid--related) > .cases-card:first-child:nth-last-child(odd) .cases-card__body {
		padding-bottom: var(--cases-s5);
	}

	#cases-page .cases-grid:not(.cases-grid--related) > .cases-card:first-child:nth-last-child(odd) .cases-card__title {
		font-size: 28px;
	}
}

/* ─── страница кейса ─────────────────────────────────── */
/* Все блоки кейса — в одной колонке с единым шагом */
#cases-page .cases-detail {
	display: flex;
	flex-direction: column;
	gap: var(--cases-section-gap);
}

#cases-page .cases-detail > * {
	margin: 0;
	min-width: 0;
}

/* «Все кейсы» относится к шапке, поэтому стоит к ней ближе общего шага */
#cases-page .cases-back {
	align-self: flex-start;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--cases-muted);
}

#cases-page .cases-back + .cases-hero {
	margin-top: calc(var(--cases-s4) - var(--cases-section-gap));
}

#cases-page .cases-back::before {
	content: '← ';
}

#cases-page .cases-back:hover {
	color: var(--cases-text);
}

#cases-page .cases-hero {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--cases-s7);
	align-items: start;
}

#cases-page .cases-hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cases-s4);
}

#cases-page .cases-hero__subtitle:not(.cases-products__cards *) {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cases-graphite);
	max-width: 32ch;
}

#cases-page .cases-hero__text .cases-btn {
	margin-top: var(--cases-s4);
}

#cases-page .cases-hero__img {
	margin: 0;
	border-radius: var(--cases-radius-lg);
	overflow: hidden;
	background: var(--cases-wash);
}

#cases-page .cases-hero__img img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 640px;
	object-fit: contain;
}

/* Идея и «Для кого» — две равные панели; идея выделена фирменным жёлтым */
#cases-page .cases-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: var(--cases-s5);
}

#cases-page .cases-fact {
	display: grid;
	align-content: start;
	gap: var(--cases-s3);
	background: var(--cases-wash);
	border-radius: var(--cases-radius-lg);
	padding: var(--cases-s6);
}

#cases-page .cases-fact:first-child {
	background: var(--cases-yellow);
}

#cases-page .cases-fact__title {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--cases-text);
}

/* Секция: заголовок → текст → сетка, шаги внутри одинаковые */
#cases-page .cases-section {
	display: grid;
	gap: var(--cases-s5);
}

#cases-page .cases-section--wash {
	padding: var(--cases-panel-pad);
	background: var(--cases-wash);
	border-radius: var(--cases-radius-lg);
}

/* Состав капсулы. Без номеров: предметы не последовательность, номер ничего не сообщал.
   auto-fit растягивает плитки на всю ширину при любом их числе — без пустых колонок справа. */
#cases-page .cases-items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: var(--cases-s4);
}

#cases-page .cases-item {
	display: grid;
	align-content: start;
	gap: var(--cases-s2);
	padding: var(--cases-card-pad);
	border: 2px solid var(--cases-line);
	border-radius: var(--cases-radius-md);
}

#cases-page .cases-item p:not(.cases-products__cards *),
#cases-page .cases-step p:not(.cases-products__cards *) {
	font-size: 14px;
	line-height: 1.5;
	color: var(--cases-graphite);
}

/* Товары из капсулы: карточки листинга каталога. Листинг приносит фильтры, сортировку
   и заголовки — здесь они не нужны. */
#cases-page .cases-products__cards .search-result > *:not(.filters_and_listing_container),
#cases-page .cases-products__cards .left-filters,
#cases-page .cases-products__cards .filter_left__parameters,
#cases-page .cases-products__cards .open_filter_popup_btn,
#cases-page .cases-products__cards .mobile-sort-row,
#cases-page .cases-products__cards .skeleton-wrapper,
#cases-page .cases-products__cards .selected_products_container,
#cases-page .cases-products__cards .search-results__heading {
	display: none !important;
}

#cases-page .cases-products__cards .search-result,
#cases-page .cases-products__cards .filters_and_listing_container,
#cases-page .cases-products__cards .container-desktop-result,
#cases-page .cases-products__cards .content {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

#cases-page .cases-products__cards .filters_and_listing_container {
	display: block !important;
	grid-template-columns: none;
}

#cases-page .cases-products__cards .filters_and_listing_container > div,
#cases-page .cases-products__cards .search-results__cards-container {
	width: 100%;
	max-width: 100%;
}

/* Перенос по строкам, а не прокрутка вбок: контейнер с overflow-x: auto режет и по вертикали,
   и раскрытая по наведению карточка (склады + кнопка «В корзину», ~60 px ниже) обрезалась.
   Без overflow раскрытая карточка (у неё position: relative; z-index: 3) ложится в шаг
   до следующего блока (64 px), а если выше — поверх него, не под ним. */
#cases-page .cases-products__cards .search-results__cards {
	display: flex !important;
	flex-wrap: wrap;
	gap: var(--cases-s5);
	overflow: visible;
	padding: 0;
	/* У карточки каталога внутреннее поле под рамку наведения (.product-card-content: 20px,
	   на телефоне 8px) — сдвигаем ряд на него, чтобы фото и текст товаров стояли по линии заголовков */
	margin: 0 0 0 -20px;
}

#cases-page .cases-products__cards .product-card {
	flex: 0 0 auto;
	justify-self: auto;
}

/* Стили листинга (catalog.listing/list/styles.css) прячут левое меню на любой странице с карточками —
   у кейсов с товарами меню пропадало, у кейсов без товаров оставалось. Страница кейса поэтому
   всегда на всю ширину, без меню (как детальная страница бренда); список кейсов — с меню. */
body:has(#cases-page .cases-detail) .sidebar {
	display: none;
}

/* Галерея: колонки по числу фото, одно фото не растягивается во всю страницу */
#cases-page .cases-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: var(--cases-s4);
}

#cases-page .cases-gallery:has(> li:only-child) {
	max-width: 720px;
}

#cases-page .cases-gallery__link {
	display: block;
	aspect-ratio: 4 / 3;
	max-width: 100%;
	border-radius: var(--cases-radius-lg);
	overflow: hidden;
	background: var(--cases-wash);
}

#cases-page .cases-gallery__link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Как адаптировать: белые карточки на светлой панели, без цветных полос —
   выделение уже даёт панель, полоса на скруглённой карточке только шумела */
#cases-page .cases-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--cases-s4);
}

#cases-page .cases-step {
	display: grid;
	align-content: start;
	gap: var(--cases-s2);
	background: var(--cases-white);
	border-radius: var(--cases-radius-md);
	padding: var(--cases-card-pad);
}

/* Результат */
#cases-page .cases-results {
	display: grid;
	gap: var(--cases-s3);
	max-width: 80ch;
}

#cases-page .cases-results li {
	position: relative;
	padding-left: var(--cases-s6);
	font-size: 16px;
	line-height: 1.5;
}

#cases-page .cases-results li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cases-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

#cases-page .cases-results b {
	font-weight: 700;
	color: var(--cases-text);
}

#cases-page .cases-results b::after {
	content: ' — ';
	font-weight: 400;
}

#cases-page .cases-results span {
	color: var(--cases-graphite);
}

/* Призыв к заявке */
#cases-page .cases-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cases-s5) var(--cases-s6);
	padding: var(--cases-panel-pad);
	background: var(--cases-black);
	border-radius: var(--cases-radius-lg);
	color: var(--cases-white);
}

#cases-page .cases-cta > div {
	display: grid;
	gap: var(--cases-s3);
	flex: 1 1 380px;
	min-width: 0;
}

#cases-page .cases-cta .cases-h2 {
	color: var(--cases-white);
}

#cases-page .cases-cta p:not(.cases-products__cards *) {
	color: var(--cases-on-dark);
	max-width: 60ch;
}

/* Другие кейсы: три в ряд, те же карточки, что в списке */
#cases-page .cases-related-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--cases-s3);
}

#cases-page .cases-grid--related {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cases-s6);
}

/* Короткая форма заявки на капсулу */
html.cases-modal-open {
	overflow: hidden;
}

#cases-page .cases-modal {
	position: fixed;
	inset: 0;
	z-index: 2147483000; /* выше плашек сайта (выбор филиала и т.п.) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--cases-s4);
}

#cases-page .cases-modal[hidden] {
	display: none;
}

#cases-page .cases-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

#cases-page .cases-modal__box {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: var(--cases-white);
	border-radius: var(--cases-radius-lg);
	padding: var(--cases-s6) var(--cases-s5) var(--cases-s5);
	min-height: 200px;
}

#cases-page .cases-modal__close {
	position: absolute;
	top: var(--cases-s2);
	right: var(--cases-s2);
	z-index: 2;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--cases-wash);
	color: var(--cases-black) !important;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

#cases-page .cases-modal__close:hover {
	background: var(--cases-yellow);
}

#cases-page .cases-order-action { display: grid; justify-items: start; gap: 12px; }
#cases-page .cases-order-action [hidden] { display: none !important; }
#cases-page .cases-order-action .cases-btn:disabled { opacity: 0.65; cursor: default; }
#cases-page .cases-order-action .cases-btn[aria-busy="true"] { cursor: wait; }
#cases-page .cases-order-status:not(.cases-products__cards *) { margin: 0; font-size: 14px; line-height: 1.5; }
#cases-page .cases-order-status.is-error { color: #a51d27; }
#cases-page .cases-order-signin { text-decoration: none; }

/* ─── адаптив ────────────────────────────────────────── */
@media (max-width: 900px) {
	#cases-page {
		--cases-section-gap: var(--cases-s7);
		--cases-panel-pad: var(--cases-s6);
	}

	#cases-page .cases-hero {
		grid-template-columns: 1fr;
		gap: var(--cases-s5);
	}

	#cases-page .cases-hero__img {
		order: -1;
	}

	#cases-page .cases-hero__img img {
		max-height: 440px;
	}

	#cases-page .cases-grid--related {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	/* Товары: две в ряд, как в мобильном каталоге (там та же сетка 1fr 1fr) */
	#cases-page .cases-products__cards .search-results__cards {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: var(--cases-s4) var(--cases-s2);
		margin-left: -8px;
	}

	#cases-page .cases-products__cards .product-card {
		justify-self: center;
	}
}

@media (max-width: 640px) {
	#cases-page {
		--cases-panel-pad: var(--cases-s5);
		--cases-card-pad: var(--cases-s4);
	}

	#cases-page .cases-grid,
	#cases-page .cases-grid--related {
		grid-template-columns: 1fr;
		gap: var(--cases-s6);
	}

	#cases-page .cases-lead p:not(.cases-products__cards *) {
		font-size: 16px;
	}

	#cases-page .cases-fact {
		padding: var(--cases-s5);
	}

	#cases-page .cases-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	#cases-page .cases-card__img,
	#cases-page .cases-card__img img,
	#cases-page .cases-card__arrow,
	#cases-page .cases-btn {
		transition: none;
	}
}