/* Content Slider Block: full-width row of cards — title and text on a
   coloured panel beside an image — with the current card in the middle and
   its neighbours peeking in at the sides. The slider itself is the shared
   card slider (components/sliders.css); this sets the card width and look.
   Put it in a full-width Group to give the section its background. */
.content-slider-block {
	--gap: 40px;
	--rows: 1;
	--slide: min(1100px, 100vw - 2 * var(--padding-x));

	margin-bottom: 0 !important;
	margin-top: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;

	@media (width <= 992px) {
		--gap: 16px;
		--slide: calc(100vw - 60px);
	}
}

/* Cards are a fixed width (plus the gap) rather than a share of the row */
.content-slider-block .card-slider.is-active .card-slider-track {
	grid-auto-columns: calc(var(--slide) + var(--gap));
}

/* A single card, not a slider: just centred */
.content-slider:not(.is-active) .content-slider-track {
	display: grid;
	grid-template-columns: var(--slide);
	justify-content: center;
}


/* Card: coloured text panel beside the image */
.content-slide {
	display: grid;
	grid-template-columns: 52fr 48fr;
	min-height: 590px;

	/* The scroll reveal (assets/js/80-gsap.js) moves cards with the
	   `translate` property, leaving `transform` free for the slider's loop */
	translate: 0 var(--reveal-y, 0px);

	.text {
		border-radius: 8px 0 0 8px;
		color: var(--wp--preset--color--light-green);
		padding: 95px 65px 80px;
	}

	&.is-green .text {
		background-color: var(--wp--preset--color--green);
	}

	&.is-orange .text {
		background-color: var(--wp--preset--color--orange);
	}

	&.is-dark-green .text {
		background-color: var(--wp--preset--color--dark-green);
	}

	/* Light panel, so dark text */
	&.is-light-green .text {
		background-color: var(--wp--preset--color--light-green);
		color: var(--wp--preset--color--green);
	}

	.title {
		color: inherit;
		font-size: 30px !important;
		font-weight: 900;
		margin: 0;
		text-transform: uppercase;
	}

	.content {
		margin-top: 70px;

		h2 {
			color: inherit;
			font-size: 30px !important;
			font-weight: 900;
			text-transform: uppercase;
		}

		p {
			font-size: 18px;
			line-height: 2;
			margin: 0;
		}

		/* One blank line between paragraphs (trimmed to the text, so two
		   line heights less the cap height) */
		p + p {
			margin-top: 60px;
		}

		a {
			color: inherit;
			text-underline-offset: 5px;
		}
	}

	/* The card starts at 590px and grows with its text. The image just
	   fills whatever height that gives — positioned out of the flow so its
	   own size never stretches the card. */
	.image {
		border-radius: 0 8px 8px 0;
		overflow: hidden;
		position: relative;

		img {
			height: 100%;
			inset: 0;
			object-fit: cover;
			position: absolute;
			width: 100%;
		}
	}

	/* Stacked: image on top, then the text */
	@media (width <= 992px) {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		min-height: 0;

		.image {
			aspect-ratio: 4 / 3;
			border-radius: 8px 8px 0 0;
			grid-row: 1;
		}

		.text {
			border-radius: 0 0 8px 8px;
			padding: 32px 32px 40px;
		}

		.title {
			font-size: 24px !important;
		}

		.content {
			margin-top: 24px;

			p + p {
				margin-top: 1.5em;
			}
		}
	}
}


/* Arrows over the peeking neighbours, centred in that strip. Phones swipe. */
.content-slider-block .card-slider.is-active .card-slider-arrow {
	background-color: var(--wp--preset--color--dark-green);
	border-radius: 50%;
	color: var(--wp--preset--color--light-green);
	height: 48px;
	width: 48px;

	svg {
    height: 22px;
    width: 12px;
	}

	&.prev {
		left: calc((100% - var(--slide)) / 4 - 24px);
		@media (width <= 992px) {
			left: -8px;
		}
	}

	&.next {
		right: calc((100% - var(--slide)) / 4 - 24px);
		@media (width <= 992px) {
			right: -8px;
		}
	}

	&:hover {
		color: var(--wp--preset--color--orange);
	}

}