/**
 * Редизайн главной sugarmedia.ru — фундамент.
 * Макет Figma: фрейм 1:692 «desktop 1440».
 */

/* ---------- Шрифты ---------- */

@font-face {
	font-family: 'Benzin';
	src: url('../fonts/Benzin-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Benzin';
	src: url('../fonts/Benzin-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Benzin';
	src: url('../fonts/Benzin-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Benzin';
	src: url('../fonts/Benzin-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/*
 * Onest — замена коммерческого Gilroy из макета (лицензия OFL, вариативный).
 * Если появится лицензионный Gilroy, положить файлы сюда же и добавить
 * @font-face с family «Gilroy» — он стоит первым в --sm-font-ui и перехватит.
 */
@font-face {
	font-family: 'Onest';
	src: url('../fonts/onest-cyrillic.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Onest';
	src: url('../fonts/onest-latin.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/*
 * Montserrat — из макета: им набраны подписи в акциях каталога.
 * Лицензия OFL, файлы вариативные, поэтому один на всё семейство.
 */
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-cyrillic.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-latin.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
	font-family: 'Bebas Neue';
	src: url('../fonts/BebasNeue-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Bebas Neue';
	src: url('../fonts/BebasNeue-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- Токены ---------- */

:root {
	/* Цвета из переменных макета */
	--sm-purple: #a28df1;
	--sm-yellow: #ffd724;
	--sm-black: #000;

	/* Оттенки текста, встречающиеся в макете */
	--sm-ink: #1a1a1a;
	--sm-ink-soft: #383838;
	--sm-white: #fff;

	/* Сетка: макет 1440, контент 1280, поля по 80 */
	--sm-canvas: 1440px;
	--sm-content: 1280px;
	--sm-gutter: 80px;

	--sm-radius: 5px;
	--sm-btn-radius: 10px;

	--sm-font: 'Benzin', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
	--sm-font-accent: 'Bebas Neue', 'Benzin', sans-serif;

	/*
	 * В макете Gilroy — коммерческий, файлов нет. Подставлен Onest (OFL),
	 * ближайший по рисунку геометрический гротеск с полной кириллицей.
	 * Gilroy стоит первым: появятся файлы — подхватится без правок вёрстки.
	 */
	--sm-font-ui: 'Gilroy', 'Onest', -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Подписи и мелкие цифры в акциях каталога — по макету Montserrat. */
	--sm-font-alt: 'Montserrat', var(--sm-font-ui);
}

/* ---------- Сброс ---------- */

.sm-redesign *,
.sm-redesign *::before,
.sm-redesign *::after {
	box-sizing: border-box;
}

.sm-redesign {
	margin: 0;
	padding: 0;
	font-family: var(--sm-font);
	font-size: 16px;
	line-height: 1.4;
	color: var(--sm-ink);
	background: var(--sm-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.sm-redesign :where(img, svg) {
	display: block;
	max-width: 100%;
}

.sm-redesign :where(a) {
	color: inherit;
	text-decoration: none;
}

/*
 * Сброс завёрнут в :where() — у него нулевая специфичность,
 * поэтому стили секций всегда перебивают его без !important.
 */
.sm-redesign :where(p, h1, h2, h3, h4, h5, h6, ul, ol, figure, blockquote) {
	margin: 0;
}

.sm-redesign :where(ul, ol) {
	padding: 0;
	list-style: none;
}

.sm-redesign :where(button) {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

/* ---------- Раскладка ---------- */

/*
 * Контент шириной 1280 с полями 80 — как в макете.
 * Ниже 1440 поля ужимаются, контент остаётся резиновым.
 */
.sm-container {
	width: 100%;
	max-width: calc(var(--sm-content) + var(--sm-gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--sm-gutter);
}

@media (max-width: 1200px) {
	.sm-container {
		padding: 0 40px;
	}
}

/* Текст только для скринридеров. */
.sm-redesign .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Кнопка ---------- */

.sm-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	font-family: var(--sm-font);
	font-size: 14px;
	font-weight: 500;
	color: var(--sm-white);
	background: var(--sm-purple);
	border-radius: var(--sm-btn-radius);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.sm-btn:hover {
	background: #8f77ee;
}

.sm-btn:active {
	transform: translateY(1px);
}

/* --- варианты кнопок --- */

.sm-btn--purple {
	color: var(--sm-white);
	background: var(--sm-purple);
}

.sm-btn--yellow {
	color: var(--sm-black);
	background: var(--sm-yellow);
}

.sm-btn--yellow:hover {
	background: #f0c800;
}

.sm-btn--dark {
	color: var(--sm-white);
	background: var(--sm-black);
}

.sm-btn--dark:hover {
	background: #2a2a2a;
}

/*
 * Уголок в правом верхнем углу кнопки — есть у всех кнопок макета.
 * Рисуем рамками, а не картинкой: так он всегда в цвет текста кнопки
 * и работает даже там, где вложить SVG нельзя (input[type=submit]).
 */
.sm-btn__arrow {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 11px;
	height: 11px;
	border-top: 2px solid currentcolor;
	border-right: 2px solid currentcolor;
	border-top-right-radius: 2px;
}

.sm-btn__arrow svg {
	display: none;
}

/* ---------- Уголки-скобки ---------- */

/*
 * Повторяются в нескольких секциях. Размер задаётся через --sm-corner-size,
 * позиция — в стилях самой секции.
 */
.sm-corner {
	position: absolute;
	width: var(--sm-corner-size, 18px);
	height: var(--sm-corner-size, 18px);
	pointer-events: none;
}

.sm-corner--tl {
	border-top: 4px solid var(--sm-yellow);
	border-left: 4px solid var(--sm-yellow);
}

.sm-corner--tr {
	border-top: 4px solid var(--sm-purple);
	border-right: 4px solid var(--sm-purple);
}

.sm-corner--bl {
	border-bottom: 4px solid var(--sm-purple);
	border-left: 4px solid var(--sm-purple);
}

.sm-corner--br {
	border-right: 4px solid var(--sm-yellow);
	border-bottom: 4px solid var(--sm-yellow);
}

/* ---------- Заголовок секции с номером ---------- */

/*
 * Заголовок намеренно наезжает на номер: в макете номер стоит на x=80,
 * а заголовок на x=138 — то есть внутри габаритов цифр.
 * Поэтому номеру задана ширина 58px, а его глифы выходят за неё.
 * По вертикали блоки выровнены по центру (проверено по координатам макета).
 */
.sm-section-head {
	display: flex;
	align-items: center;
}

.sm-section-head__num {
	flex: none;
	width: 58px;
	font-family: var(--sm-font-accent);
	font-size: 96px;
	line-height: 1.2;
	color: var(--sm-purple);
	white-space: nowrap;
}

.sm-section-head__title {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
}