/* Footer 樣式 - 基於 Figma 設計規範 */

/* 覆蓋全域字體大小變數 */
:root {
  --le-font-base: 12px;
}

/* 設計 Token */
:root {
  --footer-bg: #222222;
  --footer-title-color: #CCCCCC;
  --footer-link-color: #FFFFFF;
  --footer-copyright-color: #999999;
  --footer-title-font: 16px Tahoma;
  --footer-link-font: 12px Tahoma;
  --footer-copyright-font: 12px Tahoma;
  --footer-padding: 40px 0px;
  --footer-gap: 35px;
  --footer-section-gap: 20px;
  --footer-content-gap: 45px;
}

/* 主容器 */
.Foot {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--footer-bg);
  z-index: 1;
}

/* 版心容器 */
.footer__container {
  width: 100%;
  max-width: var(--tpl-container-1440);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  box-sizing: border-box;
}

/* Footer-Top 容器 - 基於 Figma 精確規格 */
.footer {
  width: 100%;
  max-width: var(--tpl-container-1420);
  margin: 0 auto;
  display: flex;
  gap: 45px;
  padding: 40px 0;
  color: #fff;
  box-sizing: border-box;
}

/* footer-top 區段（包覆三欄） */
.footer-top {
  display: block;
}

/* 三欄通用標記 */
.footer-top__col {
  display: flex;
  flex-direction: column;
}

/* Footer-Top 區塊樣式 - 精確匹配 Figma */
.footerLeft {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 0 0 0;
  width: 318px;
}

.footerCen {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 10px 0 0;
  width: 500px;
}

.footerRight {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 0 0 0;
  width: 500px;
  height: 176px;
}

/* 標題樣式 - 基於 Figma 精確規格 */
.footerLeft h4,
.footerCen h4,
.footerRight h4 {
  font-family: Tahoma;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.25em;
  color: #CCCCCC;
  margin: 0;
  text-align: left;
}

/* 連結列表樣式 - 基於 Figma 網格佈局 */
.footerLeft ul,
.footerCen ul,
.footerRight ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  height: 64px; /* 基於 Figma 規格 */
}

.footerLeft li,
.footerCen li,
.footerRight li {
  position: absolute;
  margin: 0;
  width: 57.13px; /* 基於 Figma 規格 */
}

/* 乐视视频區塊 - 精確網格定位 */
.footerLeft li:nth-child(1) { left: 0; top: 0; }
.footerLeft li:nth-child(2) { left: 67.13px; top: 0; }
.footerLeft li:nth-child(3) { left: 134.25px; top: 0; }
.footerLeft li:nth-child(4) { left: 201.38px; top: 0; width: 71.41px; }
.footerLeft li:nth-child(5) { left: 0; top: 32px; }
.footerLeft li:nth-child(6) { left: 67.13px; top: 32px; width: 71.41px; }
.footerLeft li:nth-child(7) { left: 148.53px; top: 32px; }

/* 合作伙伴區塊 - 3行6列網格佈局 */
.footerCen ul {
  height: 96px; /* 基於 Figma 規格 */
}

.footerCen li:nth-child(1) { left: 0; top: 0; width: 42.84px; }
.footerCen li:nth-child(2) { left: 52.84px; top: 0; }
.footerCen li:nth-child(3) { left: 119.97px; top: 0; width: 51.49px; }
.footerCen li:nth-child(4) { left: 181.46px; top: 0; }
.footerCen li:nth-child(5) { left: 248.59px; top: 0; width: 99.96px; }
.footerCen li:nth-child(6) { left: 358.55px; top: 0; }
.footerCen li:nth-child(7) { left: 425.67px; top: 0; width: 45.09px; }
.footerCen li:nth-child(8) { left: 0; top: 32px; width: 85.69px; }
.footerCen li:nth-child(9) { left: 95.69px; top: 32px; width: 80.05px; }
.footerCen li:nth-child(10) { left: 185.74px; top: 32px; width: 42.84px; }
.footerCen li:nth-child(11) { left: 238.59px; top: 32px; width: 85.69px; }
.footerCen li:nth-child(12) { left: 334.27px; top: 32px; width: 99.96px; }
.footerCen li:nth-child(13) { left: 0; top: 64px; }
.footerCen li:nth-child(14) { left: 67.13px; top: 64px; width: 87.7px; }

/* 乐视动态區塊 - 3行2列網格佈局 */
.footerRight ul {
  height: 96px; /* 基於 Figma 規格 */
}

.footerRight li:nth-child(1) { left: 0; top: 0; width: 154.04px; }
.footerRight li:nth-child(2) { left: 164.04px; top: 0; width: 190.52px; }
.footerRight li:nth-child(3) { left: 0; top: 32px; width: 357.95px; }
.footerRight li:nth-child(4) { left: 0; top: 64px; width: 228.48px; }
.footerRight li:nth-child(5) { left: 238.48px; top: 64px; width: 188.5px; }

/* 連結樣式 - 基於鏡像網站規格 */
.footerLeft a,
.footerCen a,
.footerRight a {
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-family: Tahoma !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 2.5 !important;
  display: block !important;
  padding: 0 !important;
  transition: color 0.2s !important;
}

.footerLeft a:hover,
.footerCen a:hover,
.footerRight a:hover {
  color: #ccc;
}

/* Footer-Bottom 樣式 - 完整的 4 行結構 */

/* 底部版權資訊容器 */
.footerBot {
  width: 100%;
  max-width: var(--tpl-container-1420);
  margin: 0 auto;
  padding: 20px 0;
  border-top: 1px solid #444;
  position: relative;
  box-sizing: border-box;
}

/* Footer Bottom 共用樣式 - 統一使用 .copyright-row */
.footerBot .copyright-row {
  font-family: Tahoma !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #999999 !important;
  text-align: center !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: center !important;
}

/* footer-bottom 區段 */
.footer-bottom {
  display: block;
}

/* 各行標記，必要時可加特例化尺寸/間距 */
.footer-bottom__row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* 行距（依 Figma 可再微調） */
.footer-bottom__row + .footer-bottom__row {
  margin-top: 10px;
}

/* 欄位項目：icon 與文字垂直置中 */
.footerBot .copyright-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 各行欄位間距（可依量測調整） */
.footer-bottom__row--primary-licenses { gap: 20px; }
.footer-bottom__row--other-licenses { gap: 24px; }
.footer-bottom__row--report { gap: 20px; }
.footer-bottom__row--corp { gap: 16px; }

/* 圖標樣式 */
.footerBot .copyright-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.footerBot .report-icon {
  width: 24px;
  height: 20px;
  vertical-align: middle;
}

/* 連結樣式 */
.footerBot a {
  color: #999999;
  text-decoration: none;
  transition: color 0.2s;
}

.footerBot a:hover {
  color: #fff;
}

/* 鍵盤可達性：聚焦狀態明顯可見 */
.footer a:focus,
.footerBot a:focus {
  outline: none;
  text-decoration: underline;
  color: #fff;
}

.hide_1024 {
  display: block;
}

/* ==================== 頁面特定樣式 ==================== */

/* 播放頁、詳情頁、搜尋頁：隱藏 footer-top，只顯示 footer-bottom */
body.page-play .footer-top,
body.page-detail .footer-top,
body.page-search .footer-top {
  display: none;
}

/* 首頁：顯示完整 footer（預設行為，可省略） */
body.page-index .footer-top {
  display: block;
}

/* ==================== RWD 響應式設計 ==================== */

/* 1440px：中桌面 */
@media (max-width: 1440px) {
  .footer {
    gap: 30px; /* 縮小三欄間距 */
  }

  .footerLeft {
    width: 280px; /* 縮小左欄 */
  }

  .footerCen {
    width: 420px; /* 縮小中欄 */
  }

  .footerRight {
    width: 400px; /* 縮小右欄 */
  }

  /* 調整連結間距 */
  .footerLeft li,
  .footerCen li,
  .footerRight li {
    font-size: 11px; /* 稍微縮小字體 */
  }
}

/* 1024px：小桌面 */
@media (max-width: 1024px) {
  .footer {
    gap: 20px; /* 進一步縮小三欄間距 */
  }

  .footerLeft {
    width: 240px; /* 進一步縮小左欄 */
  }

  .footerCen {
    width: 340px; /* 進一步縮小中欄 */
  }

  .footerRight {
    width: 320px; /* 進一步縮小右欄 */
  }

  /* 調整字體大小 */
  .footerLeft h4,
  .footerCen h4,
  .footerRight h4 {
    font-size: 14px; /* 縮小標題字體 */
  }

  .footerLeft a,
  .footerCen a,
  .footerRight a {
    font-size: 11px !important; /* 縮小連結字體 */
  }

  /* 底部版權資訊 */
  .footerBot .copyright-row {
    font-size: 11px !important; /* 縮小版權字體 */
  }

  /* 縮小圖標 */
  .footerBot .copyright-icon {
    width: 16px;
    height: 16px;
  }

  .footerBot .report-icon {
    width: 20px;
    height: 16px;
  }
}