/*
 * NewsForge Newsroom blocks — minimal front-end styling.
 * Themes are expected to style further using these BEM classes.
 */

.nf-block-placeholder {
	padding: 12px 14px;
	border: 1px dashed currentColor;
	border-radius: 4px;
	opacity: 0.7;
	font-size: 0.875em;
}

/* Breaking ticker — CSS-only marquee. */
.nf-breaking-ticker {
	display: flex;
	align-items: center;
	gap: 0.75em;
	overflow: hidden;
	padding: 0.5em 0.75em;
	border: 1px solid currentColor;
	border-radius: 4px;
}

.nf-breaking-ticker__label {
	flex: 0 0 auto;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.8em;
}

.nf-breaking-ticker__viewport {
	flex: 1 1 auto;
	overflow: hidden;
}

.nf-breaking-ticker__track {
	display: flex;
	gap: 2.5em;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
	will-change: transform;
	animation: nf-ticker 32s linear infinite;
}

.nf-breaking-ticker:hover .nf-breaking-ticker__track,
.nf-breaking-ticker:focus-within .nf-breaking-ticker__track {
	animation-play-state: paused;
}

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

@media ( prefers-reduced-motion: reduce ) {
	.nf-breaking-ticker__track {
		animation: none;
		white-space: normal;
		flex-wrap: wrap;
		gap: 0.75em 2em;
	}
}

/* Lists */
.nf-trending__list,
.nf-most-read__list,
.nf-story-cluster__list,
.nf-key-takeaways__list,
.nf-sources__list {
	margin: 0.5em 0;
	padding-left: 1.25em;
}

.nf-trending__list {
	list-style: none;
	padding-left: 0;
}

.nf-trending__item,
.nf-most-read__item,
.nf-story-cluster__item,
.nf-key-takeaways__item,
.nf-sources__item {
	margin: 0.35em 0;
}

.nf-trending__meta,
.nf-most-read__meta {
	display: block;
	font-size: 0.8em;
	opacity: 0.7;
}

/* Card grids */
.nf-related-stories__grid {
	display: grid;
	grid-template-columns: repeat( var( --nf-columns, 2 ), minmax( 0, 1fr ) );
	gap: 1em;
	margin: 0.5em 0;
	padding: 0;
	list-style: none;
}

.nf-related-stories__image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

.nf-related-stories__link {
	display: block;
	margin-top: 0.35em;
	font-weight: 600;
}

@media ( max-width: 600px ) {
	.nf-related-stories__grid {
		grid-template-columns: 1fr;
	}
}

/* Story cluster */
.nf-story-cluster__list {
	list-style: none;
	padding-left: 0;
	border-left: 2px solid currentColor;
}

.nf-story-cluster__item {
	padding-left: 0.85em;
}

.nf-story-cluster__item--primary .nf-story-cluster__link {
	font-weight: 700;
}

.nf-story-cluster__time {
	font-size: 0.8em;
	opacity: 0.7;
}

/* Article meta */
.nf-article-meta__subtitle {
	font-size: 1.15em;
	opacity: 0.85;
}

.nf-article-meta__summary-title {
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.nf-article-meta__reading-time {
	font-size: 0.85em;
	opacity: 0.75;
}

/* FAQ */
.nf-faq__item {
	border-bottom: 1px solid currentColor;
	padding: 0.5em 0;
}

.nf-faq__question {
	cursor: pointer;
	font-weight: 600;
}

.nf-faq__question:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Breadcrumbs */
.nf-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.85em;
}

.nf-breadcrumbs__item + .nf-breadcrumbs__item::before {
	content: "/";
	margin-right: 0.4em;
	opacity: 0.5;
}

/* Sources */
.nf-source-attribution {
	font-size: 0.85em;
	opacity: 0.8;
}