/**
 * Easy Slideshow – Frontend Styles
 *
 * Layered on top of swiper.min.css.
 * BEM-ish class naming: .ss-slider-outer > .ss-slider > .ss-slide
 */

/* ── Outer wrapper ───────────────────────────────────────────────────────────
   Fills the full width of its container.
   Custom properties are the single source of truth for arrow sizing so that
   the content padding always stays in sync with the navigation buttons. */
.ss-slider-outer {
	width: 100%;
	position: relative;
	--ss-nav-size:      44px;  /* button width / height */
	--ss-nav-offset:    4px;   /* gap from slider edge to button outer edge */
	--ss-content-padding: 2rem; /* base content padding (top/bottom, and added to left/right) */
}

/* ── Swiper container ────────────────────────────────────────────────────────
   touch-action:pan-y prevents iOS Safari from waiting on Swiper's element-level
   non-passive touchstart/touchmove listeners before scrolling. !important is
   required because Swiper writes touch-action:none as an inline style on init,
   on resize, and other lifecycle events. (The ss-frontend.js patch handles
   Swiper's *document-level* listeners; this rule covers the element itself.) */
.ss-slider {
	width: 100%;
	touch-action: pan-y !important;
	box-sizing: border-box;
	/* Slideshow Padding becomes inner padding on every side (Swiper subtracts it
	   from its measurements, so slides stay correctly sized). */
	padding: var( --ss-pad-top, 0 ) var( --ss-pad-right, 0 ) var( --ss-pad-bottom, 0 ) var( --ss-pad-left, 0 );
}

/* When a Slide Shadow is set, switch the clip mode so the shadow can show.
   overflow:clip behaves like hidden but, unlike hidden, honours
   overflow-clip-margin — which lets each slide's drop shadow bleed past the clip
   boundary instead of being cut off at the slider edge. Neighbouring slides
   revealed by that margin are hidden by the JS visibility gate (see
   ss-frontend.js). Plain (no-shadow) slideshows keep Swiper's default
   overflow:hidden.

   The clip margin is uniform on every side, so on a full-bleed slider it would
   spill horizontally past the viewport and add a page scrollbar. JS caps it to
   the space beside the slider (--ss-shadow-clip) and moves whatever vertical
   room that loses inside as padding (--ss-shadow-pad-y), so the drop shadow
   still shows top/bottom but nothing spills sideways. Before JS runs (and when
   there is room) it falls back to the full --ss-shadow-room.

   Cards and Edge Fade are handled separately (Cards below; Edge Fade keeps
   Swiper's overflow:hidden and uses inner padding + a mask instead). */
.ss-slider-outer[data-has-shadow="1"]:not([data-effect="cards"]):not([data-edge-fade="1"]) .ss-slider {
	overflow: clip;
	overflow-clip-margin: var( --ss-shadow-clip, var( --ss-shadow-room, 2.5rem ) );
	padding-top:    calc( var( --ss-pad-top, 0px )    + var( --ss-shadow-pad-y, 0px ) );
	padding-bottom: calc( var( --ss-pad-bottom, 0px ) + var( --ss-shadow-pad-y, 0px ) );
}

/* Cards lays its slides out in a wide row and then transforms them into the
   stack, so overflow:visible (Swiper's default) lets that underlying row push
   the page's scroll width out. We clip instead, but with a margin wide enough
   to still show the stacked back cards peeking past the slider edge. The exact
   peek depends on slide size, so JS measures it and sets --ss-card-clip (capped
   to the space beside the slider so it can never cause page scroll). */
.ss-slider-outer[data-effect="cards"] .ss-slider {
	overflow: clip;
	overflow-clip-margin: var( --ss-card-clip, 0px );
}

/* ── Edge Fade (admin setting, --ss-edge-fade, default 0) ─────────────────────
   Feathers the left/right edges of Slide/Coverflow so a slide mid-swipe fades
   out at the boundary instead of being hard-clipped (useful when the slideshow
   isn't full-bleed and the swipe is clipped against page content).

   To keep the fade off the *resting* slides, the same amount is added as
   horizontal padding so the slides sit inboard of the fade band; the navigation
   arrows get the same offset (below) so they aren't faded either. */
.ss-slider-outer[data-edge-fade="1"][data-effect="slide"] .ss-slider,
.ss-slider-outer[data-edge-fade="1"][data-effect="coverflow"] .ss-slider {
	padding-left:  calc( var( --ss-pad-left, 0px )  + var( --ss-edge-fade, 0px ) );
	padding-right: calc( var( --ss-pad-right, 0px ) + var( --ss-edge-fade, 0px ) );
	-webkit-mask-image: linear-gradient( to right, transparent 0, #000 var( --ss-edge-fade, 0px ), #000 calc( 100% - var( --ss-edge-fade, 0px ) ), transparent 100% );
	        mask-image: linear-gradient( to right, transparent 0, #000 var( --ss-edge-fade, 0px ), #000 calc( 100% - var( --ss-edge-fade, 0px ) ), transparent 100% );
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
}

/* A mask clips to the border box, so it would crop a drop shadow that bleeds
   outside the slider (the top/bottom shadow). When Edge Fade and a shadow are
   both on, move the vertical shadow room inside the box as padding so the shadow
   shows within the (unmasked-on-the-vertical-axis) border box instead. */
.ss-slider-outer[data-edge-fade="1"][data-has-shadow="1"][data-effect="slide"] .ss-slider,
.ss-slider-outer[data-edge-fade="1"][data-has-shadow="1"][data-effect="coverflow"] .ss-slider {
	padding-top:    calc( var( --ss-pad-top, 0px )    + var( --ss-shadow-room, 2.5rem ) );
	padding-bottom: calc( var( --ss-pad-bottom, 0px ) + var( --ss-shadow-room, 2.5rem ) );
}

/* Push the inside navigation arrows inboard by the fade amount so they sit in
   the opaque region rather than under the feathered edge. */
.ss-slider-outer[data-edge-fade="1"] .ss-slider .swiper-button-prev,
.ss-slider-outer[data-edge-fade="1"] .ss-slider .swiper-button-next {
	--swiper-navigation-sides-offset: calc( var( --ss-nav-offset ) + var( --ss-edge-fade, 0px ) );
}

/* ── Slide base ──────────────────────────────────────────────────────────────
   Each slide is a stacking context so the image, overlay, and shield link
   all layer correctly. */
.ss-slide {
	position: relative;
	overflow: hidden;
	display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIXED-HEIGHT MODE (pixel or aspect-ratio / percentage)
   Image is stretched to fill the available space via object-fit.
   ═══════════════════════════════════════════════════════════════════════════ */
.ss-slider:not(.ss-slider--auto) .ss-slide-image {
	position: absolute;
	inset: 0; /* top:0; right:0; bottom:0; left:0 */
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ss-slider:not(.ss-slider--auto) .ss-slide-image img,
.ss-slider:not(.ss-slider--auto) .ss-slide-img {
	width: 100%;
	height: 100%;
	object-fit: var(--ss-object-fit, cover);
	display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RATIO MODE (es_height = "50%" etc.)
   Each slide's height = its own width × ratio, so when slidesPerView increases
   both width and height shrink proportionally.
   --ss-slide-ratio is output as an inline CSS variable on .ss-slider-outer.
   Swiper's height:100% on slides must be overridden to let aspect-ratio work.
   Swiper's autoHeight:true then sizes the container to match.
   ═══════════════════════════════════════════════════════════════════════════ */
.ss-slider--ratio .ss-slide {
	height: auto; /* override Swiper's height:100% so aspect-ratio can take effect */
	aspect-ratio: var(--ss-slide-ratio);
}

.ss-slider--ratio .ss-slide-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ss-slider--ratio .ss-slide-image img,
.ss-slider--ratio .ss-slide-img {
	width: 100%;
	height: 100%;
	object-fit: var(--ss-object-fit, cover);
	display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTO-HEIGHT MODE (es_height = "auto")
   The image dictates the slide height; the content overlay is absolute.
   ═══════════════════════════════════════════════════════════════════════════ */
.ss-slider--auto .ss-slide {
	display: flex;
	flex-direction: column;
}

.ss-slider--auto .ss-slide-image {
	position: relative;
	width: 100%;
}

.ss-slider--auto .ss-slide-image img,
.ss-slider--auto .ss-slide-img {
	width: 100%;
	height: auto;
	object-fit: initial;
	display: block;
}

/* Content overlay sits on top of the image in auto mode */
.ss-slider--auto .ss-slide-content {
	position: absolute;
	inset: 0;
}

/* ── No-image fallback ───────────────────────────────────────────────────────
   When a slide has no featured image we render a neutral background so the
   content overlay still has a surface. */
.ss-slide--no-image .ss-slide-image {
	background-color: #f0f0f0;
}

/* ── Content overlay ─────────────────────────────────────────────────────────
   Centred both axes via Flexbox.
   pointer-events: none ensures the shield link can still be clicked through. */
.ss-slide-content {
	position: relative;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	/* Top/bottom: --ss-content-padding
	   Left/right:  --ss-content-padding + arrow width + arrow edge offset,
	   ensuring text never sits behind a navigation button. */
	padding: var(--ss-content-padding) calc( var(--ss-content-padding) + var(--ss-nav-size) + var(--ss-nav-offset) );
	box-sizing: border-box;
	text-align: center;
	pointer-events: none;
	color: #fff;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
}

/* ── Slideshow title overlay (page-title content mode) ───────────────────────
   A single overlay layered over the whole slider (not a per-slide element), so
   it stays fixed while slides move beneath it. Absolute in every height mode,
   sitting above per-slide content. Inherits centring/colour from
   .ss-slide-content. */
.ss-slideshow-title {
	position: absolute;
	inset: 0;
	z-index: 6;
}

.ss-slideshow-title h1 {
	margin: 0;
	color: inherit;
	text-shadow: inherit;
}

/* ── Shield link ─────────────────────────────────────────────────────────────
   An invisible <a> that covers the full slide, sitting above the overlay
   (z-index 10) so the entire slide is clickable. */
.ss-slide-link {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: block;
	text-decoration: none;
	/* Transparent but focusable */
	outline-offset: -4px;
}

.ss-slide-link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -4px;
}

/* ── Outside arrows ──────────────────────────────────────────────────────────
   When arrows are set to 'outside', the outer wrapper gains horizontal padding
   equal to the arrow dimensions so the slider shrinks to make room.
   box-sizing:border-box ensures the padding is absorbed inward rather than
   expanding the element beyond its container width.
   The buttons are positioned absolutely within that padding. */
.ss-slider-outer--arrows-outside {
	padding-left:  calc( var(--ss-nav-size) + var(--ss-nav-offset) );
	padding-right: calc( var(--ss-nav-size) + var(--ss-nav-offset) );
	box-sizing: border-box;
}

.ss-slider-outer--arrows-outside > .swiper-button-prev,
.ss-slider-outer--arrows-outside > .swiper-button-next {
	top: 50%;
	margin-top: 0; /* reset Swiper's global margin-top which would double-offset with transform */
	transform: translateY( -50% );
	z-index: 11;
}

.ss-slider-outer--arrows-outside > .swiper-button-prev {
	left:  var(--ss-nav-offset);
	right: auto;
}

.ss-slider-outer--arrows-outside > .swiper-button-next {
	right: var(--ss-nav-offset);
	left:  auto;
}

/* In outside mode slides have no arrows to avoid, so revert to symmetric padding */
.ss-slider-outer--arrows-outside .ss-slide-content {
	padding-left:  var(--ss-content-padding);
	padding-right: var(--ss-content-padding);
}

/* ── Navigation buttons ──────────────────────────────────────────────────────
   We use <button> elements with inline SVG; override Swiper's default
   pseudo-element arrows and size the buttons appropriately. */
.ss-slider .swiper-button-prev,
.ss-slider .swiper-button-next,
.ss-slider-outer--arrows-outside > .swiper-button-prev,
.ss-slider-outer--arrows-outside > .swiper-button-next {
	/* Pull from the outer wrapper's custom properties */
	--swiper-navigation-size:         var(--ss-nav-size);
	--swiper-navigation-sides-offset: var(--ss-nav-offset);
	width:  var(--ss-nav-size);
	height: var(--ss-nav-size);
	background-color: rgba( 0, 0, 0, 0.35 );
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color 0.2s ease;
}

.ss-slider .swiper-button-prev:hover,
.ss-slider .swiper-button-next:hover,
.ss-slider-outer--arrows-outside > .swiper-button-prev:hover,
.ss-slider-outer--arrows-outside > .swiper-button-next:hover {
	background-color: rgba( 0, 0, 0, 0.6 );
}

/* Remove the Swiper-default CSS arrow pseudo-element (SVG replaces it) */
.ss-slider .swiper-button-prev::after,
.ss-slider .swiper-button-next::after,
.ss-slider-outer--arrows-outside > .swiper-button-prev::after,
.ss-slider-outer--arrows-outside > .swiper-button-next::after {
	content: none;
}

.ss-slider .swiper-button-prev svg,
.ss-slider .swiper-button-next svg,
.ss-slider-outer--arrows-outside > .swiper-button-prev svg,
.ss-slider-outer--arrows-outside > .swiper-button-next svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
	display: block;
	pointer-events: none;
	flex-shrink: 0;
}

/* ── Pagination dots ─────────────────────────────────────────────────────────
   The renderBullet callback outputs <button> elements wrapping an SVG circle.
   We style them to look like standard Swiper bullets. */
.ss-slider .swiper-pagination {
	position: absolute;
	bottom: 12px;
	left: 0;
	right: 0;
	z-index: 11;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	pointer-events: none;
}

/* ── Outside pagination dots ─────────────────────────────────────────────────
   When dots are set to 'outside', the pagination sits below the slider as a
   normal block element rather than an absolute overlay. */
.ss-slider-outer--dots-outside > .swiper-pagination {
	position: relative;
	bottom: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 0;
	pointer-events: none;
}

.ss-slider-outer--dots-outside > .swiper-pagination .swiper-pagination-bullet svg circle {
	fill: currentColor;
}

.ss-slider .swiper-pagination-bullet,
.ss-slider-outer--dots-outside > .swiper-pagination .swiper-pagination-bullet {
	--bullet-size: 10px;
	width: var( --bullet-size );
	height: var( --bullet-size );
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0.5;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ss-slider .swiper-pagination-bullet svg circle {
	fill: #fff;
}

.ss-slider .swiper-pagination-bullet:hover,
.ss-slider-outer--dots-outside > .swiper-pagination .swiper-pagination-bullet:hover {
	opacity: 0.8;
}

.ss-slider .swiper-pagination-bullet-active,
.ss-slider-outer--dots-outside > .swiper-pagination .swiper-pagination-bullet-active {
	opacity: 1;
	transform: scale( 1.25 );
}

/* ── Allow slide overflow so the drop shadow isn't clipped ───────────────────
   Our .ss-slide carries overflow:hidden (and Swiper sets it on .swiper-slide
   for cards too). That clips the box-shadow we apply to .ss-slide-image right
   at the slide boundary — which is why the shadow only showed on Cards before
   (Cards already opted in here). Whenever a shadow is set we let it escape the
   slide on every effect. Ken Burns stays clipped because .ss-slide-image keeps
   its own overflow:hidden, so the zoom never escapes the image edge.
   The slider's overflow-clip-margin (the [data-has-shadow] rule above) then
   gives the shadow room before the overflow boundary clips it — except under
   Edge Fade, where that room is inner padding instead (see the Edge Fade rule). */
.ss-slider-outer[data-effect="cards"] .ss-slide,
.ss-slider-outer[data-has-shadow="1"] .ss-slide {
	overflow: visible;
}

/* ── Slide shadow & radius (all effects) ─────────────────────────────────────
   Swiper's built-in slideShadows are disabled (see ss-frontend.js). Instead we
   apply a configurable box-shadow and border-radius to each slide image figure.
   These default to "none" / "0" so they're invisible until the user sets them.
   The shadow sits on the figure (not the card) so that in "shrink to fit" mode
   below it hugs the image exactly rather than outlining a larger, partly-empty
   card. An element's own outer box-shadow is not clipped by its own
   overflow:hidden, so it shows around the image. */
.ss-slider-outer .ss-slide-image {
	margin: 0; /* override theme default <figure> margins */
	box-shadow:    var( --ss-card-shadow, none );
	border-radius: var( --ss-card-radius, 0 );
	overflow: hidden; /* re-assert so border-radius clips the image */
}

/* Cards keeps every slide in the stack rendered, so if all of them carried the
   shadow the overlapping shadows would pile up and darken with each step. Paint
   it only on the front (active) card — the cards behind it don't need one. */
.ss-slider-outer[data-effect="cards"] .ss-slide-image {
	box-shadow: none;
}
.ss-slider-outer[data-effect="cards"] .swiper-slide-active .ss-slide-image {
	box-shadow: var( --ss-card-shadow, none );
}

/* ── Shrink card to fit image (Cards / Coverflow + Contain) ───────────────────
   With Image Fit = Contain the image is smaller than the fixed card, leaving
   empty space. Here we size the figure to the image's own aspect ratio and
   centre it, so the figure *is* the image: the shadow hugs it and Ken Burns is
   clipped to the image edges (no "growing" into empty space).

   The card (.ss-slide) keeps its fixed size so the cards/coverflow stack stays
   uniform; only the figure inside shrinks. We use container-query units so the
   figure can be sized to fit within the card while preserving the image ratio,
   purely in CSS. --ss-img-ratio (width/height) is set per slide by the template.

   width  = min(full card width,  full card height × ratio)
   height = min(full card height, full card width  ÷ ratio)
   …which is exactly the "contain" fit, but applied to the element box itself. */
.ss-slider-outer[data-object-fit="contain"][data-effect="cards"] .ss-slide,
.ss-slider-outer[data-object-fit="contain"][data-effect="coverflow"] .ss-slide {
	container-type: size;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ss-slider-outer[data-object-fit="contain"][data-effect="cards"] .ss-slide-image,
.ss-slider-outer[data-object-fit="contain"][data-effect="coverflow"] .ss-slide-image {
	--ss-img-ratio: 1; /* fallback when the template can't determine the ratio */
	position: relative; /* override the absolute fill used in fixed-height mode */
	inset: auto;
	width:  min( 100cqw, 100cqh * var( --ss-img-ratio ) );
	height: min( 100cqh, 100cqw / var( --ss-img-ratio ) );
	overflow: hidden;
}

/* The image now fills its correctly-proportioned figure, so cover and contain
   look identical here — and Ken Burns has a full box to be clipped against. */
.ss-slider-outer[data-object-fit="contain"][data-effect="cards"] .ss-slide-image .ss-slide-img,
.ss-slider-outer[data-object-fit="contain"][data-effect="coverflow"] .ss-slide-image .ss-slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Ken Burns effect ────────────────────────────────────────────────────────
   A slow pan-and-zoom animation on the slide image. The JS replays it whenever
   a slide enters, so it plays fresh per slide. transform-origin is centered so
   the zoom is symmetrical.

   Slide and Coverflow can show several slides at once (Slides Per Device), so
   they animate every on-screen slide (swiper-slide-visible). Fade and Cards are
   always single-slide — and Fade stacks all slides at one position, which would
   mark them all "visible" — so they animate just the active slide. */
@keyframes ss-ken-burns {
	from {
		transform: scale( 1 ) translate3d( 0, 0, 0 );
	}
	to {
		transform: scale( 1.1 ) translate3d( -1.5%, -0.5%, 0 );
	}
}

.ss-slider-outer[data-ken-burns="1"][data-effect="slide"] .swiper-slide-visible .ss-slide-img,
.ss-slider-outer[data-ken-burns="1"][data-effect="coverflow"] .swiper-slide-visible .ss-slide-img,
.ss-slider-outer[data-ken-burns="1"][data-effect="fade"] .swiper-slide-active .ss-slide-img,
.ss-slider-outer[data-ken-burns="1"][data-effect="cards"] .swiper-slide-active .ss-slide-img {
	animation: ss-ken-burns var( --ss-ken-burns-duration, 6s ) ease-out forwards;
	transform-origin: center center;
}

/* ── Reduced-motion override ─────────────────────────────────────────────────
   Respect users who prefer reduced motion. */
@media ( prefers-reduced-motion: reduce ) {
	.ss-slider .swiper-button-prev,
	.ss-slider .swiper-button-next,
	.ss-slider-outer--arrows-outside > .swiper-button-prev,
	.ss-slider-outer--arrows-outside > .swiper-button-next,
	.ss-slider .swiper-pagination-bullet,
	.ss-slider-outer--dots-outside > .swiper-pagination .swiper-pagination-bullet {
		transition: none;
	}

	.ss-slider-outer[data-ken-burns="1"] .ss-slide-img {
		animation: none;
	}
}