/* KEY ACADEMY — блок «О нас» на главной.
   Палитра только брендовая: оранжевый #f4943e точечным акцентом,
   текст #212529 / #4f5358. Новых визуальных паттернов не вводим.

   Композиция (01.09.2026, компактная):
   заголовок слева + подпись через тире  ->  ka-sec-head (ka-sections.css)
   ниже две колонки: широкое командное фото | лид + шесть смыслов в две колонки,
   кнопка «Подробнее» под сеткой по левому краю.

   Почему так: фото — групповой кадр 1236x815 на 12 человек, обрезать по краям
   нельзя (люди уходят из кадра), поэтому оно остаётся широким и занимает ~46%
   ширины. Смыслы уложены в две колонки, чтобы высота правой колонки совпала
   с высотой фото — без пустоты под фото и без центрированного лида на 900px,
   который раньше давал широкие поля слева и справа. */

.ka-about {
	--ka-a-accent: #f4943e;
	--ka-a-ink: #212529;
	--ka-a-muted: #4f5358;
}

/* ---------- Лид ---------- */
/* Во всю ширину правой колонки и по левому краю: боковых полей больше нет. */
.ka-about .ka-about__lead-wrap {
	max-width: none;
	margin: 0 0 22px;
	text-align: left;
}

.ka-about .ka-about__lead {
	margin: 0;
	font-size: 19px;
	line-height: 1.5;
	font-weight: 400;
	letter-spacing: -0.011em;
	color: var(--ka-a-ink);
}

/* ---------- Сетка: фото | смыслы ---------- */
.ka-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	column-gap: 44px;
	align-items: start;
}

/* ---------- Фото команды ---------- */
.ka-about__media {
	position: relative;
	margin: 0;
	min-width: 0;
}

.ka-about__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1236 / 815;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: 0 18px 44px -18px rgba(33, 37, 41, 0.35);
}

/* Тонкая рамка поверх фото, чтобы светлый край не сливался с фоном */
.ka-about__media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 18px;
	box-shadow: inset 0 0 0 1px rgba(33, 37, 41, 0.08);
	pointer-events: none;
}

/* ---------- Смыслы ---------- */
.ka-about__body {
	min-width: 0;
}

.ka-about .ka-about__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 28px;
}

/* Специфичность выше, чем у .b-content__desc ul li:not(:last-child) в app.css,
   иначе к каждому пункту прилипают лишние 5px и шаг между пунктами ломается. */
.ka-about .ka-about__list > .ka-about__item {
	position: relative;
	padding-left: 20px;
	margin: 0;
	min-width: 0;
}

.ka-about .ka-about__list > .ka-about__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ka-a-accent);
}

.ka-about .ka-about__item-title {
	display: block;
	margin-bottom: 5px;
	font-size: 16px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--ka-a-ink);
}

.ka-about .ka-about__item-text {
	display: block;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ka-a-muted);
}

/* Необязательная финальная строка (сейчас в тексте не используется) */
.ka-about .ka-about__note {
	margin: 22px 0 0;
	padding: 2px 0 2px 18px;
	border-left: 2px solid var(--ka-a-accent);
	font-size: 15px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--ka-a-ink);
}

/* Блок ShowViewContent('features') пустой — не оставляем дыру */
.ka-about__features:empty {
	display: none;
}

/* ---------- Кнопка «Подробнее» ---------- */
.ka-about__cta {
	margin-top: 26px;
	text-align: left;
}

.ka-about .ka-about__btn {
	margin: 0;
	white-space: nowrap;
}

/* ---------- Адаптив ---------- */
@media only screen and (max-width: 1199px) {
	.ka-about__grid {
		column-gap: 32px;
	}

	.ka-about .ka-about__lead {
		font-size: 18px;
	}

	.ka-about .ka-about__list {
		gap: 18px 24px;
	}
}

@media only screen and (max-width: 991px) {
	.ka-about__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 26px;
	}

	.ka-about .ka-about__lead {
		font-size: 17px;
	}

	.ka-about .ka-about__lead-wrap {
		margin-bottom: 18px;
	}

	.ka-about__cta {
		margin-top: 22px;
	}
}

@media only screen and (max-width: 700px) {
	.ka-about .ka-about__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.ka-about__media img,
	.ka-about__media::after {
		border-radius: 14px;
	}
}