/*
 * Climate Literacy carousel.
 *
 * Values come from the site's Elementor global variables so the section stays
 * on the same design tokens as the rest of the page; the fallbacks keep it
 * intact if a token is ever renamed.
 *
 * Layout is the comp's three columns: artwork, copy, rail. The rail strips
 * carry their own number, label and icon as artwork, so nothing here rotates
 * text.
 *
 * Paragraph margins are set through the container - see "Paragraph spacing"
 * below - because Astra outranks a bare class on every <p> in the content area.
 */

.nl-climate {
	display: flex;
	gap: 117px;
	align-items: center;
	padding-block: var(--space-3xl, 72px);
}

.nl-climate__slides {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

.nl-climate__slide {
	display: flex;
	flex: 1 1 auto;
	gap: 117px;
	align-items: center;
	min-width: 0;
}

.nl-climate__slide[hidden] {
	display: none;
}

/* The switch reads as a slide rather than a swap. */
.nl-climate__slide--entering {
	animation: nl-climate-enter 320ms ease-out both;
}

@keyframes nl-climate-enter {
	from { opacity: 0; transform: translateX(24px); }
	to   { opacity: 1; transform: translateX(0); }
}

/*
 * The four heroes are cut-outs with very different proportions - at 374px wide
 * they range from 307px tall (mangrove) to 639px (smoke). Left to themselves
 * they resize the column on every switch and shove the copy up and down with
 * it, so the box is fixed to the tallest and the artwork is centred inside it.
 */
.nl-climate__media {
	flex: 0 0 374px;
	width: 374px;
	max-width: 374px;
	height: 640px;
}

/*
 * Addressed through .nl-climate because Elementor resets `.elementor img
 * { height: auto }` at (0,1,1), which outranks a bare class. Without the extra
 * weight the artwork keeps its own height and the fixed box above does nothing.
 */
.nl-climate .nl-climate__hero {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.nl-climate__body {
	flex: 0 1 376px;
	max-width: 376px;
	color: var(--color-ink, #3c472e);
}

.nl-climate__number {
	color: var(--color-ink, #3c472e);
	font-family: var(--font-display, "Syne", sans-serif);
	font-size: 100px;
	font-weight: 500;
	/* Syne's figures are oldstyle and proportional by default: 3 4 5 7 9
	   drop below the baseline, 6 and 8 rise above it, and 1 is barely half
	   the width of 0. lnum lifts them all to cap height and tnum sets every
	   one to 0.55em, so changing slide cannot shift the layout. Both are
	   needed, and in that order: tnum alone substitutes tabular OLDSTYLE.
	   The "case" setting that stood here did nothing - Syne has no such
	   feature. */
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1;
}

.nl-climate__title {
	margin: 0 0 var(--space-md, 24px);
	color: var(--color-ink, #3c472e);
	font-family: var(--font-display, "Syne", sans-serif);
	font-size: var(--text-heading, 24px);
	font-weight: 600;
	line-height: var(--leading-heading, 30px);
}

.nl-climate__copy p {
	font-family: var(--font-sans, "ABC Repro", sans-serif);
	font-size: var(--text-body, 20px);
	line-height: 1.5rem;
}

.nl-climate__source {
	font-family: var(--font-sans, "ABC Repro", sans-serif);
	font-size: 10px;
	line-height: 15px;
	overflow-wrap: anywhere;
}

.nl-climate__source a {
	color: inherit;
	text-decoration: underline;
}

/* --- Paragraph spacing ---------------------------------------------------- */

/*
 * Astra ships `.entry-content p { margin-bottom: 1.6em }` at specificity
 * (0,2,1), which outranks a single class. Every paragraph below is therefore
 * addressed through .nl-climate__body as well, putting these at (0,3,0).
 *
 * Without it the number sat 1.6em - about 90px at the mobile size - off its
 * title, and the body copy quietly inherited 1.6em instead of its line-height.
 * Set margins here rather than on the rules above, so the reason they are
 * written this way stays next to the explanation.
 *
 * The paragraph gap tracks the line-height, so the space between paragraphs
 * reads as the single blank line the comp draws.
 */
.nl-climate .nl-climate__body .nl-climate__number {
	margin: 0 0 var(--space-md, 24px);
}

.nl-climate .nl-climate__body .nl-climate__copy p {
	margin: 0 0 1.5rem;
}

.nl-climate .nl-climate__body .nl-climate__copy p:last-child {
	margin-bottom: 0;
}

.nl-climate .nl-climate__body .nl-climate__source {
	margin: var(--space-md, 24px) 0 0;
}

/* --- Rail ----------------------------------------------------------------- */

.nl-climate__rail {
	display: flex;
	flex: 0 0 auto;
	gap: 15px;
	align-items: center;
	margin-inline-start: auto;
}

.nl-climate__tab {
	display: block;
	flex: 0 0 auto;
	width: 74px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	/* Set by the script when the rail resequences, so the strips travel to
	   their new places instead of jumping. */
	transition: transform 320ms ease, opacity 160ms linear;
}

.nl-climate__tab[hidden] {
	display: none;
}

.nl-climate__tab:hover,
.nl-climate__tab:focus-visible {
	opacity: var(--opacity-hover, 0.8);
}

.nl-climate__strip {
	display: block;
	width: 100%;
	height: auto;
}

/* Stands in for the strip on phones only. */
.nl-climate__tab-number {
	display: none;
}

.nl-climate--empty {
	padding: var(--space-md, 24px);
	color: var(--color-ink, #3c472e);
	font-family: var(--font-sans, sans-serif);
	font-size: var(--text-small, 18px);
}

.nl-climate .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Tablet --------------------------------------------------------------- */

@media (max-width: 1280px) {
	.nl-climate,
	.nl-climate__slide {
		gap: 64px;
	}

	.nl-climate {
		padding-block: var(--space-2xl, 58px);
	}

	.nl-climate__media {
		flex-basis: 280px;
		width: 280px;
		max-width: 280px;
		height: 480px;
	}

	.nl-climate__body {
		flex-basis: 320px;
		max-width: 320px;
	}

	.nl-climate__number {
		font-size: 72px;
	}

	.nl-climate__rail {
		gap: 12px;
	}

	.nl-climate__tab {
		width: 58px;
	}
}

/* --- Mobile --------------------------------------------------------------- */

@media (max-width: 900px) {
	.nl-climate,
	.nl-climate__slide {
		flex-direction: column;
		gap: 20px;
		align-items: flex-start;
	}

	/* section-body already carries 44px top and bottom on phones; the widget
	   adding its own doubled it. */
	.nl-climate {
		padding-block: 0;
	}

	/* Stacked here, so flex-basis is the height; the width has to be stated. */
	.nl-climate__media {
		flex-basis: auto;
		width: 240px;
		max-width: 240px;
		height: 410px;
		align-self: center;
	}

	.nl-climate__body {
		flex-basis: auto;
		max-width: 100%;
	}

	.nl-climate__number {
		font-size: 56px;
	}

	.nl-climate__copy p {
		font-size: 14px;
		line-height: var(--leading-tight, 20px);
	}

	.nl-climate .nl-climate__body .nl-climate__number {
		margin-bottom: 12px;
	}

	.nl-climate .nl-climate__body .nl-climate__copy p {
		margin-bottom: var(--leading-tight, 20px);
	}

	.nl-climate__rail {
		gap: 12px;
		align-self: stretch;
		margin-inline-start: 0;
	}

	/* The artwork gives way to the slide's number: a 44px square is a real
	   touch target, and the strips are unreadable at phone widths anyway. */
	.nl-climate__strip {
		display: none;
	}

	.nl-climate__tab {
		display: flex;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		border: var(--rule-thin, 1px) solid var(--color-ink, #3c472e);
	}

	.nl-climate__tab-number {
		display: block;
		color: var(--color-ink, #3c472e);
		font-family: var(--font-display, "Syne", sans-serif);
		font-size: 18px;
		font-weight: 500;
		font-variant-numeric: lining-nums tabular-nums;
		line-height: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nl-climate__slide--entering {
		animation: none;
	}

	.nl-climate__tab {
		transition: opacity 160ms linear;
	}
}