/* Matches the map band: the same --c-band-* gradient home.css applies to
   .map-section in "Alternating section bands". Tokens live in theme.css. */
.ni-section {
	--ni-col-h: 580px;

	background: linear-gradient(
		180deg,
		var(--c-band-from) 0%,
		var(--c-band-via) 55%,
		var(--c-band-to) 100%
	);
	padding: 56px 0;
	border-color: transparent;
}

/* ------------------------------------------------------------- heading -- */

/* Heading reuses the shared .section-heading / .section-kicker pair from
   home.css, so the type, colour, uppercase and rules around it are identical to
   every other home section title. Only the size scale and the extra bottom air
   are local: home.css sizes each kicker per section, and this band sits between
   two sections so it needs more room than the shared 10px. */
.ni-head {
	margin: 0 0 34px;
}

/* Matched to the other sections' kicker scale (home.css: 32 / 26 / 22 / 18). */
.ni-section .section-heading .section-kicker {
	font-size: 32px;
}

/* ---------------------------------------------------------- 2-column grid -- */

.ni-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	gap: 30px;
	align-items: start;
}

.ni-news {
	min-width: 0;
}

/* ------------------------------------------------------- column heading -- */

/* The Articles column has no side rule: the grid gap already separates it
   from the news column, and the orange bar only competed with the headings. */
.ni-article {
	min-width: 0;
}

/* --------------------------------------------------- shared scroll boxes -- */

/* The news column scrolls. The Articles column is an owl-carousel now, so it
   has no scroll box here - article.css styles its own. */
.ni-scroll {
	scrollbar-width: thin;
	scrollbar-color: var(--c-primary-light) transparent;
	overscroll-behavior: contain;
	/* Reserve the gutter so showing the bar cannot shift the layout. */
	scrollbar-gutter: stable;
}

.ni-scroll::-webkit-scrollbar {
	width: 8px;
}

.ni-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.ni-scroll::-webkit-scrollbar-thumb {
	background: var(--c-primary-light);
	border-radius: 8px;
}

.ni-scroll::-webkit-scrollbar-thumb:hover {
	background: var(--c-primary);
}

@media (min-width: 992px) {
	.ni-scroll {
		height: var(--ni-col-h);
		overflow-y: auto;
		/* The scroll container clips at its padding box. Without inner padding a
		   hovered top card's shadow is sliced off hard right under the column
		   heading, so give it room to bleed. */
		padding: 16px 10px;
	}
}

/* ------------------------------------------------------------ shared bits -- */

.ni-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
}

.ni-chip {
	display: inline-block;
	padding: 3px 9px;
	background: var(--c-surface);
	border: 1px solid var(--c-border-muted);
	border-radius: 6px;
	color: var(--c-text-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.ni-chip--primary {
	background: var(--c-primary-soft);
	border-color: var(--c-primary-light);
	color: var(--c-primary-darker-alt);
}

.ni-date {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--c-text-muted);
	font-size: 12px;
	white-space: nowrap;
}

/* ------------------------------------------------------------- lead card -- */

.ni-hero {
	background: var(--c-bg);
	border: 1px solid var(--c-border-warm);
	border-radius: 14px;
	box-shadow: var(--c-shadow-warm);
	overflow: hidden;
	transition:
		transform 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease;
}

.ni-hero:hover {
	transform: translateY(-3px);
	border-color: var(--c-border-warm-hover);
	box-shadow: var(--c-shadow-warm-hover);
}

.ni-hero-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Shorter banner than the old 21/9 so the lead card stays compact and more of
   the list below it fits in the column's scroll box. */
.ni-hero-media {
	position: relative;
	aspect-ratio: 3 / 1;
	background: var(--c-surface);
	overflow: hidden;
}

.ni-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}

.ni-hero:hover .ni-hero-media img {
	transform: scale(1.04);
}

.ni-hero-media.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--c-surface-alt), var(--c-bg-page));
}

.ni-hero-fallback {
	font-size: 32px;
	color: var(--c-text-subtle);
}

.ni-hero-flag {
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	background: var(--c-primary);
	color: var(--c-primary-contrast);
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.3px;
}

.ni-hero-body {
	padding: 12px 14px 13px;
}

.ni-hero-title {
	margin: 8px 0 6px;
	color: var(--c-text-strong);
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.36;
	letter-spacing: -0.2px;
}

.ni-hero:hover .ni-hero-title {
	color: var(--c-primary-darker-alt);
}

.ni-excerpt {
	margin: 0 0 9px;
	color: var(--c-text-body);
	font-size: 12.5px;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ni-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--c-primary-darker-alt);
	font-size: 12px;
	font-weight: 600;
}

.ni-cta i {
	transition: transform 0.25s ease;
}

.ni-hero:hover .ni-cta i {
	transform: translateX(5px);
}

/* ------------------------------------------------------- remaining list -- */

.ni-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ni-list-link {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 11px 9px 9px;
	background: var(--c-bg);
	border: 1px solid var(--c-border-warm);
	border-radius: 14px;
	color: inherit;
	text-decoration: none;
	box-shadow: var(--c-shadow-warm);
	transition:
		border-color 0.22s ease,
		transform 0.22s ease,
		box-shadow 0.22s ease;
}

.ni-list-link:hover {
	transform: translateX(3px);
	border-color: var(--c-border-warm-hover);
	box-shadow: var(--c-shadow-warm-hover);
}

.ni-list-media {
	flex: none;
	width: 54px;
	height: 54px;
	border-radius: 9px;
	overflow: hidden;
	background: var(--c-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-text-subtle);
	font-size: 17px;
}

.ni-list-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ni-list-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ni-list-title {
	color: var(--c-text-strong);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ni-list-link:hover .ni-list-title {
	color: var(--c-primary-darker-alt);
}

.ni-list-arrow {
	flex: none;
	color: var(--c-text-subtle);
	font-size: 11px;
	transition:
		color 0.22s ease,
		transform 0.22s ease;
}

.ni-list-link:hover .ni-list-arrow {
	color: var(--c-primary);
	transform: translateX(3px);
}

/* --------------------------------------------------------------- states -- */

.ni-hero:focus-visible,
.ni-list-link:focus-visible {
	outline: 3px solid var(--c-primary-ring);
	outline-offset: 3px;
	border-radius: 12px;
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1199.98px) {
	.ni-section .section-heading .section-kicker {
		font-size: 26px;
		letter-spacing: 0.8px;
	}
}

@media (max-width: 991px) {
	.ni-section {
		padding: 46px 0;
	}

	.ni-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	/* Stacked: the column no longer carries a side rule. */
	.ni-article {
		padding-left: 0;
	}

	/* Hand scrolling back to the page now that the columns stack. The scroll-box
	   padding existed only to stop the shadow clipping, so drop it. */
	.ni-scroll {
		height: auto;
		overflow: visible;
		padding: 0;
	}

	.ni-section .section-heading .section-kicker {
		font-size: 22px;
		letter-spacing: 0.6px;
	}

	.ni-hero-media {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 575px) {
	.ni-head {
		margin-bottom: 26px;
	}

	.ni-section .section-heading .section-kicker {
		font-size: 18px;
		letter-spacing: 0.4px;
	}

	.ni-hero-body {
		padding: 13px 14px 15px;
	}

	.ni-hero-title {
		font-size: 0.98rem;
	}

	.ni-list-media {
		width: 46px;
		height: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ni-hero,
	.ni-hero-media img,
	.ni-list-link,
	.ni-cta i,
	.ni-list-arrow {
		transition: none;
	}

	.ni-hero:hover,
	.ni-list-link:hover {
		transform: none;
	}
}