/* ══════════════════════════════════════════════════
   HERO SLIDER — premium media card polish
   (Layout/sizing yahan nahi hai — wo hero.css me hai.
   Ye file sirf slider ke andar ki visual polish karti
   hai: gradient-ring border, ambient blurred background,
   contain-fit image, video fade-in.)
   ══════════════════════════════════════════════════ */

.hero-slider {
    position: relative;
    background: var(--bg2, #0f1118);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.45),
        0 0 40px rgba(249, 115, 22, 0.08);
}

/* Premium gradient-ring border — 1px, follows the rounded
   corners exactly (mask trick), works on any accent theme */
.hero-slider::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(249, 115, 22, 0.75),
        rgba(255, 255, 255, 0.10) 35%,
        rgba(255, 255, 255, 0.03) 60%,
        rgba(251, 146, 60, 0.55)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Wrapper around each slide's image/video */
.hero-slide-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg2, #0f1118);
}

/* Ambient blurred backdrop — automatically "matches" the
   background to whatever colors the photo itself has, so
   letterboxed edges never look like a hardcoded plain color */
.hero-slide-bg {
    position: absolute;
    inset: -24px;
    width: calc(100% + 48px);
    height: calc(100% + 48px);
    object-fit: cover;
    filter: blur(40px) saturate(1.6) brightness(0.6);
    transform: scale(1.15);
    z-index: 1;
}

/* Real photo — CONTAIN so it always fits fully inside the
   card, never crops and never spills outside its own box */
.hero-slide-img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Auto-fetched video sits on top of the image; if it fails
   to load (no video for that service) hero.php hides it via
   onerror, leaving the image + blurred backdrop visible */
.hero-slide-video {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    background: transparent;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hero-slide-video.is-visible {
    opacity: 1;
}

.hero-slide-caption {
    z-index: 6;
    border-radius: 0 0 24px 24px;
}

/* ══════════════════════════════════════════════════
   MOBILE — sirf font-size jaisi cheezein; height ab
   hero.css ke aspect-ratio se khud handle ho jaati hai
   ══════════════════════════════════════════════════ */

@media (max-width: 860px) {

    .hero-title {
        font-size: 32px !important;
        line-height: 1.25 !important;
    }

    .hero-trust {
        flex-wrap: wrap;
        gap: 14px !important;
    }

}