/*
 * acf/bonuses-block - карточки бонусов.
 * Цвета блок получает инлайном из ACF, поэтому меняем композицию, а не палитру:
 * тип бонуса - мелкая подпись над номиналом, а не строка вровень с ним.
 */

/* Тема задаёт колонку жёстко: repeat(auto-fit, minmax(327px, 1fr)). На экранах уже
   ~360px карточка перестаёт помещаться в контейнер и её срезает по краю.
   min() опускает нижнюю границу до ширины контейнера. */
main .bonuses__list {
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(min(327px, 100%), 1fr));
}

main .bonuses__list > * {
	min-width: 0;
}

main .bonus {
	background: var(--gs-surface);
	border: 1px solid var(--gs-line);
	border-radius: var(--gs-radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color .25s var(--gs-ease), box-shadow .25s var(--gs-ease);
}

main .bonus:hover {
	border-color: var(--gs-line-strong);
	box-shadow: var(--gs-shadow);
}

main .bonus__promo-code {
	font-size: .88rem;
	font-weight: 600;
	letter-spacing: .01em;
	padding: 10px 16px;
}

main .bonus__promo-code__value {
	font-weight: 700;
}

main .bonus__type {
	display: block;
	padding: 18px 18px 0;
}

main .bonus__type-title {
	color: var(--gs-muted);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .08em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

main .bonus__type-value {
	color: var(--gs-text);
	font-size: 1.22rem;
	font-weight: 700;
	line-height: 1.3;
}

main .bonus__info {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 14px 18px 18px;
}

main .bonus__info-description {
	color: var(--gs-muted);
	font-size: .92rem;
	line-height: 1.55;
}

main .bonus__info-description p + p {
	margin-top: 10px;
}

/* Кнопка карточки прижимается к низу, чтобы ряд карточек выглядел ровным. */
main .bonus__info .site-button,
main .bonus__button {
	margin-top: auto;
}

main .bonus__button {
	padding-top: 16px;
}