/**
 * doral/news-slider — the "In the Media" card slider.
 *
 * Two card styles, both from the Figma variable set (Doral Renewables Design V1):
 *   --overlay  node 921:6404 — 560x400 cards, headline over a full-bleed image
 *   --stacked  node 1150:2035 — 405px cards, kicker/headline/date on white below a 220px image
 *
 * Shared by both: 32px gap between cards, 16px radius. Self-contained so the block does not
 * inherit anything from the active theme.
 *
 * The block paints no background and no outer padding — the surface colour and the section
 * spacing are the row's job, so the block can be dropped into a Kadence row and inherit it.
 * Card inner padding and the gap between the track and the controls are internal rhythm and
 * stay here.
 *
 * Selectors are doubled (.doral-slider .doral-slider__title) to outrank .entry-content h3 and
 * Kadence's per-block stylesheets regardless of load order — the same technique and the same
 * reason as doral-project-map. Never use !important.
 */

.doral-slider {
	--dns-primary: #005050;
	--dns-ink: #0e1a1a;
	--dns-ink-2: #2a3838;
	--dns-paper: #fff;

	--dns-s2: 16px;
	--dns-s3: 24px;
	--dns-s4: 32px;
	--dns-s8: 64px;
	--dns-s10: 80px;

	/*
	 * Space between the card track and the controls. Its own token rather than reusing a
	 * scale step, so the responsive rules below can tighten it without redefining what
	 * "space-10" means everywhere else.
	 */
	--dns-gap-controls: var(--dns-s10);

	--dns-radius: 16px;
	--dns-card-w: 560px;
	--dns-card-h: 400px;
	--dns-gap: var(--dns-s4);

	--dns-font: "proxima-nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--dns-gap-controls);
	font-family: var(--dns-font);
	color: var(--dns-ink);
}

.doral-slider *,
.doral-slider *::before,
.doral-slider *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Track
   --------------------------------------------------------------------------
   Cards start flush with the block's own left edge and the last one runs off the
   right, clipped by the scroll container. The inset comes from whatever row wraps
   the block, which is also why there is no scroll-padding to keep in sync.
   -------------------------------------------------------------------------- */

.doral-slider .doral-slider__viewport {
	position: relative;
	min-width: 0;
}

.doral-slider .doral-slider__track {
	display: flex;
	gap: var(--dns-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	/*
	 * The arrows and indicators move the track with a plain scrollLeft assignment, so the
	 * easing lives here. scrollTo({behavior:'smooth'}) is not usable: mandatory scroll-snap
	 * cancels a programmatic smooth scroll and the track simply never moves.
	 */
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.doral-slider .doral-slider__track::-webkit-scrollbar {
	display: none;
}

/* The track is focusable so it can be scrolled with the keyboard; make that visible. */
.doral-slider .doral-slider__track:focus-visible {
	outline: 2px solid var(--dns-primary);
	outline-offset: 4px;
}

.doral-slider .doral-slider__item {
	flex: 0 0 auto;
	width: var(--dns-card-w);
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.doral-slider .doral-slider__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: var(--dns-card-h);
	overflow: hidden;
	border-radius: var(--dns-radius);
	isolation: isolate;
	background: var(--dns-ink);
}

/*
 * The image, scrim and badge share a wrapper so the stacked variant can give them a fixed
 * height above the white body, while the overlay variant has them fill the whole card.
 */
.doral-slider--overlay .doral-slider__media {
	position: absolute;
	inset: 0;
}

.doral-slider .doral-slider__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Decorative: the headline is the accessible name of the link. */
	pointer-events: none;
	transition: transform 400ms ease;
}

.doral-slider .doral-slider__img--none {
	background: linear-gradient(160deg, var(--dns-primary) 0%, var(--dns-ink) 100%);
}

.doral-slider .doral-slider__card:hover .doral-slider__img {
	transform: scale(1.03);
}

/*
 * Scrim stops at 54% so the top half of the photograph stays clean, exactly as the design
 * specifies. Without it the 32px white headline is unreadable over a bright sky.
 */
.doral-slider .doral-slider__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 54%,
		rgba(0, 0, 0, 0.6) 77%,
		rgba(0, 0, 0, 0.85) 100%
	);
	pointer-events: none;
}

.doral-slider .doral-slider__badge {
	position: absolute;
	top: var(--dns-s2);
	right: var(--dns-s2);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--dns-primary);
	color: var(--dns-paper);
	pointer-events: none;
}

.doral-slider .doral-slider__badge svg {
	display: block;
	width: 20px;
	height: 20px;
}

/*
 * The video badge is a single 44px graphic that draws its own circle, so the wrapper must not
 * draw a second one behind it.
 */
.doral-slider .doral-slider__card.is-video .doral-slider__badge {
	width: 44px;
	height: 44px;
	background: none;
	color: var(--dns-primary);
}

.doral-slider .doral-slider__card.is-video .doral-slider__badge svg {
	width: 44px;
	height: 44px;
}

.doral-slider .doral-slider__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--dns-s2);
	padding: var(--dns-s4);
}

.doral-slider .doral-slider__title {
	margin: 0;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--dns-paper);
}

.doral-slider .doral-slider__link {
	color: inherit;
	text-decoration: none;
}

/*
 * The headline is the only link in the card, so the whole card can be clickable without a
 * second tab stop or a nested interactive element.
 */
.doral-slider .doral-slider__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: var(--dns-radius);
}

.doral-slider .doral-slider__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.doral-slider .doral-slider__link:focus-visible {
	outline: none;
}

.doral-slider .doral-slider__link:focus-visible::after {
	outline: 3px solid var(--dns-paper);
	outline-offset: -5px;
}

.doral-slider .doral-slider__excerpt {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Visually hidden, still announced. Block-local so the block stays self-contained. */
.doral-slider .doral-slider__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.doral-slider .doral-slider__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dns-s4);
}

/* Nothing to scroll — view.js sets this, and the controls would be inert. */
.doral-slider.is-static .doral-slider__footer {
	display: none;
}

.doral-slider .doral-slider__arrows {
	display: flex;
	gap: 12px;
}

.doral-slider .doral-slider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--dns-primary);
	border-radius: 50%;
	background: var(--dns-primary);
	color: var(--dns-paper);
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

.doral-slider .doral-slider__arrow svg {
	display: block;
	width: 20px;
	height: 20px;
}

.doral-slider .doral-slider__arrow:hover:not(:disabled) {
	background: var(--dns-ink);
	border-color: var(--dns-ink);
}

.doral-slider .doral-slider__arrow:focus-visible {
	outline: 2px solid var(--dns-ink);
	outline-offset: 3px;
}

/*
 * The design shows the unavailable direction as an outline button and the available one
 * filled, which is exactly the disabled/enabled pair. Kept legible rather than faded to a
 * ghost, so it never reads as a rendering glitch.
 */
.doral-slider .doral-slider__arrow:disabled {
	background: transparent;
	color: var(--dns-primary);
	cursor: default;
}

.doral-slider .doral-slider__indicators {
	display: flex;
	align-items: center;
	gap: 8px;
}

.doral-slider .doral-slider__indicators[hidden] {
	display: none;
}

.doral-slider .doral-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: rgba(0, 80, 80, 0.25);
	cursor: pointer;
	transition: width 200ms ease, background-color 200ms ease;
}

.doral-slider .doral-slider__dot.is-active {
	width: 24px;
	background: var(--dns-primary);
}

.doral-slider .doral-slider__dot:focus-visible {
	outline: 2px solid var(--dns-primary);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.doral-slider {
		--dns-gap-controls: 48px;
		--dns-card-w: 460px;
		--dns-card-h: 340px;
	}

	.doral-slider .doral-slider__title {
		font-size: 28px;
	}
}

@media (max-width: 780px) {
	.doral-slider {
		--dns-gap-controls: var(--dns-s4);
		--dns-gap: var(--dns-s2);
		--dns-card-w: 78vw;
		--dns-card-h: 300px;
	}

	.doral-slider .doral-slider__content {
		padding: var(--dns-s3);
	}

	.doral-slider .doral-slider__title {
		font-size: 22px;
	}

	.doral-slider .doral-slider__excerpt {
		-webkit-line-clamp: 2;
	}
}


/* --------------------------------------------------------------------------
   Stacked variant — Figma node 1150:2035
   -------------------------------------------------------------------------- */

.doral-slider--stacked {
	--dns-card-w: 405px;
	--dns-media-h: 220px;
	--dns-gap-controls: 48px;
}

.doral-slider--stacked .doral-slider__item {
	/* Cards sit on a stretch track so every body ends level, whatever the headline length. */
	display: flex;
}

.doral-slider--stacked .doral-slider__card {
	height: auto;
	width: 100%;
	justify-content: flex-start;
	overflow: visible;
	background: none;
	border-radius: 0;
}

.doral-slider--stacked .doral-slider__media {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	height: var(--dns-media-h);
	overflow: hidden;
	border-radius: var(--dns-radius) var(--dns-radius) 0 0;
	/*
	 * Several imported featured images are transparent PNGs (the Doral logo is used as a
	 * fallback). Without a surface here the section colour shows through and the card looks
	 * like it has no image area at all. The overlay variant gets this from the card's own
	 * dark background; this variant has none, so set it explicitly.
	 */
	background: var(--dns-paper);
}

.doral-slider--stacked .doral-slider__content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding: var(--dns-s4);
	background: var(--dns-paper);
	border-radius: 0 0 var(--dns-radius) var(--dns-radius);
}

.doral-slider--stacked .doral-slider__kicker {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 5.2px;
	text-transform: uppercase;
	color: var(--dns-ink-2);
}

.doral-slider--stacked .doral-slider__head {
	display: flex;
	flex-direction: column;
	gap: var(--dns-s2);
}

.doral-slider--stacked .doral-slider__title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--dns-ink);
}

.doral-slider--stacked .doral-slider__excerpt {
	color: var(--dns-ink-2);
}

.doral-slider--stacked .doral-slider__date {
	/* Bottoms out the date so a short headline does not leave it floating mid-card. */
	margin: auto 0 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 5.2px;
	text-transform: uppercase;
	color: var(--dns-ink-2);
}

.doral-slider--stacked .doral-slider__link::after {
	border-radius: var(--dns-radius);
}

.doral-slider--stacked .doral-slider__link:focus-visible::after {
	outline-color: var(--dns-ink);
	outline-offset: 2px;
}

/* Controls in this design are bare rotated glyphs, not filled buttons. */
.doral-slider--stacked .doral-slider__footer {
	justify-content: flex-start;
	gap: 8px;
}

.doral-slider--stacked .doral-slider__arrows {
	gap: 8px;
}

.doral-slider--stacked .doral-slider__arrow {
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--dns-ink);
}

.doral-slider--stacked .doral-slider__arrow svg {
	width: 48px;
	height: 48px;
}

/* One asset serves both directions, exactly as the design does it. */
.doral-slider--stacked .doral-slider__arrow--prev svg {
	transform: rotate(180deg);
}

.doral-slider--stacked .doral-slider__arrow:hover:not(:disabled) {
	background: none;
	color: var(--dns-primary);
}

.doral-slider--stacked .doral-slider__arrow:disabled {
	background: none;
	color: var(--dns-ink);
	opacity: 0.3;
}

@media (max-width: 1200px) {
	.doral-slider--stacked {
		--dns-card-w: 360px;
		--dns-media-h: 200px;
	}

	.doral-slider--stacked .doral-slider__content {
		gap: 40px;
	}

	.doral-slider--stacked .doral-slider__title {
		font-size: 19px;
	}
}

@media (max-width: 780px) {
	.doral-slider--stacked {
		--dns-card-w: 78vw;
		--dns-media-h: 180px;
	}

	.doral-slider--stacked .doral-slider__content {
		gap: 32px;
		padding: var(--dns-s3);
	}

	.doral-slider--stacked .doral-slider__title {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.doral-slider .doral-slider__track {
		scroll-behavior: auto;
	}

	.doral-slider .doral-slider__img,
	.doral-slider .doral-slider__arrow,
	.doral-slider .doral-slider__dot {
		transition: none;
	}

	.doral-slider .doral-slider__card:hover .doral-slider__img {
		transform: none;
	}
}