/* Страница «О бренде». Разметку даёт mu-plugins/kenda-o-brende.php
   Палитра и блоки общие со страницей дилеров: файл dileram.css грузится
   первым, здесь только то, чего там нет. */

/* ------------------------------------------------------------ лента лет */

/* ⛔ Список нумерованный по смыслу (события идут по годам), но собственные
   номера убираем: год слева и есть номер. Снимаем и у списка, и у пункта:
   тему не переубедить правилом на одном только `ul`, маркер она ставит
   на `li`. Те же грабли были на разделах каталога у дилеров. */
.kd-stranica .kb-lenta {
	list-style: none;
	list-style-type: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.kd-stranica .kb-shag {
	list-style: none;
	list-style-type: none;
	position: relative;
	margin: 0;
	padding: 0 0 22px 92px;
}

.kd-stranica .kb-shag::marker { content: ""; font-size: 0; }

/* ⭐ Три колонки в одной строке: год, нить с точкой, текст. Год стоит в
   своей полосе шириной 56 и прижат вправо, нить проходит по 77, текст
   начинается с 92. Так год никогда не наезжает на нить. */

/* вертикальная нить, у последнего шага её нет */
.kd-stranica .kb-shag::before {
	content: "";
	position: absolute;
	left: 77px;
	top: 22px;
	bottom: 0;
	width: 2px;
	background: var(--kd-liniya);
}

.kd-stranica .kb-shag:last-child { padding-bottom: 0; }
.kd-stranica .kb-shag:last-child::before { display: none; }

/* точка на нити */
.kd-stranica .kb-shag::after {
	content: "";
	position: absolute;
	left: 72px;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--kd-krasnyy);
}

.kd-stranica .kb-shag__god {
	position: absolute;
	left: 0;
	top: 2px;
	width: 56px;
	text-align: right;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--kd-tihiy);
	white-space: nowrap;
}

.kd-stranica .kb-shag__zag {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--kd-tekst);
}

.kd-stranica .kb-shag p {
	margin: 0;
	/* ⛔ На 1920 строка шага доходила до 147 знаков при норме от 60 до 80. */
	max-width: 78ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--kd-tihiy);
}

/* ⛔ Абзацы в блоке со снимком шли без просвета и склеивались в стену:
   у темы `p { padding-bottom }`, а мы его снимаем в dileram.css, своего
   отступа при этом не ставили. Задаёт его нижний абзац, а не верхний. */
.kd-stranica .kd-komu__tekst p + p { margin-top: 12px; }

/* ------------------------------------------------------- ссылка и кнопки */

.kd-stranica .kb-ssylka {
	display: inline-block;
	margin-top: 6px;
	font-weight: 600;
	color: var(--kd-krasnyy);
	text-decoration: none;
	border-bottom: 1px solid rgba(200, 16, 46, .35);
}

.kd-stranica .kb-ssylka:hover { border-bottom-color: var(--kd-krasnyy); }

.kd-stranica .kb-knopki {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 18px 0 0;
}

/* вторая кнопка тише первой: у неё контур, а не заливка */
.kd-stranica .kb-knopka2 {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 26px;
	border: 1px solid var(--kd-liniya);
	border-radius: 10px;
	background: #fff;
	color: var(--kd-tekst);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color 140ms ease-out, color 140ms ease-out;
}

.kd-stranica .kb-knopka2:hover {
	border-color: var(--kd-krasnyy);
	color: var(--kd-krasnyy);
}

/* ⛔ В последнем блоке текст стоит СЛЕВА, а снимок справа: в разметке они
   идут именно в этом порядке, и переставлять их стилями не нужно. Значит
   и пропорция зеркальная: пять долей тексту, семь снимку.
   ⛔ Прежнее `padding-bottom: 4px` здесь было ошибкой: при верхнем поле
   32 пикселя содержимое съезжало вниз примерно на 14 пикселей, потому что
   колонка выравнивает содержимое по центру (нашёл Кодекс 28.08.2026). */
/* ⛔ `:not` обязателен. Без снимка блок обязан быть в одну колонку, за это
   отвечает `.kd-komu--bez-foto` из dileram.css, но у него один класс, а
   здесь два, и наше правило перебило бы его: рядом с текстом встала бы
   пустая колонка на 7 долей. */
@media (min-width: 1500px) {
	.kd-stranica .kb-konec:not(.kd-komu--bez-foto) {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

@media (min-width: 1000px) {
	/* текста здесь на 164 пикселя, общие 250 оставляли 62 пикселя пустоты */
	.kd-stranica .kb-konec .kd-komu__media { min-height: 230px; }
}

@media (max-width: 999px) {
	/* ⛔ Два класса против медиазапроса из dileram.css: снимаем свой предел сами. */
	.kd-stranica .kb-konec .kd-komu__media { min-height: 0; }
}

/* ---------------------------------------------------- лента: две колонки */

/* ⛔ Шесть шагов в один столбец на 1920 оставляли справа около 570 пикселей
   белого поля и растягивали строку до 147 знаков. Две колонки по три шага
   заполняют ширину и держат меру около 70 знаков.
   ⭐ Именно многоколоночная раскладка, а не сетка: в сетке соседние шаги
   выравниваются по высоте и нить рвётся неровными кусками. */
@media (min-width: 1400px) {
	.kd-stranica .kb-lenta {
		display: block;
		columns: 2;
		column-gap: 56px;
	}

	.kd-stranica .kb-shag { break-inside: avoid; }

	/* ровно три шага в первой колонке, иначе перенос гуляет по высоте */
	.kd-stranica .kb-shag:nth-child(3) {
		break-after: column;
		padding-bottom: 0;
	}

	/* у нижнего шага каждой колонки нить обрывать */
	.kd-stranica .kb-shag:nth-child(3)::before { display: none; }
}

/* --------------------------------------------------------------- узкие */

@media (max-width: 860px) {
	.kd-stranica .kb-shag { padding-left: 76px; }
	.kd-stranica .kb-shag::before { left: 61px; }
	.kd-stranica .kb-shag::after { left: 56px; }
	.kd-stranica .kb-shag__god { width: 44px; }
	.kd-stranica .kb-shag__zag { font-size: 17px; }
}

@media (max-width: 600px) {
	.kd-stranica .kb-shag { padding-left: 0; padding-top: 26px; }
	/* на телефоне год встаёт над заголовком, нить и точка не нужны */
	.kd-stranica .kb-shag::before,
	.kd-stranica .kb-shag::after { display: none; }
	.kd-stranica .kb-shag__god { position: static; display: block; margin-bottom: 4px; }
	.kd-stranica .kb-knopki { gap: 10px; }
	.kd-stranica .kb-knopka2 { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------------ печать */

/* ⛔ На листе медиазапрос по ширине не срабатывает, и вместе с двумя
   колонками пропадал `break-inside: avoid`: шаг мог разорваться между
   страницами. Точка и нить нарисованы фоном, а фоны при печати по
   умолчанию не выводятся (нашёл Кодекс 28.08.2026). */
@media print {
	.kd-stranica .kb-shag { break-inside: avoid; }
	.kd-stranica .kb-shag::before,
	.kd-stranica .kb-shag::after {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}