/* Reserve the homepage's wide editorial image before LiteSpeed lazy loading. */
.home .image-section,
.home .image-section .image,
.home .image-section .image img {
	display: block;
	width: 100%;
}

.home .image-section .image {
	aspect-ratio: 1920 / 600;
	overflow: hidden;
}

.home .image-section .image img {
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Reserve and paint the above-the-fold logo before its small WebP arrives. */
.home .main-header .header-upper .logo-box .logo {
	width: 200px;
	max-width: 100%;
	aspect-ratio: 400 / 130;
	background: #111;
	overflow: hidden;
}

.home .main-header .header-upper .logo-box .logo > a,
.home .main-header .header-upper .logo-box .logo img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * CLS: keep the first viewport geometry identical before and after the
 * responsive stylesheet, icon fonts and Owl finish loading.
 */
.home .banner-section,
.home .banner-section .banner-carousel,
.home .banner-section .owl-stage-outer,
.home .banner-section .owl-stage,
.home .banner-section .owl-item,
.home .banner-section .slide-item {
	height: 680px;
	min-height: 680px;
}

.home .banner-section {
	overflow: hidden;
}

/*
 * First paint: Owl's base stylesheet hides the whole carousel until its
 * JavaScript initialization finishes. Show only the real first slide during
 * that short pre-Owl phase; once .owl-loaded is added, these rules stop
 * matching and Owl takes over normally.
 */
.home .banner-section .banner-carousel:not(.owl-loaded) {
	position: relative;
	display: block !important;
	overflow: hidden;
}

.home .banner-section .banner-carousel:not(.owl-loaded) > .slide-item:first-child {
	position: relative;
	display: block !important;
}

.home .banner-section .banner-carousel:not(.owl-loaded) > .slide-item:not(:first-child) {
	display: none !important;
}

/*
 * LCP: the first hero is now an eager responsive image inside the unchanged
 * image-layer. Its parent still receives the existing Ken Burns transform.
 */
.home .banner-section .vjencanice-lcp-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-image: none !important;
}

.home .banner-section .vjencanice-lcp-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Keep the Ken Burns movement running until Owl changes the slide at 9 s. */
.home .banner-section .slide-item .image-layer {
	transition: transform 9000ms linear !important;
}

/* Keep Owl's mobile row stable while autoplay remains enabled. */
@media (max-width: 767px) {
	.home .main-header,
	.home .main-header .header-upper {
		height: 96px;
		min-height: 96px;
	}

	.home .banner-section,
	.home .banner-section .banner-carousel,
	.home .banner-section .owl-stage-outer,
	.home .banner-section .owl-stage,
	.home .banner-section .owl-item,
	.home .banner-section .slide-item {
		height: 440px;
		min-height: 440px;
	}

	/* Keep Owl items in one row even before its first responsive refresh. */
	.home .banner-carousel.owl-loaded .owl-stage {
		display: flex !important;
		flex-wrap: nowrap !important;
	}

	.home .banner-carousel.owl-loaded .owl-item {
		float: none !important;
		flex: 0 0 auto !important;
	}

}