/*
 * SEO-страницы газосиликата по брендам — стили плиток.
 *
 * Обводка у темы нарисована бордером (--btn-brd-width: 2px),
 * а тень на ховере отключена (--btn-box-shadow-hover: none).
 * Поэтому цвет обводки меняем через border-color, а не тенью.
 *
 * Цвет #5181b8 совпадает с синим хедера. Если понадобится
 * контраст по AA (4.5:1 для 13px), заменить на #3f6ea3.
 */

.gsb-brand-block {
	margin: 0 0 25px;
}

.gsb-brand-tiles__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gsb-brand-tiles__item {
	list-style: none;
	margin: 0;
}

/*
 * Капс делается здесь, а не в PHP: в разметке и в базе название
 * остаётся как есть («АэроБел»), капсом оно только показывается.
 * Отключается галочкой в настройках плагина.
 */
.gsb-brand-tiles--upper .gsb-brand-tiles__btn {
	text-transform: uppercase;
	letter-spacing: .02em;
}

.gsb-brand-block .gsb-brand-tiles__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 6px 16px;
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	border-radius: 0;
    border-width: 0;

	/* лёгкая заливка плиток по умолчанию */
	background-color: rgba(81, 129, 184, .10);

	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

/*
 * Ховер мышью, фокус с клавиатуры и активный бренд — один и тот же вид:
 * синий текст, синяя обводка, заливка чуть плотнее.
 */
.gsb-brand-tiles__item .gsb-brand-tiles__btn:hover {
	color: #3f6ea3 !important;
	/*border-color: #5181b8 !important;*/
	background-color: rgba(81, 129, 184, .14) !important;
	box-shadow: none !important;
	text-decoration: none;
}

.gsb-brand-tiles__item .gsb-brand-tiles__btn:focus-visible,
.gsb-brand-tiles__item.is-active .gsb-brand-tiles__btn {
	color: #ffffff !important;
	/*border-color: #5181b8 !important;*/
	background-color: #5181b8 !important;
	box-shadow: none !important;
	text-decoration: none;
}

/* Активный бренд — не ссылка, поэтому курсор обычный. */
.gsb-brand-tiles__item.is-active .gsb-brand-tiles__btn {
	cursor: default;
	pointer-events: none;
}

.gsb-brand-back {
	margin: 12px 0 0;
	font-size: 13px;
}
.gsb-brand-back:hover {
	color: #3f6ea3;
}

.gsb-brand-desc {
	margin: 0 0 20px;
}

.gsb-brand-desc--bottom {
	margin: 20px 0 0;
}

@media (max-width: 767px) {
	.gsb-brand-block .gsb-brand-tiles__btn {
		padding: 6px 12px;
		font-size: 12px;
	}

	/* на тач-экранах ховера нет, поэтому заливка чуть плотнее */
	.gsb-brand-block .gsb-brand-tiles__btn {
		background-color: rgba(81, 129, 184, .09);
	}
}