/**
 * Text Slider — Figma sub-navigation ticker (475:1596).
 * Full-bleed 77px row. Items clip at the viewport edges — no .container inset.
 */

.text-slider {
	--text-slider-bg: var(--color-bg-blue-light);
	--text-slider-color: var(--color-grey-blue-1);
	--text-slider-mark: var(--color-brand-secondary);
	--text-slider-height: 4.8125rem; /* 77px */
	--text-slider-gap: 3.0625rem; /* 49px between items */
	--text-slider-item-gap: 0.625rem; /* 10px diamond → label */
	--text-slider-item-pad-block: 0.625rem; /* 10px */

	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background-color: var(--text-slider-bg);
	height: var(--text-slider-height);
	overflow: hidden;
}

.text-slider__swiper {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

.text-slider .swiper-wrapper {
	height: 100%;
	align-items: center;
}

.text-slider .swiper-slide {
	width: auto;
	height: 100%;
	margin: 0;
	display: flex;
	align-items: center;
}

.text-slider__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--text-slider-item-gap);
	padding-block: var(--text-slider-item-pad-block);
	color: var(--text-slider-color);
	text-decoration: none;
	white-space: nowrap;
}

a.text-slider__item:hover .text-slider__label,
a.text-slider__item:focus-visible .text-slider__label {
	color: var(--color-brand-secondary);
}

a.text-slider__item:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 4px;
}

.text-slider__mark {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 0.5rem;
	height: 0.5rem;
}

.text-slider__mark::before {
	content: '';
	width: 0.3536rem; /* 5.657px rotated square */
	height: 0.3536rem;
	background-color: var(--text-slider-mark);
	transform: rotate(45deg);
}

.text-slider__label {
	font-family: var(--font-sans);
	font-size: var(--text-eyebrow-size);
	font-weight: var(--text-eyebrow-weight);
	line-height: var(--text-eyebrow-line-height);
	letter-spacing: var(--text-eyebrow-letter-spacing);
	text-transform: uppercase;
}

.text-slider.is-marquee .swiper-wrapper {
	transition-timing-function: linear;
}

.text-slider__prev,
.text-slider__next {
	color: var(--color-brand-secondary);
	width: 2rem;
	height: 2rem;
	margin-top: 0;
	background: transparent;
	border: 0;
	padding: 0;
}

.text-slider__prev::after,
.text-slider__next::after {
	font-size: 1rem;
}

.text-slider__dots {
	bottom: 0.25rem;
}

.text-slider__dots .swiper-pagination-bullet {
	background: var(--color-brand-secondary);
}

@media (prefers-reduced-motion: reduce) {
	.text-slider.is-marquee .swiper-wrapper {
		transition-timing-function: ease;
	}
}
