/**
 * ccmg-archive-nav-slider.css
 *
 * Componente: Archive Nav Slider (prefijo BEM: ccmg-ans)
 * Diseño: Figma CCM web design 2026 — nodo 902:5544
 *
 * Spec extraído del Figma:
 *   - Pills de texto (sin imagen): h=25px, border-radius=100px, bg=#EEEEEE
 *   - Padding pill: 10px arriba · 16px lados · 5px abajo (asimétrico, óptico)
 *   - Tipografía: Founders Grotesk 500, 16px, lh=10px, color=#000
 *   - Gap entre pills: 10px
 *   - Padding horizontal del track: 16px
 *   - Separación track / progress bar: 10px
 *   - Progress bar: h=6px, border-radius=4px, color=#E60000
 */

/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

.ccmg-ans {
	--ccmg-ans-gap: 10px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px; /* separación entre track y progress bar */
}

/* =========================================================
   TRACK — lista scrollable horizontal
   ========================================================= */

.ccmg-ans__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--ccmg-ans-gap);
	padding: 0 16px;         /* padding-inline según Figma; override <ul> defaults */
	margin: 0;               /* override <ul> default margin */
	list-style: none;        /* override <ul> default list-style */
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	touch-action: pan-x pinch-zoom;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ccmg-ans__track::-webkit-scrollbar {
	display: none;
}

/* =========================================================
   ITEM WRAPPER — <li> como flex child
   ========================================================= */

.ccmg-ans__item-wrap {
	flex: 0 0 auto;
	padding: 0;
	margin: 0;
}

/* =========================================================
   ITEM — pill enlace
   ========================================================= */

.ccmg-ans__item {
	display: inline-flex;
	align-items: center;
	padding: 10px 16px 5px; /* Figma: 10 top · 16 lados · 5 bottom */
	background: #eeeeee;
	border-radius: 100px;
	text-decoration: none;
	color: #000000;
	white-space: nowrap;
	transition: background 0.18s ease, color 0.18s ease;
}

/* Hover: solo en dispositivos con puntero real (no touch) */
@media (hover: hover) and (pointer: fine) {
	.ccmg-ans__item:hover {
		background: #e0e0e0;
		color: #6b0020;
	}
}

/* Focus visible para teclado y asistivas */
.ccmg-ans__item:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
	background: #e0e0e0;
}

/* =========================================================
   LABEL — texto del pill
   ========================================================= */

.ccmg-ans__label {
	font-family: 'Founders Grotesk', 'Founder Grotesk CCM', sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 10px;
	letter-spacing: 0;
	color: inherit;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.ccmg-ans__label {
		font-size: 16px;
	}
}

/* =========================================================
   PROGRESS BAR — indicador de scroll
   ========================================================= */

.ccmg-ans__progress {
	width: 100%;
	height: 6px;
	position: relative;
	overflow: hidden;
}

.ccmg-ans__progress-thumb {
	position: absolute;
	top: 0;
	left: 0;
	height: 5px;
	border-radius: 100px;
	background: #e60000;
	will-change: width, transform;
	transition: width 0.1s ease, transform 0.1s ease;
}

/* Ocultar progress bar cuando el contenido no desborda */
.ccmg-ans--no-overflow .ccmg-ans__progress {
	visibility: hidden;
}

/* =========================================================
   TÍTULO OPCIONAL
   ========================================================= */

.ccmg-ans__title {
	margin: 0 0 8px;
	padding: 0;
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.ccmg-ans__track {
		scroll-behavior: auto;
	}

	.ccmg-ans__item,
	.ccmg-ans__progress-thumb {
		transition: none;
	}
}