/**
 * Carusell Brands — scoped clone of EverSmith-HTML-PAGE .na-cross-brand (national-accounts.html).
 * Root: .carusell-brands-block.na-cross-brand
 */

.carusell-brands-block {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.carusell-brands-block.na-cross-brand {
	width: 100%;
	background: #f0f9fa;
	padding: 60px 80px 100px;
	overflow: hidden;
}

.carusell-brands-block .na-cross-brand-container {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.carusell-brands-block .na-cross-brand-top {
	display: flex;
	gap: 64px;
	align-items: center;
	width: 100%;
}

.carusell-brands-block .na-cross-brand-content {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.carusell-brands-block .na-cross-brand-label {
	display: flex;
	align-items: center;
	gap: 8px;
}

.carusell-brands-block .na-cross-brand-tag {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
	color: #0097a7;
	text-transform: uppercase;
}

/* Main h2 uses theme .es-section-title / .serif-teal */

.carusell-brands-block .na-cross-brand-description {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--smith-grey, #404a50);
	margin: 0;
}

.carusell-brands-block .na-cross-brand-image {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.carusell-brands-block .na-cross-brand-image img {
	display: block;
	width: 100%;
	max-width: 600px;
	height: auto;
	object-fit: contain;
}

.carusell-brands-block .na-cross-brand-services {
	width: 100%;
}

/* Carousel section label: PHP uses .es-card-title */
.carusell-brands-block .na-cross-brand-services > .es-card-title {
	margin: 0 0 24px;
}

.carusell-brands-block .na-cross-brand-carousel {
	width: 100%;
	max-width: 1280px;
	overflow: hidden;
	margin-bottom: 24px;
}

.carusell-brands-block .na-cross-brand-carousel-track {
	display: flex;
	gap: 24px;
	transition: transform 0.45s ease;
	transform: translateX(0);
}

/*
 * Desktop: ≤6 cards that all fit in one row — JS adds this class, hides controls,
 * and skips carousel motion (no sliding animation from CSS either).
 */
.carusell-brands-block--static-desktop .na-cross-brand-carousel-track {
	transition: none;
	transform: none;
}

/*
 * Must beat .na-cross-brand-controls { display: flex } — the [hidden] attribute alone
 * does not always win over that author rule, so arrows/dots could stay visible.
 */
.carusell-brands-block--static-desktop .na-cross-brand-controls {
	display: none !important;
}

.carusell-brands-block .na-cross-brand-card {
	flex: 0 0 185.33px;
	min-width: 0;
	padding: 40px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.carusell-brands-block .na-cross-brand-card-icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.carusell-brands-block .na-cross-brand-card-icon img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	display: block;
}

.carusell-brands-block .na-cross-brand-card-text {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.carusell-brands-block .na-cross-brand-card-text strong {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
	color: var(--smith-grey, #404a50);
}

.carusell-brands-block .na-cross-brand-card-text span {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--smith-grey, #404a50);
}

.carusell-brands-block .na-cross-brand-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1280px;
}

.carusell-brands-block .na-cross-brand-dots {
	display: flex;
	gap: 8px;
}

.carusell-brands-block .na-cross-brand-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: #d8d8d8;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s;
}

.carusell-brands-block .na-cross-brand-dot.active {
	background: var(--orange, #e57440);
}

.carusell-brands-block .na-cross-brand-footer {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.carusell-brands-block .na-cross-brand-footer p {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--smith-grey, #404a50);
	margin: 0;
}

.carusell-brands-block .na-cross-brand-arrows {
	display: flex;
	gap: 12px;
}

.carusell-brands-block .na-cross-brand-arrow {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.carusell-brands-block .na-cross-brand-arrow img {
	width: 15px;
	height: 11px;
}

/* Tablet */
@media (max-width: 1024px) {
	.carusell-brands-block.na-cross-brand {
		padding: 64px 32px 56px;
	}

	.carusell-brands-block .na-cross-brand-container {
		gap: 40px;
	}

	.carusell-brands-block .na-cross-brand-top {
		flex-direction: column;
		gap: 40px;
	}

	.carusell-brands-block .na-cross-brand-content {
		width: 100%;
	}

	.carusell-brands-block .na-cross-brand-image {
		width: 100%;
		order: 2;
	}

	.carusell-brands-block .na-cross-brand-image img {
		max-width: 500px;
	}

}

/* Mobile */
@media (max-width: 768px) {
	.carusell-brands-block.na-cross-brand {
		padding: 48px 20px 40px;
	}

	.carusell-brands-block .na-cross-brand-container {
		gap: 32px;
	}

	.carusell-brands-block .na-cross-brand-top {
		flex-direction: column;
		gap: 32px;
	}

	.carusell-brands-block .na-cross-brand-content {
		width: 100%;
	}

	.carusell-brands-block .na-cross-brand-image {
		width: 100%;
		order: 2;
	}

	.carusell-brands-block .na-cross-brand-image img {
		max-width: 100%;
	}

	.carusell-brands-block .na-cross-brand-description {
		font-size: 16px;
	}

	.carusell-brands-block .na-cross-brand-tag {
		font-size: 14px;
	}
}

/* Small mobile */
@media (max-width: 480px) {
	.carusell-brands-block.na-cross-brand {
		padding: 40px 16px 32px;
	}

}