/* =========================================================
   Plus 2026 — Компоненты UI-кита (строго по макету Figma).
   Без теней и скруглений; hover-состояния — из UI kit Figma.
   ========================================================= */

/* ---------- Кнопки ----------
   В макете: высота 60, padding 20/30, Manrope SemiBold 16/20, угол 0. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	padding: var(--btn-py) var(--btn-px);
	font-family: var(--font-base);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-body);
	line-height: 20px;
	text-align: center;
	border: 1px solid transparent;
	border-radius: var(--radius);
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

/* primary: красная заливка + белый текст + 1px красная рамка */
.btn--primary {
	background: var(--c-primary);
	color: var(--c-white);
	border-color: var(--c-primary);
}
.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-white);
}

/* secondary: прозрачный фон + тёмный текст + 2px красная рамка */
.btn--secondary {
	background: transparent;
	color: var(--c-ink);
	border: 2px solid var(--c-primary);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: var(--c-white);
}

/* tertiary: белый фон + красный текст + 1px светлая рамка */
.btn--tertiary {
	background: var(--c-white);
	color: var(--c-primary);
	border-color: var(--c-line);
}
.btn--tertiary:hover,
.btn--tertiary:focus-visible {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: var(--c-white);
}

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

.btn[disabled],
.btn[aria-disabled='true'] {
	opacity: 0.5;
	pointer-events: none;
}

/* ---------- Текст-ссылка ("Перейти на сайт") ---------- */
.link {
	font-weight: var(--fw-semibold);
	color: var(--c-primary);
	transition: color 0.2s ease;
}
.link:hover,
.link:focus-visible {
	color: #814149;
	text-decoration: underline;
}
.link--dark { color: var(--c-ink); }

/* ---------- Поля формы ----------
   В макете: белый бокс, 1px рамка #d0d8e1, на фокусе — красная рамка, угол 0. */
.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.field__label {
	font-size: var(--fs-small);
	color: var(--c-ink);
}

.input,
.select,
.textarea {
	width: 100%;
	min-height: var(--field-h);
	padding: 18px 20px;
	font: inherit;
	color: var(--c-ink);
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
}
.textarea { min-height: 140px; resize: vertical; }

.input::placeholder,
.textarea::placeholder { color: var(--c-muted); }

.input:focus,
.select:focus,
.textarea:focus {
	outline: none;
	border-color: var(--c-primary);
}

/* ---------- Поиск ----------
   В макете: иконка слева, текст, × справа, тонкая нижняя линия. */
.search:not(body) {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: 12px 0;
	border-bottom: 1px solid var(--c-line);
}
.search__icon {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--c-muted);
}
.search__input {
	flex: 1;
	min-width: 0;
	border: none;
	background: none;
	outline: none;
	font: inherit;
	color: var(--c-ink);
}
.search__clear {
	flex: none;
	display: inline-flex;
	color: var(--c-primary);
}

/* ---------- Иконка-крестик (очистка/закрыть) ---------- */
.icon-x { width: 20px; height: 20px; color: var(--c-primary); }

/* ---------- Карточка ----------
   В макете: плоская, резкие углы, без рамки и тени. Фон белый/тёмный. */
.card {
	display: flex;
	flex-direction: column;
	background: var(--c-white);
}
.card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-3);
}
.card__title {
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	color: var(--c-ink);
}
.card__text { color: var(--color-text-muted); }
.card__media { overflow: hidden; }
.card__media img { width: 100%; height: auto; display: block; }

/* тёмный вариант карточки */
.card--dark { background: var(--c-ink); }
.card--dark .card__title { color: var(--c-white); }
.card--dark .card__text { color: rgba(255, 255, 255, 0.8); }

/* ---------- Заголовок секции ---------- */
.section-title {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	color: var(--c-ink);
}