/**
 * Home hero slideshow on the Elementor Pro Slides widget inside "Hero foto".
 * Transition: a navy band at the logo's 71° slant sweeps across the photo; the photo swaps
 * behind it halfway (assets/js/hero-slides.js). Tabs: slanted blocks at the top right,
 * the current one fills up over the slide interval.
 */
.hero-photo {
	--vlt-slant-x: calc(clamp(480px, 50vw, 700px) * 0.3443); /* sideways shift of a 71° edge over the photo height */
	--vlt-interval: 6000ms;
}
@media (max-width: 1024px) {
	.hero-photo { --vlt-slant-x: calc(clamp(360px, 44vw, 560px) * 0.3443); }
}

/* The slider fills the photo area; the hero sets the height per breakpoint. */
.hero-photo .elementor-widget-slides,
.hero-photo .elementor-widget-slides .elementor-widget-container,
.hero-photo .elementor-slides-wrapper,
.hero-photo .elementor-slides-wrapper .swiper,
.hero-photo .elementor-slides-wrapper .swiper-wrapper,
.hero-photo .elementor-slides-wrapper .swiper-slide {
	height: 100% !important;
}
.hero-photo .elementor-widget-slides { position: absolute; inset: 0; width: 100%; }
.hero-photo .swiper-slide-bg { background-position: 50% 100%; }

/* The sweep band */
.hero-photo .vlt-sweep {
	position: absolute; z-index: 3; top: 0; bottom: 0;
	left: calc(-1 * var(--vlt-slant-x)); width: calc(100% + 2 * var(--vlt-slant-x));
	background: var(--navy, #15194c);
	transform: translateX(-100%) skewX(-19deg); transform-origin: bottom left;
	pointer-events: none;
}
.hero-photo .is-sweeping .vlt-sweep { animation: vlt-sweep 1100ms cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes vlt-sweep {
	from { transform: translateX(-100%) skewX(-19deg); }
	to { transform: translateX(100%) skewX(-19deg); }
}

/* Tabs: the widget's dots as slanted blocks at the top right (34×40 hit area, 14px visible block) */
.hero-photo .swiper-pagination {
	position: absolute; z-index: 4; top: 1.5rem; bottom: auto !important; left: auto !important; width: auto !important;
	right: max(var(--gutter, 20px), (100% - var(--container, 75rem)) / 2 + var(--gutter, 20px));
	display: flex; gap: 8px; transform: none !important;
}
.hero-photo .swiper-pagination-bullet {
	position: relative; width: 34px; height: 40px; margin: 0 !important; padding: 0;
	border-radius: 0; opacity: 1; background: none; cursor: pointer;
}
.hero-photo .swiper-pagination-bullet::before,
.hero-photo .swiper-pagination-bullet::after {
	content: ""; position: absolute; left: 0; right: 0; top: 13px; bottom: 13px; transform: skewX(-19deg);
}
.hero-photo .swiper-pagination-bullet::before { background: rgba(13, 16, 54, 0.72); transition: background-color 200ms; }
.hero-photo .swiper-pagination-bullet:hover::before { background: var(--primary, #2a3198); }
.hero-photo .swiper-pagination-bullet-active::before { background: rgba(255, 255, 255, 0.55); }
.hero-photo .swiper-pagination-bullet::after { background: #fff; transform: scaleX(0) skewX(-19deg); transform-origin: left; }
.hero-photo .swiper-pagination-bullet-active::after {
	transform: skewX(-19deg);
	animation: vlt-slide-progress var(--vlt-interval) linear both;
}
.hero-photo .is-paused .swiper-pagination-bullet-active::after { animation-play-state: paused; }
.hero-photo .swiper-pagination-bullet:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes vlt-slide-progress { from { transform: scaleX(0) skewX(-19deg); } to { transform: skewX(-19deg); } }
@media (max-width: 1024px) {
	.hero-photo .swiper-pagination { top: 1rem; right: var(--gutter, 20px); }
}

@media (prefers-reduced-motion: reduce) {
	.hero-photo .vlt-sweep { display: none; }
	.hero-photo .swiper-pagination-bullet-active::after { animation: none; }
}