/* Страница «О компании». ДОРАБОТКА 28.08.2026, п. 18 реестра.
   Все классы с префиксом about- и самодостаточны: на этой странице НЕ подключаются
   стили каталога, поэтому опираться на .sections-block__* или .series__* нельзя.
   Цвет берём из переменной темы, чтобы страница следовала настройкам из админки. */

.about {
	--about-accent: var(--theme-base-color, #e73636);
	--about-radius: 12px;
	--about-border: #e8e8e8;
	--about-muted: #767676;
	--about-soft: #f7f7f8;
	margin-bottom: 40px;
}

.about-section { margin-top: 56px; }

.about-h {
	margin: 0 0 24px;
	font-size: 26px;
	line-height: 1.25;
	font-weight: 600;
}

/* ---------- кнопки ---------- */
.about-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 22px;
	border: 1px solid var(--about-border);
	border-radius: var(--about-radius);
	background: #fff;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	/* Текст чёрный, красным становится только при наведении — красный на странице
	   работает акцентом, а не постоянным фоном. */
	color: var(--basic_text_black, #222);
	transition: border-color .15s, background-color .15s, color .15s;
}
.about-btn:hover { border-color: var(--about-accent); color: var(--about-accent); }
.about-btn--primary {
	background: var(--about-accent);
	border-color: var(--about-accent);
	color: #fff;
}
.about-btn--primary:hover { opacity: .9; color: #fff; }

/* ---------- первый экран ---------- */
.about-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	margin-top: 8px;
}
.about-hero--no-photo { grid-template-columns: minmax(0, 1fr); }
.about-hero__title {
	margin: 0 0 18px;
	font-size: 40px;
	line-height: 1.15;
	font-weight: 700;
}
.about-hero__lead {
	margin: 0 0 26px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--about-muted);
	max-width: 34em;
}
.about-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Жёсткая пропорция 3:2 и обрезка по центру: так первый экран не зависит от того,
   какой кадр подставили, и текст рядом не повисает в пустоте. */
.about-hero__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--about-radius);
}

/* ---------- цифры ---------- */
.about-numbers {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1px;
	margin-top: 48px;
	background: var(--about-border);
	border: 1px solid var(--about-border);
	border-radius: var(--about-radius);
	overflow: hidden;
}
.about-numbers__item { background: #fff; padding: 22px 18px; }
.about-numbers__value {
	font-size: 30px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--about-accent);
	white-space: nowrap;
}
.about-numbers__label {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--about-muted);
}

/* ---------- направления ---------- */
.about-directions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.about-dir {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border: 1px solid var(--about-border);
	border-radius: var(--about-radius);
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}
.about-dir:hover {
	border-color: var(--about-accent);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.about-dir__pic {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.about-dir__pic img { max-width: 100%; max-height: 100%; }
/* Название чёрное, акцентным становится только при наведении: красного на странице
   и так много, а он должен работать акцентом, а не фоном. */
.about-dir__name {
	flex: 1 1 auto;
	font-size: 15px;
	line-height: 1.3;
	color: var(--basic_text_black, #222);
	transition: color .15s;
}
.about-dir:hover .about-dir__name { color: var(--about-accent); }
.about-dir__cnt {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--about-muted);
}

/* ---------- преимущества ---------- */
.about-adv {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.about-adv__item {
	padding: 24px 20px;
	border: 1px solid var(--about-border);
	border-radius: var(--about-radius);
}
.about-adv__value {
	font-size: 32px;
	line-height: 1.05;
	font-weight: 700;
	color: var(--about-accent);
	white-space: nowrap;
}
.about-adv__title { margin-top: 10px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.about-adv__text { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--about-muted); }

.about-adv-plain {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 12px;
}
.about-adv-plain__item {
	padding: 20px;
	border-radius: var(--about-radius);
	background: var(--about-soft);
}
.about-adv-plain__title { font-size: 15px; font-weight: 600; }
.about-adv-plain__text { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--about-muted); }

/* ---------- клиенты ---------- */
.about-clients {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.about-clients__item {
	padding: 22px 20px;
	border: 1px solid var(--about-border);
	border-radius: var(--about-radius);
}
.about-clients__title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.about-clients__text { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--about-muted); }

/* ---------- таймлайн ---------- */
.about-timeline { position: relative; padding-left: 26px; }
.about-timeline:before {
	content: "";
	position: absolute;
	left: 5px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--about-border);
}
.about-timeline__item { position: relative; padding: 0 0 26px; }
.about-timeline__item:last-child { padding-bottom: 0; }
.about-timeline__item:before {
	content: "";
	position: absolute;
	left: -26px;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--about-border);
}
.about-timeline__item--current:before {
	background: var(--about-accent);
	border-color: var(--about-accent);
}
.about-timeline__year {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}
.about-timeline__item--current .about-timeline__year { color: var(--about-accent); }
.about-timeline__text {
	margin-top: 4px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--about-muted);
	max-width: 46em;
}

/* ---------- команда ---------- */
.about-team {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 36px;
	align-items: center;
}
.about-team__text p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--about-muted); }
.about-team__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--about-radius);
}
/* Фото команды теперь внутри ссылки на просмотр во весь экран. */
.about-team__photo .about-photo-link { border-radius: var(--about-radius); overflow: hidden; }

/* ---------- бренды ---------- */
/* Одной строкой с прокруткой и на десктопе, и на смартфоне. Сеткой 14 логотипов
   разворачивались на смартфоне в пять рядов и съедали пол-экрана. */
.about-brands {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding-bottom: 6px;
	scrollbar-width: thin;
}
.about-brands__item {
	flex: 0 0 auto;
	width: 150px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12px 10px 10px;
	border: 1px solid var(--about-border);
	border-radius: var(--about-radius);
	text-decoration: none;
	transition: border-color .15s;
}
.about-brands__item:hover { border-color: var(--about-accent); }
/* Логотипы разной формы и пропорций, поэтому под них отведена площадка
   фиксированной высоты — иначе подписи снизу гуляли бы по вертикали. */
.about-brands__pic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 56px;
}
.about-brands__pic img { max-width: 100%; max-height: 100%; }
.about-brands__cnt {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--about-muted);
	white-space: nowrap;
}
.about-brands__more { margin-top: 16px; }

/* ---------- финал ---------- */
.about-cta {
	margin-top: 56px;
	padding: 40px;
	border-radius: var(--about-radius);
	background: var(--about-soft);
	text-align: center;
}
.about-cta__title { font-size: 26px; line-height: 1.25; font-weight: 600; }
.about-cta__text { margin-top: 10px; font-size: 15px; color: var(--about-muted); }
.about-cta__actions {
	margin-top: 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/* ---------- адаптив ---------- */
@media (max-width: 1199px) {
	.about-numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.about-adv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.about-hero__title { font-size: 34px; }
}

@media (max-width: 991px) {
	.about-directions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.about-clients { grid-template-columns: minmax(0, 1fr); }
	.about-hero,
	.about-team { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	/* На узком экране фотография НЕ поднимается над текстом: посетитель должен сначала
	   увидеть заголовок и понять, куда попал, а не 450 px коробок. */
}

@media (max-width: 600px) {
	.about-section { margin-top: 40px; }
	.about-h { font-size: 22px; }
	.about-hero__title { font-size: 27px; }
	.about-hero__lead { font-size: 15px; }
	.about-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.about-numbers__value { font-size: 25px; }
	.about-adv { grid-template-columns: minmax(0, 1fr); }
	.about-adv-plain { grid-template-columns: minmax(0, 1fr); }
	.about-directions { grid-template-columns: minmax(0, 1fr); }
	.about-cta { padding: 28px 20px; }
	.about-cta__title { font-size: 21px; }
	.about-btn { width: 100%; }
	.about-import { padding: 24px 20px; }
	.about-import__points { gap: 16px 12px; }
	.about-import__photos { grid-template-columns: minmax(0, 1fr); }
	.about-gallery__item { width: 260px; }
	.about-gallery__item--portrait { width: 150px; }
	.about-gallery__item img { height: 200px; }
	/* На узком экране длинные значения ужимаем, иначе «1,5–2 месяца» не влезает. */
	.about-import__value { font-size: 18px; }
	.about-import__label { font-size: 12px; }
	.about-licenses__item { width: 170px; }
	.about-licenses__item img { height: 230px; }
	.about-contacts { display: flex; width: 100%; padding: 12px 16px; }
}

/* =========================================================================
   Блоки, добавленные 28.08.2026 вторым заходом
   ========================================================================= */

/* Кнопки-попапы — это <span> с атрибутами штатного механизма Аспро, а не ссылки,
   поэтому курсор и запрет выделения задаём руками. */
span.about-btn { cursor: pointer; user-select: none; }

/* ---------- контакты под кнопками ---------- */
/* Контакты на первом экране идут на светлой подложке: без неё телефон и почта
   висели в воздухе и читались как случайные ссылки. */
.about-contacts {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 24px;
	margin-top: 20px;
	padding: 13px 20px;
	border-radius: var(--about-radius);
	background: var(--about-soft);
}
/* В финальном блоке подложка уже есть у самой секции — вторая была бы невидимой
   и только сузила бы строку, поэтому там контакты без неё. */
.about-contacts--center {
	display: flex;
	justify-content: center;
	padding: 0;
	background: none;
}
.about-contacts__item {
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.about-contacts__item:hover {
	color: var(--about-accent);
	border-bottom-color: currentColor;
}

/* ---------- прямой импорт ---------- */
.about-import {
	margin-top: 56px;
	padding: 32px 36px;
	border-radius: var(--about-radius);
	background: var(--about-soft);
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 32px;
	align-items: center;
}
.about-import__title { margin: 0 0 12px; font-size: 24px; line-height: 1.25; font-weight: 600; }
.about-import__text { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--about-muted); }
.about-import__points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 20px;
}
/* Фотографии собственной продукции — столбиком справа от текста. */
.about-import__photos {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}
.about-import__photo {
	border-radius: var(--about-radius);
	overflow: hidden;
	background: #fff;
}
.about-import__photo img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.about-import__point {
	padding-left: 14px;
	border-left: 3px solid var(--about-accent);
}
.about-import__value { font-size: 21px; font-weight: 700; line-height: 1.2; }
.about-import__label { margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--about-muted); }

/* ---------- сертификаты ---------- */
/* Одной лентой с прокруткой — как логотипы клиентов. Так сканы остаются крупными
   (в сетке по 4–6 в ряд на них ничего было не разобрать) и не занимают пол-экрана.
   Прокрутка на чистом CSS, без карусельной библиотеки. */
.about-licenses {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding-bottom: 6px;
	scrollbar-width: thin;
}
.about-licenses__item {
	position: relative;
	flex: 0 0 auto;
	width: 240px;
	scroll-snap-align: start;
	display: block;
	border: 1px solid var(--about-border);
	border-radius: var(--about-radius);
	overflow: hidden;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}

/* Иконка «открыть на весь экран». Одна на все фотографии страницы: сертификаты,
   продукцию, склад и команду. Появляется при наведении в центре кадра — без неё
   непонятно, что произойдёт по клику. */
.about-photo-link {
	position: relative;
	display: block;
}
.about-zoom {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
	color: var(--about-accent);
	fill: currentColor;
	opacity: 0;
	transition: opacity .15s;
	pointer-events: none;
}
.about-photo-link:hover .about-zoom { opacity: 1; }

/* На сенсорных экранах иконку не показываем вовсе: наведения там нет,
   а постоянно висящий кружок поверх кадра только мешает смотреть. */
@media (hover: none) {
	.about-zoom { display: none; }
}
.about-licenses__item:hover {
	border-color: var(--about-accent);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}
.about-licenses__item img {
	display: block;
	width: 100%;
	height: 300px;
	object-fit: cover;
	object-position: top center;
}

/* ---------- новости ---------- */
.about-news {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.about-news__item {
	display: block;
	border: 1px solid var(--about-border);
	border-radius: var(--about-radius);
	overflow: hidden;
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}
.about-news__item:hover {
	border-color: var(--about-accent);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.about-news__pic { display: block; }
.about-news__pic img {
	display: block;
	width: 100%;
	height: 176px;
	object-fit: cover;
}
.about-news__body { display: block; padding: 18px 20px; }
.about-news__date { display: block; font-size: 13px; color: var(--about-muted); }
.about-news__name {
	display: block;
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--basic_text_black, #222);
	transition: color .15s;
}
.about-news__item:hover .about-news__name { color: var(--about-accent); }

.about-more { margin-top: 16px; }

/* ---------- галерея склада ---------- */
/* Та же лента с прокруткой, что у сертификатов и брендов. Кадры разного размера
   и пропорций, поэтому у всех жёсткая пропорция и обрезка по центру — иначе лента
   выглядела бы рваной. */
.about-gallery {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding-bottom: 6px;
	scrollbar-width: thin;
}
/* Высота у всех карточек одна, а ширина зависит от ориентации кадра. Так вертикальное
   фото не приходится обрезать до горизонтальной полоски: оно просто занимает более узкую
   карточку той же высоты, и лента остаётся ровной. */
.about-gallery__item {
	flex: 0 0 auto;
	width: 340px;
	scroll-snap-align: start;
	border-radius: var(--about-radius);
	overflow: hidden;
	background: var(--about-soft);
}
.about-gallery__item--portrait { width: 190px; }
.about-gallery__item img {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
}

/* Приписка под заголовком блока */
.about-h--tight { margin-bottom: 6px; }
.about-note {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--about-muted);
}

@media (max-width: 1199px) {
	.about-licenses__item { width: 220px; }
}

@media (max-width: 991px) {
	.about-import { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.about-import__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.about-gallery__item { width: 300px; }
	.about-gallery__item--portrait { width: 170px; }
	.about-licenses__item { width: 200px; }
	/* Карточки новостей лентой, а не столбиком друг под другом: так же сделано
	   на главной странице сайта. */
	.about-news {
		display: flex;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		padding-bottom: 6px;
		scrollbar-width: thin;
	}
	.about-news__item { flex: 0 0 auto; width: 300px; scroll-snap-align: start; }
	.about-news__pic img { height: 180px; }
}