/* ==========================================================================
   UZMOOV.org — homepage hero slider (#owla-slides / .main-slide)

   Problem this fixes:
   `.main-slide` in style.min.css carried a hard `max-height:500px` together
   with `overflow:hidden`. The poster itself had no height of its own
   (`.cs-item img{height:auto}`), so a 16:9 upload in the 1170px container
   rendered ~658px tall and the bottom ~158px were simply chopped off.

   Approach: give the slide a real aspect-ratio frame instead of a magic
   pixel cap, and let the poster fill that frame. A true 16:9 image now
   lands pixel-perfect with no crop; anything else is centre-cropped rather
   than bottom-chopped.
   ========================================================================== */

.main-slide {
	/* the one knob: 56.25% = 9/16. Use 42.86% for 21:9, 41.84% for 2.39:1 */
	--slide-ratio: 56.25%;
	max-height: none;
}

/* ------------------------------------------------------------- the frame */

.main-slide .cs-item {
	position: relative;
	display: block;
	width: 100%;
}

/* percentage padding resolves against the container WIDTH, which is what
   turns this into a width-driven aspect-ratio box (works everywhere, no
   `aspect-ratio` support needed) */
.main-slide .cs-item::before {
	content: "";
	display: block;
	padding-top: 56.25%;
	padding-top: var(--slide-ratio);
}

.main-slide .cs-item img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	object-position: center;
}

/* ------------------------------------------------------- title & overlay */

.main-slide .cs-text {
	z-index: 100;
}

/* the old `padding:17% 0` pushed the title ~215px up from the bottom — it
   only looked right because the frame was being clipped. Anchor it to the
   real bottom edge instead. */
.main-slide .cs-title {
	padding: 0;
	bottom: 7%;
	width: 90%;
}

/* ------------------------------------------------------------ play icon */

/* was nudged up with a magic `-135px` margin tuned for the 500px frame */
.main-slide .cs-item i {
	top: 50%;
	left: 50%;
	margin: 0;
	transform: translate(-50%, -50%);
	transition: transform .2s ease, opacity .2s ease;
}

.main-slide .cs-item i:hover {
	transform: translate(-50%, -50%) scale(1.2);
}

/* ------------------------------------------------------------ nav arrows */

/* same story: `#owla-slides > div.owl-controls.clickable > div > div.owl-prev`
   set `margin:-135px` for the clipped frame. The arrows are 60px tall and
   sit at `top:50%`, so -30px is what actually centres them. Selector is
   weighted to outrank that original rule. */
#owla-slides > .owl-controls.clickable > .owl-buttons > div.owl-prev,
#owla-slides > .owl-controls.clickable > .owl-buttons > div.owl-next {
	margin: -30px 0 0 0;
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 767px) {
	.main-slide .cs-title {
		bottom: 5%;
	}

	.main-slide .cs-item i {
		font-size: 54px;
		width: 54px;
		height: 54px;
		line-height: 54px;
	}
}