/*
 * Страница /shop/about/ в стиле /shop/examples/ (решение заказчика 05.10.2026).
 *
 * Обычный CSS, а не SCSS: webpack в проекте не пересобирается, файл отдаётся
 * напрямую через {% static %}. Бандл shopAbout.css больше не подключается —
 * все стили страницы здесь, поверх общих классов витрины из shop.css
 * (`.block`, `.block_surface-gray-200`, `.block__header`, `.button`).
 *
 * Значения (скругления, отступы, цвета заголовков и подписей) повторяют
 * examples.css, чтобы страницы выглядели одной серией. Общий файл не выносим:
 * правила examples.css привязаны к `.page-examples`, и трогать рабочую
 * страницу ради трёх совпадающих правил незачем.
 */

/* Серый фон всей страницы: под последним блоком нет белой полосы над подвалом. */
.page-about {
	background-color: var(--gray-cool-200);
}

/* ---------------------------------------------------------- первый экран */

.page-about .block-head {
	padding-bottom: clamp(32px, 20px + 2.5vw, 56px);
}

.page-about .block-head__header {
	grid-gap: 28px;
	align-items: center;
	max-width: 900px;
}

/* Тот же градиент, что у H1 на /shop/examples/: оба конца темнее 4.5:1
   на #e3e8ec (исходный градиент витрины уходил в #0af — 2:1). */
.page-about .block-head__title,
.page-about .block__title_colored {
	background: linear-gradient(37deg, #613aff 40%, #2f5bd8 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Подзаголовки витрины серые (#747474, 3.7:1 на этом фоне) — темнее. */
.page-about .block__description {
	color: var(--neutral-670);
	margin: 0;
}

.about-tag {
	display: inline-flex;
	align-items: center;
	align-self: center;
	height: 30px;
	padding: 0 14px;
	border-radius: 15px;
	font-size: 15px;
	font-weight: 600;
	color: var(--brand-accent);
	background-color: var(--brand-1-pale);
	/* Отступ до H1 меньше общего шага шапки. */
	margin-bottom: -12px;
}

.about-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	grid-gap: 20px;
}

/* ------------------------------------------------------ общие карточки */

.about-card,
.about-feature {
	background-color: var(--neutral-0);
	border-radius: 32px;
	padding: clamp(28px, 16px + 2.5vw, 48px);
	min-width: 0;
}

.about-card__title {
	margin: 0;
	font-size: clamp(24px, 19px + 1vw, 32px);
	line-height: 1.2;
	font-weight: 700;
	color: var(--neutral-1000);
}

.about-card__text,
.about-feature__text {
	margin: 0;
	color: var(--neutral-820);
}

.about-card__text_lead {
	margin-top: 20px;
	font-size: clamp(18px, 16px + .4vw, 21px);
	line-height: 1.5;
}

/* --------------------------------------- «Что такое BOTFARM» и «Миссия» */

.block-about-intro {
	padding-bottom: clamp(56px, 40px + 4vw, 100px);
}

.about-intro {
	display: grid;
	grid-gap: clamp(24px, 16px + 2vw, 40px);
}

.about-card_text {
	max-width: none;
}

.about-card_text .about-card__text {
	max-width: 960px;
}

.about-card_split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	grid-gap: clamp(32px, 16px + 3vw, 64px);
	align-items: center;
}

.about-card__media {
	max-width: 440px;
	width: 100%;
	justify-self: center;
	border-radius: 24px;
	overflow: hidden;
	background-color: var(--gray-cool-100);
}

.about-card__image {
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------- «BOTFARM — это» */

.block-about-features {
	padding-bottom: clamp(56px, 40px + 4vw, 100px);
}

/* У блока нет .block__content, и shop.css обнуляет отступ под шапкой
   (`.block:not(:has(.block__content)) .block__header`) — перебиваем. */
.page-about .block .block__header.about-section-header {
	margin-bottom: clamp(32px, 20px + 2.5vw, 56px);
}

.about-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-gap: clamp(20px, 12px + 1.5vw, 32px);
}

.about-feature {
	display: grid;
	grid-template-columns: clamp(120px, 60px + 7vw, 168px) minmax(0, 1fr);
	grid-gap: clamp(20px, 12px + 1.5vw, 32px);
	align-items: start;
}

/* «Отечественный продукт» — самая длинная карточка со ссылками на документы,
   на десктопе во всю ширину. Порядок пунктов прежний. */
.about-feature_wide {
	grid-column: 1 / -1;
}

.about-feature_wide .about-feature__text {
	max-width: 860px;
}

.about-feature__media {
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 1;
	background-color: #fafbff;
}

/* Иллюстрации 505×528 с полями вокруг рисунка: квадрат обрезает только поля. */
.about-feature__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-feature__title {
	margin: 4px 0 0;
	font-size: clamp(20px, 17px + .6vw, 24px);
	line-height: 1.25;
	font-weight: 700;
	color: var(--neutral-1000);
	overflow-wrap: anywhere;
}

.about-feature__text {
	margin-top: 12px;
	font-size: 17px;
	line-height: 1.5;
}

/* Ссылки в тексте карточки видны и без наведения. */
.about-feature__text a {
	color: var(--brand-accent);
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.about-feature__text a:hover {
	text-decoration-color: transparent;
}

.about-features__footer {
	display: flex;
	justify-content: center;
	margin-top: clamp(32px, 24px + 1.5vw, 48px);
}

/* --------------------------------------------- «Начните продавать в MAX» */

.page-about .about-cta__header {
	margin-bottom: 40px;
}

.about-cta__buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-gap: 48px;
}

.about-cta__buttons .button {
	width: 300px;
}

/* --------------------------------------------------------------- фокус */

/* shop.css снимает outline у ссылок и кнопок; с клавиатуры его возвращаем. */
.page-about .page__content a:focus-visible,
.page-about .page__content button:focus-visible {
	outline: 3px solid var(--brand-accent);
	outline-offset: 3px;
}

/* ------------------------------------------------------------- адаптив */

@media screen and (max-width: 1024px) {
	.about-card_split {
		grid-template-columns: 1fr;
	}
	.about-card_split .about-card__media {
		max-width: 360px;
	}
	.about-features {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 768px) {
	.about-card,
	.about-feature {
		border-radius: 24px;
		padding: 24px 20px 28px;
	}
	.about-buttons,
	.about-cta__buttons {
		flex-direction: column;
		align-items: center;
		grid-gap: 16px;
	}
	.about-buttons .button,
	.about-cta__buttons .button {
		width: 100%;
		max-width: 300px;
	}
	/* Как на /shop/examples/: основная кнопка сверху. */
	.about-cta__buttons {
		flex-direction: column-reverse;
	}
	.about-feature {
		grid-template-columns: 1fr;
		grid-gap: 16px;
	}
	.about-feature__media {
		width: min(200px, 60%);
		justify-self: center;
	}
	.about-feature__title {
		margin-top: 0;
	}
	.about-feature__text {
		font-size: 16px;
	}
}