/**
 * CCMG Brands Strip
 *
 * Estilo de la tira horizontal de marcas (pills/chips).
 * Scroll nativo CSS: no requiere JavaScript.
 *
 * Custom properties controlables desde Elementor:
 *   --ccmg-bs-gap          Gap entre pills (default: 10px)
 *   --ccmg-bs-bg           Fondo de cada pill (default: #1a1a1a)
 *   --ccmg-bs-bg-hover     Fondo al hover (default: #333333)
 *   --ccmg-bs-color        Color de texto (default: #ffffff)
 *   --ccmg-bs-radius       Border-radius (default: 9999px = cápsula completa)
 *   --ccmg-bs-padding-v    Padding vertical (default: 0.45em)
 *   --ccmg-bs-padding-h    Padding horizontal (default: 1.1em)
 *   --ccmg-bs-font-size    Tamaño de fuente (default: 0.875rem)
 */

/* ── Contenedor raíz ────────────────────────────────────────────── */
.ccmg-brands-strip {
	--ccmg-bs-gap:        10px;
	--ccmg-bs-bg:         #1a1a1a;
	--ccmg-bs-bg-hover:   #333333;
	--ccmg-bs-color:      #ffffff;
	--ccmg-bs-radius:     9999px;
	--ccmg-bs-padding-v:  0.45em;
	--ccmg-bs-padding-h:  1.1em;
	--ccmg-bs-font-size:  0.875rem;

	position: relative;
}

/* ── Track de scroll horizontal ─────────────────────────────────── */
.ccmg-brands-strip__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var( --ccmg-bs-gap );

	overflow-x: auto;
	-webkit-overflow-scrolling: touch;

	/* Scroll suave */
	scroll-behavior: smooth;

	/* Snap suave: cada pill se ancla al inicio del track */
	scroll-snap-type: x mandatory;

	/* Padding derecho para efecto "peek" del siguiente item */
	padding-right: 2.5rem;
	/* Padding inferior para evitar que la scrollbar tape contenido en sistemas que la muestran */
	padding-bottom: 2px;

	/* Ocultar scrollbar visualmente (el scroll sigue funcionando) */
	scrollbar-width: none; /* Firefox */
}

.ccmg-brands-strip__track::-webkit-scrollbar {
	display: none; /* Chrome, Safari */
}

/* ── Pill individual ────────────────────────────────────────────── */
.ccmg-brands-strip__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;

	flex: 0 0 auto; /* no crecer, no encoger, tamaño según contenido */

	padding: var( --ccmg-bs-padding-v ) var( --ccmg-bs-padding-h );
	background: var( --ccmg-bs-bg );
	color: var( --ccmg-bs-color );
	border-radius: var( --ccmg-bs-radius );

	text-decoration: none;
	white-space: nowrap;
	font-size: var( --ccmg-bs-font-size );
	font-weight: 500;
	line-height: 1.4;

	/* Snap al inicio del pill cuando el usuario hace scroll */
	scroll-snap-align: start;

	transition: background-color 0.18s ease, color 0.18s ease;
	cursor: pointer;
}

.ccmg-brands-strip__pill:hover {
	background: var( --ccmg-bs-bg-hover );
	color: var( --ccmg-bs-color );
	text-decoration: none;
}

.ccmg-brands-strip__pill:focus-visible {
	outline: 2px solid var( --ccmg-bs-bg-hover );
	outline-offset: 3px;
}

/* ── Nombre del término ─────────────────────────────────────────── */
.ccmg-brands-strip__name {
	/* Hereda fuente y color del pill. */
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media ( max-width: 767px ) {
	.ccmg-brands-strip__pill {
		padding: 1px 6px 2px 6px;
		font-size: 9px;
	}
}

/* ── Logo de la marca (opcional, activable desde el widget) ─────── */
.ccmg-brands-strip__logo {
	display: block;
	width: auto;
	height: 1.2em;      /* relativo al font-size del pill */
	max-width: 60px;
	object-fit: contain;
	filter: brightness( 0 ) invert( 1 ); /* invertir a blanco sobre fondo oscuro */
	flex-shrink: 0;
}