/* ============================================================
   Секция «about» — Что такое паб-квиз «Мозгва»
   Светлый блок: цифры-инфографика, 4 шага, CTA
   ============================================================ */

/* Контент поверх абсолютного декора */
.s-about__in { position: relative; z-index: 1; }

/* ---------- Инфографика-цифры ---------- */
.s-about__stats {
	list-style: none;
	margin: 0 0 clamp(44px, 7vw, 72px);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(24px, 4vw, 40px);
}

.s-about__stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.s-about__num {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(3rem, 7vw, 4.5rem); /* 48–72 */
	line-height: var(--lh-head);
	letter-spacing: var(--ls-head);
	color: var(--c-black);
	white-space: nowrap;
}

.s-about__num--red { color: var(--c-red); }
.s-about__num--blue { color: var(--c-blue); }
/* «от» и «₽» в цене мельче и текстовым шрифтом: знака ₽ нет в GraublauSlab,
   а целиком крупным слэбом цена не помещалась в колонку */
.s-about__unit { font-family: var(--font-body); font-weight: 600; font-size: 0.5em; letter-spacing: 0; }

.s-about__stat-label {
	margin-top: 12px;
	max-width: 14ch;
}

/* Ступенчатое появление цифр */
.s-about__stat:nth-child(2) { transition-delay: .08s; }
.s-about__stat:nth-child(3) { transition-delay: .16s; }
.s-about__stat:nth-child(4) { transition-delay: .24s; }

/* ---------- Как играют: 4 шага ---------- */
.s-about__steps-title { margin-bottom: clamp(20px, 3vw, 32px); }

.s-about__steps {
	list-style: none;
	counter-reset: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(12px, 1.5vw, 16px);
}

.s-about__step {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 220px;
	overflow: hidden; /* стикер не вылезает за скругление карточки */
}

.s-about__step-num {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(2.75rem, 4.5vw, 3.5rem);
	line-height: var(--lh-head);
	letter-spacing: var(--ls-head);
	color: var(--c-blue);
	/* Контент от верха, а не прижат к низу: при разной длине текста заголовки карточек
	   стояли на разной высоте (правка аудита про неоднородные карточки) */
	margin-bottom: 0;
}

.s-about__step-title { margin: 20px 0 6px; }

.s-about__step-text {
	margin: 0;
	font-size: var(--fs-caption);
	line-height: 1.35;
	color: var(--c-grey-dark);
}

.s-about__step-sticker {
	position: absolute;
	top: 10px;
	right: 10px;
	width: clamp(56px, 6vw, 80px);
	transform: rotate(10deg);
	pointer-events: none;
	user-select: none;
}

/* Ступенчатое появление шагов */
.s-about__step:nth-child(2) { transition-delay: .08s; }
.s-about__step:nth-child(3) { transition-delay: .16s; }
.s-about__step:nth-child(4) { transition-delay: .24s; }

/* ---------- CTA ---------- */
.s-about__cta {
	margin-top: clamp(32px, 5vw, 48px);
	display: flex;
	justify-content: center;
}

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
	.s-about__stats {
		grid-template-columns: repeat(2, 1fr);
		row-gap: clamp(28px, 5vw, 36px);
	}
	.s-about__steps { grid-template-columns: repeat(2, 1fr); }
	.s-about__step { min-height: 190px; }
}

@media (max-width: 700px) {
	.s-about__steps { grid-template-columns: 1fr; }
	.s-about__step { min-height: 0; }
	.s-about__step-num { margin-bottom: 0; }
	.s-about__step-title { margin-top: 14px; }
	.s-about__step-text { font-size: var(--fs-text); }
	.s-about__cta .btn { width: 100%; }
}