/*
 * Front-end styles for bsm/feature-list.
 *
 * Сетка фич 1/2/3 колонки. Каждая фича:
 *   - слева: navy-квадратик (36×36) с произвольным текстом/номером (опц.)
 *   - справа: h4 (заголовок) + p (описание, опц.)
 *   - сверху: var(--hairline) — разделитель между фичами
 *
 * Markup: ../render.php
 * Source: ../../files/10_Projects/bsm_company/05_Brand/design/04-library.html (.features / .feature)
 *
 * Спецификация (.feature):
 *   display: flex; gap: 16px; padding: 16px 0;
 *   border-top: var(--hairline)
 *   .num: 36×36, bg var(--navy), color #fff, font 13px/700, tabular-nums
 *   h4: 15px/700/navy, margin 0 0 6px
 *   p:  13.5px/text-secondary, line-height 1.5, margin 0
 */

.bsm-features {
	margin: 0;
	padding: 0;
	font-family: inherit;
}

.bsm-features__list {
	display: grid;
	gap: 0 28px;     /* только горизонтальный gap — вертикальное расстояние через padding фич */
}

.bsm-features--cols-1 .bsm-features__list {
	grid-template-columns: 1fr;
}

.bsm-features--cols-2 .bsm-features__list {
	grid-template-columns: repeat(2, 1fr);
}

.bsm-features--cols-3 .bsm-features__list {
	grid-template-columns: repeat(3, 1fr);
}

/* ---- Item ---- */

.bsm-features__item {
	display: flex;
	gap: 16px;
	padding: 16px 0;
	border-top: var(--hairline);
}

/* Если фича — <a> (есть linkUrl), наследуем цвет и не подчёркиваем.
 * Базовый a { color: var(--accent); } из base.css перебиваем через специфичность
 * селектора с тегом — иначе заголовок и текст становятся зелёными. */
a.bsm-features__item {
	color: inherit;
	text-decoration: none;
}

a.bsm-features__item:hover,
a.bsm-features__item:focus {
	text-decoration: none;
}

.bsm-features__item:first-child {
	/* У первой фичи в каждой колонке нет верхней границы. */
	border-top: none;
}

/* Если num не задан — структура остаётся (body на всю ширину через flex). */
.bsm-features__num {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	background: var(--navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--font-weight-bold);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	transition: background 0.15s, color 0.15s;
}

.bsm-features__num span {
	/* span внутри num — для случая, когда Олег захочет обернуть цифру,
	 * например в кастомный шрифт. По умолчанию — ничего не делает. */
	display: block;
}

.bsm-features__item:hover .bsm-features__num {
	background: var(--accent);   /* navy → зелёный при ховере */
}

.bsm-features__body {
	flex: 1;
	min-width: 0;       /* чтобы текст переносился внутри flex item */
}

.bsm-features__title {
	margin: 0 0 6px 0;
	font-size: 15px;
	font-weight: var(--font-weight-bold);
	color: var(--navy);
	line-height: 1.3;
	transition: color 0.15s;
}

.bsm-features__item:hover .bsm-features__title {
	color: var(--accent);   /* navy → зелёный при ховере */
}

.bsm-features__desc {
	margin: 0;
	font-size: 13.5px;
	color: var(--text-secondary);
	line-height: 1.5;
}

/* ---- Responsive ---- */

/* Планшет: 3 → 2 колонки. */
@media (max-width: 1100px) {
	.bsm-features--cols-3 .bsm-features__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Мобильный: все → 1 колонка. */
@media (max-width: 700px) {
	.bsm-features--cols-1 .bsm-features__list,
	.bsm-features--cols-2 .bsm-features__list,
	.bsm-features--cols-3 .bsm-features__list {
		grid-template-columns: 1fr;
	}
}