/* ═══════════════════════════════════════════════════════════════════════════════
 * STROM Trade — плитки подразделов под заголовком раздела
 * Разметка: inc/strom-subcat-tiles.php, слайдер: assets/js/subcat-tiles.js
 *
 * Кадр раскладки у BRAER — 440×160, то есть 11:4. Держим эту пропорцию: под неё
 * сняты все 20 кадров, и любое другое отношение резало бы у них ряды камня.
 * Фото товара (фолбэк для разделов без своих кадров) вписывается тем же cover.
 * ══════════════════════════════════════════════════════════════════════════════ */

.stiles {
	position: relative;
	/* Отступ сверху: без него блок липнет к заголовку раздела. */
	margin: 14px 0 24px;
}

/*
 * Без JS (и до его загрузки) блок остаётся рабочим рядом с прокруткой: Swiper
 * перехватит контейнер и выставит свои transform'ы сам.
 */
.stiles__viewport {
	overflow: hidden;
}

.stiles .swiper-wrapper {
	display: flex;
}

.stiles__slide {
	width: 260px;
	flex: 0 0 auto;
	height: auto;
}

.stiles__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: #14181a;
	text-decoration: none;
}

.stiles__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 11 / 4;
	border-radius: 10px;
	background: #eef1ef;
}

/*
 * Картинку прижимаем абсолютом, а не растягиваем процентами. `height: 100%` у <img>
 * внутри блока, высота которого задана через aspect-ratio, не срабатывает: проценты
 * считаются от ВЫСОТЫ родителя, а она у него выведенная, не заданная. В итоге <img>
 * сохранял свои 260×260 из атрибутов, вылезал из рамки, и overflow срезал ему низ —
 * object-fit при этом честно стоял в contain и ничего не менял.
 */
/*
 * ⚠️ Селектор с родителем — не для красоты. Elementor раздаёт всем картинкам
 * `.elementor img { height: auto }` (custom-frontend.min.css), это (0,1,1) против
 * (0,1,0) у одиночного класса. Одиночное правило проигрывало: <img> сохранял свои
 * 260×260 из атрибутов, вылезал из рамки на 272px при контейнере в 95px, и низ
 * срезался overflow'ом. Пара «родитель + класс» даёт (0,2,0) и забирает высоту себе.
 */
.stiles__media .stiles__img,
.stiles__media .stiles__ph {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.stiles__item:hover .stiles__img {
	transform: scale(1.04);
}

/*
 * Фолбэк — фото товара из подраздела (водоотвод, настилы, грязезащита,
 * благоустройство: своих кадров раскладки у них нет). Такие снимки сняты на белом и
 * в пропорции 11:4 обрезались бы по верху и низу — от лотка оставалась бы полоса.
 * Поэтому вписываем целиком; фон при этом тот же белый, что и на снимке, так что
 * полей не видно.
 */
/*
 * Снимок изделия (а не бесшовная раскладка) вписываем целиком: в пропорции 11:4 от него
 * осталась бы полоса.
 *
 * Плашка БЕЛАЯ — под цвет самих снимков. Товары и в каталоге, и у поставщика сняты на
 * белом, поэтому кадр ложится на плашку без видимой границы. Красить плашку в тон
 * страницы (#f6f6f6) нельзя: тогда рамка появится с другой стороны — вокруг белого поля
 * снимка.
 */
.stiles__media--fit {
	background: #fff;
}

.stiles__media--fit .stiles__img {
	object-fit: contain;
	padding: 6px 0;
}

.stiles__name {
	padding: 0 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: #14181a;
}

.stiles__item:hover .stiles__name {
	color: #0e7e50;
}

/*
 * Подраздел, где под применённым отбором ничего нет. Гасим так же, как одноимённый
 * пункт выпадашки коллекций (.strom-subcats__item.is-empty): списки на одной странице
 * должны читаться одинаково.
 */
.stiles__item.is-empty {
	cursor: default;
	opacity: .32;
}

.stiles__item.is-empty:hover .stiles__img {
	transform: none;
}

.stiles__item.is-empty:hover .stiles__name {
	color: #14181a;
}

/* ── Стрелки ───────────────────────────────────────────────────────────────────
 * Стоят по краям поверх ряда. Swiper гасит их классом is-disabled (задан в
 * navigation.disabledClass), когда листать нечего или дальше некуда.
 * ----------------------------------------------------------------------------- */

.stiles__nav {
	position: absolute;
	z-index: 3;
	top: calc((100% - 22px) / 2);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	/*
	 * min-height обнуляем: тема держит у всех <button> min-height 42px (тач-цель), и он
	 * перебивал высоту — кнопка выходила 36×42, то есть овалом при border-radius 50%.
	 */
	min-height: 0;
	padding: 0;
	border: 1px solid #e2e6e4;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 14px rgba(20, 24, 26, .12);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity .2s ease, visibility .2s ease;
}

.stiles__nav::before {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1.5px solid #14181a;
	border-bottom: 1.5px solid #14181a;
}

.stiles__nav--prev {
	left: -8px;
}

.stiles__nav--prev::before {
	margin-left: 3px;
	transform: rotate(135deg);
}

.stiles__nav--next {
	right: -8px;
}

.stiles__nav--next::before {
	margin-right: 3px;
	transform: rotate(-45deg);
}

.stiles__nav.is-disabled {
	visibility: hidden;
	opacity: 0;
}

@media (max-width: 1024px) {
	.stiles__slide {
		width: 220px;
	}
}

@media (max-width: 575px) {
	.stiles {
		margin-bottom: 18px;
	}

	.stiles__slide {
		width: 62vw;
	}

	.stiles__name {
		font-size: 13px;
	}

	/* На телефоне листают пальцем — стрелки только занимают место над кадром. */
	.stiles__nav {
		display: none;
	}
}