/*--------------------------------------------------------------
# Breaking News — Scrolling ticker bar
# Figma node 1:3
# Bar bg: #C0471A | Tag bg: #8B2F0F | Text: #FFFFFF
# Height: ~30px | Tag: 10px bold uppercase | Headline: 13px regular
--------------------------------------------------------------*/

.breaking-news {
	background-color: #C0471A;
	overflow: hidden;
}

/* Sticky variant — sticks just below the 4rem header */
.breaking-news--sticky {
	position: sticky;
	top: 4rem;
	z-index: 999;
}

/* Scrolling track — clips the animated list */
.breaking-news__track {
	display: flex;
	align-items: center;
	padding: 0.375rem 0;
}

/* The list — animated, width driven by content */
.breaking-news__list {
	display: flex;
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	flex-shrink: 0;
	animation: ticker-scroll 40s linear infinite;
}

/* Pause when hovering the track */
.breaking-news__track:hover .breaking-news__list {
	animation-play-state: paused;
}

@keyframes ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/* Individual item — wraps the link */
.breaking-news__item {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

/* Clickable link wraps tag pill + headline */
.breaking-news__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-family);
	font-size: 0.8125rem;
	font-weight: var(--font-weight-regular);
	color: #FFFFFF;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.15s ease;
}

.breaking-news__link:hover,
.breaking-news__link:focus {
	opacity: 0.8;
	color: #FFFFFF;
}

/* Category badge — darker pill */
.breaking-news__tag {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	background-color: #8B2F0F;
	border-radius: 0.1875rem;
	font-family: var(--font-family);
	font-size: 0.625rem;
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #FFFFFF;
	line-height: 1;
	flex-shrink: 0;
}



/* Separator dot between items */
.breaking-news__item::after {
	content: '·';
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.4);
	margin-left: 0.5rem;
	flex-shrink: 0;
}