/*
	Блок «Акции» на главной, вариант C. 28.08.2026.

	Стили лежат рядом с шаблоном, а не в общем new_styles.css: Битрикс
	подключает style.css шаблона компонента сам, и правки блока не задевают
	страницу /aktsii/, у которой своя вёрстка и свой набор классов .promo-*.

	Селекторы начинаются с .offers-main, потому что в new_styles.css уже есть
	правила на `main.new .offers-wrapper .offers-section .offer img` — без
	равной специфичности они перебивают карточку (там object-fit и flex-basis
	141px от старого макета).
*/

.offers-main .offer,
main.new .offers-wrapper .offers-main .offer {
	display: block;
	background: #ffffff;
	border-radius: 10px 0 10px 0;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(2, 14, 24, .07);
	margin: 0 10px;
	transition: box-shadow .2s ease, transform .2s ease;
}
.offers-main .offer:hover { box-shadow: 0 8px 24px rgba(2, 14, 24, .13); transform: translateY(-2px); }

/* --- картинка-тизер --- */
.offers-main .offer__media {
	position: relative;
	display: block;
	line-height: 0;
}
main.new .offers-wrapper .offers-main .offer__media img,
.offers-main .offer__media img {
	width: 100%;
	height: auto;
	flex: none;                 /* перебиваем flex: 0 0 141px из new_styles.css */
	aspect-ratio: 16 / 9;
	object-fit: cover;          /* тизеры уже нарезаны 16:9, обрезать нечего */
	background: #eef4f8;
	display: block;
}

.offers-main .offer__badge {
	position: absolute;
	left: 0;
	top: 12px;
	background: #3796cc;
	color: #ffffff;
	font-family: ProximaNova, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .02em;
	line-height: 1.2;
	padding: 6px 12px;
	border-radius: 0 4px 4px 0;
	max-width: 80%;
}

/* цена плашкой поверх картинки — ключевое отличие варианта C */
.offers-main .offer__price {
	position: absolute;
	right: 0;
	bottom: 12px;
	background: #3796cc;
	color: #ffffff;
	font-family: ProximaNova, sans-serif;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.1;
	padding: 8px 14px;
	border-radius: 4px 0 0 4px;
	text-align: right;
}
.offers-main .offer__price span {
	display: block;
	font-size: 12px;
	font-weight: normal;
	opacity: .92;
	margin-top: 2px;
}

/* --- текст и кнопка --- */
.offers-main .offer__body {
	padding: 16px 18px 18px;
}
.offers-main .offer__title {
	font-family: ProximaNova, sans-serif;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.3;
	margin-bottom: 14px;
	min-height: 42px;           /* две строки: кнопки в ряду остаются на одной линии */
}
.offers-main .offer__title a {
	color: rgb(2, 14, 24);
	text-decoration: none;
}
.offers-main .offer__title a:hover { color: #3796cc; }

.offers-main .offer__btn {
	display: block;
	text-align: center;
	text-decoration: none;
	border: 1px solid #3796cc;
	color: #3796cc;
	background: #ffffff;
	font-family: ProximaNova, sans-serif;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.2;
	padding: 13px 10px;
	border-radius: 10px 0 10px 0;
	transition: background-color .15s ease, color .15s ease;
}
.offers-main .offer__btn:hover,
.offers-main .offer__btn:focus {
	background: #3796cc;
	color: #ffffff;
	text-decoration: none;
}

/* --- карусель: стрелки по бокам от ряда --- */
.offers-carousel {
	position: relative;
	padding: 0 58px;            /* место под стрелки, чтобы они не легли на карточки */
}
.offers-carousel .slick-list { margin: 0 -10px; }

.offers-carousel .prev-arrow,
.offers-carousel .next-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid #cfd8e0;
	border-radius: 50%;
	background: #ffffff;
	cursor: pointer;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .15s ease, background-color .15s ease;
}
.offers-carousel .prev-arrow { left: 0; }
.offers-carousel .next-arrow { right: 0; }
.offers-carousel .prev-arrow:hover,
.offers-carousel .next-arrow:hover { border-color: #3796cc; background: #3796cc; }
.offers-carousel .prev-arrow::before,
.offers-carousel .next-arrow::before {
	content: "";
	width: 9px;
	height: 9px;
	border-top: 2px solid #3796cc;
	border-right: 2px solid #3796cc;
	transition: border-color .15s ease;
}
.offers-carousel .prev-arrow::before { transform: rotate(-135deg); margin-left: 3px; }
.offers-carousel .next-arrow::before { transform: rotate(45deg); margin-right: 3px; }
.offers-carousel .prev-arrow:hover::before,
.offers-carousel .next-arrow:hover::before { border-color: #ffffff; }
.offers-carousel .slick-disabled { opacity: .45; cursor: default; }
.offers-carousel .slick-disabled:hover { border-color: #cfd8e0; background: #fff; }
.offers-carousel .slick-disabled:hover::before { border-color: #3796cc; }

/*
	Точки. Селекторы намеренно длинные: в styles.css есть правило
	`main.new .offers-section .slick-dots li button` с кружками 13px,
	белой заливкой и внутренней тенью — короткий селектор его не перебивает.
*/
main.new .offers-wrapper .offers-carousel .slick-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}
main.new .offers-wrapper .offers-carousel .slick-dots li {
	margin: 0;
	width: auto;
	height: auto;
	line-height: 0;
}
main.new .offers-wrapper .offers-carousel .slick-dots li button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: #cfd8e0;
	box-shadow: none;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	transition: width .15s ease, background-color .15s ease;
}
main.new .offers-wrapper .offers-carousel .slick-dots li.slick-active button {
	background-color: #3796cc;
	width: 22px;
	border-radius: 4px;
}

/*
	Раскладка до инициализации слайдера.

	slick поднимается скриптом, и до этого момента карточки — обычные блоки
	во всю ширину контейнера: на секунду был виден столбик из пяти карточек,
	который потом схлопывался в ряд. Поэтому «досличную» ленту сразу
	раскладываем той же сеткой, что и готовый слайдер, а лишние карточки
	прячем — пользователь видит конечный вид с первого кадра.

	Правило снимается само, как только slick добавит .slick-initialized.

	Тот же селектор обслуживает случай «акций три и меньше»: тогда слайдер
	не поднимается вовсе и лента так и остаётся сеткой.
*/
.offers-carousel .offers-main:not(.slick-initialized),
.offers-carousel .offers-main.not-slider {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
}
.offers-carousel .offers-main:not(.slick-initialized) .offer:nth-child(n+4) {
	display: none;
}

/* ---------- планшет ---------- */
@media (max-width: 991px) {
	.offers-carousel { padding: 0 50px; }
	.offers-main .offer__price { font-size: 20px; }
	.offers-carousel .offers-main:not(.slick-initialized),
	.offers-carousel .offers-main.not-slider { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.offers-carousel .offers-main:not(.slick-initialized) .offer:nth-child(n+3) { display: none; }
}

/* ---------- смартфон ---------- */
@media (max-width: 767px) {
	/*
		В styles.css мобильная версия старого блока рисовала белую плашку под
		точками, вешала тень на всю ленту и поднимала ссылку «все акции»
		трансформом поверх карточки (translateY(calc(-100% - 30px))).
		Для новой карточки это лишнее — гасим адресно.
	*/
	main.new .offers-wrapper .offers-carousel .offers-main {
		background: none;
		box-shadow: none;
		margin-left: 0;
		margin-right: 0;
	}
	main.new .offers-wrapper .offers-carousel .slick-dots {
		background: none;
		padding: 0;
		margin: 16px 0 0;
	}
	main.new .offers-wrapper .offers-main__all {
		transform: none;
		display: inline-block;
		margin: 18px 0 0;
	}

	.offers-carousel { padding: 0 42px; }
	.offers-carousel .prev-arrow,
	.offers-carousel .next-arrow { width: 36px; height: 36px; }
	.offers-main .offer { margin: 0 6px; }
	.offers-carousel .slick-list { margin: 0 -6px; }
	.offers-main .offer__title { min-height: 0; font-size: 17px; }
	.offers-main .offer__btn { padding: 14px 10px; font-size: 16px; }
	.offers-main .offer__price { font-size: 21px; }
	.offers-carousel .offers-main:not(.slick-initialized),
	.offers-carousel .offers-main.not-slider { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.offers-carousel .offers-main:not(.slick-initialized) .offer:nth-child(n+2) { display: none; }
}