/**
 * Раскладки «Витрина» и «Баннер акции».
 *
 * Тёмная скруглённая плашка в колонке страницы: слева текст, справа фото,
 * которое растворяется в фоне. Цвета — из переменных витрины (user.css шаблона)
 * с запасными значениями, чтобы модуль не разваливался в чужом оформлении.
 */

/* === Витрина ============================================================= */

.arctic-showcase {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	max-width: var(--arctic-container, 1320px);
	margin-inline: auto;
	padding: clamp(2.25rem, 5vw, 4.25rem) clamp(1.25rem, 5vw, 4.25rem);
	color: #fff;
	background: var(--arctic-night, #060b16);
	border: 1px solid rgb(56 160 255 / 14%);
	border-radius: var(--arctic-radius-xl, 1.75rem);
	box-shadow: 0 1.5rem 3.5rem rgb(3 8 20 / 35%);
}

/* Сетка точек в левом верхнем углу — фактура «цеха», к центру она тает. */
.arctic-showcase::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(rgb(120 170 255 / 16%) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
		radial-gradient(40rem 26rem at 8% 0%, rgb(30 120 255 / 16%), transparent 70%);
	-webkit-mask-image: radial-gradient(90% 90% at 0% 0%, #000 20%, transparent 70%);
	mask-image: radial-gradient(90% 90% at 0% 0%, #000 20%, transparent 70%);
	pointer-events: none;
}

/* Фото занимает правую половину и уходит в фон градиентной маской слева. */
.arctic-showcase__photo {
	position: absolute;
	inset-block: 0;
	right: 0;
	z-index: -2;
	width: min(58%, 48rem);
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: left center;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}

.arctic-showcase__inner {
	max-width: 47rem;
}

.arctic-showcase__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 1.5rem;
	padding: .3rem 1.1rem .3rem .3rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--arctic-yellow, #ffc933);
	border: 1px solid rgb(255 201 51 / 42%);
	border-radius: 999px;
	background: rgb(255 201 51 / 5%);
}

.arctic-showcase__eyebrow-icon {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid rgb(255 201 51 / 50%);
	border-radius: 50%;
	background: rgb(255 201 51 / 10%);
}

/* Точка перед надписью — как индикатор «в работе». */
.arctic-showcase__eyebrow-text::before {
	content: "";
	display: inline-block;
	width: .4rem;
	height: .4rem;
	margin-right: .6rem;
	vertical-align: .12em;
	background: currentcolor;
	border-radius: 50%;
	box-shadow: 0 0 .5rem currentcolor;
}

body.site .arctic-showcase__heading {
	margin: 0 0 1.5rem;
	font-family: var(--arctic-font-display, "Montserrat", system-ui, sans-serif);
	font-size: clamp(2rem, 1.1rem + 3vw, 3.6rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.02em;
	color: #fff;
	text-wrap: balance;
}

/* Акцентная строка: жёлтая, со светящейся чертой-мазком под ней. */
.arctic-showcase__accent {
	position: relative;
	display: block;
	width: fit-content;
	color: var(--arctic-yellow, #ffc933);
	text-shadow: 0 0 2rem rgb(255 201 51 / 35%);
}

.arctic-showcase__accent::after {
	content: "";
	position: absolute;
	left: 0;
	right: 12%;
	bottom: -.12em;
	height: .09em;
	background: linear-gradient(90deg, var(--arctic-yellow, #ffc933), rgb(255 201 51 / 0%));
	border-radius: 1em;
	box-shadow: 0 0 1rem rgb(255 201 51 / 60%);
}

.arctic-showcase__lead {
	max-width: 36rem;
	margin: 0 0 2rem;
	font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
	line-height: 1.6;
	color: rgb(220 228 240 / 78%);
}

.arctic-showcase__actions,
.arctic-promo__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0 0 2rem;
}

.arctic-showcase .btn-lg,
.arctic-promo .btn-lg {
	display: inline-flex;
	align-items: center;
	gap: .85rem;
	padding: .95rem 1.9rem;
	font-weight: 700;
}

.arctic-showcase .btn-primary svg,
.arctic-promo .btn-primary svg {
	transition: transform .2s ease;
}

.arctic-showcase .btn-primary:hover svg,
.arctic-promo .btn-primary:hover svg {
	transform: translateX(.2rem);
}

.arctic-showcase__secondary,
.arctic-showcase__secondary:focus {
	color: #fff;
	background: rgb(255 255 255 / 3%);
	border: 1px solid rgb(255 201 51 / 45%);
}

.arctic-showcase__secondary:hover {
	color: #fff;
	background: rgb(255 201 51 / 10%);
	border-color: var(--arctic-yellow, #ffc933);
}

.arctic-showcase__stats {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.arctic-showcase__stat {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 11.5rem;
	padding: 1rem 1.25rem;
	color: rgb(230 238 250 / 85%);
	background: rgb(10 22 44 / 55%);
	border: 1px solid rgb(56 160 255 / 30%);
	border-radius: var(--arctic-radius, 1rem);
	backdrop-filter: blur(6px);
	box-shadow: inset 0 0 1.25rem rgb(56 160 255 / 8%);
}

.arctic-showcase__stat svg {
	flex: none;
}

/* Щит с галочкой в макете жёлтый — выделяем значок последней плашки. */
.arctic-showcase__stat:last-child svg {
	color: var(--arctic-yellow, #ffc933);
}

.arctic-showcase__stat-text {
	display: grid;
	line-height: 1.25;
}

.arctic-showcase__stat-value {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--arctic-yellow, #ffc933);
}

.arctic-showcase__stat-label {
	font-size: .82rem;
	color: rgb(220 228 240 / 72%);
}

/* На планшете фото уходит под текст и притушено, чтобы не спорить с ним. */
@media (width < 992px) {
	.arctic-showcase__photo {
		width: 100%;
		opacity: .35;
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
		mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
	}
}

@media (width < 576px) {
	.arctic-showcase__stat {
		flex: 1 1 100%;
	}

	.arctic-showcase .btn-lg {
		flex: 1 1 100%;
		justify-content: center;
	}
}


/* === Баннер акции ======================================================== */

.arctic-promo__banner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	/* Пропорции фото баннера: товар слева и декор справа всегда видны целиком,
	   а текст встаёт в свободную середину. */
	aspect-ratio: 2041 / 406;
	padding: 1.5rem 0 1.5rem 44.5%;
	color: #fff;
	background: var(--arctic-promo-image, none) center / cover no-repeat, var(--arctic-night, #060b16);
	border: 1px solid rgb(56 160 255 / 22%);
	border-radius: var(--arctic-radius-lg, 1.5rem);
	box-shadow: 0 1.25rem 3rem rgb(3 8 20 / 25%);
}

.arctic-promo__body {
	width: min(100%, 34rem);
}

body.site .arctic-promo__heading {
	margin: 0 0 1rem;
	font-family: var(--arctic-font-display, "Montserrat", system-ui, sans-serif);
	font-size: clamp(1.5rem, .9rem + 1.6vw, 2.5rem);
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
}

.arctic-promo__accent {
	color: var(--arctic-blue, #1e9bff);
	text-shadow: 0 0 1.5rem rgb(30 155 255 / 45%);
}

.arctic-promo__lead {
	margin: 0 0 1.25rem;
	font-size: clamp(.95rem, .8rem + .4vw, 1.15rem);
	line-height: 1.55;
	color: rgb(220 228 240 / 80%);
}

.arctic-promo__actions {
	margin: 0;
}

/* Узкий экран: фото — полосой сверху плашки, текст — под ним. */
@media (width < 992px) {
	.arctic-promo__banner {
		display: block;
		aspect-ratio: auto;
		padding: calc(min(100vw, 62rem) * .3) clamp(1.25rem, 4vw, 2rem) clamp(1.5rem, 4vw, 2rem);
		background:
			linear-gradient(180deg, transparent 20%, var(--arctic-night, #060b16) calc(min(100vw, 62rem) * .3)),
			var(--arctic-promo-image, none) 0 0 / auto calc(min(100vw, 62rem) * .34) no-repeat,
			var(--arctic-night, #060b16);
	}
}