/**
 * Easy Slideshow – Frontend Styles
 *
 * Layered on top of swiper.min.css.
 * BEM-ish class naming: .es-slider-outer > .es-slider > .es-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. */
.es-slider-outer {
	width: 100%;
	position: relative;
	--es-nav-size:      44px;  /* button width / height */
	--es-nav-offset:    4px;   /* gap from slider edge to button outer edge */
	--es-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 es-frontend.js patch handles
   Swiper's *document-level* listeners; this rule covers the element itself.) */
.es-slider {
	width: 100%;
	touch-action: pan-y !important;
}

/* ── Slide base ──────────────────────────────────────────────────────────────
   Each slide is a stacking context so the image, overlay, and shield link
   all layer correctly. */
.es-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.
   ═══════════════════════════════════════════════════════════════════════════ */
.es-slider:not(.es-slider--auto) .es-slide-image {
	position: absolute;
	inset: 0; /* top:0; right:0; bottom:0; left:0 */
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.es-slider:not(.es-slider--auto) .es-slide-image img,
.es-slider:not(.es-slider--auto) .es-slide-img {
	width: 100%;
	height: 100%;
	object-fit: var(--es-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.
   --es-slide-ratio is output as an inline CSS variable on .es-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.
   ═══════════════════════════════════════════════════════════════════════════ */
.es-slider--ratio .es-slide {
	height: auto; /* override Swiper's height:100% so aspect-ratio can take effect */
	aspect-ratio: var(--es-slide-ratio);
}

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

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

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

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

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

/* Content overlay sits on top of the image in auto mode */
.es-slider--auto .es-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. */
.es-slide--no-image .es-slide-image {
	background-color: #f0f0f0;
}

/* ── Content overlay ─────────────────────────────────────────────────────────
   Centred both axes via Flexbox.
   pointer-events: none ensures the shield link can still be clicked through. */
.es-slide-content {
	position: relative;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	/* Top/bottom: --es-content-padding
	   Left/right:  --es-content-padding + arrow width + arrow edge offset,
	   ensuring text never sits behind a navigation button. */
	padding: var(--es-content-padding) calc( var(--es-content-padding) + var(--es-nav-size) + var(--es-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 );
}

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

.es-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. */
.es-slider-outer--arrows-outside {
	padding-left:  calc( var(--es-nav-size) + var(--es-nav-offset) );
	padding-right: calc( var(--es-nav-size) + var(--es-nav-offset) );
	box-sizing: border-box;
}

.es-slider-outer--arrows-outside > .swiper-button-prev,
.es-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;
}

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

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

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

/* ── Navigation buttons ──────────────────────────────────────────────────────
   We use <button> elements with inline SVG; override Swiper's default
   pseudo-element arrows and size the buttons appropriately. */
.es-slider .swiper-button-prev,
.es-slider .swiper-button-next,
.es-slider-outer--arrows-outside > .swiper-button-prev,
.es-slider-outer--arrows-outside > .swiper-button-next {
	/* Pull from the outer wrapper's custom properties */
	--swiper-navigation-size:         var(--es-nav-size);
	--swiper-navigation-sides-offset: var(--es-nav-offset);
	width:  var(--es-nav-size);
	height: var(--es-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;
}

.es-slider .swiper-button-prev:hover,
.es-slider .swiper-button-next:hover,
.es-slider-outer--arrows-outside > .swiper-button-prev:hover,
.es-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) */
.es-slider .swiper-button-prev::after,
.es-slider .swiper-button-next::after,
.es-slider-outer--arrows-outside > .swiper-button-prev::after,
.es-slider-outer--arrows-outside > .swiper-button-next::after {
	content: none;
}

.es-slider .swiper-button-prev svg,
.es-slider .swiper-button-next svg,
.es-slider-outer--arrows-outside > .swiper-button-prev svg,
.es-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. */
.es-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. */
.es-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;
}

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

.es-slider .swiper-pagination-bullet,
.es-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;
}

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

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

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

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