/**
 * Desktop slider block style — FRONT-END ONLY.
 *
 * A single-item carousel (one card per view on every breakpoint) with pagination
 * dots + prev/next arrows, powered by the theme's bundled Swiper 5.1.0. The carousel
 * is built by `js/featured-content-slider.js`.
 *
 * This stylesheet is hand-served and enqueued only on the front end (see
 * `inc/gutenberg.php`), deliberately NOT via the T2 block-styles auto-enqueue, so the
 * block editor's appearance is unchanged when the "Desktop slider" style is applied
 * (the pre-init one-card-per-view state below would otherwise hide sibling cards in
 * the editor and make them hard to edit).
 *
 * Design values below were assumed in the absence of a pixel-level spec — the hard
 * numbers given were the image crops (desktop 1548 × 870, mobile 376 × 440). Colours,
 * spacing, radii and the content-box overlap are best-effort from the reference
 * screenshots and should be reviewed against the design.
 */
.t2-featured-content-layout.is-style-desktop-slider {
	--t2-featured-slider-max-width: 1548px;
	--t2-featured-slider-accent: var(--wp--preset--color--jacarta, #4c3477);
	--t2-featured-slider-content-bg: var(--wp--preset--color--white, #fff);

	display: block;

	&,
	&.alignwide {
		margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
		margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
		max-width: var(--t2-featured-slider-max-width);

		@media (min-width: 1548px) {
			margin-left: auto !important;
			margin-right: auto !important;
		}
	}
}

/* Pre-init: simple horizontal strip to avoid FOUC/CLS before Swiper boots. */
.t2-featured-content-layout.is-style-desktop-slider:not(.is-swiper-initialized) {
	display: flex;
	gap: var(--spacing--m, 1.5rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.t2-featured-content-layout.is-style-desktop-slider:not(.is-swiper-initialized) > * {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

/* Swiper container. */
.t2-featured-content-layout.is-style-desktop-slider .swiper-container {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.t2-featured-content-layout.is-style-desktop-slider .swiper-slide {
	position: relative;
	height: auto;
	box-sizing: border-box;
}

/* Featured image, capped at the bespoke desktop max-width and centred. */
.t2-featured-content-layout.is-style-desktop-slider .wp-block-t2-post-featured-image {
	max-width: var(--t2-featured-slider-max-width);
	margin: 0;
}

.t2-featured-content-layout.is-style-desktop-slider .wp-block-t2-post-featured-image img {
	display: block;
	width: 100%;
	/* Desktop crop from design: 1548 × 870. */
	aspect-ratio: 1548 / 870;
	object-fit: cover;
}

/* White content box. On desktop it overlaps the image's bottom-left corner. */
.t2-featured-content-layout.is-style-desktop-slider .t2-featured-slider__content {
	background-color: var(--t2-featured-slider-content-bg);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: relative;
	top: -48px;
	width: calc(100% - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right));
	left: var(--wp--style--root--padding-left);

	@media (min-width: 700px) {
		position: relative;
		z-index: 1;
		max-width: 32rem;
		margin-top: -6rem;
		margin-inline-start: max(1rem, calc((100% - var(--t2-featured-slider-max-width)) / 2));
	}

	@media (min-width: 1276px) {
		margin-left: 0;
		margin-inline-start: 0;
		left: calc((100vw - var(--wp--style--global--wide-size))/2);
	}

	@media (min-width: 1548px) {
		left: calc((100% - var(--wp--style--global--wide-size))/2);
	}

	& > * {
		margin: 0 !important;
	}
}

/* Eyebrow: uppercase, letter-spaced accent label. */
.t2-featured-content-layout.is-style-desktop-slider .t2-featured-slider__eyebrow {
	display: block;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 500;
	color: var(--t2-featured-slider-accent);
}

/* Serif title. */
.t2-featured-content-layout.is-style-desktop-slider .wp-block-t2-post-title {
	font-family: var(--wp--preset--font-family--poynter-oldstyle-display, Georgia, "Times New Roman", serif);
	margin: 0;
	font-size: 28px;
}

/* Static read-more link. */
.t2-featured-content-layout.is-style-desktop-slider .t2-featured-slider__link {
	margin: 0;
	color: #892F43;
	text-decoration: underline;
	font-weight: 400;
	font-size: 18px;
}

/* Controls row: dots then arrows, right-aligned below the image. */
.t2-featured-content-layout.is-style-desktop-slider .swiper-pagination {
	position: static;
	display: inline-flex;
	gap: 0.5rem;
	width: auto;
	margin-left: calc(var(--wp--style--root--padding-left) + 24px);

	@media (min-width: 1100px) {
		margin-left: 0;
		position: absolute;
		bottom: 80px;
		left: auto;
		right: 360px;
	}

	@media (min-width: 1276px) {
		right: calc((100vw - var(--wp--style--global--wide-size))/2 + 200px);
	}
	@media (min-width: 1548px) {
		right: calc((100% - var(--wp--style--global--wide-size))/2 + 200px);
	}
}

.t2-featured-content-layout.is-style-desktop-slider .t2-featured-slider__nav {
	appearance: none;
	background: transparent;
	border: none;
	color: inherit;
	padding: 0;
	cursor: pointer;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 28px;
	top: auto;
	left: auto;
	margin: 0;

	@media (min-width: 1100px) {
		bottom: 74px;
	}
}

.t2-featured-content-layout.is-style-desktop-slider .t2-featured-slider__nav.swiper-button-prev {
	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><rect width="24" height="24" transform="matrix(-1 0 0 1 24 0)" fill="white"/><path d="M21 12L3 12" stroke="%230A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 5L3 12L10 19" stroke="%230A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	right: calc(var(--wp--style--root--padding-left) + 64px);

	@media (min-width: 1276px) {
		right: calc((100vw - var(--wp--style--global--wide-size))/2 + 40px);
	}
	@media (min-width: 1548px) {
		right: calc((100% - var(--wp--style--global--wide-size))/2 + 40px);
	}
}

.t2-featured-content-layout.is-style-desktop-slider .t2-featured-slider__nav.swiper-button-next {
	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><rect width="24" height="24" fill="white"/><path d="M3 12L21 12" stroke="%230A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 5L21 12L14 19" stroke="%230A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	right: calc(var(--wp--style--root--padding-left) + 24px);

	@media (min-width: 1276px) {
		right: calc((100vw - var(--wp--style--global--wide-size))/2);
	}
	@media (min-width: 1548px) {
		right: calc((100% - var(--wp--style--global--wide-size))/2);
	}
}

.t2-featured-content-layout.is-style-desktop-slider .t2-featured-slider__nav:focus-visible {
	outline: 2px solid var(--t2-featured-slider-accent);
	outline-offset: 2px;
}

/* Mobile layout: content stacked directly below the full-bleed image. */
@media (max-width: 699px) {
	.t2-featured-content-layout.is-style-desktop-slider .t2-featured-slider__content {
		margin-top: 0;
	}

	/* Mobile crop from design: 376 × 440. */
	.t2-featured-content-layout.is-style-desktop-slider .wp-block-t2-post-featured-image img {
		aspect-ratio: 376 / 440;
	}
}