/* ==========================================================================
   Articles column carousel.

   ONE full-height card per slide, moved left to right with the nav arrows
   under the card (initialised as .article-slider in partials/script.php).

   Every card is exactly --ni-card-h tall regardless of how much copy it holds,
   so slides never resize as you move between them. Tune the one variable to
   change every card at once; it is stepped down on narrower screens.
   ========================================================================== */

.article-slider {
	--ni-card-h: 440px;
	position: relative;
}

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

.ni-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: var(--ni-card-h);
	padding: 15px;
	background: var(--c-bg);
	border: 1px solid var(--c-border-warm);
	border-radius: 14px;
	box-shadow: var(--c-shadow-warm);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.ni-card:hover {
	border-color: var(--c-border-warm-hover);
	box-shadow: var(--c-shadow-warm-hover);
}

/* ---------------------------------------------------------------- scroll -- */

/* The card keeps the fixed height and the shadow; only the copy scrolls, so a
   long article can never grow the card or clip its own shadow. The media
   banner stays put above it. */
.ni-card-scroll {
	flex: 1 1 auto;
	min-height: 0;
	/* Side room so the scrollbar does not sit flush against the card edge. */
	margin: 0 -5px;
	padding: 0 5px 2px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--c-primary-light) transparent;
}

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

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

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

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

/* ----------------------------------------------------------------- media -- */

/* The image is shown whole - never cropped. The box has no fixed height, so
   the picture takes its own aspect ratio and whatever is left of the fixed
   card height is left to the copy below it (which scrolls if it runs out).
   max-height is only a guard against a very tall source image squeezing the
   text away; object-fit keeps even that case uncropped, just letterboxed. */
.ni-card-media {
	position: relative;
	flex: none;
	width: 100%;
	max-height: 210px;
	border-radius: 13px;
	overflow: hidden;
	background: var(--c-surface);
}

.ni-card-media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 210px;
	object-fit: contain;
	transition: transform 0.4s ease;
}

.ni-card:hover .ni-card-media img {
	transform: scale(1.05);
}

/* ------------------------------------------------------------------ body -- */

.ni-card-body {
	min-width: 0;
}

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

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

.ni-card-text {
	margin: 0 0 7px;
	color: var(--c-text-body);
	font-size: 13.2px;
	line-height: 1.58;
}

.ni-card-text:last-child {
	margin-bottom: 0;
}

.ni-card-points {
	list-style: none;
	margin: 9px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ni-card-points li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	color: var(--c-text);
	font-size: 12.5px;
	line-height: 1.5;
}

.ni-card-points i {
	flex: none;
	margin-top: 4px;
	color: var(--c-primary-darker-alt);
	font-size: 11px;
}

/* ------------------------------------------------------------------- nav -- */

/* Owl puts .owl-nav before .owl-dots, so the arrows sit above the dots. */
.article-slider .owl-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
}

.article-slider .owl-nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--c-border-warm);
	border-radius: 50%;
	background: var(--c-bg);
	color: var(--c-text-strong);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

.article-slider .owl-nav button:hover,
.article-slider .owl-nav button:focus-visible {
	background: var(--primary);
	border-color: var(--primary);
	color: #ffffff;
}

.article-slider .owl-nav button:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.article-slider .owl-nav button:disabled {
	opacity: 0.4;
	cursor: default;
}

.article-slider .owl-nav button:disabled:hover {
	background: var(--c-bg);
	border-color: var(--c-border-warm);
	color: var(--c-text-strong);
}

/* ------------------------------------------------------------------ dots -- */

.article-slider .owl-dots {
	margin-top: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.article-slider .owl-dot span {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(17, 24, 39, 0.2);
	transition: all 0.25s ease;
}

.article-slider .owl-dot.active span {
	width: 32px;
	border-radius: 999px;
	background: var(--primary);
}

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

/* Columns stack below 992px. The card stays a fixed size - only the height
   steps down a little so it is not overly tall on a single-column layout. The
   media box is left alone so images keep their own aspect ratio. */
@media (max-width: 991px) {
	.article-slider {
		--ni-card-h: 425px;
	}
}

@media (max-width: 767px) {
	.article-slider {
		--ni-card-h: 410px;
	}

	.ni-card {
		padding: 14px;
	}

	.ni-card-title {
		font-size: 0.99rem;
	}
}

@media (max-width: 575px) {
	.article-slider {
		--ni-card-h: 400px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ni-card,
	.ni-card-media img {
		transition: none;
	}

	.ni-card:hover .ni-card-media img {
		transform: none;
	}
}