/**
 * Городская Стоматология — дизайн-система «Клиника доверия».
 * Слой 1: токены и примитивы. Подключается ПЕРЕД landing.css.
 * Здесь нет секционной вёрстки — только то, что переиспользуется во всех блоках.
 */

@font-face {
	font-family: "Golos Text";
	src: url("../fonts/golos-text-variable.woff2") format("woff2");
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
}

/* Подогнанный резерв: пока Golos грузится, Segoe UI занимает почти ту же
   ширину и высоту, поэтому подмена шрифта не сдвигает вёрстку (CLS). */
@font-face {
	font-family: "Golos Fallback";
	src: local("Segoe UI"), local("Arial");
	size-adjust: 97%;
	ascent-override: 96%;
	descent-override: 24%;
	line-gap-override: 0%;
}

:root {
	/* --- Поверхности --- */
	--c-bg: #ffffff;
	--c-bg-alt: #f4f7f9;
	--c-bg-blue: #e8f1f6;
	--c-bg-accent: #fdf1eb;
	--c-bg-deep: #0f2c40;
	--c-bg-deep-2: #16405b;

	/* --- Текст --- */
	--c-ink: #0f2c40;
	--c-ink-2: #3c5a6e;
	--c-ink-3: #587080;
	--c-on-deep: #ffffff;
	--c-on-deep-2: rgba(255, 255, 255, 0.74);

	/* --- Линии ---
	   line / line-deep — декоративные разделители, контраст не нормируется.
	   line-control / line-control-deep — граница интерактивных элементов
	   (поля, контурные кнопки). По WCAG 1.4.11 обязаны давать 3:1
	   к соседнему фону, поэтому заметно темнее декоративных. */
	--c-line: #dde5ea;
	--c-line-control: #7690a1;
	--c-line-deep: rgba(255, 255, 255, 0.18);
	--c-line-control-deep: rgba(255, 255, 255, 0.4);

	/* --- Акцент (терракота) ---
	   accent      — только графика: полосы, иконки, заливка бейджа, цифры-плашки.
	   accent-cta  — фон кнопки под белым текстом (контраст 4.7:1).
	   accent-text — терракотовый ТЕКСТ на светлом фоне (контраст 6:1). */
	--c-accent: #e8683c;
	--c-accent-cta: #c2501f;
	--c-accent-cta-hover: #a84118;
	--c-accent-text: #a8431a;
	--c-accent-on-deep: #f2a98c;

	/* --- Поддерживающий синий --- */
	--c-blue: #2f7da8;
	--c-blue-deep: #1f5f83;

	/* --- Статусы --- */
	--c-success: #157a5b;
	--c-success-bg: #e7f4ef;
	--c-error: #b3261e;
	--c-error-bg: #fdeceb;
	--c-error-on-deep: #ffb3ad;

	/* --- Фокус: на светлом синее кольцо, на тёмном белое --- */
	--c-focus: #1f5f83;

	/* --- Типографика --- */
	--font: "Golos Text", "Golos Fallback", "Segoe UI", system-ui, sans-serif;

	--t-display: clamp(2.5rem, 5vw, 3.75rem);
	--t-h2: clamp(1.875rem, 3.2vw, 2.75rem);
	--t-h3: clamp(1.25rem, 1.8vw, 1.4rem);
	--t-h4: 1.125rem;
	--t-lead: clamp(1.0625rem, 1.4vw, 1.25rem);
	--t-body: 1.0625rem;
	--t-sm: 0.9375rem;
	--t-xs: 0.8125rem;
	--t-eyebrow: 0.75rem;
	--t-metric: clamp(2.25rem, 4vw, 3.25rem);

	/* --- Ритм --- */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.25rem;
	--s-6: 1.5rem;
	--s-8: 2rem;
	--s-10: 2.5rem;
	--s-12: 3rem;
	--s-16: 4rem;

	--section-y: clamp(3.5rem, 6vw, 6rem);
	--section-y-sm: clamp(2.5rem, 4vw, 4rem);

	/* Высота sticky-шапки: от неё зависят scroll-padding и якоря */
	--header-h: 4.5rem;
	/* Минимальная тач-цель */
	--tap: 2.75rem;

	/* --- Контейнеры ---
	   Одна вертикаль на всю страницу. shell — ширина контейнера,
	   shell-inset — расстояние от края секции до этой вертикали;
	   им выравниваются полноширинные секции (тёмная колонка квиза,
	   вылет фотографии в первом экране).
	   Считаем от 100%, а не от 100vw: 100vw включает полосу прокрутки
	   и промахивается мимо линии на половину её ширины. */
	--shell-max: 1440px;
	--shell-gutter: 2rem;
	--shell: min(100% - var(--shell-gutter) * 2, var(--shell-max));
	/* Ширина полосы прокрутки; landing.js ставит реальное значение.
	   В shell-inset нужен именно вьюпорт: проценты в кастомном свойстве
	   резолвятся в месте использования, а внутри грид-колонки 100% — это
	   ширина колонки, а не секции. */
	--sb: 0px;
	--shell-inset: max(var(--shell-gutter), (100vw - var(--sb) - var(--shell-max)) / 2);
	--measure: 68ch;

	/* --- Форма --- */
	--r-xs: 4px;
	--r-sm: 10px;
	--r-md: 16px;
	--r-full: 999px;

	--sh-sm: 0 1px 2px rgba(15, 44, 64, 0.06), 0 1px 1px rgba(15, 44, 64, 0.04);
	--sh-md: 0 8px 24px rgba(15, 44, 64, 0.10);
	--sh-lg: 0 20px 48px rgba(15, 44, 64, 0.14);

	/* Золото звёзд рейтинга. Отдельный токен, а не accent: блок
	   показывает оценки сторонних площадок, и звёзды должны читаться
	   как их знак, а не как наш акцент. Роль — только графика,
	   контраст не нормируется. */
	--c-rating: #e8a33c;

	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	/* Экспоненциальный выход: уверенное прибытие для авторского входа
	   первого экрана. Обычные состояния остаются на --ease. */
	--ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
	--dur: 200ms;
	/* Раскрытие панели — движение крупнее смены состояния: 200ms на такой
	   амплитуде читается как рывок. Вторая и последняя длительность системы. */
	--dur-slow: 320ms;
}

@media (max-width: 640px) {
	:root {
		--shell-gutter: 1.25rem;
	}
}

/* ============================================================
   БАЗА
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* Разрешает анимировать высоту до auto — на этом держится плавное
	   раскрытие ответов в FAQ. Игнорируется там, где не поддержано. */
	interpolate-size: allow-keywords;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + var(--s-4));
	color-scheme: light;
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--font);
	font-size: var(--t-body);
	line-height: 1.6;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

a {
	color: inherit;
	text-decoration-thickness: 0.07em;
	text-underline-offset: 0.18em;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
	margin-top: 0;
}

h1,
h2,
h3,
h4 {
	margin-bottom: var(--s-4);
	color: var(--c-ink);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h1 {
	font-size: var(--t-display);
	font-weight: 720;
	line-height: 1.04;
}

h2 {
	font-size: var(--t-h2);
	font-weight: 700;
	line-height: 1.08;
}

h3 {
	font-size: var(--t-h3);
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

h4 {
	font-size: var(--t-h4);
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

p {
	margin-bottom: var(--s-4);
	max-width: var(--measure);
}

p:last-child {
	margin-bottom: 0;
}

:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: 3px;
	border-radius: var(--r-xs);
}

/* Синее кольцо на тёмном фоне даёт 2.1:1 и практически не видно.
   Токен переопределяется на самой секции и наследуется всем внутри. */
.section--deep,
.form-panel--deep {
	--c-focus: #ffffff;
}

::selection {
	background: var(--c-bg-accent);
	color: var(--c-ink);
}

.u-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   РАСКЛАДКА
   ============================================================ */

.shell {
	width: var(--shell);
	margin-inline: auto;
}

.section {
	padding-block: var(--section-y);
}

.section--tight {
	padding-block: var(--section-y-sm);
}

.section--alt {
	background: var(--c-bg-alt);
}

.section--deep {
	background: var(--c-bg-deep);
	color: var(--c-on-deep);
}

.section--deep h1,
.section--deep h2,
.section--deep h3,
.section--deep h4 {
	color: var(--c-on-deep);
}

/* Шапка секции: надзаголовок → H2 → лид */
.section-head {
	max-width: 46rem;
	margin-bottom: var(--s-10);
}

.section-head--center {
	margin-inline: auto;
	text-align: center;
}

.section-head p {
	max-width: 44rem;
	margin-bottom: 0;
	color: var(--c-ink-2);
	font-size: var(--t-lead);
}

/* Без этого центрируется только текст, а сам блок остаётся слева */
.section-head--center p {
	margin-inline: auto;
}

.section--deep .section-head p,
.section--deep .lead {
	color: var(--c-on-deep-2);
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	margin-bottom: var(--s-3);
	color: var(--c-accent-text);
	font-size: var(--t-eyebrow);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.eyebrow::before {
	content: "";
	width: 1.5rem;
	height: 2px;
	background: var(--c-accent);
	border-radius: var(--r-full);
}

.section--deep .eyebrow {
	color: var(--c-accent-on-deep);
}

.lead {
	max-width: 44rem;
	color: var(--c-ink-2);
	font-size: var(--t-lead);
	line-height: 1.55;
}

.grid {
	display: grid;
	gap: var(--s-6);
}

.grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Основной редакционный split: контент / медиа */
.split {
	display: grid;
	gap: clamp(var(--s-8), 5vw, var(--s-16));
	align-items: center;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.split--form {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: start;
}

@media (max-width: 1000px) {
	.grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.grid--2,
	.grid--3,
	.grid--4,
	.split,
	.split--form {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ============================================================
   КНОПКИ
   ============================================================ */

.btn {
	display: inline-flex;
	min-height: 3.25rem;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	padding: 0.85rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--r-sm);
	background: var(--c-accent-cta);
	color: #fff;
	font-size: var(--t-body);
	font-weight: 650;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn:hover {
	background: var(--c-accent-cta-hover);
	box-shadow: var(--sh-md);
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
	box-shadow: none;
}

.btn[disabled],
.btn[aria-disabled="true"] {
	opacity: 0.6;
	cursor: wait;
	transform: none;
	box-shadow: none;
}

.btn--lg {
	min-height: 3.75rem;
	padding-inline: 1.85rem;
	font-size: 1.125rem;
}

.btn--sm {
	min-height: 2.75rem;
	padding: 0.55rem 1.1rem;
	font-size: var(--t-sm);
}

.btn--block {
	width: 100%;
}

/* Вторичная: контурная, на светлом фоне.
   Граница — line-control, потому что это единственный контур кнопки. */
.btn--outline {
	background: transparent;
	border-color: var(--c-line-control);
	color: var(--c-ink);
}

.btn--outline:hover {
	background: var(--c-bg-alt);
	border-color: var(--c-ink);
	box-shadow: none;
}

/* Тёмная: для светлых плотных зон, где терракота уже занята */
.btn--dark {
	background: var(--c-bg-deep);
}

.btn--dark:hover {
	background: var(--c-bg-deep-2);
}

/* На тёмном фоне */
.btn--on-deep {
	background: #fff;
	color: var(--c-ink);
}

.btn--on-deep:hover {
	background: #eaf1f5;
}

.btn--ghost-deep {
	background: transparent;
	border-color: var(--c-line-control-deep);
	color: #fff;
}

.btn--ghost-deep:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.4);
	box-shadow: none;
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	align-items: center;
}

/* Ссылка-действие со стрелкой */
.link-action {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	gap: var(--s-2);
	color: var(--c-accent-text);
	font-weight: 650;
	text-decoration: none;
}

.link-action:hover {
	text-decoration: underline;
}

/* ============================================================
   БЕЙДЖИ, ТЕГИ, МЕТРИКИ
   ============================================================ */

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: 0.3rem 0.7rem;
	border-radius: var(--r-full);
	background: var(--c-bg-accent);
	color: var(--c-accent-text);
	font-size: var(--t-xs);
	font-weight: 650;
	line-height: 1.3;
	white-space: nowrap;
}

.badge--blue {
	background: var(--c-bg-blue);
	color: var(--c-blue-deep);
}

.badge--neutral {
	background: var(--c-bg-alt);
	color: var(--c-ink-2);
}

.badge--deep {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* Список галочек — быстрый набор выгод под заголовком */
.checklist {
	display: grid;
	gap: var(--s-3);
	padding: 0;
	margin: 0;
	list-style: none;
}

.checklist li {
	display: grid;
	grid-template-columns: 1.35rem minmax(0, 1fr);
	gap: var(--s-3);
	align-items: start;
	font-size: var(--t-body);
}

.checklist li::before {
	content: "";
	width: 1.35rem;
	height: 1.35rem;
	margin-top: 0.12rem;
	border-radius: var(--r-full);
	background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}

.checklist--deep li::before {
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2c40' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.metric {
	display: grid;
	gap: var(--s-1);
}

.metric__value {
	color: var(--c-ink);
	font-size: var(--t-metric);
	font-weight: 720;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

/* Единица измерения внутри числа: «10 мин», «12+».
   Именно span, а не <em> — это визуальный акцент, а не смысловое ударение,
   и скринридер не должен читать его с интонацией. */
.metric__unit {
	color: var(--c-accent-text);
}

.metric__label {
	color: var(--c-ink-2);
	font-size: var(--t-sm);
	line-height: 1.4;
}

.section--deep .metric__value {
	color: #fff;
}

.section--deep .metric__unit {
	color: var(--c-accent-on-deep);
}

.section--deep .metric__label {
	color: var(--c-on-deep-2);
}

/* ============================================================
   КАРТОЧКИ
   ============================================================ */

.card {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	padding: var(--s-6);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	background: var(--c-bg);
}

.card--raised {
	border-color: transparent;
	box-shadow: var(--sh-md);
}

.card--flat {
	border: 0;
	background: var(--c-bg-alt);
}

.card--deep {
	border-color: var(--c-line-deep);
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
}

.card--accent {
	border-color: transparent;
	background: var(--c-bg-accent);
}

.card__icon {
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	border-radius: var(--r-sm);
	background: var(--c-bg-blue);
	color: var(--c-blue-deep);
}

.card__icon svg {
	width: 1.4rem;
	height: 1.4rem;
	stroke: currentColor;
	stroke-width: 1.8;
	fill: none;
}

.card p {
	margin-bottom: 0;
	color: var(--c-ink-2);
	font-size: var(--t-sm);
}

.card--deep p {
	color: var(--c-on-deep-2);
}

.card__foot {
	margin-top: auto;
	padding-top: var(--s-4);
	border-top: 1px solid var(--c-line);
}

.card--deep .card__foot {
	border-top-color: var(--c-line-deep);
}

/* Медиа внутри карточки: изображение под самый край */
.card--media {
	padding: 0;
	overflow: hidden;
	gap: 0;
}

.card--media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.card--media .card__body {
	display: grid;
	gap: var(--s-2);
	padding: var(--s-5);
}

/* ============================================================
   ФОРМЫ
   ============================================================ */

.form-panel {
	padding: clamp(var(--s-5), 3vw, var(--s-8));
	border-radius: var(--r-md);
	background: var(--c-bg);
	box-shadow: var(--sh-lg);
}

.form-panel--deep {
	background: var(--c-bg-deep);
	color: #fff;
}

.form-panel__title {
	margin-bottom: var(--s-2);
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.form-panel__note {
	margin-bottom: var(--s-5);
	color: var(--c-ink-2);
	font-size: var(--t-sm);
}

.form-panel--deep .form-panel__note {
	color: var(--c-on-deep-2);
}

.field {
	display: grid;
	gap: var(--s-2);
	margin-bottom: var(--s-4);
}

.field > span {
	font-size: var(--t-xs);
	font-weight: 650;
	color: var(--c-ink-2);
}

.form-panel--deep .field > span {
	color: var(--c-on-deep-2);
}

.field input,
.field select,
.field textarea {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.75rem 0.95rem;
	border: 1.5px solid var(--c-line-control);
	border-radius: var(--r-sm);
	background: #fff;
	color: var(--c-ink);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field input::placeholder {
	color: var(--c-ink-3);
}

.field input:hover,
.field select:hover {
	border-color: var(--c-ink-2);
}

/* Обязательное поле помечается видимо, а не только атрибутом */
.field--required > span::after {
	content: " *";
	color: var(--c-accent-text);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: var(--c-blue-deep);
	box-shadow: 0 0 0 3px rgba(47, 125, 168, 0.18);
	outline: none;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
	border-color: var(--c-error);
}

.field__error {
	color: var(--c-error);
	font-size: var(--t-xs);
	font-weight: 600;
}

.form-panel--deep .field__error {
	color: var(--c-error-on-deep);
}

.consent {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--s-3);
	align-items: start;
	margin: var(--s-5) 0;
	color: var(--c-ink-3);
	font-size: var(--t-xs);
	line-height: 1.45;
}

.form-panel--deep .consent {
	color: var(--c-on-deep-2);
}

.consent input {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.1rem 0 0;
	accent-color: var(--c-accent-cta);
}

.form-status {
	margin-top: var(--s-4);
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-sm);
	font-size: var(--t-sm);
	font-weight: 600;
}

.form-status--success {
	background: var(--c-success-bg);
	color: var(--c-success);
}

.form-status--error {
	background: var(--c-error-bg);
	color: var(--c-error);
}

/* Подпись доверия под кнопкой формы */
.form-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-4);
	margin-top: var(--s-4);
	color: var(--c-ink-3);
	font-size: var(--t-xs);
}

.form-panel--deep .form-trust {
	color: var(--c-on-deep-2);
}

/* ============================================================
   ПОВТОРЯЮЩИЕСЯ ПАТТЕРНЫ
   ============================================================ */

/* Нумерованный шаг */
.step {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: var(--s-4);
	align-items: start;
}

.step__num {
	display: grid;
	width: 3rem;
	height: 3rem;
	place-items: center;
	border-radius: var(--r-full);
	background: var(--c-bg-deep);
	color: #fff;
	font-size: var(--t-h4);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.step--accent .step__num {
	background: var(--c-accent-cta);
}

/* Строка-разделитель: FAQ, сравнение, состав цены */
.rows {
	border-top: 1px solid var(--c-line);
}

.rows > * {
	border-bottom: 1px solid var(--c-line);
}

.section--deep .rows,
.section--deep .rows > * {
	border-color: var(--c-line-deep);
}

.row-toggle {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--s-4);
	width: 100%;
	padding: var(--s-5) 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: var(--t-h4);
	font-weight: 650;
	text-align: left;
	cursor: pointer;
}

.row-toggle__icon {
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	border-radius: var(--r-full);
	background: var(--c-bg-alt);
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.row-toggle__icon::before,
.row-toggle__icon::after {
	content: "";
	position: absolute;
	inset: 50% 0.35rem auto;
	height: 2px;
	border-radius: var(--r-full);
	background: var(--c-ink);
	transform: translateY(-50%);
}

.row-toggle__icon::after {
	transform: translateY(-50%) rotate(90deg);
	transition: transform var(--dur) var(--ease);
}

.row-toggle[aria-expanded="true"] .row-toggle__icon {
	background: var(--c-accent);
}

.row-toggle[aria-expanded="true"] .row-toggle__icon::before,
.row-toggle[aria-expanded="true"] .row-toggle__icon::after {
	background: #fff;
}

.row-toggle[aria-expanded="true"] .row-toggle__icon::after {
	transform: translateY(-50%) rotate(0deg);
}

/* Панель закрывается атрибутом hidden — состояние живёт в HTML,
   поэтому аккордеон работает и без JS, и с выключенным CSS. */
.row-panel[hidden] {
	display: none;
}

.row-panel {
	padding-bottom: var(--s-5);
	color: var(--c-ink-2);
	max-width: var(--measure);
}

.section--deep .row-panel {
	color: var(--c-on-deep-2);
}

/* Плашка контактов: телефон + режим + мессенджеры */
.contact-line {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4) var(--s-6);
	align-items: center;
}

.contact-line__phone {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	font-size: var(--t-h3);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
}

.contact-line__hours {
	color: var(--c-ink-2);
	font-size: var(--t-sm);
}

.section--deep .contact-line__hours {
	color: var(--c-on-deep-2);
}

.messengers {
	display: flex;
	gap: var(--s-2);
}

.messengers a {
	display: grid;
	width: var(--tap);
	height: var(--tap);
	place-items: center;
	border-radius: var(--r-full);
	background: var(--c-bg-alt);
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.messengers a:hover {
	background: var(--c-bg-blue);
	transform: translateY(-2px);
}

.messengers img,
.messengers svg {
	width: 1.35rem;
	height: 1.35rem;
}

.section--deep .messengers a {
	background: rgba(255, 255, 255, 0.12);
}

/* Изображение как медиа-плоскость */
.media {
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--c-bg-alt);
}

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

.media--4x3 img {
	aspect-ratio: 4 / 3;
}

.media--3x2 img {
	aspect-ratio: 3 / 2;
}

.media--4x5 img {
	aspect-ratio: 4 / 5;
}

.media--3x4 img {
	aspect-ratio: 3 / 4;
}

/* Липкая мобильная панель действий */
.action-bar {
	position: fixed;
	inset: auto 0 0;
	z-index: 40;
	display: none;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
	/* Непрозрачный фон: blur под 96%-белым ничего не даёт визуально,
	   но создаёт композиторный слой и роняет плавность скролла на телефоне. */
	background: var(--c-bg);
	border-top: 1px solid var(--c-line);
}

.action-bar .btn {
	flex: 1;
	min-height: 3rem;
	font-size: var(--t-sm);
}

@media (max-width: 760px) {
	.action-bar {
		display: flex;
	}

	body {
		padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
	}
}

/* ============================================================
   ДОСТУПНОСТЬ
   ============================================================ */

/* Reduced motion убирает движение, но НЕ обратную связь.
   Сдвиги, масштаб и появления выключаются; смена цвета, тени и прозрачности
   остаётся — иначе кнопки и поля перестают отвечать на действие. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-property: color, background-color, border-color, box-shadow, opacity, outline-color !important;
	}

	.btn:hover,
	.messengers a:hover {
		transform: none;
	}
}