.dpi-story-slider {
	--dpi-story-active-h: 784.83px;
	--dpi-story-inactive-h: 501.56px;
	--dpi-avatar-size: 100px;
	--dpi-story-visual-gap: 32px;
	position: relative;
}

/* Arrows are absolutely positioned (below), so the swiper can use the full widget width. */
.dpi-story-slider__swiper {
	overflow: hidden;
	width: 100%;
	height: var( --dpi-story-active-h );
}

.dpi-story-slider__swiper .swiper-wrapper {
	align-items: center;
}

/* story-slider.js uses a fixed slidesPerView (not 'auto') — every slide box stays the same uniform
   width regardless of active state. The card is centered inside via position:absolute (below), not
   flexbox, so its own grow/shrink transition is purely visual overflow and never depends on matching
   up with Swiper's spaceBetween margin between slide boxes (that math left a visible gap before). */
.dpi-story-slider__swiper .swiper-slide {
	position: relative;
	height: 100%;
	overflow: visible;
}

.dpi-story-slider__card {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: auto;
	height: var( --dpi-story-inactive-h );
	aspect-ratio: 3 / 5;
	overflow: hidden;
	background-color: var(--dpi-lime-fg);
	transition: height 0.4s ease, transform 0.4s ease;
	z-index: 1;
}

.swiper-slide-active .dpi-story-slider__card {
	height: var( --dpi-story-active-h );
	z-index: 2;
}

/* Move adjacent inactive cards away from the larger active card to preserve the visual gap. */
@media ( min-width: 1025px ) {
	.swiper-slide-prev .dpi-story-slider__card {
		transform: translate( -50%, -50% ) translateX( calc( -1 * var( --dpi-story-visual-gap ) ) );
	}

	.swiper-slide-next .dpi-story-slider__card {
		transform: translate( -50%, -50% ) translateX( var( --dpi-story-visual-gap ) );
	}
}

/* height here used to be a fixed `min(Npx, 56vw)` guess, tuned assuming the swiper spans the full
   viewport width. Once the card became a fluid width (100% of its own slide box, itself 1/3 of the
   swiper minus gaps), any page layout narrower than 100vw (boxed content, sidebar, padding, …) made
   that guess taller than the real card, clipping the active card's bookmark icon and caption against
   this container's own overflow:hidden. An aspect-ratio matching the card's own 3:5 (scaled for 3
   cards per row, so ~9:5 for the row as a whole) instead follows the swiper's actual rendered width,
   so it can't drift out of sync with it regardless of the surrounding layout. overflow-y:visible is
   the actual safety net though — aspect-ratio only ignores the (small) spaceBetween gap subtracted
   from the real per-card width, so it can still be off by a few px; letting vertical overflow show
   instead of clipping means that residual error is never visible as a cropped icon/caption again. */
@media ( min-width: 960px ) and ( max-width: 1024px ) {
	.dpi-story-slider__swiper {
		height: auto;
		aspect-ratio: 9 / 5;
		overflow-x: hidden;
		overflow-y: visible;
	}

	.swiper-slide-active .dpi-story-slider__card {
		width: 100%;
		height: auto;
		max-width: 100%;
		aspect-ratio: 3 / 5;
	}
}

@media ( min-width: 768px ) and ( max-width: 959px ) {
	.dpi-story-slider__swiper {
		height: auto;
		aspect-ratio: 9 / 5;
		overflow-x: hidden;
		overflow-y: visible;
	}

	/* Must also name '.swiper-slide-active .dpi-story-slider__card' explicitly (not just the plain
	   class): that compound selector is unconditional (line ~44) and outweighs a bare class selector
	   on specificity alone regardless of media query or source order, so without it here the active
	   card silently kept the desktop 784.83px fixed height while its width still went fluid — a badly
	   skewed box far taller than this swiper's own height, clipped hard against its overflow. */
	.dpi-story-slider__card,
	.swiper-slide-active .dpi-story-slider__card {
		width: 100%;
		height: auto;
		max-width: 100%;
		aspect-ratio: 3 / 5;
	}
}

/* Wraps the inactive/active views when the card links to its Story's own page (standalone Story Slider only — Story Showcase renders no link, see get_card_link_url()). */
.dpi-story-slider__card-link,
.dpi-story-slider__card-link:hover,
.dpi-story-slider__card-link:focus {
	position: absolute;
	inset: 0;
	color: inherit;
	text-decoration: none;
}

.dpi-story-slider__card-link:focus-visible {
	outline: 2px solid var(--dpi-blue);
	outline-offset: -2px;
}

/* ---- inactive view: small circular avatar + caption, centered as one group ---------- */
.dpi-story-slider__inactive {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: opacity 0.4s ease;
}

.swiper-slide-active .dpi-story-slider__inactive {
	opacity: 0;
	pointer-events: none;
}

.dpi-story-slider__inactive-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 0 20px;
}

.dpi-story-slider__avatar {
	/* !important overrides wp_get_attachment_image() attrs plus the theme/Elementor img resets. */
	width: var( --dpi-avatar-size ) !important;
	height: var( --dpi-avatar-size ) !important;
	aspect-ratio: auto !important;
	border-radius: 50% !important;
	object-fit: cover;
}

.dpi-story-slider__caption {
	margin: 0;
	color: var(--dpi-light);
}

.dpi-story-slider__caption--inactive {
	text-align: center;
	font: 800 11.87px/23.75px "Bricolage Grotesque", sans-serif;
}

/* ---- active view: full-bleed photo, bottom scrim, caption at the bottom ---- */
.dpi-story-slider__active {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.swiper-slide-active .dpi-story-slider__active {
	opacity: 1;
	pointer-events: auto;
}

.dpi-story-slider__bg {
	position: absolute;
	inset: 0;
	/* !important: same override as .dpi-story-slider__avatar above. */
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover;
}

.dpi-story-slider__scrim {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	background: linear-gradient( to top, var( --dpi-story-scrim-color, rgba( 0, 0, 0, 0.75 ) ) 0%, rgba( 0, 0, 0, 0 ) 100% );
	pointer-events: none;
}

/* Rendered once outside .dpi-story-slider__swiper entirely (see story-slider.php) — text is static
   (same on every slide), so there's only ever this one instance, no JS syncing needed. Per-breakpoint
   visibility (mobile-only by design default) and all color/typography come from the widget's own Style
   controls ('quote_visible', 'quote_color', 'quote_typography') — nothing about how it looks is fixed here. */
.dpi-story-slider__quote {
	margin: 0 auto;
	width: fit-content;
}

.dpi-story-slider__quote p {
	width: fit-content;
}

.dpi-story-slider__caption--active {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	text-align: left;
	font: 800 25.87px/29px "Bricolage Grotesque", sans-serif;
}

/* Mobile-only shared caption, rendered outside .dpi-story-slider__swiper entirely — hidden ≥768px, where
   each card shows its own overlaid .dpi-story-slider__caption--active instead. See story-slider.js for
   how its text is kept in sync with whichever slide is active. */
.dpi-story-slider__caption--active.dpi-story-slider__caption--mobile {
	display: none;
}

/* Size is --dpi-play-size; the child svg rule scales with it instead of its own width/height. */
.dpi-story-slider__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: var( --dpi-play-size, 83.43px );
	height: var( --dpi-play-size, 83.43px );
	cursor: pointer;
	line-height: 0;
}

.dpi-story-slider__play svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* YouTube/Vimeo <iframe>, built only after consent (see ensureMedia() in story-slider.js). */
.dpi-story-slider__card iframe {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	background: var(--dpi-black);
	display: none;
}

/* Playing: video takes over, thumbnail/scrim/play button hide. .is-playing toggled by JS. */
.dpi-story-slider__card.is-playing .dpi-story-slider__bg,
.dpi-story-slider__card.is-playing .dpi-story-slider__scrim,
.dpi-story-slider__card.is-playing .dpi-story-slider__play {
	display: none;
}

.dpi-story-slider__card.is-playing iframe {
	display: block;
}

/* Click-to-load consent gate — overlays the active card until the visitor accepts the third-party embed. */
.dpi-story-slider__consent {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px;
	text-align: center;
	background: rgba(10, 24, 85, .92);
	color: var(--dpi-light);
}

.dpi-story-slider__consent[hidden] {
	display: none;
}

.dpi-story-slider__consent-text {
	margin: 0;
	max-width: 28ch;
	font-size: 15px;
	line-height: 1.4;
}

.dpi-story-slider__consent-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.dpi-story-slider__consent-accept,
.dpi-story-slider__consent-decline {
	padding: 10px 18px;
	border: 1px solid var(--dpi-light);
	border-radius: 0;
	font: inherit;
	cursor: pointer;
}

.dpi-story-slider__consent-accept {
	background: var(--dpi-blue);
	color: var(--dpi-light);
	border-color: var(--dpi-blue);
}

.dpi-story-slider__consent-decline {
	background: transparent;
	color: var(--dpi-light);
}

.dpi-story-slider__card .dpi-story-slider__save {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--dpi-light);
}

.dpi-story-slider__card .dpi-story-slider__save:hover,
.dpi-story-slider__card .dpi-story-slider__save:focus {
	background: transparent;
}

/* Covers both icon-font and inline-svg render modes from Icons_Manager, same base rule as .dpi-single-hero-content__save-icon. */
.dpi-story-slider__card .dpi-story-slider__save-icon,
.dpi-story-slider__card .dpi-story-slider__save-icon.e-font-icon-svg {
	width: 1em;
	height: 1em;
	font-size: 28px;
	line-height: 1;
	fill: currentColor;
}

.dpi-story-slider__card .dpi-story-slider__save-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Fixed SVG size per design, while icon fonts use font-size (both overridable via the save_icon_size control). */
.dpi-story-slider__card .dpi-story-slider__save .dpi-story-slider__save-icon svg {
	width: 22px;
	height: 28px;
}

.dpi-story-slider__card .dpi-story-slider__save i.dpi-story-slider__save-icon {
	width: auto;
	height: auto;
	font-size: 28px;
	line-height: 1;
}

.dpi-story-slider__card .dpi-story-slider__save-icon--filled {
	display: none;
}

.dpi-story-slider__card .dpi-story-slider__save.is-saved .dpi-story-slider__save-icon:not(.dpi-story-slider__save-icon--filled) {
	display: none;
}

.dpi-story-slider__card .dpi-story-slider__save.is-saved .dpi-story-slider__save-icon--filled {
	display: inline-flex;
}

.dpi-story-slider__card .dpi-story-slider__save.is-saved .dpi-story-slider__save-icon,
.dpi-story-slider__card .dpi-story-slider__save.is-saved .dpi-story-slider__save-icon svg,
.dpi-story-slider__card .dpi-story-slider__save.is-saved .dpi-story-slider__save-icon svg path {
	fill: currentColor !important;
	stroke: currentColor !important;
}

.dpi-story-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY( -50% );
	display: inline-flex;
	border: 0;
	background: transparent;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
	color: var(--dpi-blue);
	user-select: none;
}

/* Fallback for --dpi-story-arrow-offset until Elementor's own CSS generates (stale per-post cache). */
.dpi-story-slider__arrow--prev {
	left: max( 0px, var( --dpi-story-arrow-offset, -50px ) );
}

.dpi-story-slider__arrow--next {
	right: max( 0px, var( --dpi-story-arrow-offset, -50px ) );
}

@media ( min-width: 1260px ) {
	.dpi-story-slider__arrow--prev {
		left: var( --dpi-story-arrow-offset, -50px );
	}

	.dpi-story-slider__arrow--next {
		right: var( --dpi-story-arrow-offset, -50px );
	}
}

.dpi-story-slider__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.dpi-story-slider__arrow--prev span {
	display: inline-block;
	transform: scaleX( -1 );
}

.dpi-story-slider__arrow.swiper-button-disabled {
	opacity: 0.3;
	cursor: default;
}

/* Mobile-only avatar tabs. */
.dpi-story-slider__tabs {
	display: none;
}

@media ( max-width: 767px ) {
	/* Tabs handle navigation on mobile instead. */
	.dpi-story-slider__arrow {
		display: none;
	}

	/* Replaced by the tab strip below. */
	.dpi-story-slider__inactive {
		display: none;
	}

	.dpi-story-slider__tabs {
		display: flex;
		/* Break out of Elementor's padded content column to reach the viewport edges. */
		width: 100vw;
		gap: 9px;
		margin: 0 calc( 50% - 50vw ) 44px;
	}

	.dpi-story-slider__tab {
		position: relative;
		flex: none;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		overflow: hidden;
	}

	.dpi-story-slider__tab-avatar {
		width: 100% !important;
		height: 100% !important;
		aspect-ratio: auto !important;
		object-fit: cover;
		border-radius: 0 !important;
	}

	.dpi-story-slider__tab-overlay {
		position: absolute;
		inset: 0;
		background: var( --dpi-story-tab-overlay-color, var(--dpi-blue) );
		opacity: 0;
	}

	/* Set by Swiper's Thumbs module on whichever tab matches the main swiper's active slide. */
	.swiper-slide-thumb-active .dpi-story-slider__tab-overlay {
		opacity: 0.5;
	}

	/* 216x361 @ 390px, scaled as vw; height comes from .dpi-story-slider__card's own aspect-ratio. */
	.dpi-story-slider__swiper {
		width: 55.385vw;
		height: auto;
		margin: 0 auto 44px;
	}

	.dpi-story-slider__swiper .swiper-slide {
		height: auto;
	}

	/* Desktop/tablet centers the card via position:absolute (real overflow, no flex/gap math to fight) —
	   mobile only ever shows one card at a time, so put it back in normal flow instead. */
	.dpi-story-slider__card,
	.swiper-slide-active .dpi-story-slider__card {
		position: static;
		transform: none;
		width: 100%;
		height: auto;
	}

	/* The per-card overlay caption is replaced on mobile by the shared .dpi-story-slider__caption--mobile
	   below the swiper (kept in sync by story-slider.js); the quote's own visibility per breakpoint is
	   the 'quote_visible' responsive control, not a hardcoded rule here. */
	.dpi-story-slider__card .dpi-story-slider__caption--active {
		display: none;
	}

	.dpi-story-slider__quote {
		margin-top: 16px;
	}

	.dpi-story-slider__caption--active.dpi-story-slider__caption--mobile {
		display: block;
		position: static;
		margin-top: 32px;
		text-align: left;
	}

}

.dpi-story-slider__mobile-caption-wrap {
	max-width: 300px;
	margin: 0 auto 20px;
}

@media ( max-width: 1024px ) {
	.dpi-story-slider__caption--inactive {
		font-size: 12px;
	}

	.dpi-story-slider__caption--active {
		font-size: 22px;
	}
}

@media ( max-width: 767px ) {
	.dpi-story-slider__caption--inactive {
		font-size: 11px;
		font-weight: 400 !important;
	}

	.dpi-story-slider__caption--active {
		font-size: 19px;
		font-weight: 400 !important;
	}
}