/* ---- Container & height modes ---- */
.whs-slider {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 0;
	line-height: 0;
	vertical-align: top;
	--swiper-theme-color: #fff;
	--swiper-navigation-size: 28px;
}
.whs-slider-host {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.whs-slider-main-host {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Academia + WPBakery homepage structure. Apply the header-offset fix during
   initial layout so the row does not visibly jump when frontend.js starts. */
@media (min-width: 783px) {
	#main-content.whs-home-template > .wpb-content-wrapper > .fullwidth > .vc_row:first-child {
		margin-top: -30px !important;
	}
}
.whs-slider .swiper {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
.whs-height-ratio { aspect-ratio: var(--whs-ratio, 16 / 9); }
.whs-height-ratio .swiper { aspect-ratio: inherit; }
.whs-height-max,
.whs-height-fixed { height: var(--whs-height, 500px); }
.whs-height-max .swiper {
	width: 100%;
	height: 100%;
	max-height: 100%;
}
.whs-height-fixed .swiper { height: 100%; }
.whs-height-fullscreen { height: 100vh; }
.whs-height-fullscreen .swiper { height: 100%; }

/* ---- Slides ---- */
.whs-slider .swiper-slide {
	position: relative;
	overflow: hidden;
	display: flex;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
.whs-slide-media {
	position: absolute;
	/* Cover tiny fractional-pixel seams created by transformed slides. */
	inset: -2px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
}
.whs-slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50% !important;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	transform-origin: center center;
}
/* "Show whole image" mode: spare space is transparent when the image
   and slide have different aspect ratios. The default cover mode fills
   the slide without gaps. */
.whs-slide-img.whs-bgfit-contain {
	object-fit: contain;
}
/* Fixed-height module modes must fill their clipped background area. The
   centred design canvas, rather than letterboxing, preserves layer layout. */
.whs-height-max .whs-slide-img,
.whs-height-fixed .whs-slide-img {
	object-fit: cover;
}
.whs-height-max .whs-slide-media.whs-css-background .whs-slide-img,
.whs-height-fixed .whs-slide-media.whs-css-background .whs-slide-img {
	opacity: 0;
}

/* Fixed modules use the wrapper background as the visible image. This is
   the same cover/centre model used by Revolution Slider and avoids theme
   rules changing the replaced <img> element's crop position. */
.whs-height-max .whs-slide-media,
.whs-height-fixed .whs-slide-media {
	background-position: center center !important;
	background-size: cover !important;
}

/* Whole-slide link overlay: sits above the image, below the caption. */
.whs-slide-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.whs-btn {
	display: inline-block;
	padding: 0.7em 1.6em;
	border-radius: 4px;
	font-weight: 600;
	text-decoration: none;
	text-shadow: none;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}
.whs-btn:hover,
.whs-btn:focus { opacity: 0.85; }
.whs-btn-solid {
	background: var(--whs-accent, #0b5aa7);
	color: #fff;
}
.whs-btn-outline {
	border: 2px solid #fff;
	background: transparent;
	color: #fff;
}

/* ---- v2 element canvas ---- */
.whs-canvas {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--whs-canvas-width, 100%);
	height: var(--whs-canvas-height, 100%);
	transform: translate(-50%, -50%);
	z-index: 2;
	pointer-events: none;
}
.whs-el {
	position: absolute;
	pointer-events: none;
}
.whs-el a,
.whs-el video,
.whs-el iframe {
	pointer-events: none;
}
.whs-slider .swiper-slide-active .whs-el a,
.whs-slider .swiper-slide-active .whs-el video,
.whs-slider .swiper-slide-active .whs-el iframe {
	pointer-events: auto;
}
.whs-el-text-inner {
	font-size: max(calc(var(--whs-fs, 48) * var(--whs-scale, 1) * 1px), calc(var(--whs-fs-min, 14) * 1px));
	line-height: 1.2;
	white-space: pre-line;
}
.whs-el-shadow .whs-el-text-inner {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.whs-el-text-block {
	box-sizing: border-box;
	padding: calc(var(--whs-pad-y, 10) * 1px * var(--whs-scale, 1)) calc(var(--whs-pad-x, 14) * 1px * var(--whs-scale, 1));
}
/* Centre text vertically in its box so any spare height splits evenly
   above and below; per-element valign can pin it to an edge instead. */
.whs-el-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.whs-el-text.whs-valign-top { justify-content: flex-start; }
.whs-el-text.whs-valign-bottom { justify-content: flex-end; }
.whs-el-button .whs-btn {
	/* WYSIWYG: fill the authored box exactly, matching the designer preview. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	padding: 0 0.75em;
	font-size: max(calc(var(--whs-fs, 17) * var(--whs-scale, 1) * 1px), 12px);
}

/* ---- Background video ---- */
.whs-bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.whs-has-bgvideo.swiper-slide-active .whs-slide-img {
	animation: none !important; /* Ken Burns off while video plays */
}
.whs-video-failed .whs-bg-video {
	display: none;
}

/* ---- Video / image elements ---- */
.whs-el-media,
.whs-yt,
.whs-yt iframe,
.whs-el-img {
	width: 100%;
	height: 100%;
	display: block;
}
.whs-el-media {
	object-fit: cover;
	background: #000;
}
.whs-yt {
	position: relative;
	background: #000;
	overflow: hidden;
}
.whs-yt iframe {
	position: absolute;
	inset: 0;
	border: 0;
}
.whs-yt-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.whs-el-img {
	object-fit: cover;
}
.whs-el-img.whs-fit-contain {
	object-fit: contain;
}
.whs-el-img-link {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---- Ken Burns effects (active slide only) ---- */
.whs-slider .swiper-slide-active.whs-kb-zoom_in .whs-slide-img,
.whs-height-max .swiper-slide-active.whs-kb-zoom_in .whs-slide-media,
.whs-height-fixed .swiper-slide-active.whs-kb-zoom_in .whs-slide-media {
	animation: whs-kb-zoom-in 10s ease-out forwards;
}
.whs-slider .swiper-slide-active.whs-kb-zoom_out .whs-slide-img,
.whs-height-max .swiper-slide-active.whs-kb-zoom_out .whs-slide-media,
.whs-height-fixed .swiper-slide-active.whs-kb-zoom_out .whs-slide-media {
	animation: whs-kb-zoom-out 10s ease-out forwards;
}
.whs-slider .swiper-slide-active.whs-kb-pan_left .whs-slide-img,
.whs-height-max .swiper-slide-active.whs-kb-pan_left .whs-slide-media,
.whs-height-fixed .swiper-slide-active.whs-kb-pan_left .whs-slide-media {
	animation: whs-kb-pan-left 10s linear forwards;
}
.whs-slider .swiper-slide-active.whs-kb-pan_right .whs-slide-img,
.whs-height-max .swiper-slide-active.whs-kb-pan_right .whs-slide-media,
.whs-height-fixed .swiper-slide-active.whs-kb-pan_right .whs-slide-media {
	animation: whs-kb-pan-right 10s linear forwards;
}

@keyframes whs-kb-zoom-in {
	from { transform: scale(1); }
	to   { transform: scale(1.15); }
}
@keyframes whs-kb-zoom-out {
	from { transform: scale(1.15); }
	to   { transform: scale(1); }
}
@keyframes whs-kb-pan-left {
	from { transform: scale(1.15) translateX(2.5%); }
	to   { transform: scale(1.15) translateX(-2.5%); }
}
@keyframes whs-kb-pan-right {
	from { transform: scale(1.15) translateX(-2.5%); }
	to   { transform: scale(1.15) translateX(2.5%); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.whs-slider .whs-slide-img,
	.whs-slider .whs-slide-media { animation: none !important; }
	.whs-bg-video {
		display: none;
	}
}

/* ---- Shape elements ---- */
.whs-el-shape,
.whs-shape-fill {
	pointer-events: none;
}
.whs-shape-fill {
	width: 100%;
	height: 100%;
}

/* ================= Narrow screens (phones) =================
   The design canvas is authored 1200px wide and setScale() fits it with
   min(width/1200, height/canvasHeight). On a 390px phone that is ~0.325 in
   every height mode — width always binds — so element boxes shrank to a third
   while the font floors (14px text, 12px buttons) held type at full size.
   That mismatch overflowed boxes and clipped button labels.

   The bigger problem was the background. Slides are usually finished wide
   banners, and a desktop height held on a phone crops them hard: a 2.18:1
   banner in a 390x700 frame shows about a quarter of its width, so the artwork
   and any lettering baked into it are simply gone.

   Phones therefore stop cover-cropping and stop using the absolute canvas.
   The banner is shown whole at its own aspect ratio, and the elements flow
   beneath it in authored reading order, keeping their alignment and sizing to
   their own text, so nothing overlaps, clips or disappears. */
@media (max-width: 600px) {

	/* wpautop leaves an empty paragraph inside the shortcode output, and the
	   theme's 30px paragraph margin then pushes the whole slider down. It is
	   never part of the rendered markup, so any direct-child paragraph here is
	   stray. (The same 30px is clipped off the bottom on desktop, where the
	   slider has a fixed height — left alone for now, see readme.) */
	.whs-slider > p:empty { display: none; }
	/* Frame follows the banner and its caption instead of a desktop height. */
	.whs-slider.whs-height-ratio,
	.whs-slider.whs-height-max,
	.whs-slider.whs-height-fixed,
	.whs-slider.whs-height-fullscreen {
		height: auto;
		max-height: none;
		aspect-ratio: auto;
	}
	.whs-slider .swiper { height: auto; aspect-ratio: auto; }
	.whs-slider .swiper-slide {
		height: auto;
		aspect-ratio: auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		/* Every slide is as tall as the tallest, so a slide with a short caption
		   has space left over. Centring the banner and its caption as a group
		   splits that evenly above and below, which reads as a letterboxed
		   hero rather than a gap hanging under the button. */
		justify-content: center;
		/* A soft, cover-cropped wash of the same photo sits behind the whole
		   slide, so the caption panel is never bare white under light themes
		   and text authored white still reads. */
		position: relative;
		background-color: #0a1d3f;
	}
	/* A blurred, dimmed wash of the slide's own photo fills whatever space the
	   banner and caption do not, so the panel reads as part of the slide
	   instead of a bare block, and white caption text keeps its contrast. */
	.whs-slider .swiper-slide::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 0;
		background-image: var(--whs-slide-bg, none);
		background-size: cover;
		background-position: center center;
		filter: blur(22px) brightness(0.5) saturate(1.1);
		transform: scale(1.15);
	}

	/* The banner itself: whole image, natural aspect, never cropped. */
	.whs-slider .whs-slide-media {
		position: relative;
		z-index: 1;
		inset: auto;
		order: 0;
		flex: 0 0 auto;
		background: none !important;
	}
	.whs-slider .whs-slide-media .whs-slide-img {
		position: relative;
		width: 100%;
		height: auto;
		max-height: none;
		object-fit: contain;
		opacity: 1 !important;
		animation: none !important;
	}
	.whs-slider .whs-bg-video { position: relative; height: auto; }

	/* Caption panel below the banner. */
	.whs-slider .whs-canvas {
		position: relative;
		/* Restore normal text metrics here rather than on .whs-slider, whose
		   zeroed font-size stops whitespace between its children forming a
		   line box and adding ~30px to every slider. */
		font-size: medium;
		line-height: normal;
		z-index: 1;
		left: auto; top: auto; right: auto; bottom: auto;
		width: 100%;
		height: auto;
		transform: none;
		order: 1;
		flex: 0 0 auto;
		min-width: 0;
		/* A slim bar of controls under the banner rather than a caption panel.
		   Laid out as a row so several buttons sit side by side instead of
		   stacking and pushing the slider taller. */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 8px;
		box-sizing: border-box;
		padding: 10px 16px;
		background: transparent;
	}
	/* Nothing to show: the slide is then exactly the banner. */
	.whs-slider .whs-canvas:empty { display: none; }

	.whs-slider .whs-el {
		position: relative;
		z-index: 1;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		height: auto !important;
		transform: none !important;
		max-width: 100%;
		order: var(--whs-order, 0);
	}
	.whs-slider .whs-m-start,
	.whs-slider .whs-m-center,
	.whs-slider .whs-m-end { align-self: center; }
	/* These slides are finished banners: their wording is part of the artwork,
	   so repeating it underneath only made the slider taller. The text stays in
	   the page for screen readers and search engines, but is taken out of the
	   layout so it cannot add height. Delete this rule to show it again. */
	.whs-slider .whs-el-text {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.whs-slider .whs-m-hide { display: none; }
	/* A wash authored for the desktop canvas has nothing to sit behind here. */
	.whs-slider .whs-el-shape.whs-m-scrim { display: none; }

	.whs-slider .whs-el-text-inner {
		font-size: clamp(15px, calc(var(--whs-fs, 48) * 0.5px), 30px);
		line-height: 1.3;
		/* Swiper gives every slide the height of the tallest, so one wordy
		   caption sets the height of the whole slider — on a phone that turned
		   a button-only slide into a tall panel holding one button. Cap a
		   caption at a few lines so a hero stays a hero. The full text stays in
		   the page for assistive tech, and a slide this wordy carries a button
		   through to the page that holds the rest. */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: var(--whs-m-lines, 2);
		overflow: hidden;
		/* A long URL or unbroken word has far less room in this column than on
		   the desktop canvas, so let it break rather than run past the edge. */
		overflow-wrap: break-word;
		/* The clamp's ellipsis is allowed to overhang the content box, so leave
		   it a sliver of room or it renders half-clipped against the edge. */
		padding-right: 0.3em;
	}
	.whs-slider .whs-el-text-block { padding: 10px 14px; }

	.whs-slider .whs-el-button .whs-btn {
		display: inline-flex;
		width: auto;
		height: auto;
		padding: 0.75em 1.5em;
		white-space: normal;
		overflow: visible;
		font-size: clamp(15px, calc(var(--whs-fs, 17) * 0.9px), 19px);
	}

	.whs-slider .whs-el-image,
	.whs-slider .whs-el-video {
		width: min(100%, calc(var(--whs-w, 40) * 1.4%)) !important;
		aspect-ratio: var(--whs-ar, 16 / 9);
	}

	.whs-slider .swiper-pagination { bottom: 6px; }
	.whs-slider .swiper-button-prev,
	.whs-slider .swiper-button-next { display: none; }
}