/* ==========================================
   卡片互動效果模組 (vod-card-effects)

   用途：
   - 統一管理所有卡片的 hover 效果
   - 使用 CSS 變數控制不同尺寸的縮放比例
   - 遵循 BEM 的組合 (mix) 概念

   使用方式：
   1. 所有 .vod-card 自動繼承基礎 hover 效果
   2. 使用 CSS 變數 --hover-scale 自訂縮放比例
   3. 使用 modifier 禁用特定效果
   ========================================== */

/* ==========================================
   【基礎 Hover 效果】預設套用到所有卡片
   ========================================== */

/* 只有圖片的放大效果，卡片容器本身不動 */
.vod-card {
    --hover-scale: 1.1;  /* 預設縮放比例 */
}

/* 圖片的放大效果 */
.vod-card__image img {
    transition: transform 0.3s ease;
}

.vod-card:hover .vod-card__image img {
    transform: scale(var(--hover-scale));
}

/* ==========================================
   【尺寸變體】不同卡片的縮放比例
   ========================================== */

/* 大卡（L）：較小的縮放比例（圖片大，放大太多會失真） */
.vod-card--l {
    --hover-scale: 1.05;
}

/* 中卡（M）：標準縮放比例 */
.vod-card--m {
    --hover-scale: 1.08;
}

/* 小卡（S）：標準縮放比例 */
.vod-card--s {
    --hover-scale: 1.1;
}

/* 超小卡（XS）：標準縮放比例 */
.vod-card--xs {
    --hover-scale: 1.1;
}

/* 最小卡（XXS）：標準縮放比例 */
.vod-card--xxs {
    --hover-scale: 1.1;
}

/* 正方形卡（Square）：標準縮放比例 */
.vod-card--square {
    --hover-scale: 1.1;
}

/* ==========================================
   【特殊情況】禁用效果的 Modifier
   ========================================== */

/* 禁用圖片放大效果（用於輪播卡片，避免干擾輪播動畫） */
.vod-card--no-hover:hover .vod-card__image img {
    transform: none;
}

/* ==========================================
   【輪播卡片】特殊處理
   ========================================== */

/* 輪播卡片只保留容器懸浮效果，禁用圖片放大（避免干擾輪播動畫） */
.vod-card[data-carousel="true"]:hover .vod-card__image img {
    transform: none;
}

/* ==========================================
   【無障礙支援】鍵盤焦點效果
   ========================================== */

/* 當卡片通過鍵盤獲得焦點時，也顯示 hover 效果 */
.vod-card:focus-within {
    outline: 2px solid #FFD700;
    outline-offset: 2px;
}

.vod-card:focus-within .vod-card__image img {
    transform: scale(var(--hover-scale));
}

/* ==========================================
   【減少動畫】尊重使用者偏好設定
   ========================================== */

@media (prefers-reduced-motion: reduce) {
    .vod-card__image img {
        transition: none;
    }

    .vod-card:hover .vod-card__image img,
    .vod-card:focus-within .vod-card__image img {
        transform: none;
    }
}