/**
 * Carousel Progress Bar - Segmented, clickable progress indicator
 *
 * Shared component used across all Swiper carousels (featured, content, news).
 * BEM naming: .carousel-progress, .carousel-progress__segment
 */

.carousel-progress {
	display: flex;
	gap: 0;
	height: 8px;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.carousel-progress[hidden] {
	display: none;
}

.carousel-progress__segment {
	flex: 1;
	height: 100%;
	background: var(--color-gray-mid);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.carousel-progress__segment--active {
	background: var(--color-black);
}

.carousel-progress__segment:hover:not(.carousel-progress__segment--active) {
	background: var(--color-gray-dark);
}