/**
 * TechRoyal Premium Hero Slider — New in 1.9. Full-width refresh in 1.11.
 *
 * Replaces the old `.sina-banner-slider` (Owl Carousel) banner.
 * Built on SwiperJS (enqueued separately, CDN, only where this
 * renders — see class-assets.php). Fade transition, full artwork
 * always visible (object-fit: contain, never cropped), pagination
 * dots on every breakpoint, arrows on desktop only.
 *
 * v1.11.0: the hero is now a true full-width banner. The slider's
 * height is driven entirely by the artwork's own 16:9 aspect ratio
 * (aspect-ratio on the swiper container) instead of a fixed/clamped
 * px height, and every "card" treatment (dark background, side
 * margin, border-radius, box-shadow, image zoom) has been removed.
 * Only the artwork itself is ever visible — no background is drawn
 * behind or around it.
 */

/* ---------- Remove the old banner completely, no white gap ---------- */
.sina-banner-slider {
	display: none !important;
}

.elementor-section:first-of-type:has( .sina-banner-slider ) {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------- Hero slider shell ---------- */
/* Full width, no card frame: no side margin, no rounded corners,
   no shadow, no background of its own — the image is the banner. */
.trsc-hero {
	width: 100%;
	line-height: 0;
	background: transparent;
	margin: 0;
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
	opacity: 0;
	animation: trsc-hero-fade-in 600ms ease forwards;
	animation-delay: 100ms;
}

@keyframes trsc-hero-fade-in {
	to {
		opacity: 1;
	}
}

/* Height comes from the artwork's own 16:9 ratio, not a fixed/clamped
   px value — this is what keeps the banner short on phones instead of
   forcing a tall block with letterboxing above/below the image. */
.trsc-hero-slider.swiper {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	overflow: hidden;
	background: transparent;
}

.trsc-hero-slider .swiper-wrapper {
	background: transparent;
}

.trsc-hero-slider .swiper-slide {
	width: 100%;
	height: 100%;
	background: transparent;
}

.trsc-hero-slider picture,
.trsc-hero-slide-link {
	display: block;
	width: 100%;
	height: 100%;
	background: transparent;
}

/* Show the complete artwork: no crop, no zoom. The slide container
   already matches the image's 16:9 ratio, so `contain` fills it
   edge-to-edge without any letterboxing being needed. */
.trsc-hero-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transform: none;
}

/* ---------- Pagination dots (all breakpoints) ---------- */
/* Sit inside the image area itself, near the bottom edge. */
.trsc-hero-slider .swiper-pagination {
	bottom: 14px;
}

.trsc-hero-slider .swiper-pagination-bullet {
	width: 9px;
	height: 9px;
	background: #3a3a3a;
	opacity: 0.85;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}

.trsc-hero-slider .swiper-pagination-bullet-active {
	opacity: 1;
	background: #d4af37;
	transform: scale( 1.25 );
	box-shadow: 0 0 8px 2px rgba( 212, 175, 55, 0.65 );
}

/* ---------- Arrows: desktop only ---------- */
.trsc-hero-prev,
.trsc-hero-next {
	display: none;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	background: rgba( 12, 12, 12, 0.55 );
	border: 1px solid rgba( 212, 175, 55, 0.4 );
	border-radius: 50%;
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	transition: background 0.2s ease, border-color 0.2s ease;
}

.trsc-hero-prev:hover,
.trsc-hero-next:hover {
	background: rgba( 12, 12, 12, 0.8 );
	border-color: rgba( 212, 175, 55, 0.8 );
}

.trsc-hero-prev::after,
.trsc-hero-next::after {
	font-size: 16px;
	color: #d4af37;
	font-weight: 700;
}

@media ( min-width: 1025px ) {
	.trsc-hero-prev,
	.trsc-hero-next {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* ---------- Small-screen pagination tweak ---------- */
/* Aspect ratio already handles height on every breakpoint, so no
   height rules are needed here — only the tighter dot spacing. */
@media ( max-width: 600px ) {
	.trsc-hero-slider .swiper-pagination {
		bottom: 10px;
	}

	.trsc-hero-slider .swiper-pagination-bullet {
		width: 7px;
		height: 7px;
	}
}

/* ---------- Reduced motion: skip fade animation, keep autoplay ---------- */
@media ( prefers-reduced-motion: reduce ) {
	.trsc-hero {
		opacity: 1;
		animation: none;
	}

	.trsc-hero-slider .swiper-slide {
		transition-duration: 0ms !important;
	}
}