/*
 * SIA Hero Slider — full-bleed one-per-view hero carousel.
 *
 * Structure (per slide):
 *   .sia-hs__slide          the swiper slide (min-height = slide height)
 *     .sia-hs__bg > img      background image (object-fit cover)
 *     .sia-hs__overlay       per-slide overlay (inline background)
 *     .sia-hs__content-wrap  flex container — aligns the content box
 *       .sia-hs__content     the bounded content column (max-width)
 *         .sia-hs__pill / __title / __subtitle / __btn
 *
 * Alignment is class-driven (widget default on the .sia-hs root, per-slide
 * override on the slide). Per-slide overlay + text colors come in as inline
 * CSS vars (--hs-overlay handled inline on .sia-hs__overlay;
 * --hs-pill/title/subtitle-color consumed below with the widget-level color
 * as the fallback).
 *
 * Navigation (arrows + dots) is the shared `carousel-base.css` — including
 * the `.sia-carousel--nav-bar` bottom-bar variant.
 */

.sia-hs {
	--hs-content-max: 600px;
	--hs-pad: 56px;            /* uniform element inset — drives content,
	                             dots and arrows so everything lines up. */
	position: relative;
}

/* ─── Slide + layers ─── */
.sia-hs__slide {
	position: relative;
	display: flex;            /* lets content-wrap stretch to full slide */
	min-height: 560px;
	overflow: hidden;
	background: #1f2160;       /* fallback behind the image while it loads */
}
.sia-hs__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.sia-hs__bg img {
	/* v4.17.2: the image MUST fill the whole slide. Three global `img { height:
	   auto }` rules were winning over a plain `height: 100%` and shrinking the
	   image to its intrinsic aspect ratio, so the slide grew past it and the
	   fallback background showed beneath (image on top, solid colour + text
	   below — most visible on mobile where the text wraps taller):
	     - sia-discounts sia-base.css: `body [class*=" sia-"] img` (spec 0,1,2)
	     - Blocksy: `img`
	     - Elementor: `.elementor img`
	   Note (v4.17.1): absolute top+bottom:0 does NOT stretch a replaced element
	   when `height` is EXPLICITLY `auto` — the height wins and bottom is ignored.
	   So `height`/`width` need `!important` to beat those (all non-important) rules. */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	/* v4.6.5: per-slide focal point (e.g. anchor top). Independent of the
	   Ken Burns / Zoom Fade transform; we also point transform-origin at the
	   same spot below so the zoom stays anchored there. */
	object-position: var(--hs-bg-pos, center);
	display: block;
}
.sia-hs__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* ─── Content wrap (alignment) + content box ─── */
.sia-hs__content-wrap {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	display: flex;
	padding: var(--hs-pad, 56px);
	width: 100%;
}

/* ─── Contained mode (v4.37.0) ───
   For a full-bleed slider whose CONTENT must still line up with the site's
   grid: the background/overlay stay edge-to-edge (they're on the slide, not
   here) while the content box is capped and centered.

   `--hs-box` is the container plus the element padding on both sides, so the
   *inner* edge — where the text actually starts — lands exactly on the
   container boundary the user typed (1200 means the text aligns with other
   1200px sections, not 1200 minus padding).

   `--hs-gutter` is the leftover space on one side; the absolutely-positioned
   arrows and dots below add it to their inset so navigation aligns with the
   content instead of the viewport edge. `max(0px, …)` keeps the gutter from
   going negative on viewports narrower than the container. */
.sia-hs--contained-yes {
	--hs-box: calc(var(--hs-container, 1200px) + var(--hs-pad, 56px) * 2);
	--hs-gutter: max(0px, calc((100% - var(--hs-box)) / 2));
}
.sia-hs--contained-yes .sia-hs__content-wrap {
	max-width: var(--hs-box);
	margin-inline: auto;
}
.sia-hs__content {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	max-width: var(--hs-content-max, 600px);
	color: #fff;
}

/* ─── Vertical alignment (content-wrap align-items, cross axis = vertical
   since the wrap is a default row flex) ─── */
.sia-hs--valign-top    .sia-hs__content-wrap { align-items: flex-start; }
.sia-hs--valign-middle .sia-hs__content-wrap { align-items: center; }
.sia-hs--valign-bottom .sia-hs__content-wrap { align-items: flex-end; }

/* ─── Horizontal alignment (content-wrap justify-content = main axis;
   content box align-items + text-align for inner children) ─── */
.sia-hs--halign-left   .sia-hs__content-wrap { justify-content: flex-start; }
.sia-hs--halign-center .sia-hs__content-wrap { justify-content: center; }
.sia-hs--halign-right  .sia-hs__content-wrap { justify-content: flex-end; }
.sia-hs--halign-left   .sia-hs__content { align-items: flex-start; text-align: left; }
.sia-hs--halign-center .sia-hs__content { align-items: center; text-align: center; }
.sia-hs--halign-right  .sia-hs__content { align-items: flex-end; text-align: right; }

/* ─── Per-slide alignment override (placed AFTER the widget-default rules
   so equal-specificity selectors win for the overridden slide) ─── */
.sia-hs__slide--valign-top    .sia-hs__content-wrap { align-items: flex-start; }
.sia-hs__slide--valign-middle .sia-hs__content-wrap { align-items: center; }
.sia-hs__slide--valign-bottom .sia-hs__content-wrap { align-items: flex-end; }
.sia-hs__slide--halign-left   .sia-hs__content-wrap { justify-content: flex-start; }
.sia-hs__slide--halign-center .sia-hs__content-wrap { justify-content: center; }
.sia-hs__slide--halign-right  .sia-hs__content-wrap { justify-content: flex-end; }
.sia-hs__slide--halign-left   .sia-hs__content { align-items: flex-start; text-align: left; }
.sia-hs__slide--halign-center .sia-hs__content { align-items: center; text-align: center; }
.sia-hs__slide--halign-right  .sia-hs__content { align-items: flex-end; text-align: right; }

/* ─── Swap title ↔ subtitle order ─── */
.sia-hs--swapped .sia-hs__title    { order: 2; }
.sia-hs--swapped .sia-hs__subtitle { order: 1; }
.sia-hs--swapped .sia-hs__pill     { order: 0; }
.sia-hs--swapped .sia-hs__btn      { order: 3; }

/* ─── Pill ─── */
.sia-hs__pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px;
	padding: 7px 15px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
	background: rgba(255, 255, 255, 0.1);
	/* color driven by --hs-pill-color (per-slide) → --hs-pill-color-default
	   (widget control) → hardcoded fallback. */
	color: var(--hs-pill-color, var(--hs-pill-color-default, #ffd34e));
}
.sia-hs__pill-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1em;
}
.sia-hs__pill-icon svg,
.sia-hs__pill-icon i {
	width: 1em;
	height: 1em;
	font-size: 1em;
	line-height: 1;
}
.sia-hs__pill-icon svg { fill: currentColor; display: block; }

/* ─── Title ─── */
.sia-hs__title {
	margin: 0;
	font-size: clamp(1.9rem, 4.4vw, 3.3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--hs-title-color, var(--hs-title-color-default, #ffffff));
}

/* ─── Subtitle ─── */
.sia-hs__subtitle {
	margin: 0;
	font-size: clamp(0.98rem, 1.4vw, 1.1rem);
	line-height: 1.55;
	color: var(--hs-subtitle-color, var(--hs-subtitle-color-default, rgba(255, 255, 255, 0.85)));
}

/* ─── Button ─── */
.sia-hs__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 26px;
	border: none;
	border-radius: 999px;
	background: var(--sia-color-secondary, #282a71);
	color: #fff;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
	margin-top: 6px;
}
.sia-hs__btn:hover { transform: translateY(-2px); }
/* v4.6.1: icon centering — covers BOTH <svg> and webfont <i> (Elementor
   renders FA either way depending on the site's icon setting). The flex
   button already centers via align-items; the icon wrapper is a clean
   centered box and the glyph is sized to 1em with line-height 1 so it
   sits on the text's optical center, not its baseline. */
.sia-hs__btn-text { line-height: 1; }
.sia-hs__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.sia-hs__btn-icon svg,
.sia-hs__btn-icon i {
	width: 1em;
	height: 1em;
	font-size: 1em;
	line-height: 1;
}
.sia-hs__btn-icon svg { fill: currentColor; display: block; }
.sia-hs__btn:focus-visible {
	outline: 2px solid var(--sia-color-primary, #6EC1E4);
	outline-offset: 3px;
}

/* ─── Navigation — hero-scoped positioning (v4.6.1) ───
   The shared carousel-base.css positions arrows/dots, but we re-assert it
   here HERO-scoped (higher specificity, loads after carousel-base) so the
   arrows land reliably AND everything (content + dots + arrows) shares the
   single `--hs-pad` inset → uniform alignment. Fixes the editor case where
   the bottom-bar arrows stayed vertically centered on the sides. */

/* Sides layout (default) — arrows vertically centered, inset by element pad */
.sia-hs:not(.sia-carousel--nav-bar) .elementor-swiper-button {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}
.sia-hs:not(.sia-carousel--nav-bar) .elementor-swiper-button-prev { left: var(--hs-pad, 56px); right: auto; }
.sia-hs:not(.sia-carousel--nav-bar) .elementor-swiper-button-next { right: var(--hs-pad, 56px); left: auto; }

/* Bottom-bar layout — dots bottom-left, circular arrows bottom-right, all
   at the element padding so they align with the content column. */
.sia-hs.sia-carousel--nav-bar .swiper-pagination {
	left: var(--hs-pad, 56px);
	right: auto;
	/* v4.6.3: instead of computing a fragile per-dot offset, give the dots
	   row the SAME bottom + height as the arrow circles and flex-center the
	   bullets inside that band. Both the dots box and each arrow circle then
	   occupy the identical vertical band (bottom: --hs-pad, height: arrow
	   size) → their centers line up exactly, regardless of the dot size. */
	bottom: var(--hs-pad, 56px);
	top: auto;
	height: var(--sia-nav-btn-size, 46px);
	width: auto;
	display: flex;
	align-items: center;
}
.sia-hs.sia-carousel--nav-bar .elementor-swiper-button {
	top: auto;
	bottom: var(--hs-pad, 56px);
	transform: none;
}
.sia-hs.sia-carousel--nav-bar .elementor-swiper-button:hover {
	transform: translateY(-2px);
}
.sia-hs.sia-carousel--nav-bar .elementor-swiper-button-next {
	right: var(--hs-pad, 56px);
	left: auto;
}
.sia-hs.sia-carousel--nav-bar .elementor-swiper-button-prev {
	right: calc(var(--hs-pad, 56px) + var(--sia-nav-btn-size, 46px) + var(--sia-nav-btn-gap, 10px));
	left: auto;
}

/* Contained mode — every nav inset above gains the gutter, so arrows and dots
   sit on the container edge rather than the viewport edge (the content they
   belong to is centered there). Same rules, same specificity + one extra class,
   declared after → these win. */
.sia-hs--contained-yes:not(.sia-carousel--nav-bar) .elementor-swiper-button-prev {
	left: calc(var(--hs-gutter, 0px) + var(--hs-pad, 56px));
}
.sia-hs--contained-yes:not(.sia-carousel--nav-bar) .elementor-swiper-button-next {
	right: calc(var(--hs-gutter, 0px) + var(--hs-pad, 56px));
}
.sia-hs--contained-yes.sia-carousel--nav-bar .swiper-pagination {
	left: calc(var(--hs-gutter, 0px) + var(--hs-pad, 56px));
}
.sia-hs--contained-yes.sia-carousel--nav-bar .elementor-swiper-button-next {
	right: calc(var(--hs-gutter, 0px) + var(--hs-pad, 56px));
}
.sia-hs--contained-yes.sia-carousel--nav-bar .elementor-swiper-button-prev {
	right: calc(var(--hs-gutter, 0px) + var(--hs-pad, 56px) + var(--sia-nav-btn-size, 46px) + var(--sia-nav-btn-gap, 10px));
}

/* ─── Arrow buttons — boxed + styleable in BOTH layouts (v4.6.6) ───
   Controls drive the vars; defaults reproduce the bottom-bar circle. Set
   radius 0 + transparent bg/border for plain arrows. */
.sia-hs .elementor-swiper-button {
	width: var(--hs-arrow-box, 46px);
	height: var(--hs-arrow-box, 46px);
	border-radius: var(--hs-arrow-radius, 50%);
	background: var(--hs-arrow-bg, rgba(255, 255, 255, 0.12));
	border: var(--hs-arrow-bw, 1px) solid var(--hs-arrow-bd, rgba(255, 255, 255, 0.3));
	box-sizing: border-box;
}

/* ─── Pagination: active item grows for emphasis ───
   Dots scale up; lines extend in length (a clearer progress cue than a
   uniform scale on a thin bar). Smooth transition on change. */
.sia-hs--pag-dots .swiper-pagination-bullet {
	transition: transform 0.25s ease, background 0.2s ease;
}
.sia-hs--pag-dots .swiper-pagination-bullet-active {
	transform: scale(1.4);
}

/* ─── Pagination: Lines variant (bullets → bars) ─── */
.sia-hs--pag-lines .swiper-pagination-bullet {
	width: var(--hs-line-w, 28px);
	height: var(--hs-line-h, 4px);
	border-radius: 2px;
	transition: width 0.3s ease, background 0.2s ease;
}
.sia-hs--pag-lines .swiper-pagination-bullet-active {
	/* grow in length, not a uniform scale (which is invisible on a thin bar) */
	width: calc(var(--hs-line-w, 28px) * 1.7);
	transform: none;
}

/* ─── Pagination: Counter (fraction "01 / 03") ─── */
.sia-hs .swiper-pagination-fraction {
	width: auto;
	white-space: nowrap;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
}
.sia-hs__counter-sep { opacity: 0.6; }

/* ─── Responsive — tighten the uniform inset on small screens ─── */
@media (max-width: 768px) {
	.sia-hs { --hs-pad: 32px; }
}
@media (max-width: 480px) {
	.sia-hs { --hs-pad: 22px; }
	.sia-hs__content { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════
   TRANSITIONS
   All effects except "slide" ride on Swiper's fade (crossFade) — the
   outgoing slide fades out while the incoming fades in. The per-effect
   motion below is keyed to `.swiper-slide-active`, which Swiper adds to
   the current slide on every change, so each animation replays as a slide
   becomes active. `slide` (horizontal push) needs nothing extra.
   ════════════════════════════════════════════════════════════ */

/* ─── Ken Burns: slow continuous zoom on the active slide's image, plus a
   gentle pan. Reads as a living, breathing hero. ─── */
@keyframes sia-hs-kenburns {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
}
.sia-hs--fx-kenburns .swiper-slide-active .sia-hs__bg img {
	animation: sia-hs-kenburns 9s ease-out forwards;
	transform-origin: var(--hs-bg-pos, center);
}

/* ─── Zoom Fade: incoming slide's image scales 1.08 → 1 (settles in) while
   the crossfade runs. ─── */
@keyframes sia-hs-zoomin {
	from { transform: scale(1.08); }
	to   { transform: scale(1); }
}
.sia-hs--fx-zoomfade .swiper-slide-active .sia-hs__bg img {
	animation: sia-hs-zoomin 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	transform-origin: var(--hs-bg-pos, center);
}

/* ─── Wave wipe: the active slide reveals behind a wavy vertical edge that
   sweeps left → right, using an SVG mask whose right edge is a sine wave.
   The mask is 220% wide; animating mask-position sweeps the wavy boundary
   across the slide for a liquid reveal. Pure CSS, no library. ─── */
@keyframes sia-hs-wave {
	from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
	to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}
.sia-hs--fx-wave .swiper-slide-active {
	/* White region = visible. The path fills the left side and undulates on
	   its right edge; sweeping it across reveals the slide with a wave front. */
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0,0 L62,0 C 52,14 72,28 60,42 C 50,56 70,70 60,84 C 53,93 66,97 62,100 L0,100 Z' fill='white'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0,0 L62,0 C 52,14 72,28 60,42 C 50,56 70,70 60,84 C 53,93 66,97 62,100 L0,100 Z' fill='white'/></svg>");
	-webkit-mask-size: 220% 100%;
	        mask-size: 220% 100%;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	animation: sia-hs-wave 0.9s cubic-bezier(0.65, 0, 0.35, 1) both;
}

/* ─── Parallax depth: the content box drifts up + fades in slightly after
   the background settles, so it reads as a separate, closer layer.
   Combines with any transition (it only touches the content). ─── */
@keyframes sia-hs-parallax-in {
	from { transform: translateY(34px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}
.sia-hs--parallax .swiper-slide-active .sia-hs__content {
	animation: sia-hs-parallax-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s both;
}

/* ─── Reduced motion — drop all transition motion; slides just appear. ─── */
@media (prefers-reduced-motion: reduce) {
	.sia-hs__btn { transition: none; }
	.sia-hs--fx-kenburns .swiper-slide-active .sia-hs__bg img,
	.sia-hs--fx-zoomfade .swiper-slide-active .sia-hs__bg img,
	.sia-hs--fx-wave .swiper-slide-active,
	.sia-hs--parallax .swiper-slide-active .sia-hs__content {
		animation: none !important;
	}
	.sia-hs--fx-wave .swiper-slide-active {
		-webkit-mask-image: none !important;
		        mask-image: none !important;
	}
}