/* YUKOIL Hero Slider — Swiper base CSS comes from Elementor's 'swiper' handle. */
.elementor-widget-yukoil_hero_slider,
.elementor-widget-yukoil_hero_slider > .elementor-widget-container { width: 100%; }

.yhs-wrap { position: relative; width: 100%; }

.yhs {
	position: relative; width: 100%; overflow: hidden;
	height: clamp(460px, 72vh, 650px);
	background: #051D49;
}
.yhs .swiper-slide { position: relative; overflow: hidden; height: 100%; }
.yhs-slide { position: relative; width: 100%; height: 100%; }

/* ".elementor img { height:auto }" (0,1,1) beats a plain class — compound selector keeps cover-fit working. */
.yhs-slide .yhs-img {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
	object-fit: cover; object-position: var(--yhs-pos-d, center center); display: block;
}
.yhs-slide .yhs-img--mobile { display: none; }
.yhs-slide picture.yhs-pic { display: contents; }

.yhs-overlay {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.yhs-slide.has-overlay .yhs-overlay { background: linear-gradient(90deg, rgba(5,29,73,.85) 0%, rgba(5,29,73,.55) 45%, rgba(5,29,73,0) 75%); }

.yhs-content {
	position: absolute; z-index: 2; top: 50%; left: max(77px, 7%);
	transform: translateY(-50%); width: min(44%, 620px); color: #fff;
}
.yhs-content .yhs-title {
	margin: 0 0 16px; color: #f1f1f1; text-transform: uppercase;
	font-family: "Druk Wide LC Web", Inter, Arial, sans-serif; font-weight: 700; letter-spacing: .03em;
	font-size: clamp(22px, 2.6vw, 36px); line-height: 1.3; overflow-wrap: break-word;
}
.yhs-content .yhs-desc { margin: 0 0 28px; color: #fff; font-size: 18px; line-height: 1.6; }

.yhs-btn {
	display: inline-block; padding: 15px 38px; text-decoration: none; border-radius: 0;
	font-size: 14px; transition: background-color .25s, color .25s;
}
.yhs-btn--white { background: #fff; color: #18012c; }
.yhs-btn--white:hover { background: #FFCE00; color: #051D49; }
.yhs-btn--yellow { background: #FFCE00; color: #051D49; font-weight: 700; }
.yhs-btn--yellow:hover { background: #FFD74B; color: #051D49; }
.yhs-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Navigation: square navy keys, yellow chevrons, Druk counter + autoplay progress (bottom-left, aligned with text) */
.yhs-nav { position: absolute; z-index: 3; left: max(77px, 7%); bottom: 30px; display: flex; align-items: center; gap: 6px; }
.yhs-arrow {
	width: 48px; height: 48px; padding: 0; border: 0; cursor: pointer; border-radius: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(5,29,73,.92); color: #FFCE00; box-shadow: none;
	transition: background-color .2s, color .2s;
}
.yhs-arrow:hover, .yhs-arrow:focus-visible { background: #FFCE00; color: #051D49; outline: none; }
.yhs-count {
	display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 48px; min-width: 112px; justify-content: center;
	background: rgba(5,29,73,.88); color: rgba(255,255,255,.55);
	font-family: "Druk Wide LC Web", Inter, Arial, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .06em;
}
.yhs-count b { color: #fff; font-weight: 700; }
.yhs-sep { width: 22px; height: 2px; background: #FFCE00; display: block; }
.yhs-bar { position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: rgba(255,255,255,.22); }
@keyframes yhs-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.yhs-bar i { display: block; height: 100%; background: #FFCE00; transform-origin: left; transform: scaleX(0); }
/* with the nav block the centred dots are redundant on desktop */
.yhs-wrap .yhs-nav ~ .yhs-pagination { display: none; }

/* Swiper's own pagination rule has 2 classes — match it. */
.yhs-pagination.swiper-pagination-horizontal {
	position: absolute; z-index: 3; left: 0; right: 0; bottom: 22px; width: 100%;
	display: flex; justify-content: center; gap: 10px;
}
.yhs-pagination .swiper-pagination-bullet {
	width: 28px; height: 3px; border-radius: 0; margin: 0; opacity: 1; cursor: pointer;
	background: rgba(255,255,255,.4);
}
.yhs-pagination .swiper-pagination-bullet-active { background: #FFCE00; }

@media (max-width: 1024px) {
	.yhs-content { left: 6%; width: 60%; }
	.yhs-nav { left: 6%; }
}
@media (max-width: 767px) {
	.yhs { height: 520px; }
	.yhs-slide .yhs-img { object-position: var(--yhs-pos-m, center center); }
	/* Desktop-art slides on phones: art in the top ~60%, text below it (no overlap) */
	.yhs-slide:not(.has-mobile-img) .yhs-img { height: 62%; bottom: auto; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
	.yhs-slide.has-mobile-img .yhs-img--desktop { display: none; }
	.yhs-slide.has-mobile-img .yhs-img--mobile { display: block; }
	.yhs-content { left: 6%; right: 6%; width: auto; top: auto; bottom: 64px; transform: none; }
	.yhs-content .yhs-title { font-size: 18px; letter-spacing: .02em; margin-bottom: 12px; }
	.yhs-content .yhs-desc { font-size: 15px; line-height: 1.5; margin-bottom: 18px; }
	.yhs-slide .yhs-overlay { background: linear-gradient(0deg, rgba(5,29,73,.9) 0%, rgba(5,29,73,.6) 55%, rgba(5,29,73,0) 100%); }
	.yhs-nav { display: none; }
	.yhs-wrap .yhs-nav ~ .yhs-pagination { display: flex; }
	.yhs-btn { display: block; text-align: center; }
	.yhs-pagination.swiper-pagination-horizontal { bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) { .yhs-bar i { animation: none !important; } .yhs .swiper-wrapper { transition-duration: 0ms !important; } }