/* Первый экран главной: слайдер акционных товаров.
   Полосу с прокруткой, стрелки и автолистание даёт общий carousel.css,
   здесь только сам слайд.

   Слайд собран как плакат, а не как баннер магазина: лист разрезан по диагонали,
   левая доля залита кумачом, на неё наклеена фотография вещи, правая остаётся
   бумагой под набор. Диагональ режет clip-path — ни одной картинки и ни одного
   поворота всего блока, поэтому текст стоит ровно и читается.

   Обоев со звёздами и лучами здесь больше нет: они спорили с товаром. Знак эпохи
   теперь несёт сама композиция. */

.sb-hero {
	/* Слайд на всю ширину полосы: это первый экран, а не лента плиток. */
	--sb-carousel-item: 100%;

	position: relative;
	margin: 0 0 30px;
	overflow: hidden;
	border: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-card);
}

.sb-hero .sb-carousel__track {
	position: relative;
	z-index: 1;
	gap: 0;
	padding: 0;
	scroll-snap-type: x mandatory;
}

.sb-hero__slide {
	display: grid;
	position: relative;
	z-index: 0;
	flex: 1;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: 38px;
	padding: 34px 38px 38px;
}

/* Кумачовая доля листа. Правый край уходит по косой — это и есть вся «советскость»
   первого экрана: цвет, диагональ и вес, без единого символа. */
.sb-hero__slide::before {
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	width: 46%;
	clip-path: polygon(0 0, 100% 0, 74% 100%, 0 100%);
	background: var(--sb-red);
	content: '';
}

/* Фотография — наклеенная на плакат карточка: белое поле, чёрная рамка и второй
   оттиск чернью со сдвигом. Это не тень: у неё нет размытия, это второй прогон краски. */
.sb-hero__figure {
	position: relative;
	align-self: center;
	border: var(--sb-rule) solid var(--sb-ink);
	background: #fff;
	box-shadow: 14px 14px 0 var(--sb-ink);
}

/* Товар вписываем целиком, не обрезая: у витрины антиквариата покупатель смотрит
   на состояние вещи, а не на красивый кроп. */
.sb-hero__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 380px;
	padding: 10px;
	aspect-ratio: 1;
	object-fit: contain;
}

/* Плашка скидки на кумачовом поле пропала бы: здесь она чёрная. */
.sb-hero__figure .sb-sale {
	top: -14px;
	left: -14px;
	background: var(--sb-ink);
	box-shadow: none;
	font-size: 22px;
}

/* Набор ---------------------------------------------------------------------- */

.sb-hero__kicker {
	display: inline-block;
	margin: 0 0 16px;
	padding: 7px 14px 6px;
	background: var(--sb-ink);
	color: var(--sb-paper);
	font-family: var(--sb-display);
	font-size: 12px;
	letter-spacing: .22em;
	line-height: 1;
	text-transform: uppercase;
}

/* Заголовок с красным вторым оттиском: то самое несовмещение красок.
   Сдвиг мелкий и одинаковый по обеим осям — брак печати, а не эффект. */
.sb-hero__title {
	margin: 0 0 14px;
	font-size: clamp(26px, 3.2vw, 44px);
	line-height: 1;
	text-shadow: 3px 3px 0 var(--sb-red);
}

.sb-hero__title a {
	color: var(--sb-ink);
	text-decoration: none;
}

.sb-hero__title a:hover {
	color: var(--sb-ink);
	text-decoration: none;
}

.sb-hero__caption {
	max-width: 54ch;
	margin: 0 0 20px;
	color: var(--sb-ink-soft);
	font-size: 16px;
	line-height: 1.55;
}

.sb-hero__price {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0 0 22px;
	font-family: var(--sb-display);
	font-variant-numeric: tabular-nums;
}

.sb-hero__new {
	color: var(--sb-red);
	font-size: clamp(38px, 4.4vw, 58px);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: .9;
}

.sb-hero__old {
	color: var(--sb-muted);
	font-size: 22px;
	text-decoration: line-through;
}

.sb-hero__button {
	display: inline-flex;
	align-items: center;
	min-height: var(--sb-control-h);
	padding: 0 30px;
	border: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-ink);
	color: var(--sb-paper);
	font-family: var(--sb-display);
	font-size: 15px;
	letter-spacing: .12em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .12s, border-color .12s, color .12s, translate .12s, box-shadow .12s;
}

.sb-hero__button:hover,
.sb-hero__button:focus-visible {
	border-color: var(--sb-red);
	background: var(--sb-red);
	color: #fff;
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-ink);
	text-decoration: none;
	translate: calc(var(--sb-shift) * -1) calc(var(--sb-shift) * -1);
}

/* Планшет и телефон: фотография сверху, текст под ней, кумач ложится полосой
   по верху слайда — диагональ на узкой колонке съедала бы половину кадра. */
@media (max-width: 767px) {
	.sb-hero__slide {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		padding: 22px 20px 26px;
	}

	.sb-hero__slide::before {
		right: 0;
		bottom: auto;
		width: auto;
		height: 46%;
		clip-path: polygon(0 0, 100% 0, 100% 74%, 0 100%);
	}

	.sb-hero__figure {
		box-shadow: 8px 8px 0 var(--sb-ink);
	}

	.sb-hero__image {
		max-height: 280px;
	}

	.sb-hero__title {
		text-shadow: 2px 2px 0 var(--sb-red);
	}

	/* Описание товара тянуло слайд вниз на телефоне (жалоба пользователя,
	   21.08.2026) — на узкой колонке оставляем только заголовок, длину
	   слайда решает он один. */
	.sb-hero__caption {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sb-hero__button {
		transition: none;
	}
}