/*
 * Front-end styles for bsm/benefit-cards.
 *
 * Карточки преимуществ с большой цифрой (48px, accent). Сетка 1/2/3 колонки.
 *
 * Markup: ../render.php
 * Source: ../../files/10_Projects/bsm_company/05_Brand/design/04-library.html (.benefit-card)
 *
 * Спецификация (.benefit-card):
 *   padding: 36px 30px
 *   border: var(--hairline)
 *   h3 font-size: 19px / 700 / color var(--navy)
 *   p  font-size: 14.5px / text-secondary / line-height 1.6
 *   .num font-size: 48px / 700 / color var(--accent) / letter-spacing: -0.04em / tabular-nums
 *
 * Hover:
 *   border-color: var(--accent)
 *   background: var(--bg-soft)
 */

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

.bsm-benefit-cards__grid {
	display: grid;
	gap: 24px;
	/* Все строки одинаковой высоты = по самой высокой карточке в сетке.
	 * Без этого card с коротким текстом в одной строке и card с длинным
	 * текстом в другой — будут разной высоты. */
	grid-auto-rows: 1fr;
}

.bsm-benefit-cards--cols-1 .bsm-benefit-cards__grid {
	grid-template-columns: 1fr;
}

.bsm-benefit-cards--cols-2 .bsm-benefit-cards__grid {
	grid-template-columns: repeat(2, 1fr);
}

.bsm-benefit-cards--cols-3 .bsm-benefit-cards__grid {
	grid-template-columns: repeat(3, 1fr);
}

.bsm-benefit-cards--cols-4 .bsm-benefit-cards__grid {
	grid-template-columns: repeat(4, 1fr);
}

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

.bsm-benefit-cards__item {
	display: flex;
	flex-direction: column;
	gap: 0;            /* управляем margin-bottom каждого поля */
	height: 100%;      /* растягиваем на всю высоту grid-ячейки */
	padding: 36px 30px;
	background: var(--surface);
	color: var(--text);
	text-decoration: none;
	border: var(--hairline);
	transition: border-color 0.15s, background-color 0.15s;
}

/* Если карточка — <a> (есть linkUrl), наследуем цвет и не подчёркиваем. */
a.bsm-benefit-cards__item {
	color: inherit;
	text-decoration: none;
}

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

.bsm-benefit-cards__item:hover {
	border-color: var(--accent);
	background: var(--bg-soft);
}

/* ---- Big number (48px, accent) ---- */

.bsm-benefit-cards__num {
	display: block;
	font-family: var(--font-family-base);
	font-size: 48px;
	font-weight: var(--font-weight-bold);
	color: var(--accent);
	letter-spacing: -0.04em;
	line-height: 1;
	margin-bottom: 20px;
	font-variant-numeric: tabular-nums;
	transition: color 0.15s;
}

.bsm-benefit-cards__item:hover .bsm-benefit-cards__num {
	color: var(--navy);   /* при hover цифра темнеет — navy */
}

/* ---- Title ---- */

.bsm-benefit-cards__title {
	margin: 0 0 10px 0;
	font-size: 19px;
	font-weight: var(--font-weight-bold);
	color: var(--navy);
	line-height: 1.3;
}

/* ---- Description ---- */

.bsm-benefit-cards__desc {
	margin: 0;
	font-size: 14.5px;
	color: var(--text-secondary);
	line-height: 1.6;
}

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

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

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