/* ===== Hot Video Section：Figma 風格 ===== */

/* 標題：全部裝置置中，和上方有空間 */
.vid-video__title {
  font-size: clamp(18px, 4.2vw, 24px); /* 原本偏大 → 縮小一階 */
  font-weight: 600;
  text-align: center;
  margin-top: clamp(20px, 5vw, 32px);
  margin-bottom: clamp(12px, 3.2vw, 18px);
}

/* 影片卡片：置中、左右留白靠 container 控制 */
.vid-video__frame {
  position: relative;
  width: 100%;
  max-width: 720px; /* 卡片寬度（桌機／平板） */
  margin: 0 auto; /* 置中 */
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  box-shadow: var(--vid-shadow);
}

/* 影片內容填滿卡片 */
.vid-video__frame iframe,
.vid-video__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 用圖片時也會鋪滿卡片 */
.vid-video__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 手機版：整區左右留白統一，影片自然置中 */
@media (max-width: 767.98px) {
  .vid-video .vid-container {
    padding-left: 20px;
    padding-right: 20px; /* 標題＋影片一起跟著縮進 */
  }

  .vid-video__frame {
    max-width: 100%; /* 手機就直接吃 container 寬 */
  }
}

/* =========================
   Video List 區塊 – Figma 乾淨風格
   ========================= */

/* 區塊本身留白，跟熱門影片一致 */
.vid-video-list {
  padding-top: clamp(24px, 6vw, 40px);
  padding-bottom: clamp(32px, 7vw, 48px);
  margin-top: clamp(28px, 6vw, 48px); /* 手機40px → 桌機80px */
}

/* 手機：整塊左右留白 20px，讓 tabs + 卡片都不要貼邊 */
@media (max-width: 767.98px) {
  .vid-video-list .vid-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* -------- Scrollable Tabs（乾淨版 pill） -------- */
.vid-video-tabs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 0 18px;
  scrollbar-width: none;
}
.vid-video-tabs::-webkit-scrollbar {
  display: none;
}

.vid-video-tab {
  flex: 0 0 auto;
  padding: 8px 20px;
  font-size: clamp(14px, 3.6vw, 15px);
  font-weight: 600;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  color: #333;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); /* 跟熱門影片按鈕類似的柔和陰影 */
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.vid-video-tab.is-active {
  background: #3e3b7a;
  border-color: #3e3b7a;
  color: #fff;
  box-shadow: 0 6px 14px rgba(62, 59, 122, 0.35);
}

/* 平板以上 tabs 不再滑動，置中排 */
@media (min-width: 768px) {
  .vid-video-tabs {
    justify-content: center;
    overflow-x: visible;
    padding-bottom: 20px;
  }
}

/* -------- 影片卡片（風格同熱門影片的影片框） -------- */
.vid-video-cards {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* 卡片容器：乾淨白底 + 柔和陰影 + 大圓角 */
.vid-video-card {
  background: #ffffff;
  /* 跟熱門影片那個 frame 一致 */
  overflow: hidden;
  box-shadow: var(--vid-shadow); /* 若你前面有定義 --vid-shadow 就會沿用 */
}

/* 影片 16:9 等比，直接嵌入卡片頂部 */
.vid-video-card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.vid-video-card__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 影片標題：置中、字級跟熱門影片標題區塊相近但略小 */
.vid-video-card__title {
  font-size: clamp(16px, 4.2vw, 18px);
  font-weight: 500;
  text-align: center;
  padding: 16px 12px 18px;
  background: #f2f2f2;
}

/* 平板：改成 2 欄網格，桌機：3 欄 */
@media (min-width: 768px) {
  .vid-video-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    padding-left: clamp(12px, 3vw, 32px);
    padding-right: clamp(12px, 3vw, 32px);
  }
}
@media (min-width: 1200px) {
  .vid-video-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}