/**
 * Banner Video Styles
 * Styles for video banners on category pages and product archive banners
 *
 * Aspect Ratios (width × height):
 * - Cover Desktop: 1037 × 590 → 56.9% (currently using 35% to match existing display)
 * - Cover Mobile: 600 × 500 → 83.3%
 * - Banner Desktop: 1156 × 870 → 75.26%
 * - Banner Mobile: 640 × 892 → 139.4%
 */

/* ==========================================================================
   Cover Video Banner Styles (Category Page Header)
   ========================================================================== */

.vibes_cat_banner_wrapper {
    position: relative;
    overflow: hidden;
}

/* Desktop cover video - matches existing image display */
.vibes_cat_banner_wrapper.has-video-banner .cover-video-frame {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 35%;
    overflow: hidden;
}

/* Mobile cover video: 600 × 500 = 83.3% */
@media (max-width: 767px) {
    .vibes_cat_banner_wrapper.has-video-banner .cover-video-frame {
        padding-bottom: 83.3%; /* 500/600 */
    }
}

.vibes_cat_banner_wrapper.has-video-banner .banner-video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.vibes_cat_banner_wrapper.has-video-banner.video-loaded .banner-video-poster {
    opacity: 0;
}

.vibes_cat_banner_wrapper.has-video-banner .hero-video-mute-btn {
    z-index: 10;
}

/* ==========================================================================
   Banner Media Wrapper (Product Archive Banners)
   ========================================================================== */

.banner-media-wrapper {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Picture element should fill container */
.banner-media-wrapper picture {
    display: block;
    width: 100%;
}

.banner-media-wrapper picture img {
    display: block;
    width: 100%;
    height: auto;
}

/* Desktop banner video: 1156 × 870 = 75.26% */
.banner-media-wrapper.has-video-banner .banner-video-frame {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75.26%; /* 870/1156 */
    overflow: hidden;
}

.banner-media-wrapper.has-video-banner .banner-video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.banner-media-wrapper.has-video-banner.video-loaded .banner-video-poster {
    opacity: 0;
}

/* Archive banner column - Desktop: 1156 × 870 = 75.26% */
.archive-banner-col .banner-media-wrapper.has-video-banner .banner-video-frame {
    padding-bottom: 75.26%; /* 870/1156 */
}

/* Mobile banner video: 640 × 892 = 139.4% */
@media (max-width: 767px) {
    .banner-media-wrapper.has-video-banner .banner-video-frame,
    .archive-banner-col .banner-media-wrapper.has-video-banner .banner-video-frame {
        padding-bottom: 139.4%; /* 892/640 */
    }
}

/* ==========================================================================
   Mute Button Styles (Shared)
   ========================================================================== */

.banner-video-frame .hero-video-mute-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
}

.banner-video-frame .hero-video-mute-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.05);
}

.banner-video-frame .hero-video-mute-btn:focus {
    outline: 2px solid #333;
    outline-offset: 2px;
}

.banner-video-frame .hero-video-mute-btn svg {
    width: 20px;
    height: 20px;
    color: #333;
}

/*
 * Mute/Unmute icon visibility
 * Default state: data-muted="true" (muted for autoplay) - show mute icon (speaker with X)
 * When unmuted: data-muted="false" - show unmute icon (speaker with waves)
 */
.banner-video-frame .hero-video-mute-btn .mute-icon {
    display: none;
}

.banner-video-frame .hero-video-mute-btn .unmute-icon {
    display: flex;
}

.banner-video-frame .hero-video-mute-btn[data-muted="true"] .mute-icon {
    display: flex;
}

.banner-video-frame .hero-video-mute-btn[data-muted="true"] .unmute-icon {
    display: none;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .banner-video-frame .hero-video-mute-btn {
        bottom: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
    }

    .banner-video-frame .hero-video-mute-btn svg {
        width: 18px;
        height: 18px;
    }
}