/* Каталог проектов: сетка, карточка, слайдер фото.
 *
 * Файл общий для главной и для страницы каталога (/karkasnye-bani/). Раньше эти правила
 * лежали в home.css и site.css и работали только на главной - карточка была
 * привязана к модификатору .catalog--main. Модификатор переименован в
 * .catalog--cards: он говорит про вид карточки, а не про место, где она стоит.
 * .catalog--main и .catalog--page остались метками места и стилей не несут.
 *
 * Порядок правил внутри файла сохранён с точностью до строки: сначала блок из
 * site.css, затем блок из home.css - именно в таком порядке они попадали в
 * страницу раньше. Часть правил перебивает друг друга при равной
 * специфичности (например margin у .project-card__specs), и порядок здесь
 * несущий, а не косметический.
 *
 * Подключается: на главной - перед home.css, на странице каталога - перед
 * catalog-page.css (см. functions.php).
 */

/* --- Каталог: карточка как в согласованном мокапе ---------------------------------------- */

/*
 * Карточка - контейнер с рамкой, тенью и внутренними полями; фото лежит внутри
 * со своим скруглением. В исходной теме фото было само по себе, без карточки.
 */
.verest .catalog--cards /* Скрытая фильтром карточка: у .project-card стоит display:flex, и без этого
   правила атрибут hidden не сработал бы. */
.project-card[hidden] {
	display: none;
}

.project-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(27, 26, 21, 0.08);
	border-radius: var(--r-lg);
	background: var(--c-white);
	box-shadow: var(--sh-card);
}

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

.verest .catalog--cards .project-card__title,
.verest .catalog--cards .project-card__specs,
.verest .catalog--cards .project-card__options,
.verest .catalog--cards .project-card__cta {
	margin-inline: clamp(16px, 1.5vw, 22px);
}

.verest .catalog--cards .project-card__title {
	margin-top: clamp(16px, 1.4vw, 20px);
	text-align: left;
}

.verest .catalog--cards .project-card__cta {
	margin-bottom: clamp(18px, 1.6vw, 24px);
	width: auto;
}

.verest .catalog--cards .project-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.verest .catalog--cards .project-card__spec {
	padding: 6px 12px;
	border-radius: var(--r-pill);
	background: #f4f2ee;
	font-size: var(--fs-small);
	color: var(--c-gray-600, #484848);
}

.verest .catalog--cards .project-card__options {
	margin-top: 12px;
	font-size: var(--fs-small);
	line-height: 1.35;
	color: var(--c-text-muted);
}

.verest .catalog--cards .project-card__cta {
	margin-top: 18px;
}

/* --- Каталог бань ------------------------------------------------------------- */

.catalog {
	padding-block: var(--section-gap);
}

.catalog__title {
	text-align: center;
}

/* Кнопки под витриной главной - одной строкой (владелец, 2026-09-25).
   «Весь каталог» - на всех ширинах: на главной показаны девять проектов из
   семнадцати, остальные лежат в каталоге. «Показать еще» - только на мобильном
   (см. медиа-запрос ниже), на десктопе все девять карточек видны сразу. */
.catalog__actions {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: clamp(16px, 1.9vw, 36px);
}

.catalog__more {
	display: none;
}

.catalog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 1.9vw, 36px);
}

.project-card {
	display: flex;
	flex-direction: column;
	/* Было clamp(12px, 1.25vw, 24px) - плюс ещё margin-top у заголовка и
	   описания из site.css сверху, вместе получалось 30-38px. Просили 16-18px. */
	gap: 17px;
}

/* Убираем добавочные отступы из общего site.css - теперь весь интервал даёт только gap выше. */
.verest .catalog--cards .project-card .project-card__title {
	margin-top: 0;
}

.verest .catalog--cards .project-card .project-card__options {
	margin-top: 0;
}

/*
 * margin-top: auto - кнопка прижата к низу карточки: у карточки с описанием
 * в две строки «Подробнее» стояла ниже соседних, лесенкой (аудит 2026-09-25, 02-В7).
 */
.verest .catalog--cards .project-card .project-card__cta {
	margin-top: auto;
}

.project-card__slider {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--c-gray-100);
}

.project-card__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.project-card__track::-webkit-scrollbar {
	display: none;
}

.project-card__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.project-card__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/*
 * Плашки-параметры (4×4 м / 16 м² / 1 этаж) теперь лежат поверх фото, а не
 * под ним - разметка перенесена внутрь .project-card__slider (position:
 * relative уже есть). Селектор с явным .project-card__slider и без
 * .verest - специфичность выше правила из общего site.css, побеждает без
 * лишних !important.
 */
.catalog--cards .project-card__slider .project-card__specs {
	position: absolute;
	left: clamp(10px, 0.9vw, 16px);
	top: clamp(10px, 0.9vw, 16px);
	z-index: 1;
	margin: 0;
}

.catalog--cards .project-card__slider .project-card__spec {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.project-card__title {
	text-align: center;
}

/*
 * Стрелки и точки слайдера. Вид стрелки (размер, форма, иконка) - в site.css:
 * он общий для всех лент. Здесь - поведение на фото карточки: поверх кадра,
 * видна при наведении.
 */

.slider-arrow {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	opacity: 0;
}

.slider-arrow--prev {
	left: clamp(8px, 0.83vw, 16px);
}

.slider-arrow--next {
	right: clamp(8px, 0.83vw, 16px);
}

.project-card__slider:hover .slider-arrow,
.slider-arrow:focus-visible {
	opacity: 1;
}

/* Одно фото в карточке - листать нечего, управление лишнее. */
.project-card__slider.is-locked .slider-arrow,
.project-card__slider.is-locked .slider-dots {
	display: none;
}

/* Крайнее фото: листать в эту сторону нечего. */
.project-card__slider:hover .slider-arrow[aria-disabled='true'],
.slider-arrow[aria-disabled='true']:focus-visible {
	opacity: 0.25;
	cursor: default;
}

.slider-dots {
	position: absolute;
	left: 50%;
	bottom: clamp(8px, 0.83vw, 16px);
	translate: -50% 0;
	display: flex;
	gap: 6px;
}

.slider-dots__item {
	width: 6px;
	aspect-ratio: 1;
	border-radius: var(--r-round);
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: background-color var(--speed) var(--ease);
}

.slider-dots__item.is-active {
	background: var(--c-white);
}

@media (max-width: 1023px) {
	.catalog__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

	/* Список из 9 карточек в одну колонку - длинный скролл. Первые 4 видны сразу, остальные открывает кнопка (JS добавляет .is-expanded).
	   Только на главной: на странице каталога человек пришёл именно за списком, прятать от него карточки незачем. */
	.catalog--main .catalog__grid:not(.is-expanded) .project-card:nth-child(n+5) {
		display: none;
	}

	.catalog__more {
		display: inline-flex;
	}

	/* Две кнопки делят строку поровну. Широкий Unbounded в половину экрана 360px
	   при обычных полях и 16px не помещается («Показать еще» = 139px текста), поэтому
	   поля уже, а шрифт на узких экранах чуть меньше: на 390px те же 16px, на 360px 14,8px.
	   После «Показать еще» кнопка удаляется (ui.js), и «Весь каталог» занимает всю строку. */
	.catalog__actions > .btn {
		flex: 1 1 0;
		min-width: 0;
		padding-inline: 10px;
		font-size: min(var(--fs-btn), 4.1vw);
	}

	.slider-arrow {
		opacity: 1;
	}
}

/*
 * Сенсорный экран шире телефона (планшет): наведения нет - стрелки видны всегда.
 * Раньше они были прозрачными, но нажимались: касание у края фото молча
 * листало кадр (аудит 2026-09-25, 01-Ж4).
 */
@media (hover: none) {
	.slider-arrow {
		opacity: 1;
	}
}

/* Название-ссылка карточки: зона нажатия от 44 px на сенсорном экране, строка не выросла (была 21-25 px, 01-Ж2). */
@media (pointer: coarse) {
	.project-card__link {
		display: inline-block;
		padding-block: 11px;
		margin-block: -11px;
	}
}