/* ── Wrapper ─────────────────────────────────────────────────── */
.hero-banner-slider-wrapper {
    width: 100%;
    overflow: hidden;
}

/* ── Swiper base ─────────────────────────────────────────────── */
.hero-banner-swiper {
    width: 100%;
    height: auto;
    position: relative;
}

.hero-banner-swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

/* ── Slide ───────────────────────────────────────────────────── */
.hero-banner-slide {
    height: auto !important;   /* !h-auto */
    flex-shrink: 0;
    position: relative;
    width: 100%;
}

.hero-banner-slide > a {
    display: block;            /* block */
    height: 100%;              /* h-full */
}

/* ── Slide images ────────────────────────────────────────────── */
.hero-banner-slide img {
    width: 100%;               /* w-full */
    height: 100%;              /* h-full */
    object-fit: cover;         /* object-cover */
    display: block;
}

/* Desktop image: hidden on mobile, visible on md+ */
.hero-banner-slide .desktop-image {
    display: none;
}
@media ( min-width: 768px ) {
    .hero-banner-slide .desktop-image {
        display: block;
    }
    .hero-banner-slide .mobile-image {
        display: none;
    }
}

/* ── Pagination ──────────────────────────────────────────────── */
.hero-banner-pagination {
    position: absolute;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX( -50% );
    z-index: 10;
    gap: 6px;
    align-items: center;
    bottom: 8px !important;
}

.hero-banner-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    opacity: .6;
    cursor: pointer;
    transition: background 0.3s;
}

.hero-banner-pagination .swiper-pagination-bullet-active {
    background: #fff;
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   VIDEO BANNER  (inlined from video-banner.blade.php)
   ═══════════════════════════════════════════════════════════════ */

.video-banner {
    overflow: hidden;
    width: 100%;
}

/* inner relative wrapper */
.video-banner .video-banner__inner {
    position: relative;
}

/* background images row */
.video-banner .video-banner__images {
    display: flex;
    justify-content: center;
}

.video-banner .video-banner__images img {
    width: 100%;
    height: auto;
    display: block;
}

/* desktop bg image: hidden on mobile */
.video-banner .video-banner__images .desktop-image {
    display: none;
}
@media ( min-width: 1024px ) {
    .video-banner .video-banner__images .desktop-image {
        display: flex;
    }
    .video-banner .video-banner__images .mobile-image {
        display: none;
    }
}

/* overlay grid */
.video-banner__overlay {
    position: absolute;          /* absolute inset-0 */
    inset: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr 1fr; /* grid-rows-2 on mobile */
    grid-template-columns: 1fr;  /* grid-cols-1 on mobile */
}

@media ( min-width: 1024px ) {
    .video-banner__overlay {
        grid-template-rows: 1fr;     /* lg:grid-rows-1 */
        grid-template-columns: 1fr 1fr; /* lg:grid-cols-2 */
    }
}

/* left empty cell */
.video-banner__overlay-left {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* right video cell */
.video-banner__overlay-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding-bottom: 20px;         /* max-lg:pb-5 */
}

@media ( min-width: 1024px ) {
    .video-banner__overlay-right {
        padding-bottom: 0;
        padding-right: 60px;      /* lg:pr-[60px] */
    }
}

/* video element */
.video-banner__video {
    width: 100% !important;
    height: 100%;  
    /* max-width: 79% !important;               max-lg:h-full */
    border-radius: 16px;          /* rounded-[16px] */
    box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.3 ); /* shadow-xl/30 */
    position: relative;
    z-index: 1;
}

@media ( min-width: 1024px ) {
    .video-banner__video {
        width: 100% !important;              /* lg:w-full */
        height: auto;
        max-width: 1050px !important;         /* lg:max-w-[828px] */
        border-radius: 30px;      /* lg:rounded-[30px] */
    }
}

/* sound toggle button */
.sound-toggle-btn {
    position: absolute;
    bottom: 16px;                 /* bottom-4 */
    right: 16px;                  /* right-4 */
    background: rgba( 0, 0, 0, 0.7 );  /* bg-black/70 */
    color: #ffffff;
    font-size: 0.875rem;          /* text-sm */
    padding: 8px 16px;            /* px-4 py-2 */
    border-radius: 9999px;        /* rounded-full */
    border: none;
    cursor: pointer;
    backdrop-filter: blur( 12px ); /* backdrop-blur-md */
    transition: background 0.2s ease;
    z-index: 9999;
    height: 36px;
    width: 150px;
    top: 12px;
    left: 12px;
}

.sound-toggle-btn:hover {
    background: rgba( 0, 0, 0, 0.8 ); /* hover:bg-black/80 */
}
 
.video-banner__overlay .video-banner__overlay-right .video-wrapper {
    position: relative;
    width: 100%;
}

@media all and (max-width: 1024px) {
    .video-banner__overlay .video-banner__overlay-right .video-wrapper {
        width: auto;
    }
    .video-banner__overlay .video-banner__overlay-right {
        padding-left: 20px;
    padding-right: 20px;
    }
}


.video-banner__link-area {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.video-banner__overlay-left {
    position: relative;
    z-index: 2;
}

.video-banner__overlay-right {
    position: relative;
    z-index: 3;
}