/* Страница каталога проектов: /karkasnye-bani/ и будущие подборки.
 *
 * Принято владельцем 28.08.2026 по прототипу /bani-v2/. Прототип удалён,
 * правила переехали сюда.
 *
 * ЯЗЫК. Страница говорит тем же словарём, что подробная карточка проекта
 * (см. блок .project-showcase в catalog-page.css). Раньше каталог был собран
 * от главной - тёмный фото-хедер, тёмные плитки - и рядом с карточкой проекта
 * читался как другой сайт. Общее:
 *
 *   - светлая, воздушная основа; тёмное и золотое - редкими эпизодами;
 *   - эйбрау над заголовком: 12px / 500 / 0.12em / caps / #9a7634
 *     (глубокое золото. Фирменное #ffd88e на белом даёт 1.36:1 и не читается);
 *   - белые панели: 1px rgba(27,26,21,.1), радиус 20-30px,
 *     тень 0 20px 60px rgba(27,26,21,.08);
 *   - сетка «подпись - значение»: gap 1px по цвету линии, подпись 11px muted,
 *     значение - Unbounded;
 *   - чипы: фон #f5f3ee, пилюля, золотая точка 7px слева;
 *   - блок экскурсии - ЗОЛОТАЯ панель, а не тёмная;
 *   - вопросы и SEO-текст - устройством карточки проекта;
 *   - ширины текста - в em, а не в ch (2026-09-28, доп-7): ch зависит от того,
 *     какой шрифт уже пришёл. «0» Unbounded 500 - 0.909em, Inter 400 - 0.630859em,
 *     у правила в комментарии - прежнее значение в ch (см. catalog-page.css).
 *
 * Имена токенов (--showcase-line, --showcase-soft) взяты те же, что в карточке
 * проекта, чтобы значения не разошлись при правках.
 *
 * Подключается после catalog.css и catalog-page.css (functions.php,
 * приоритет 25): переопределяет .catalog__grid, поэтому порядок несущий.
 * Крошки не дублируются - они приходят из catalog-page.css.
 *
 * Карточка проекта и её слайдер не трогаются - приходят из catalog.css.
 */

.catalog-list {
	--showcase-line: rgba(27, 26, 21, 0.1);
	--showcase-soft: #f5f3ee;
	--showcase-gold: #9a7634;
	--v2-pad: clamp(56px, 6.5vw, 112px);
}

/* Прототип рисует свою шапку раздела, штатный отступ страницы не нужен. */
.catalog-list .catalog-intro {
	display: none;
}

/* --- Общие приёмы словаря ------------------------------------------------- */

.cat-eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-gold-text);
}

/* Шапка секции: эйбрау, заголовок, подводка - как в карточке проекта. */
.cat-head-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 0.68fr);
	align-items: end;
	gap: clamp(24px, 4vw, 80px);
	max-width: none;
	margin-bottom: clamp(28px, 3.2vw, 58px);
}

.cat-head-row__title {
	max-width: 18.18em; /* 20ch в Unbounded 500 */
	margin: 0;
}

.cat-head-row__note {
	max-width: 36.59em; /* 58ch в Inter 400 */
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.55;
	color: var(--c-gray-600);
}

/* Подводка не сбоку, а под заголовком, по левому краю. */
.cat-head-row--stacked {
	display: block;
}

.cat-head-row--stacked .cat-head-row__note {
	margin-top: clamp(10px, 1.2vw, 16px);
}

.cat-panel {
	padding: clamp(20px, 2vw, 34px);
	border: 1px solid var(--showcase-line);
	border-radius: clamp(20px, 2vw, 30px);
	background: var(--c-white);
	box-shadow: 0 20px 60px rgba(27, 26, 21, 0.08);
}

/* Сетка «подпись - значение» из карточки проекта. */
.cat-specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--showcase-line);
	border-radius: 16px;
	background: var(--showcase-line);
	margin: 0;
}

.cat-specs__cell {
	min-width: 0;
	padding: 14px 15px;
	background: var(--c-white);
}

.cat-specs__label {
	margin-bottom: 5px;
	font-size: 11px;
	line-height: 1.3;
	color: var(--c-text-muted);
}

.cat-specs__value {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(13px, 1vw, 16px);
	line-height: 1.3;
}

/* --- 1. Шапка раздела ----------------------------------------------------- */

.cat-head {
	padding-top: clamp(8px, 1vw, 18px);
	padding-bottom: clamp(20px, 2.2vw, 40px);
}

.cat-head__title {
	max-width: 19.998em; /* 22ch в Unbounded 500 */
	margin: 0;
}

.cat-head__lead {
	max-width: 920px;
	margin: clamp(10px, 1.4vw, 18px) 0 0;
	font-size: var(--fs-body);
	line-height: 1.55;
	color: var(--c-gray-600);
}

/* --- 2. Строка раздела ----------------------------------------------------- */

/*
 * Заменила большой первый экран. Ровно та же информация, что была в панели
 * витрины - цена, четыре факта, запись на экскурсию, - но в одну полосу
 * высотой около 80px вместо семисот. На каталоге крупное фото одной бани
 * спорит с сеткой: витрина показывает один проект, а страница про девять.
 */
.cat-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 2vw, 40px);
	padding-block: clamp(16px, 1.6vw, 26px);
	border-block: 1px solid var(--showcase-line);
}

/* Факты - тонкими колонками через разделитель, а не плитками. */
.cat-meta__facts {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(14px, 1.8vw, 34px);
	margin: 0;
	flex: 1 1 380px;
}

.cat-meta__fact {
	position: relative;
	min-width: 0;
	padding-left: clamp(14px, 1.8vw, 34px);
}

.cat-meta__fact::before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 1px;
	background: var(--showcase-line);
}

.cat-meta__fact:first-child {
	padding-left: 0;
}

.cat-meta__fact:first-child::before {
	display: none;
}

.cat-meta__fact dt {
	margin-bottom: 4px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--c-text-muted);
}

.cat-meta__fact dd {
	margin: 0;
	font-family: var(--font-head);
	font-size: 14px;
	line-height: 1.3;
}

.cat-meta__cta {
	flex: none;
	min-height: 44px;
	padding-block: 11px;
	font-size: 14px;
}

/* --- 3. Панель фильтров --------------------------------------------------- */

.cat-filter-wrap {
	padding-top: clamp(22px, 2.4vw, 44px);
}

/*
 * Панель - одна строка: группы фильтров идут подряд, сортировка прижата
 * вправо. До 2026-09-15 здесь было три ряда с подписями слева, панель
 * занимала 270px - четверть первого экрана уходила на настройку витрины
 * вместо самой витрины.
 *
 * Подписи групп («Что должно быть в бане») убраны из виду, но остались
 * в разметке для программ чтения с экрана: человек и так понимает,
 * что значит «Баня-дом» и «до 55 м²», а скринридеру группа нужна.
 */
.cat-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.cat-filter__row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

/* Группы разделяет тонкая линия, а не подпись: она занимает 1px вместо строки. */
.cat-filter__row + .cat-filter__row {
	padding-left: 14px;
	border-left: 1px solid var(--showcase-line);
}

.cat-filter__row--sort {
	margin-left: auto;
}

.cat-filter__legend {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Кнопка «Фильтры» - только на телефоне (см. медиа-запрос ниже). */
.cat-filter__toggle {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--showcase-line);
	border-radius: var(--r-pill);
	background: var(--c-white);
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--c-black);
	cursor: pointer;
}

.cat-filter__toggle-icon {
	width: 16px;
	height: 16px;
	color: var(--c-gold-deep);
}

.cat-filter__toggle-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--r-pill);
	background: var(--c-ink);
	/* Не мельче 12 px (01-Ж1). */
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--c-white);
}

/*
 * position: relative обязателен вместе с прокруткой на телефоне. Чекбоксы
 * скрыты классом .visually-hidden, а он абсолютно позиционирован. Контейнер
 * с overflow не обрезает абсолютных потомков, если сам не позиционирован:
 * на 390px последний чекбокс уезжал на 818 и растягивал документ до 819.
 */
.cat-filter__options {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Чип - ровно как «пространства в проекте» на карточке. */
.cat-filter__label {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 9px 16px 9px 30px;
	border-radius: var(--r-pill);
	background: var(--showcase-soft);
	font-size: 14px;
	line-height: 1.2;
	color: var(--c-gray-600);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.cat-filter__label::before {
	content: '';
	position: absolute;
	left: 13px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-gold-deep);
	transform: translateY(-50%);
	transition: background-color var(--speed) var(--ease);
}

.cat-filter__label:hover {
	background: #ece8e0;
	color: var(--c-black);
}

.cat-filter__count {
	font-variant-numeric: tabular-nums;
	font-size: 11px;
	color: var(--c-text-muted);
}

/* Выбранное - тёмное. Золотой заливкой состояние не показать: золото на
   белом даёт 1.36:1, а на золоте не читается счётчик. */
.cat-filter__input:checked + .cat-filter__label {
	background: var(--c-ink);
	color: var(--c-white);
}

.cat-filter__input:checked + .cat-filter__label::before {
	background: var(--c-gold);
}

.cat-filter__input:checked + .cat-filter__label .cat-filter__count {
	color: var(--c-gold);
}

.cat-filter__input:focus-visible + .cat-filter__label {
	outline: 2px solid var(--showcase-gold);
	outline-offset: 2px;
}

/* Недостижимая опция: комбинация даст ноль. Сейчас такого состояния нет вовсе. */
.cat-filter__input:disabled + .cat-filter__label {
	opacity: 0.36;
	cursor: not-allowed;
	text-decoration: line-through;
}

.cat-filter__submit {
	min-height: 44px;
	padding-block: 10px;
}

/*
 * Со скриптом кнопки «Показать» не нужны - catalog-filter.js их удаляет. Но скрипт
 * стоит в подвале и порой выполняется уже после первой отрисовки: панель теряла два
 * ряда на глазах, и каталог на компьютере прыгал на 53 px (CLS 0,16, замер 27.09.2026).
 * Там, где браузер сообщает, что скрипты включены, кнопок нет с первого кадра.
 * Без JavaScript они видны и работают, как раньше.
 */
@media (scripting: enabled) {
	.cat-filter__submit {
		display: none;
	}
}

/* --- Лист фильтров на телефоне -------------------------------------------- */

/*
 * Открывается и закрывается общим скриптом попапов (assets/js/popup.js):
 * Esc, клик по фону, ловушка фокуса и inert уже сделаны там. Отличие от
 * окна с формой - лист прижат к низу экрана: большим пальцем дотянуться
 * до кнопок проще внизу, чем в середине.
 */
.filter-sheet {
	align-items: flex-end;
	padding: 0;
}

.filter-sheet__window {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	max-height: 82vh;
	padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
	border-radius: var(--r-lg) var(--r-lg) 0 0;
	background: var(--c-white);
	/* Окна форм тёмные, и текст в них белый - в листе фон светлый. */
	color: var(--c-black);
}

.filter-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.filter-sheet__title {
	margin: 0;
}

.filter-sheet__close {
	position: static;
	flex: none;
	/* 44, а не 40 - зона нажатия крестика листа (аудит 2026-09-25, 02-Ж1). */
	width: 44px;
	height: 44px;
	font-size: 28px;
	color: var(--c-gray-600);
	opacity: 1;
}

.filter-sheet__close:hover {
	color: var(--c-black);
}

.filter-sheet__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.filter-sheet__foot {
	display: flex;
	align-items: center;
	gap: 12px;
}

.filter-sheet__apply {
	flex: 1 1 auto;
	min-height: 48px;
	padding-inline: 16px;
	font-size: 14px;
	/* «Показать 5 проектов» - одной строкой: перенос ломал кнопку пополам. */
	white-space: nowrap;
}

.filter-sheet__reset {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 0 14px;
	border-radius: var(--r-pill);
	background: var(--showcase-soft);
	font-size: 13px;
	color: var(--c-gray-600);
}

/* Внутри листа панель разворачивается в столбик: место есть, подписи нужны. */
.filter-sheet .cat-filter {
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
}

.filter-sheet .cat-filter__row {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.filter-sheet .cat-filter__row + .cat-filter__row {
	padding-left: 0;
	border-left: 0;
}

.filter-sheet .cat-filter__legend {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
}

.filter-sheet .cat-filter__options {
	flex-wrap: wrap;
	gap: 8px;
}

/* --- Строка результата ---------------------------------------------------- */

/* Счётчик слева, порядок показа справа - в одной строке, на одной высоте. */
.cat-result-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin-top: clamp(14px, 1.4vw, 22px);
	padding-top: 12px;
	border-top: 1px solid var(--showcase-line);
}

.cat-result-bar .cat-result {
	margin-top: 0;
}

.cat-result-bar .cat-filter__row--sort {
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
}

.cat-result {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 14px;
	margin-top: clamp(16px, 1.6vw, 26px);
	font-size: 12.5px;
	color: var(--c-text-muted);
}

.cat-result__num {
	font-family: var(--font-head);
	font-size: clamp(15px, 1.2vw, 19px);
	font-variant-numeric: tabular-nums;
	color: var(--c-black);
}

.cat-result__reset {
	min-height: 30px;
	display: inline-flex;
	align-items: center;
	padding: 0 12px;
	border-radius: var(--r-pill);
	background: var(--showcase-soft);
	color: var(--c-gray-600);
	cursor: pointer;
}

/*
 * «Сбросить» на сенсорном экране: зона нажатия 44 px, видимая плашка прежняя -
 * фон только внутри полей, лишняя высота погашена отрицательным полем (01-Ж2).
 */
@media (pointer: coarse) {
	.cat-result__reset {
		min-height: 44px;
		margin-block: -7px;
		border-block: 7px solid transparent;
		background-clip: padding-box;
	}

	.cat-result__reset:hover {
		background-clip: padding-box;
	}
}

.cat-result__reset:hover {
	background: #ece8e0;
	color: var(--c-black);
}

/* --- 4. Сетка на мягкой земле --------------------------------------------- */

/*
 * Фон под сеткой - белый, как у шапки страницы. Отбивку «витрина, а не
 * список» теперь держит сама карточка светло-серой заливкой (ниже),
 * а не заливка секции.
 */
.cat-grid-zone {
	/*
	 * Сверху только небольшой отступ от строки «N проектов». Снизу padding
	 * нет: расстояние до блока «Срезы каталога» держит его собственный
	 * padding-top (var(--v2-pad)) - один интервал, как между секциями на
	 * главной, а не два сложенных.
	 */
	margin-top: clamp(12px, 1.4vw, 20px);
}

.catalog-list .catalog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.catalog-list .project-card {
	border-color: var(--showcase-line);
	border-radius: var(--r-xl);
	/* Светло-серая заливка вместо белой: карточка отделяется от белого фона секции. */
	background: var(--c-gray-100);
	box-shadow: 0 16px 40px rgba(27, 26, 21, 0.07);
	transition: translate var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.catalog-list .project-card:hover {
	translate: 0 -3px;
	box-shadow: 0 22px 54px rgba(27, 26, 21, 0.11);
}

.catalog-list .project-card__slider {
	border-radius: 0;
}

.catalog-list .project-card__title {
	font-size: clamp(18px, 1.55vw, 24px);
	line-height: 1.25;
}

/* Врезка внутри сетки: разбивает монотонность девяти одинаковых плиток,
   саму карточку при этом не трогает. */
.cat-inline {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(18px, 2vw, 40px);
	padding: clamp(22px, 2.2vw, 40px) clamp(22px, 2.4vw, 44px);
	border-radius: clamp(20px, 2vw, 30px);
	background: var(--c-ink);
	color: var(--c-white);
}

.cat-inline__title {
	margin: 0 0 8px;
	font-family: var(--font-head);
	font-weight: 400;
	font-size: var(--fs-h4);
	line-height: 1.25;
	letter-spacing: var(--ls-head);
}

.cat-inline__text {
	margin: 0;
	max-width: 36.59em; /* 58ch в Inter 400 */
	font-size: var(--fs-small);
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.68);
}

/*
 * Неполный последний ряд (С-69, владелец 29.09.2026; аудит 02-Ж2): врезка встаёт
 * в его свободные колонки, а не отдельной полосой под сеткой - пустых клеток нет,
 * призыв рядом с карточками. Внутри врезки текст и кнопка - столбиком по центру
 * высоты ряда. Считаются только видимые карточки: фильтр прячет лишние атрибутом
 * hidden, и раскладка пересчитывается сама. Ряд полный - врезка, как раньше, во всю
 * ширину; браузер без :has() и :nth-child(… of …) тоже покажет её как раньше.
 */
@media (min-width: 1024px) {
	.catalog-list .catalog__grid:has(> .project-card:not([hidden]):nth-child(3n+1 of .project-card:not([hidden])):nth-last-child(1 of .project-card:not([hidden]))) > .cat-inline {
		grid-column: span 2;
		grid-template-columns: minmax(0, 1fr);
		align-content: center;
	}

	.catalog-list .catalog__grid:has(> .project-card:not([hidden]):nth-child(3n+2 of .project-card:not([hidden])):nth-last-child(1 of .project-card:not([hidden]))) > .cat-inline {
		grid-column: span 1;
		grid-template-columns: minmax(0, 1fr);
		align-content: center;
	}
}

@media (min-width: 640px) and (max-width: 1023px) {
	.catalog-list .catalog__grid:has(> .project-card:not([hidden]):nth-child(2n+1 of .project-card:not([hidden])):nth-last-child(1 of .project-card:not([hidden]))) > .cat-inline {
		grid-column: span 1;
		grid-template-columns: minmax(0, 1fr);
		align-content: center;
	}
}

/* --- Пустое состояние ----------------------------------------------------- */

.cat-empty {
	padding: clamp(28px, 3vw, 52px);
	border: 1px solid var(--showcase-line);
	border-radius: clamp(20px, 2vw, 30px);
	background: var(--c-white);
}

.cat-empty__title {
	margin: 0 0 10px;
	font-family: var(--font-head);
	font-weight: 400;
	font-size: var(--fs-h4);
	letter-spacing: var(--ls-head);
}

.cat-empty__text {
	margin: 0 0 clamp(16px, 1.6vw, 24px);
	max-width: 39.113em; /* 62ch в Inter 400 */
	color: var(--c-gray-600);
}

.cat-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* --- 5. Подборки: место убранного баннера --------------------------------- */

.cat-tags {
	padding-block: var(--v2-pad);
}

.cat-tags__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 1.2vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cat-tag {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(160px, 14vw, 220px);
	padding: clamp(16px, 1.5vw, 24px);
	border-radius: clamp(18px, 1.6vw, 24px);
	overflow: hidden;
	background: var(--c-gray-100);
	color: var(--c-white);
}

.cat-tag__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* По умолчанию центр; --tag-focus задаётся на плитке для неудобных кадров. */
	object-position: var(--tag-focus, 50% 50%);
	transition: scale var(--speed) var(--ease);
}

.cat-tag::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(27, 26, 21, 0.88) 6%, rgba(27, 26, 21, 0.08) 76%);
}

.cat-tag:hover .cat-tag__img {
	scale: 1.04;
}

.cat-tag__name {
	position: relative;
	z-index: 1;
	font-family: var(--font-head);
	font-weight: 400;
	font-size: clamp(15px, 1.2vw, 19px);
	line-height: 1.2;
	letter-spacing: var(--ls-head);
}

.cat-tag__count {
	position: relative;
	z-index: 1;
	margin-top: 5px;
	font-size: 12px;
	color: var(--c-gold);
	font-variant-numeric: tabular-nums;
}

/* --- 6. Адаптация проекта -------------------------------------------------- */

.cat-adapt {
	padding-bottom: var(--v2-pad);
}

.cat-adapt__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.75fr) minmax(520px, 1.25fr);
	gap: clamp(30px, 5vw, 88px);
	align-items: center;
	padding: clamp(30px, 4vw, 68px);
	border-radius: var(--r-xl);
	background: var(--c-ink);
	color: var(--c-white);
}

.cat-adapt__copy .cat-eyebrow {
	color: var(--c-gold);
}

.cat-adapt__copy .h2 {
	max-width: 16.362em; /* 18ch в Unbounded 500 */
	margin: 0;
}

.cat-adapt__copy > p:not(.cat-eyebrow) {
	max-width: 31.543em; /* 50ch в Inter 400 */
	margin: 18px 0 28px;
	font-size: var(--fs-body);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.64);
}

.cat-adapt__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	margin: 0;
	padding: 1px;
	border-radius: var(--r-xl);
	background: rgba(255, 255, 255, 0.14);
	list-style: none;
}

.cat-adapt__grid li {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 220px;
	padding: clamp(20px, 2vw, 32px);
	background: #25241f;
}

.cat-adapt__grid li > span {
	font-family: var(--font-head);
	font-size: 11px;
	color: var(--c-gold);
}

.cat-adapt__grid h3 {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(15px, 1.2vw, 18px);
	font-weight: 500;
	line-height: 1.35;
}

.cat-adapt__grid p {
	margin: 8px 0 0;
	font-size: var(--fs-small);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.58);
}

/* --- 7. Портфолио готовых бань ------------------------------------------- */

.cat-portfolio {
	padding-bottom: var(--v2-pad);
}

.cat-portfolio__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: repeat(2, clamp(190px, 19vw, 310px));
	gap: var(--gap);
}

.cat-portfolio__item {
	position: relative;
	grid-column: span 3;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--showcase-soft);
}

.cat-portfolio__item--main {
	grid-column: span 6;
	grid-row: span 2;
}

.cat-portfolio__item--wide {
	grid-column: span 6;
}

.cat-portfolio__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.65s var(--ease);
}

.cat-portfolio__item:hover .cat-portfolio__img {
	transform: scale(1.025);
}

.cat-portfolio__item::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	height: 42%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent);
	pointer-events: none;
}

.cat-portfolio__item figcaption {
	position: absolute;
	right: 18px;
	bottom: 16px;
	left: 18px;
	z-index: 1;
	font-family: var(--font-head);
	font-size: clamp(13px, 1vw, 16px);
	line-height: 1.35;
	color: var(--c-white);
}

/* Пометка непроверенных данных. Стоит на блоках, которые нельзя выпускать
   на боевой домен как есть: состав стоимости ждёт подтверждения прораба,
   доказательства - фото объектов. Снимается вместе с заглушками. */
.draft-flag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 12px;
	padding: 5px 11px;
	border-radius: var(--r-pill);
	background: #fff3d6;
	box-shadow: inset 0 0 0 1px var(--c-gold-deep);
	font-size: 11.5px;
	letter-spacing: 0.02em;
	color: #7a5c1c;
}

/* --- 7. Доказательства: заглушки под данные владельца ---------------------- */

.cat-proof {
	/*
	 * Только снизу: сверху отступ до «Галереи» уже даёт нижний padding
	 * блока «Категории» - один интервал, а не два сложенных.
	 */
	padding-bottom: var(--v2-pad);
}

.cat-proof__strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(12px, 1.2vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cat-proof__card {
	margin: 0;
	border-radius: clamp(18px, 1.6vw, 24px);
	overflow: hidden;
	background: var(--c-white);
}

/* Кнопка вокруг фото - сброс дефолтных стилей <button>, открывает лайтбокс. */
.cat-proof__media {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: zoom-in;
}

.cat-proof__img {
	display: block;
	width: 100%;
	/* Квадрат, как в блоке объектов на главной: снимки вертикальные. */
	aspect-ratio: 1;
	object-fit: cover;
}

/* Подпись выводится, только если поля заполнены в админке, поэтому отступы
   у неё свои, а не общие с карточкой. */
.cat-proof__caption {
	display: grid;
	gap: 3px;
	padding: 12px 14px 14px;
	background: var(--c-white);
}

.cat-proof__place {
	font-family: var(--font-head);
	font-size: 13px;
	line-height: 1.3;
}

.cat-proof__meta {
	font-size: 11.5px;
	line-height: 1.3;
	color: var(--c-text-muted);
}

.cat-proof__more {
	display: flex;
	justify-content: center;
	margin-top: clamp(18px, 1.8vw, 30px);
}

/*
 * Лайтбокс-карусель «Галереи». Разметка, классы и скрипт - те же, что у блока
 * объектов на главной; стили там лежат в sections.css, который на каталоге не
 * подключается, поэтому нужные правила продублированы здесь. Менять - парно
 * с sections.css.
 */
.objects-lightbox__window {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(8px, 1.2vw, 24px);
	width: min(1100px, 100%);
	max-height: min(90vh, 820px);
}

.objects-lightbox__figure {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--c-white);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.objects-lightbox__img {
	display: block;
	width: 100%;
	max-height: min(78vh, 720px);
	object-fit: contain;
	background: var(--c-white);
}

.objects-lightbox__caption {
	width: 100%;
	padding: 12px clamp(16px, 2vw, 28px);
	background: var(--c-white);
	color: var(--c-black);
	font-size: var(--fs-small);
	text-align: center;
}

.objects-lightbox__caption:empty {
	display: none;
}

.objects-lightbox__arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(36px, 3vw, 52px);
	aspect-ratio: 1;
	border-radius: var(--r-round);
	background: rgba(255, 255, 255, 0.12);
	color: var(--c-white);
	transition: background-color var(--speed) var(--ease);
}

.objects-lightbox__arrow:hover {
	background: rgba(255, 255, 255, 0.24);
}

.objects-lightbox__arrow svg {
	width: 40%;
	height: 40%;
}

.objects-lightbox__counter {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 4px 12px;
	border-radius: var(--r-pill);
	background: rgba(0, 0, 0, 0.55);
	color: var(--c-white);
	font-size: var(--fs-small);
}

.objects-lightbox .popup__close {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 44, а не 40 (02-Ж1). */
	width: 44px;
	height: 44px;
	background: var(--c-white);
	color: var(--c-black);
	border-radius: var(--r-round);
	opacity: 1;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

/*
 * Телефон: стрелки поверх фото по краям кадра, как в sections.css (фаза 4, 02-В8).
 * До 2026-09-28 на каталоге действовала копия из sections.css - он грузился сюда
 * ради блока статей; теперь его здесь нет, и правило держит эта копия.
 */
@media (max-width: 639px) {
	.objects-lightbox__window {
		gap: 0;
	}

	.objects-lightbox__arrow {
		position: absolute;
		top: 50%;
		z-index: 1;
		width: 44px;
		margin-top: -22px;
		padding: 4px;
		background: rgba(255, 255, 255, 0.85);
		background-clip: content-box;
		color: var(--c-black);
	}

	.objects-lightbox__arrow:hover {
		background: rgba(255, 255, 255, 0.95);
		background-clip: content-box;
	}

	.objects-lightbox__arrow--prev {
		left: 4px;
	}

	.objects-lightbox__arrow--next {
		right: 4px;
	}
}

/* --- 8. Экскурсия: золотая панель ----------------------------------------- */

/*
 * Золотая, а не тёмная - ровно как блок экскурсии на карточке проекта.
 * Это единственный крупный золотой эпизод страницы, поэтому он и читается
 * как главное действие.
 */
.cat-excursion {
	padding-bottom: var(--v2-pad);
}

.cat-excursion__inner {
	--cat-excursion-pad: clamp(26px, 4vw, 68px);
	display: grid;
	/* Ровно пополам: раздел текст/фото по центру подложки. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 88px);
	align-items: center;
	padding: var(--cat-excursion-pad);
	border-radius: var(--r-xl);
	background: var(--c-gold);
	/* Фото справа выходит под самые края подложки - обрезаем по скруглению. */
	overflow: hidden;
}

.cat-excursion__copy .cat-eyebrow {
	color: var(--c-gold-text);
}

.cat-excursion__title {
	margin: 0;
	max-width: 18.18em; /* 20ch в Unbounded 500 */
}

.cat-excursion__list {
	display: grid;
	gap: 9px;
	margin-block: clamp(20px, 2vw, 32px);
	padding: 0;
	list-style: none;
}

.cat-excursion__list li {
	position: relative;
	padding-left: 22px;
	font-size: var(--fs-body);
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.72);
}

.cat-excursion__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-ink);
}

.cat-excursion__note {
	margin: clamp(16px, 1.6vw, 24px) 0 0;
	max-width: 32.805em; /* 52ch в Inter 400 */
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.58);
}

.cat-excursion__media {
	align-self: stretch;
	/* Гасим padding подложки сверху/справа/снизу; слева остаётся gap до текста. */
	margin: calc(var(--cat-excursion-pad) * -1) calc(var(--cat-excursion-pad) * -1) calc(var(--cat-excursion-pad) * -1) 0;
}

.cat-excursion__img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* --- 8. От проекта до первого пара ---------------------------------------- */

/*
 * С 2026-09-25 блок стоит на списке каркасных домов («Полный цикл») сразу
 * под сеткой. У сетки нижнего отступа нет (см. .cat-grid-zone), поэтому
 * интервал сверху блок держит сам.
 */
.cat-journey {
	padding-block: var(--v2-pad);
}

.cat-journey__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	margin: 0;
	padding: 1px;
	border-radius: var(--r-xl);
	background: var(--showcase-line);
	list-style: none;
}

.cat-journey__grid li {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 260px;
	padding: clamp(22px, 2.2vw, 38px);
	background: var(--c-white);
}

.cat-journey__grid li > span {
	font-family: var(--font-head);
	/* Не мельче 12 px (01-Ж1). */
	font-size: 12px;
	color: var(--c-gold-text);
}

.cat-journey__grid h3 {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(15px, 1.15vw, 18px);
	font-weight: 500;
	line-height: 1.4;
}

.cat-journey__grid p {
	margin: 9px 0 0;
	font-size: var(--fs-small);
	line-height: 1.5;
	color: var(--c-text-muted);
}

/*
 * Три этапа вместо четырёх (каркасные дома): три колонки, без пустой ячейки.
 * Текст прижат к номеру, а не к низу ячейки: на планшете заголовки
 * переносятся по-разному, и при прижатии к низу стояли бы на разной высоте.
 */
.cat-journey__grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cat-journey__grid--3 li {
	justify-content: flex-start;
	gap: clamp(28px, 3.4vw, 60px);
	min-height: 0;
}

.cat-journey__assurances {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap);
	margin-top: var(--gap);
}

.cat-journey__assurances p {
	display: grid;
	gap: 7px;
	margin: 0;
	padding: clamp(18px, 1.8vw, 28px);
	border-radius: var(--r-lg);
	background: var(--showcase-soft);
}

.cat-journey__assurances strong {
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

.cat-journey__assurances span {
	font-size: 11px;
	line-height: 1.45;
	color: var(--c-text-muted);
}

/* --- 9. Вопросы и SEO-текст ------------------------------------------------ */

/*
 * Один в один приёмы карточки проекта: секция на мягком фоне, список с
 * тонкими линиями, круглая кнопка «+ / −» справа, под списком - свёрнутый
 * текстовый блок с «Читать далее». Значения скопированы из пилота
 * catalog-page.css, чтобы страницы не разъехались на пиксель.
 */
.cat-faq {
	position: relative;
	padding-block: var(--v2-pad);
	background: var(--showcase-soft);
}

.cat-faq::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	translate: -50% 0;
	background: var(--showcase-soft);
	z-index: 0;
}

.cat-faq > * {
	position: relative;
	z-index: 1;
}

.cat-faq__list {
	border-top: 1px solid var(--showcase-line);
}

.cat-faq details {
	border-bottom: 1px solid var(--showcase-line);
}

.cat-faq summary {
	position: relative;
	padding: clamp(18px, 1.7vw, 28px) 54px clamp(18px, 1.7vw, 28px) 0;
	font-family: var(--font-head);
	font-size: clamp(14px, 1.2vw, 18px);
	line-height: 1.45;
	cursor: pointer;
	list-style: none;
}

.cat-faq summary::-webkit-details-marker {
	display: none;
}

.cat-faq summary::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 50%;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--showcase-line);
	border-radius: 50%;
	font-family: var(--font-body);
	font-size: 22px;
	transform: translateY(-50%);
}

.cat-faq details[open] summary::after {
	content: '−';
}

.cat-faq details > div {
	max-width: 51.73em; /* 82ch в Inter 400 */
	padding: 0 54px clamp(20px, 2vw, 32px) 0;
}

.cat-faq details p {
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--c-gray-600);
}

.cat-faq details p + p {
	margin-top: 12px;
}

/* --- SEO-текст: свёрнут, раскрывается по «Читать далее» -------------------- */

.cat-seo {
	margin-top: clamp(34px, 4vw, 68px);
	padding: clamp(22px, 2.5vw, 40px);
	border: 1px solid var(--showcase-line);
	border-radius: var(--r-xl);
	background: var(--c-white);
}

/*
 * Высота свёрнутого текста - заголовок и строка под ним, её считает
 * catalog-page.js (--seo-collapsed): постоянные 4.8em на телефоне резали
 * заголовок в три строки пополам (аудит 2026-09-25, 02-В6). Без скрипта - 4.8em.
 */
.cat-seo__body {
	position: relative;
	max-height: var(--seo-collapsed, 4.8em);
	overflow: hidden;
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--c-gray-600);
	transition: max-height 0.45s var(--ease);
}

.cat-seo__body::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2.4em;
	background: linear-gradient(to bottom, transparent, var(--c-white));
}

.cat-seo.is-expanded .cat-seo__body {
	max-height: 1600px;
}

/*
 * Свой текст каталога или подборки из поля «Текст внизу страницы» (inc/seo-meta.php):
 * 360 слов - это 1 384px на ширине 360 (замер 29.09.2026), у 1 600px почти нет запаса.
 */
.cat-seo--own.is-expanded .cat-seo__body {
	max-height: 3000px;
}

.cat-seo.is-expanded .cat-seo__body::after {
	display: none;
}

.cat-seo h2 {
	margin: 0 0 12px;
	font-size: var(--fs-h4);
	line-height: 1.4;
	color: var(--c-black);
}

.cat-seo h3 {
	margin: 20px 0 8px;
	font-family: var(--font-head);
	font-weight: 400;
	font-size: clamp(14px, 1.05vw, 16px);
	line-height: 1.4;
	letter-spacing: var(--ls-head);
	color: var(--c-black);
}

.cat-seo p {
	margin: 0;
}

/*
 * Раскрытый текст на широком экране - не шире ~75 знаков в строке: блок во всю
 * ширину контейнера давал строки по 130-185 знаков (аудит 2026-09-25, 02-Ж4).
 */
.cat-seo__body > * {
	max-width: 42em;
}

.cat-seo p + p {
	margin-top: 12px;
}

.cat-seo a {
	color: var(--c-black);
	box-shadow: inset 0 -1px 0 var(--c-gold-deep);
}

.cat-seo a:hover {
	box-shadow: inset 0 -2px 0 var(--c-ink);
}

.cat-seo__toggle {
	margin-top: 16px;
	border-bottom: 1px dashed var(--c-gray-400);
	font-size: 12px;
	color: var(--c-gray-600);
	cursor: pointer;
}

/*
 * «Читать далее» на сенсорном экране - зона нажатия 44 px (была 18, 01-Ж2).
 * Пунктир переехал в подчёркивание текста: с полями по вертикали нижняя
 * граница ушла бы от слов вниз. Лишняя высота погашена отрицательными полями.
 */
@media (pointer: coarse) {
	.cat-seo__toggle {
		padding-block: 14px;
		margin-block: 2px -14px;
		border-bottom: 0;
		text-decoration: underline dashed var(--c-gray-400);
		text-underline-offset: 4px;
	}
}

.cat-seo__toggle:hover {
	color: var(--c-black);
	border-bottom-color: var(--c-ink);
}

/* --- Адаптив --------------------------------------------------------------- */

@media (max-width: 1023px) {
	/* minmax(0, ...): колонку не раздвигает кнопка в одну строку - на 320-355 px её срезал край карточки (01-В7). */
	.cat-head-row,
	.cat-showcase,
	.cat-adapt__inner,
	.cat-excursion__inner {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	/* Одна колонка: фото под текстом, вплотную к краям слева/справа/снизу. */
	.cat-excursion__media {
		margin: clamp(18px, 3vw, 30px) calc(var(--cat-excursion-pad) * -1) calc(var(--cat-excursion-pad) * -1);
	}

	.catalog-list .catalog__grid,
	.cat-tags__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cat-proof__strip {
		grid-template-columns: repeat(2, 1fr);
	}

	.cat-journey__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Три этапа в две колонки оставили бы пустую ячейку - держим три до телефона. */
	.cat-journey__grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cat-portfolio__grid {
		grid-template-rows: repeat(2, clamp(180px, 27vw, 260px));
	}

	.cat-text__layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	/*
	 * Панель уезжает в лист, в строке остаётся кнопка «Фильтры».
	 * Форму между строкой и листом переносит catalog-filter.js.
	 */
	.cat-filter__toggle {
		display: inline-flex;
	}

	.cat-filter-shell {
		display: none;
	}

	/* В листе чипы крупные: палец - не курсор, 44px это минимум для касания. */
	.filter-sheet .cat-filter__label {
		min-height: 44px;
		padding: 10px 16px 10px 30px;
		font-size: 13px;
	}

	.cat-inline {
		grid-template-columns: 1fr;
	}

	/*
	 * «Галерея» на телефоне - горизонтальная лента фото со снап-прокруткой
	 * вместо сетки: страница не вытягивается в высоту, снимок виден крупно.
	 */
	.cat-proof__strip {
		display: flex;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: auto;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
	}

	.cat-proof__strip::-webkit-scrollbar {
		display: none;
	}

	.cat-proof__item {
		flex: 0 0 72%;
		scroll-snap-align: start;
	}

	/* В ленте все фото достаются прокруткой - кнопка «Показать ещё» не нужна. */
	.cat-proof__more {
		display: none;
	}

	/* Панель экскурсии на телефоне: заголовок мельче. Надзаголовок - общие 12px,
	   как по всему сайту (было 10.5px, владелец просил один размер, 2026-09-25). */
	.cat-excursion__title {
		font-size: 20px;
	}

	/* Меньше отступ от текста до фото (негативные поля по краям - из ≤1023). */
	.cat-excursion__media {
		margin-top: 4px;
	}

	/*
	 * Кнопка в панели экскурсии на телефоне: во всю ширину колонки, той же
	 * высоты, что кнопка «Подобрать проект» (min-height + вертикальный
	 * padding базовой .btn), шрифт мельче и в одну строку, чтобы
	 * «Записаться на экскурсию» не переносилось.
	 */
	.cat-excursion .btn {
		width: 100%;
		min-height: 49px;
		padding: 14px 22px;
		font-size: 14px;
		white-space: nowrap;
	}
}

@media (max-width: 639px) {
	.catalog-list .catalog__grid {
		grid-template-columns: 1fr;
	}

	/*
	 * Подборки, состав и заглушки остаются в две колонки даже на 360:
	 * содержимое короткое, а в одну колонку страница вытягивалась
	 * за 11 000 px - столько никто не прокручивает.
	 */
	.cat-tags__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cat-adapt__grid,
	.cat-journey__grid,
	.cat-journey__assurances {
		grid-template-columns: 1fr;
	}

	.cat-adapt__inner {
		padding: 24px;
		border-radius: 22px;
	}

	.cat-portfolio__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: 280px repeat(2, 160px);
		gap: 8px;
	}

	.cat-portfolio__item,
	.cat-portfolio__item--main,
	.cat-portfolio__item--wide {
		grid-column: span 1;
		grid-row: span 1;
		border-radius: 16px;
	}

	.cat-portfolio__item--main {
		grid-column: 1 / -1;
	}

	.cat-portfolio__item:last-child {
		grid-column: 1 / -1;
	}

	.cat-portfolio__item figcaption {
		right: 12px;
		bottom: 11px;
		left: 12px;
		font-size: 12px;
	}

	.cat-adapt__grid li,
	.cat-journey__grid li {
		min-height: 180px;
	}

	/* Три этапа домов - по высоте текста, без пустого низа (текст прижат к номеру). */
	.cat-journey__grid--3 li {
		min-height: 0;
	}

	.cat-tag {
		min-height: 140px;
		padding: 12px;
	}

	.cat-tag__name {
		font-size: 14px;
	}


	/*
	 * Строка раздела на телефоне: четыре факта сеткой 2×2, кнопка на всю
	 * ширину. Шрифт мельче, чем на десктопе, - значения помещаются, а между
	 * ячейками тонкие разделители (вертикальный у правой колонки,
	 * горизонтальный между рядами).
	 */
	.cat-meta {
		gap: 14px;
	}

	.cat-meta__facts {
		flex: 1 1 100%;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
		align-items: stretch;
	}

	.cat-meta__fact {
		padding: 0 0 0 12px;
	}

	.cat-meta__fact::before {
		inset: 0 auto 0 0;
		width: 1px;
		height: auto;
	}

	/* Левая колонка (1-й и 3-й факт): без вертикальной линии и отступа. */
	.cat-meta__fact:nth-child(odd) {
		padding-left: 0;
	}

	.cat-meta__fact:nth-child(odd)::before {
		display: none;
	}

	/* Нижний ряд (3-й и 4-й): горизонтальная линия и отступ сверху. */
	.cat-meta__fact:nth-child(n + 3) {
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid var(--showcase-line);
	}

	/* Не мельче 12 px (01-Ж1). */
	.cat-meta__fact dt {
		font-size: 12px;
	}

	/*
	 * Узкая колонка значения - чтобы все четыре факта ложились в две строки
	 * одинаково («Более 10 лет», «1 месяц под ключ» тоже переносятся, а не
	 * висят одной строкой рядом с двухстрочными). balance делит строки ровно.
	 */
	.cat-meta__fact dd {
		max-width: 7.5em;
		font-size: 12px;
		text-wrap: balance;
	}

	.cat-meta__cta {
		flex: 1 1 100%;
	}

	.cat-head {
		padding-bottom: 16px;
	}

	.cat-filter-wrap {
		padding-top: 18px;
	}

	.cat-grid-zone {
		margin-top: 10px;
	}

	.cat-meta {
		padding-block: 14px;
	}

	.cat-result {
		margin-top: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cat-tag:hover .cat-tag__img,
	.cat-portfolio__item:hover .cat-portfolio__img {
		scale: 1;
		transform: none;
	}
}

/*
 * 320-359 px: «Записаться на экскурсию» в одну строку помещается при поле
 * карточки 20 px и шрифте 13 px (01-В7). Текст прежний.
 */
@media (max-width: 359px) {
	.cat-excursion__inner {
		--cat-excursion-pad: 20px;
	}

	.cat-excursion .btn {
		padding-inline: 14px;
		font-size: 13px;
	}
}

/*
 * 640-1179 px: четыре факта не помещаются в строку и переносились «3 + 1» или
 * «2 + 2» с разделителем и отступом у первого факта второго ряда (аудит
 * 2026-09-25, 02-Ж9). Сетка 2×2, как на телефоне; кнопка остаётся справа, где помещается.
 */
@media (min-width: 640px) and (max-width: 1179px) {
	.cat-meta__facts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
		align-items: stretch;
	}

	.cat-meta__fact {
		padding: 0 0 0 clamp(14px, 1.8vw, 34px);
	}

	.cat-meta__fact::before {
		inset: 0 auto 0 0;
		width: 1px;
		height: auto;
	}

	.cat-meta__fact:nth-child(odd) {
		padding-left: 0;
	}

	.cat-meta__fact:nth-child(odd)::before {
		display: none;
	}

	.cat-meta__fact:nth-child(n + 3) {
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid var(--showcase-line);
	}
}