/* ==========================================
   中卡片樣式 (vod_card_m)
   容器：220×355（不含外部 margin/padding）
   圖片：220×293
   ========================================== */

/* 中卡片容器（遵循大卡的設計模式） */
.vod-card--m {
  width: 240px; /* Figma: vod_card_m_Container 固定寬度 */
  height: 355px; /* Figma: vod_card_m_Container 固定高度（293 + 8 + 19 + 4 + 14 + 20 = 358，調整為 355） */
  padding: 0 10px 20px; /* Figma: padding 上0，左右10px，下20px（與大卡一致） */
  box-sizing: border-box; /* 確保 padding 包含在寬度內 */
  overflow: visible; /* 覆蓋基礎類別的 overflow: hidden */
}

/* Hover 效果由 vod-card-effects.css 統一管理 */

/* 圖片容器 */
.vod-card--m .vod-card__container {
  position: relative;
  width: 220px; /* 圖片寬度：220px（240 - 20 = 220） */
  height: 293px; /* 圖片高度：293px */
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0; /* 防止圖片被壓縮 */
}

/* 圖片 */
.vod-card--m .vod-card__image {
  width: 100%;
  height: 100%;
}

.vod-card--m .vod-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* transition 由 vod-card-effects.css 統一管理 */
}

/* 標題（與小卡一致的間距設定） */
.vod-card--m .vod-card__title {
  margin: 8px 10px 0 10px; /* 上 8px（與圖片間距），左右 10px（與小卡一致） */
  padding: 0;
  height: 19px; /* 實際文字高度：14px × 1.357 ≈ 19px */
  font-family: Tahoma, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.357; /* 19px / 14px */
  color: #FFFFFF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vod-card--m .vod-card__title a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.2s ease;
}

.vod-card--m .vod-card__title a:hover {
  color: #FFD700; /* 與小卡一致的 hover 顏色 */
}

/* 副標題（與小卡一致的間距設定） */
.vod-card--m .vod-card__subtitle {
  margin: 4px 10px 0 10px; /* 上 4px（與 title 間距），左右 10px（與小卡一致） */
  padding: 0;
  height: 14px; /* 實際文字高度：12px × 1.167 ≈ 14px */
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.167; /* 14px / 12px */
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}