/* ============================================================
   Блок «Автор — визитка» — author-card
   ТЗ: site/docs/tz/tz-aeo-geo.md, W4.

   Раскладку держит Bootstrap 5 (.row + .row-cols-*), своей сетки здесь нет:
   в файле — мера ширины, типографика, волосяные линейки и появление при
   скролле.

   Регистр блока — ЛИНЕЙКИ И ВОЗДУХ, как у case-facts-grid после редизайна
   20.08.2026 и у .bottom_nav: ни рамок, ни заливок, ни радиусов, ни теней.
   Из референса (BootstrapBrain «About Me / Stats») взята только раскладка
   row + col; card / shadow / bg-light / text-secondary не берутся — они
   из другого регистра.

   Цвет — ТОЛЬКО контекстная палитра --ctx-* / --macro-* (style.css, раздел
   «КОНТЕКСТНАЯ ПАЛИТРА»): обе темы уже внутри этих токенов, поэтому в файле
   ноль hex и ни одной ветки «если тёмная».

   ВСЕ селекторы минимум из двух классов не для красоты: страница кейса задаёт
   типографику через `.case-body p` / `.case-body h2` (специфичность 0,1,1),
   и одноклассовое правило ей проигрывает.
   ============================================================ */

.author-card {
	/* Мера — та же, что у прочих секций страницы чтения (--case-wide, 1152px).
	   Свою ширину блок не изобретает.

	   ⚠️ ИЗВЕСТНОЕ РАСХОЖДЕНИЕ НА /studio/, ЗАПИСАНО СОЗНАТЕЛЬНО.
	   Страница «Студия» на 09.09.2026 собрана из ЛЕГАСИ-блоков
	   (simple-intro-video-block, stages, faq-block), а они живут в
	   бутстраповском .container (1320px на xxl). Визитка живёт в --case-wide
	   (1152px) и потому на 1440 стоит примерно на 84px уже соседей.
	   Так сделано намеренно: --case-wide — мера, принятая в проекте для новых
	   секций (studio-intro.css, case-facts-grid, ТЗ tz-aeo-geo.md W4), и когда
	   «Студия» переедет на блоки studio-*, визитка встанет с ними вровень.
	   Если владелец решит равнять по сегодняшним соседям — это правка ОДНОГО
	   токена ниже (--ac-measure), а не переверстка. */
	--ac-measure: var(--case-wide, min(100%, 72rem));

	/* Горизонтальный отступ — общий для всех секций сайта. */
	--ac-pad: var(--case-pad, clamp(1rem, 4.5vw, 6rem));

	/* Шаг сетки фактов. Вертикальный больше горизонтального в полтора раза
	   по той же причине, что у case-facts-grid: линейка принадлежит плитке
	   СВЕРХУ, и при равных зазорах она читалась бы разделителем между рядами. */
	--ac-gap: var(--case-gap, clamp(1rem, 2.2vw, 2rem));
	--ac-gap-y: calc(var(--ac-gap) * 1.5);

	/* Воздух между линейкой и первой строкой факта. Значение не выдумано:
	   это padding-top у .bottom_nav (style.css) — единственное место в теме,
	   где уже решён вопрос «сколько воздуха под линейкой». */
	--ac-rule-gap: clamp(0.875rem, 1.6vw, 1.25rem);

	/* Ритм между частями визитки. */
	--ac-rhythm: clamp(1.5rem, 3.5vw, 2.5rem);

	/* Приглушённый текст. НЕ --ctx-muted напрямую: на странице кейса он
	   считается от --case-ink долей 65 %, а мелкой подписи факта (13px) этого
	   мало. Рецепт и доля — те же, что у --si-quiet, --team-quiet, --about-quiet. */
	--ac-quiet: color-mix(in srgb, var(--ctx-ink) 68%, transparent);

	/* Акцент ТЕКСТОМ ≠ акцент заливкой: вне кейса в тёмной теме заливочный
	   --macro-accent слишком тёмен для текста, там берётся его «текстовая»
	   светлота. Порядок фолбэков — как в case-facts-grid.css и studio-intro.css. */
	--ac-accent-text: var(--case-accent-text, var(--macro-accent-text, var(--ctx-accent)));

	padding-inline: var(--ac-pad);
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

/* Плоский фолбэк там, где нет color-mix — тот же приём, что у .case-page,
   case-facts-grid, studio-intro. */
@supports not (color: color-mix(in srgb, red, blue)) {
	.author-card {
		--ac-quiet: var(--ctx-muted);
	}
}

/* Внутри бутстраповского контейнера собственный горизонтальный отступ гасим,
   иначе паддинги сложатся (тот же приём, что у .studio-intro и .about-section). */
.container .author-card,
.container-fluid .author-card {
	padding-inline: 0;
}

.author-card .author-card__inner {
	max-width: var(--ac-measure);
	margin-inline: auto;
}

/* Внутри .container центрировать второй раз нельзя: он уже центрирован,
   и остаток разошёлся бы по половине на сторону. */
.container .author-card .author-card__inner,
.container-fluid .author-card .author-card__inner {
	margin-inline: 0;
}

/* На странице кейса вертикальный воздух между разделами задаёт единый ритм
   (.case-body > * + * { margin-top: var(--case-rhythm) }), и второй слой
   отступов ломает его — секция оказывалась бы отбита сильнее соседей. */
.case-body .author-card {
	padding-block: 0;
}

/* Подсказка в редакторе, когда заполнять ещё нечего (на фронте блок молчит) */
.author-card__hint {
	margin: 0;
	padding: 1rem;
	border: 1px dashed var(--ctx-border);
	border-radius: 0.5rem;
	color: var(--ctx-muted);
}


/* --- Шапка визитки ---
   Линейка — border-bottom у самой шапки, а не отдельный пустой <div>
   (в ТЗ он был): пустой презентационный элемент в DOM ничего не добавляет,
   а границу видно так же. У фактов ниже линейка, наоборот, псевдоэлементом —
   там она обязана быть управляемой по горизонтали. */

.author-card .author-card__head {
	padding-bottom: var(--ac-rule-gap);
	border-bottom: 1px solid var(--ctx-border);
}

/* Кикер: та же микро-типографика, что у нумерации разделов кейса, номера
   карточки на главной и .case-fact__kicker — одна система подписей на сайт.
   Единственный носитель акцентного цвета в шапке блока. */
.author-card .author-card__kicker {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ac-accent-text);
}

/* Имя. Кегль заведомо тише h1 страницы и вровень с h2 соседних секций:
   визитка — раздел страницы, а не её заголовок. */
.author-card .author-card__title {
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ctx-ink);
	text-wrap: balance;
}

.author-card .author-card__role {
	margin: 0.5rem 0 0;
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
	font-weight: 500;
	line-height: 1.4;
	color: var(--ac-quiet);
}


/* --- Определение (лид) ---
   Мера строки уже общей: это цитируемый фрагмент, и он обязан читаться
   с одного взгляда. --case-col — та же мера текста, что на странице кейса. */

.author-card .author-card__lede {
	max-width: var(--case-col, min(100%, 46rem));
	margin-top: var(--ac-rhythm);
}

.author-card .author-card__lede p {
	margin: 0 0 0.75rem;
	font-size: clamp(1rem, 1.15vw, 1.125rem);
	line-height: 1.6;
	color: var(--ctx-ink);
}

.author-card .author-card__lede p:last-child {
	margin-bottom: 0;
}


/* --- Факты ---
   Один в один регистр .case-fact: колонка текста под волосяной линейкой,
   без коробки. Линейка псевдоэлементом, а не border-top, чтобы её можно было
   поджимать по горизонтали, если у блока когда-нибудь появится выделенная
   плитка (как у case-facts-grid). */

.author-card .author-card__facts {
	/* Гаттеры — штатным API Bootstrap, а не своим margin/gap: так работают
	   .row-cols-*, отрицательные margin ряда и перенос строки. */
	--bs-gutter-x: var(--ac-gap);
	--bs-gutter-y: var(--ac-gap-y);
	margin-top: var(--ac-rhythm);
}

/* height: 100% — единственная причина, по которой плитки в строке одной
   высоты: колонка тянется по строке сама (align-items: stretch у .row),
   а карточка внутри добирает эту высоту. Никакого равнения скриптом. */
.author-card .author-fact {
	position: relative;
	height: 100%;
	padding: var(--ac-rule-gap) 0 0;
}

.author-card .author-fact::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--ctx-border);
}

/* Значение факта. Кегль по ТЗ; отрицательный трекинг — как у всей крупной
   типографики сайта (нулевого нет нигде, кроме кикеров).
   overflow-wrap: длинное значение («Астана, Дубай») не должно распирать
   колонку на 375px. */
.author-card .author-fact__value {
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ctx-ink);
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* 10+ символов: это уже не год, а фраза («Новосибирск», «Астана, Дубай») —
   ведёт себя как подзаголовок. Модификатор ставит PHP по длине строки,
   не редактор (та же граница, что у .case-fact__value--long). */
.author-card .author-fact__value--long {
	font-size: clamp(1.25rem, 1.9vw, 1.625rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.author-card .author-fact__label {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ac-quiet);
}


/* --- Профили ---
   Строка текстовых ссылок с подчёркиванием — тот же язык, что у .studio-link
   в интро-блоке и у ссылок профилей в подвале. Подчёркивание обязательно:
   §7.4 бордовой схемы — смысл ссылки не может держаться на одном цвете. */

.author-card .author-card__links {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	margin: var(--ac-rhythm) 0 0;
	padding: 0;
	list-style: none;
}

.author-card .author-card__links-item {
	margin: 0;
}

.author-card .author-link {
	display: inline-block;
	min-height: 24px;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	color: var(--ac-accent-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	/* иначе на тач первый тап «залипает» и не переходит */
	touch-action: manipulation;
	transition: text-decoration-color 0.3s ease;
}

/* Общее правило темы `.dark-theme a:not(.btn):not(…)` имеет специфичность
   (0,5,1) из-за цепочки :not() — без !important ссылка красилась бы его
   цветом, а не нашим акцентным токеном. Тот же приём, что у .studio-link. */
body.dark-theme .author-card .author-link,
body.dark-theme .author-card .author-link:hover,
body.dark-theme .author-card .author-link:focus {
	color: var(--ac-accent-text) !important;
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.author-card .author-link {
		text-decoration-color: currentColor;
	}
}

@media (hover: hover) and (pointer: fine) {
	.author-card .author-link:hover {
		text-decoration-color: currentColor;
		text-decoration-thickness: 2px;
	}
}


/* --- Появление при скролле ---
   Механика и тайминги — общие с case-facts-grid и cases-grid: класс
   .reveal-ready вешает скрипт, поэтому без JS и при prefers-reduced-motion
   плитки просто видны, а не спрятаны навсегда.
   Длительность здесь ОБЯЗАНА совпадать с REVEAL_MS в author-card.js. */

.author-card .author-card__facts.reveal-ready .author-fact {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: 0s;
}

/* Шахматка — только на первом экране (класс вешает JS): ниже задержка
   копилась бы, и плитка «догоняла» бы пользователя. */
.author-card .author-card__facts.reveal-ready .author-fact.is-stagger {
	transition-delay: calc(min(var(--i, 0), 3) * 60ms);
}

.author-card .author-card__facts.reveal-ready .author-fact.is-inview {
	opacity: 1;
	transform: none;
}

/* Мгновенный показ (быстрый флик, переход по якорю, восстановление скролла):
   плитка уже в кадре, анимировать её — значит показать дырку. Класс живёт
   ровно один кадр, JS его снимает. */
.author-card .author-card__facts.reveal-ready .author-fact.is-instant {
	transition: none;
}

/* Гард обязателен и в CSS, и в JS. Подключённый на сайте AOS свой
   prefers-reduced-motion НЕ обрабатывает (в его css такого медиазапроса нет),
   поэтому на его поведение опираться нельзя. */
@media (prefers-reduced-motion: reduce) {
	.author-card .author-card__facts.reveal-ready .author-fact,
	.author-card .author-card__facts.reveal-ready .author-fact.is-stagger,
	.author-card .author-card__facts.reveal-ready .author-fact.is-inview {
		opacity: 1;
		transform: none;
		transition: none;
		transition-delay: 0s;
	}

	.author-card .author-link {
		transition: none;
	}
}