/* category-bar */

.category-bar{
  /* Auto layout */
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0;

  position:relative;
  min-height:100px;
  left:auto;
  right:auto;
  top:auto;

  /* localhost/Mine Shaft */
  background:#222222;
}

/* ==========================================
   Debug 模式（開發時使用）
   ========================================== */
.category-bar--debug {
  outline: 3px solid rgba(255, 0, 0, 0.8); /* 紅色粗線：category-bar 邊界 */
}

.category-bar--debug .category-bar__container {
  outline: 2px dashed rgba(255, 165, 0, 0.6); /* 橙色虛線：container 邊界 */
}

.category-bar--debug .category-bar__row {
  outline: 2px solid rgba(255, 255, 0, 0.5); /* 黃色實線：row 邊界 */
  background: rgba(255, 255, 0, 0.05);
}

.category-bar--debug .category-bar__segment {
  outline: 2px dashed rgba(0, 128, 255, 0.6); /* 藍色虛線：segment 邊界 */
  background: rgba(0, 128, 255, 0.05);
}

.category-bar--debug .category-bar__list {
  outline: 2px solid rgba(0, 255, 0, 0.5); /* 綠色實線：list 邊界 */
}

.category-bar--debug .category-bar__divider {
  background: rgba(255, 0, 0, 0.5); /* 紅色半透明：divider 區域 */
  width: 3px;
}

.category-bar--debug .category-bar__spacer[data-flex] {
  background: rgba(255, 255, 0, 0.3); /* 黃色半透明：spacer 區域 */
  outline: 2px dashed rgba(255, 255, 0, 0.8);
  min-height: 50px;
}

.category-bar--debug .category-bar__item {
  outline: 1px dotted rgba(0, 255, 255, 0.5); /* 青色點線：item 邊界 */
}

/* VIP 區段專屬 debug 樣式 */
.category-bar--debug .category-bar__vip-wrapper {
  outline: 2px solid rgba(255, 0, 255, 0.5); /* 紫色實線：VIP wrapper 邊界 */
  background: rgba(255, 0, 255, 0.05); /* 淺紫色背景 */
}

.category-bar--debug .category-bar__vip-title {
  outline: 2px solid rgba(255, 165, 0, 0.5); /* 橙色實線：VIP 標題邊界 */
  background: rgba(255, 165, 0, 0.1); /* 淺橙色背景 */
}

.category-bar--debug .category-bar__vip-links {
  outline: 2px solid rgba(0, 255, 0, 0.5); /* 綠色實線：VIP 連結列表邊界 */
  background: rgba(0, 255, 0, 0.05); /* 淺綠色背景 */
}

.category-bar--debug .category-bar__grid-wrapper {
  outline: 2px solid rgba(0, 191, 255, 0.5); /* 深藍色實線：Grid wrapper 邊界 */
  background: rgba(0, 191, 255, 0.05); /* 淺藍色背景 */
}

/* 內層容器與區段布局（Grid 佈局 + 配置驅動分隔線）*/
.cb_container, .category-bar__container {
  width: 100%;
  max-width: var(--tpl-container-1440);
  margin: 0 auto;
  height: 100px;
  padding: 0 10px;
  box-sizing: border-box;
}

/* Row：使用 Flex 佈局（扁平化 segments）*/
.cb_row, .category-bar__row {
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  gap: 30px; /* 所有子元素間距 */
  align-items: center; /* 垂直居中對齊 */
  justify-content: center; /* 整體置中 */
}

/* Segment：通用樣式（支援 flex 配置）*/
.cb_seg, .category-bar__segment {
  display: flex;
  align-items: center; /* 內部內容垂直居中 */
  justify-content: center; /* 水平置中 */
  height: 100%;
  padding: 26px 0;
  box-sizing: border-box;
  min-width: 0; /* 允許 flex 縮小 */
}

/* 動態 flex 值（data-flex 屬性驅動）*/
.category-bar__segment[data-flex="1"],
.category-bar__spacer[data-flex="1"] { flex: 1; }

.category-bar__segment[data-flex="2"],
.category-bar__spacer[data-flex="2"] { flex: 2; }

.category-bar__segment[data-flex="3"],
.category-bar__spacer[data-flex="3"] { flex: 3; }

.category-bar__segment[data-flex="4"],
.category-bar__spacer[data-flex="4"] { flex: 4; }

.category-bar__segment[data-flex="0"],
.category-bar__spacer[data-flex="0"] { flex: 0 0 auto; }

/* 獨立分隔線元素（扁平化配置）*/
.category-bar__divider {
  flex: 0 0 auto; /* 固定寬度，不參與 flex 伸縮 */
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0; /* gap 已處理間距 */
}

/* 舊版相容：segment modifier 方式 */
.category-bar__segment--divider {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding-right: 30px;
  margin-right: 30px;
}

/* 列表與項目樣式 */
/*
  Grid 佈局策略：
  - 固定列數（由 list--a/b/c 控制）
  - 行數自動計算（允許換行）
  - 保留 RWD 彈性
*/
.cb_list, .category-bar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: row; /* 水平填滿後自動換行 */
  grid-auto-rows: 24px; /* 每行 24px 高度 */
  row-gap: 10px; /* 行間距 */
  column-gap: 0; /* 無列間距 */
  align-content: center;
  width: fit-content; /* 緊密包住內容 */
}

/* 1:4:4:1 比例（使用 flex spacer 實現真正的等比縮放）*/
.category-bar__spacer {
  display: block;
  flex-shrink: 1; /* 明確允許縮小 */
}

.category-bar__spacer[data-flex="1"] {
  flex: 1 1 auto; /* grow:1, shrink:1, basis:auto */
}

.category-bar__spacer[data-flex="2"] {
  flex: 2 1 auto; /* grow:2, shrink:1, basis:auto */
}

.category-bar__spacer[data-flex="3"] {
  flex: 3 1 auto; /* grow:3, shrink:1, basis:auto */
}

.category-bar__spacer[data-flex="4"] {
  flex: 4 1 auto; /* grow:4, shrink:1, basis:auto */
}

.cb_list--a, .category-bar__list--a {
  grid-template-columns: repeat(4, min-content);
  min-width: 0; /* 允許縮小 */
}

.cb_list--b, .category-bar__list--b {
  grid-template-columns: repeat(3, min-content);
  min-width: 0; /* 允許縮小 */
}

.cb_list--c, .category-bar__list--c {
  grid-template-columns: repeat(3, min-content);
  min-width: 0; /* 允許縮小 */
}

/* 中間區域（商城）- 2行2列網格 */
.category-bar__grid-wrapper {
  display: flex;
  align-items: flex-end; /* 底部對齊 */
  min-width: 0; /* 允許縮小 */
  height: 100%; /* 撐滿父容器 */
}

.cb_list--d, .category-bar__list--d {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto auto; /* 2 列 */
  grid-template-rows: auto auto; /* 2 行 */
  column-gap: 10px; /* 兩欄之間 10px */
  row-gap: 10px; /* 行間距 */
  grid-auto-flow: column; /* 先填滿列（垂直方向）*/
  align-content: flex-end; /* 底部對齊 */
  min-width: 0; /* 允許縮小 */
}

.cb_list--e, .category-bar__list--e {
  width: auto;
  height: 100px;
}

/* RWD: 小螢幕優先壓縮項目間距 */
@media (max-width: 1440px) {
  .category-bar__row {
    gap: 15px; /* 壓縮區塊間距 */
  }

  .category-bar__item {
    padding: 0 8px; /* 壓縮項目左右間距 */
  }
}

/* 極小螢幕才允許換行 */
@media (max-width: 1024px) {
  .category-bar__row {
    flex-wrap: wrap; /* 允許換行 */
    justify-content: center;
  }

  .category-bar__divider {
    display: none; /* 換行時隱藏分隔線 */
  }
}
.cb_item, .category-bar__item{
  color:#fff;
  opacity:.9;
  font-family:Tahoma, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  font-size:14px;
  line-height:20px;
  letter-spacing:0.15em;
  padding: 0 20px 0 0; /* 項目之間間距 20px */
  text-align: left;
  white-space: nowrap; /* 不換行 */
}

/* 每行最後一個項目不需要右側 padding */
.category-bar__list--a .category-bar__item:nth-child(4),
.category-bar__list--a .category-bar__item:nth-child(8),
.category-bar__list--b .category-bar__item:nth-child(3),
.category-bar__list--b .category-bar__item:nth-child(6),
.category-bar__list--c .category-bar__item:nth-child(3),
.category-bar__list--c .category-bar__item:nth-child(6) {
  padding-right: 0;
}
.cb_item--title, .category-bar__item--title{opacity:1;font-weight:700;margin-right:0;font-size:16px}
.category-bar__item--title .category-bar__label{font-weight:700}
.cb_item--accent, .category-bar__item--accent{font-weight:700}
.cb_item--vip, .category-bar__item--vip{font-weight:700;color:#D6A75D;}
.category-bar__label{
  display:inline-block;
  text-align: left; /* 文字靠左 */
}
.category-bar__link{
  color:inherit;
  text-decoration:none;
  display:inline-block;
  text-align: left;
}

/* 右側 VIP 包裹容器 */
.category-bar__vip-wrapper {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* 調試邊框已在上方定義 */
}

/* 右側 VIP 標題與連結（對齊示意圖） */
.cb_vip-title, .category-bar__vip-title{display:flex;align-items:center;justify-content:center;color:#D6A75D;font-weight:700;font-family:Tahoma, 'PingFang TC', 'Microsoft JhengHei', sans-serif;font-size:20px;line-height:24px;margin-bottom:12px}

/* 文字標題樣式 */
.category-bar__vip-title--text {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.1em;
}
.cb_vip-icon{display:block;width:20px;height:16px}
.cb_vip-links, .category-bar__vip-links{list-style:none;margin:0;padding:0;display:flex;gap:0;align-items:center;justify-content:center;white-space:nowrap;margin-top:0px} /* 0 間距，置中對齊 */
.cb_vip-links li, .category-bar__vip-links li{white-space:nowrap}
.cb_vip-links a, .category-bar__vip-links a{color:#fff;text-decoration:none;font-size:14px;line-height:20px;white-space:nowrap} /* 與左中區段一致 */

/* 狀態：hover/active/focus（若 item 為連結可用 a，否則以 is-active 呈現） */
.category-bar__item.is-active .category-bar__label{opacity:1}
.category-bar__item .category-bar__label{cursor:pointer;text-decoration:none}
.category-bar__item:hover .category-bar__label{opacity:1}
.category-bar__item:focus-visible .category-bar__label{outline:2px solid #fff;outline-offset:2px}

/* ==========================================
   Filter List 區塊（篩選條件：題材/演員/導演/地區）
   ========================================== */
.category-bar__filter {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 標題（灰色） */
.category-bar__filter-title {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 8px;
  white-space: nowrap;
}

/* 圖片標題（如 VIP logo） */
.category-bar__filter-title--image {
  color: #D6A75D;
}

.category-bar__filter-title--image img {
  display: block;
  height: 20px;
  width: auto;
}

/* 選項列表（使用 CSS 變數實現 RWD） */
.category-bar__filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(var(--cols-xl, 3), min-content);
  row-gap: 8px;
  column-gap: 0;
}

/* RWD 斷點：lg (1200-1440px) */
@media (max-width: 1440px) {
  .category-bar__filter-list {
    grid-template-columns: repeat(var(--cols-lg, var(--cols-xl, 3)), min-content);
  }
}

/* RWD 斷點：md (<1200px) */
@media (max-width: 1200px) {
  .category-bar__filter-list {
    grid-template-columns: repeat(var(--cols-md, var(--cols-lg, 3)), min-content);
  }
}

/* 選項項目 */
.category-bar__filter-item {
  color: #fff;
  opacity: 0.9;
  font-size: 14px;
  line-height: 20px;
  padding-right: 16px;
  white-space: nowrap;
}

.category-bar__filter-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.category-bar__filter-link:hover {
  opacity: 1;
  color: #fff;
}

/* 「更多」連結樣式 */
.category-bar__filter-item--more {
  /* 與一般項目相同佈局 */
}

.category-bar__filter-link--more {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}

.category-bar__filter-link--more:hover {
  color: #fff;
  opacity: 1;
}

/* Debug 模式 */
.category-bar--debug .category-bar__filter {
  outline: 2px solid rgba(128, 0, 255, 0.5); /* 紫色實線：filter 邊界 */
  background: rgba(128, 0, 255, 0.05);
}

.category-bar--debug .category-bar__filter-title {
  outline: 1px dashed rgba(128, 128, 128, 0.5); /* 灰色虛線：標題 */
}

.category-bar--debug .category-bar__filter-list {
  outline: 1px solid rgba(0, 255, 128, 0.5); /* 綠色實線：列表 */
}