/* Technique tabs for the homepage product reference grid. */

.bgn-brands .bgn-brands__tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: min(100%, 430px);
	margin: -22px auto 38px;
	padding: 5px;
	gap: 5px;
	border: 1px solid rgba(4, 76, 132, .13);
	border-radius: 999px;
	background: rgba(255, 255, 255, .78);
	box-shadow: 0 12px 30px rgba(4, 76, 132, .07);
	backdrop-filter: blur(8px);
}

.bgn-brands .bgn-brands__tab {
	display: inline-flex;
	min-height: 52px;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 10px 18px;
	color: #345064;
	background: transparent;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: .9rem;
	font-weight: 800;
	line-height: 1.2;
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.bgn-brands .bgn-brands__tab-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.bgn-brands .bgn-brands__tab:hover,
.bgn-brands .bgn-brands__tab:focus-visible {
	color: #044c84;
	background: rgba(4, 76, 132, .065);
}

.bgn-brands .bgn-brands__tab.is-active {
	color: #fff;
	background: #044c84;
	box-shadow: 0 9px 22px rgba(4, 76, 132, .2);
}

.bgn-brands .bgn-brands__tab.is-active:hover,
.bgn-brands .bgn-brands__tab.is-active:focus-visible {
	color: #fff;
	background: #0a5e9c;
}

.bgn-brands .bgn-brands__panel[hidden] {
	display: none;
}

.bgn-brands .bgn-brands__panel.is-active {
	animation: bgn-brand-panel-in .28s ease both;
}

/* Image-first cards: let the product photography lead and avoid nested frames. */
.bgn-brands .bgn-brand-card__visual {
	border: 0;
	border-radius: 6px;
	box-shadow: none;
}

.bgn-brands .bgn-brand-card__image {
	padding: clamp(6px, .8vw, 12px);
	image-rendering: auto;
}

.bgn-brands .bgn-brand-card__content {
	width: calc(100% - 24px);
	min-height: 210px;
	margin: -28px 12px 0;
	padding: 22px 20px 18px;
	border: 0;
	border-radius: 6px;
	box-shadow: 0 12px 26px rgba(4, 76, 132, .075);
}

.bgn-brands .bgn-brand-card:hover .bgn-brand-card__visual,
.bgn-brands .bgn-brand-card:focus-within .bgn-brand-card__visual,
.bgn-brands .bgn-brand-card:hover .bgn-brand-card__content,
.bgn-brands .bgn-brand-card:focus-within .bgn-brand-card__content {
	border-color: transparent;
}

.bgn-brands .bgn-brand-card:hover .bgn-brand-card__content,
.bgn-brands .bgn-brand-card:focus-within .bgn-brand-card__content {
	box-shadow: 0 15px 30px rgba(4, 76, 132, .11);
}

.bgn-brands .bgn-brand-card:hover .bgn-brand-card__image,
.bgn-brands .bgn-brand-card:focus-within .bgn-brand-card__image {
	transform: scale(1.035);
}

@keyframes bgn-brand-panel-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 767px) {
	.bgn-brands .bgn-brands__tabs {
		margin-top: -12px;
		margin-bottom: 30px;
	}

	.bgn-brands .bgn-brands__tab {
		min-height: 48px;
		padding-inline: 12px;
		font-size: .84rem;
	}

	.bgn-brands .bgn-brand-card__visual {
		border-radius: 4px;
	}

	.bgn-brands .bgn-brand-card__image {
		padding: 4px;
	}

	.bgn-brands .bgn-brand-card__content {
		width: 100%;
		min-height: 0;
		margin: 0;
		padding: 11px 9px 10px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bgn-brands .bgn-brands__tab {
		transition: none;
	}

	.bgn-brands .bgn-brands__panel.is-active {
		animation: none;
	}
}