/**
 * History — «Our Story» страницы «О нас» (page-about.php).
 *
 * Значения — из макета Figma: desktop узлы 10300:2663/2664/2673/2676/2675/2677,
 * mobile узлы 10300:4805/4806/4810/4811. Таблица значений — в
 * _workflow/tasks/step-about-history.md, §3.
 *
 * @package AJ1MOTO.COM
 */

.history {
	display: flex;
	align-items: flex-start;
	background: var(--color-light);
}

/*
 * Левая колонка: текст. Вертикальный паддинг 60; слева — боковой гаттер
 * экрана (--container-gutter, в макете 48); справа — внутренний зазор до
 * правой колонки (48, не край экрана).
 */
.history__content {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: calc(800 / var(--vw-base) * 100vw);
	padding-top: var(--space-60);
	padding-right: var(--space-48);
	padding-bottom: var(--space-60);
	padding-left: var(--container-gutter);
}

.history__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-13);
	letter-spacing: calc(3 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-accent);
}

.history__title {
	margin-top: var(--space-20);
	font-family: var(--font-display);
	font-size: var(--fs-52);
	font-weight: var(--fw-display);
	line-height: var(--lh-100);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	color: var(--color-dark);
}

.history__text {
	margin-top: var(--space-20);
	font-size: var(--fs-18);
	color: var(--color-grey-31);
}

.history__text p + p {
	margin-top: var(--space-18);
}

/*
 * Rider Project (21.10): нумерованные шаги, кнопка под текстом и вариант
 * с фото слева. Значения — из разметки rider-project-страница.html.
 */
.history__steps {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
	margin-top: var(--space-30);
}

.history__step {
	display: flex;
	align-items: baseline;
	gap: var(--space-20);
}

.history__step-num {
	flex-shrink: 0;
	min-width: calc(56 / var(--vw-base) * 100vw);
	font-family: var(--font-display);
	font-size: var(--fs-46);
	font-weight: var(--fw-display);
	line-height: var(--lh-100);
	color: var(--color-accent);
}

.history__step-text {
	font-size: var(--fs-18);
	line-height: var(--lh-150);
	color: var(--color-dark);
}

.history__actions {
	margin-top: var(--space-24);
}

/* Фото слева: колонки меняются местами, разделитель — у правого края фото. */
.history.-flip {
	flex-direction: row-reverse;
}

.history.-flip .history__content {
	padding-right: var(--container-gutter);
	padding-left: var(--space-48);
}

.history.-flip .history__media {
	padding-right: var(--space-48);
	padding-left: var(--container-gutter);
}

.history.-flip .history__divider {
	right: 0;
	left: auto;
}

/*
 * Правая колонка: фото и водяной знак в естественном потоке (flex-column).
 * Внутренние отступы: верт 60; слева — внутренний зазор до колонки (48);
 * справа — боковой гаттер экрана (--container-gutter). Фото ↔ EST — gap 20.
 */
.history__media {
	position: relative;
	flex-grow: 1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
	padding-top: var(--space-60);
	padding-right: var(--container-gutter);
	padding-bottom: var(--space-60);
	padding-left: var(--space-48);
	background: var(--color-grey-91);
}

/*
 * Красный разделитель на левой границе правой колонки — декоративная
 * вертикальная линия на стыке колонок (оправданный absolute).
 */
.history__divider {
	position: absolute;
	top: var(--space-60);
	bottom: var(--space-60);
	left: 0;
	width: calc(4 / var(--vw-base) * 100vw);
	background: var(--color-accent);
}

/* Фото: скруглённое, в потоке; высота из макета (544×474). */
.history__image {
	width: 100%;
	height: calc(474 / var(--vw-base) * 100vw);
	border-radius: var(--radius-14);
	overflow: hidden;
}

.history__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Водяной знак «EST.2005» под фото (в потоке). */
.history__est {
	font-family: var(--font-display);
	font-size: var(--fs-60);
	font-weight: var(--fw-display);
	line-height: var(--lh-117);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	color: var(--color-est-watermark);
	white-space: nowrap;
}

@media (max-width: 767px) {
	/*
	 * Один столбец, порядок: айбрау+H2 → фото → текст. Обёртки колонок
	 * «растворяются» (display: contents), листья упорядочены order
	 * (rules-tooling §15.8.5).
	 */
	/*
	 * Один столбец, порядок: айбрау → H2 → фото → текст. Вертикальные
	 * отступы из макета: айбрау→H2 15, H2→фото 30, фото→текст 15 (узлы
	 * 10300:4806/4810). Общий gap не используется (иначе складывался бы
	 * с margin у листьев при display: contents) — точные margin-top у каждого.
	 */
	.history {
		flex-direction: column;
		align-items: stretch;
		padding-top: var(--space-40);
		padding-right: var(--container-gutter);
		padding-bottom: var(--space-40);
		padding-left: var(--container-gutter);
	}

	.history__content {
		display: contents;
	}

	/* Медиа-обёртка «растворяется»; фото — прямой лист секции. */
	.history__media {
		display: contents;
	}

	.history__eyebrow {
		order: 1;
		font-size: var(--fs-10);
		letter-spacing: calc(2 / var(--vw-base) * 100vw);
	}

	/* Айбрау → H2: 15 (макет узел 10300:4806). */
	.history__title {
		order: 2;
		margin-top: var(--space-15);
		font-size: var(--fs-30);
	}

	/* H2 → фото: 30 (макет: gap групп 10300:4806 → 10300:4810). */
	.history__image {
		order: 3;
		margin-top: var(--space-30);
		height: calc(215 / var(--vw-base) * 100vw);
	}

	/* Фото → текст: 15 (макет узел 10300:4810). */
	.history__text {
		order: 4;
		margin-top: var(--space-15);
		font-size: var(--fs-15);
	}

	/* Rider Project: шаги и кнопка — после фото и текста; фото всегда над ними. */
	.history.-flip {
		flex-direction: column;
	}

	.history__steps {
		order: 5;
		gap: var(--space-15);
		margin-top: var(--space-20);
	}

	.history__step-num {
		min-width: calc(44 / var(--vw-base) * 100vw);
		font-size: calc(36 / var(--vw-base) * 100vw);
	}

	.history__step-text {
		font-size: var(--fs-16);
	}

	.history__actions {
		order: 6;
	}

	/* Водяной знак и разделитель — только десктоп. */
	.history__divider,
	.history__est {
		display: none;
	}
}