/*
 * Страница «О проекте» /about — таблица страницы.
 * Вид — из принятого прототипа prototypes/about/ (06 • About.dc.html, протокол
 * About.DECISIONS.md), с поправками приёмки основателя 31.10.2026 (задание
 * site/zadanie_code_about_31102026.md, раздел 2). Подключается только на /about
 * (inc/about.php, по образцу zayavka.css).
 *
 * Правила: только токены --mm-* (цвет и кегль — токенами, не числом, №125);
 * колонка и поля — переменные темы --mm-page-column / --mm-page-gutter (mm-site.css),
 * пороги полей из темы не переопределяются. Числа раскладки (колонки истории,
 * сдвиг, зазоры секций) — литералы прототипа, кеглем/цветом не являются.
 *
 * Пороги раскладки — прототипа: д ≥1024, планшет 768–1023, телефон <768.
 * Пороги H1 — хаба (.mm-hub-hero-h1 в kontur.css): 1099.98 / 639.98 (раздел 2.4).
 */

.mm-about {
	/* Вертикальный ритм секций (frame gap прототипа) и верх первого экрана. */
	--mm-about-secgap: 64px;
	--mm-about-herotop: 48px;
	/* Кегль H1 — ступени хаба 34/30/26 (раздел 2.4). База — токен шкалы (34);
	   ступени 30/26 те же, что у .mm-hub-hero-h1, переданы переменной, чтобы кегль
	   не стоял числом в объявлении font-size (чек-лист раздела 5, п. 10). */
	--mm-about-h1-size: var(--mm-h1-size);

	display: flex;
	flex-direction: column;
	gap: var(--mm-about-secgap);
	padding-top: var(--mm-about-secgap);
	color: var(--mm-text);
}

/* Ступени кегля H1 — по порогам хаба. */
@media (max-width: 1099.98px) { .mm-about { --mm-about-h1-size: 30px; } }
@media (max-width: 639.98px)  { .mm-about { --mm-about-h1-size: 26px; } }

/* Ритм секций по порогам прототипа. */
@media (max-width: 1023.98px) { .mm-about { --mm-about-secgap: 48px; --mm-about-herotop: 32px; } }
@media (max-width: 767.98px)  { .mm-about { --mm-about-secgap: 40px; --mm-about-herotop: 24px; } }

/* Секция = колонка и поля страницы (единый стандарт, №124). */
.mm-about-sec {
	max-width: calc(var(--mm-page-column) + 2 * var(--mm-page-gutter));
	width: 100%;
	margin: 0 auto;
	padding-inline: var(--mm-page-gutter);
}
.mm-about-hero { display: flex; flex-direction: column; gap: 16px; padding-top: var(--mm-about-herotop); }
/* Низ последней секции — отбивка перед подвалом (frame gap прототипа). */
.mm-about-sec--last { padding-bottom: var(--mm-about-secgap); }

/* Моноширинная метка. */
.mm-about-eyebrow {
	font-family: var(--mm-font-mono);
	font-size: var(--mm-label-size);
	font-weight: var(--mm-label-weight);
	letter-spacing: var(--mm-label-track);
	text-transform: uppercase;
	color: var(--mm-text-secondary);
}

.mm-about-h1 {
	margin: 0;
	max-width: 800px;
	font-size: var(--mm-about-h1-size);
	font-weight: var(--mm-h1-weight);
	letter-spacing: var(--mm-h1-track);
	line-height: var(--mm-h1-leading);
	color: var(--mm-text);
	text-wrap: balance;
}

/* ───────── Блок 2 — История ───────── */

/* До 1024 и без фото на десктопе (раздел 2.1) — одна колонка до 600; метка над текстом. */
.mm-about-story {
	display: grid;
	grid-template-columns: minmax(0, 600px);
	column-gap: 48px;
	row-gap: 16px;
	align-items: start;
}
.mm-about-figure { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.mm-about-photo { display: block; }
.mm-about-photo img {
	display: block;
	width: 100%;
	max-width: 480px;                       /* телефон */
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: var(--mm-radius-card);
	background: var(--mm-surface-sunk);
}
/* Планшет 768–1023: фото во всю ширину колонки текста, до 600, 4:3 (раздел 2.2). */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.mm-about-photo img { max-width: 600px; }
}

.mm-about-text {
	max-width: 600px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: var(--mm-body-size);
	line-height: var(--mm-body-leading);
	color: var(--mm-text-strong-body);
}
.mm-about-text p { margin: 0; text-wrap: pretty; }
/* Ссылки истории — тёмным текстом с подчёркиванием, не терракотой (прототип). */
.mm-about-text a { color: var(--mm-text); text-decoration: underline; text-underline-offset: 3px; }
.mm-about-text a:hover { color: var(--mm-accent-clay); }

/* Десктоп с фото: две колонки 320 + до 600, зазор 48, фото липкое. */
@media (min-width: 1024px) {
	.mm-about--has-photo .mm-about-story { grid-template-columns: 320px minmax(0, 600px); }
	/* top от высоты липкой шапки, как .mm-s-strip в kontur.css (раздел 7.1):
	   своего числа высоты шапки нет, --mm-nav-h задаётся на страницах серии,
	   иначе берётся запасные 56px. +24 — зазор под шапкой. */
	.mm-about--has-photo .mm-about-figure { position: sticky; top: calc(var(--mm-nav-h, 56px) + 24px); }
	.mm-about--has-photo .mm-about-photo img { max-width: 320px; aspect-ratio: 4 / 5; }
}

/* ───────── Блоки 3–6 — на оси текста ───────── */

.mm-about-indent { max-width: 600px; }
/* Сдвиг 368 (320 + зазор 48) — только на десктопе с фото (раздел 2.1). */
@media (min-width: 1024px) {
	.mm-about--has-photo .mm-about-indent { margin-left: 368px; }
}
.mm-about-block { display: flex; flex-direction: column; gap: 16px; }

/* Блок 3 — цифры. */
.mm-about-plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 767.98px) { .mm-about-plates { gap: 8px; } }
.mm-about-plate {
	background: var(--mm-surface-sunk);
	border-radius: var(--mm-radius-card);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
@media (max-width: 767.98px) { .mm-about-plate { padding: 16px; } }
.mm-about-plate__n {
	font-size: var(--mm-display-size);
	font-weight: var(--mm-display-weight);
	letter-spacing: var(--mm-display-track);
	line-height: var(--mm-display-leading);
	color: var(--mm-text);
	font-variant-numeric: tabular-nums;
}
/* Интерлиньяж подписи плашки — var(--mm-small-leading) (раздел 2.3). */
.mm-about-plate__label {
	font-size: var(--mm-body-size);
	line-height: var(--mm-small-leading);
	color: var(--mm-text-strong-body);
	text-wrap: pretty;
}

/* Заголовки блоков 4–6. */
.mm-about-h2 {
	margin: 0;
	font-size: var(--mm-h2-size);
	font-weight: var(--mm-h2-weight);
	letter-spacing: var(--mm-h2-track);
	line-height: var(--mm-h2-leading);
	color: var(--mm-text);
}
.mm-about-p {
	margin: 0;
	font-size: var(--mm-body-size);
	line-height: var(--mm-body-leading);
	color: var(--mm-text-strong-body);
	text-wrap: pretty;
}

/* Блок 5 — список «чего не делает». */
.mm-about-notdo {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--mm-border-warm);
}
.mm-about-notdo li {
	display: flex;
	gap: 12px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid var(--mm-border-warm);
	font-size: var(--mm-body-size);
	line-height: var(--mm-small-leading);   /* раздел 2.3 */
	color: var(--mm-text);
}
.mm-about-notdo__dash { flex: none; color: var(--mm-text-secondary); }
.mm-about-notdo__text { min-width: 0; text-wrap: pretty; }
.mm-about-note {
	margin: 0;
	font-size: var(--mm-body-size);
	line-height: var(--mm-body-leading);
	color: var(--mm-text-secondary);
	text-wrap: pretty;
}

/* Блок 6 — для дизайнеров: рамка-окно. */
.mm-about-cta {
	border: 1px solid var(--mm-border-warm);
	border-radius: var(--mm-radius-window);
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
@media (max-width: 767.98px) { .mm-about-cta { padding: 16px; } }
.mm-about-cta a { text-decoration: none; }