/**
 * 首頁形象影片樣式
 * 
 * 用於顯示 Vimeo 形象影片的響應式容器
 * 支援桌機版（16:9）和手機版（9:16 直向）不同比例
 * 
 * @package Tixteel
 * @since 1.8.1
 */

/* 形象影片容器 */
.indexHeroVideo {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: #000;
    position: relative;
}

/* 影片容器基本樣式 */
.hero-video-container {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    background: #000;
}

/* iframe 樣式 */
.hero-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
    display: block;
    pointer-events: none; /* 防止使用者點擊影片 */
}

/* 載入動畫 */
.indexHeroVideo {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 確保影片在形象圖上方或下方時的間距 */
.indexHeroVideo + .indexSlide,
.indexSlide + .indexHeroVideo {
    margin-top: 0;
}

/* ==================== 桌機版樣式 ==================== */
@media (min-width: 769px) {
    /* 顯示桌機版影片，隱藏手機版影片 */
    .hero-video-desktop {
        display: block;
        padding-bottom: 56.25%; /* 16:9 橫向比例 */
    }
    
    .hero-video-mobile {
        display: none;
    }
    
    /* 限制最大高度 */
    .hero-video-desktop {
        max-height: 80vh;
    }
}

/* ==================== 手機版樣式 ==================== */
@media (max-width: 768px) {
    /* 隱藏桌機版影片，顯示手機版影片 */
    .hero-video-desktop {
        display: none;
    }
    
    .hero-video-mobile {
        display: block;
        padding-bottom: 177.78%; /* 9:16 直向比例 */
    }
}

/* ==================== 響應式調整 ==================== */

/* 超大螢幕 */
@media (min-width: 1920px) {
    .hero-video-desktop {
        max-height: 1080px;
    }
}

/* 平板 */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-video-desktop {
        padding-bottom: 56.25%; /* 保持 16:9 */
    }
}

/* 小手機 */
@media (max-width: 480px) {
    .hero-video-mobile {
        padding-bottom: 177.78%; /* 保持 9:16 直向比例 */
    }
}