/* ==========================================================================
   File: ui-elements.css
   Description: 全站共用的小型 UI 元件 (Buttons, Headers, Tags, etc.)

   * Section Header (章節標題 - 帶線條)
   * Buttons - Base (基礎按鈕)
   * 通用輪播導航 (UI Carousel Nav)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Group 1: Section Header (章節標題 - 帶線條)
   -------------------------------------------------------------------------- */
.section-header,
.section-content-limit {
  /* ✅ 自動套用 variables.css 計算好的流體寬度 */
  width: var(--container-fluid-width);
  /* 確保不會因為內容太少而縮小，始終佔滿該比例 */
  max-width: 100%;
  margin: 2rem auto 2rem auto;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.section-container {
  width: var(--container-fluid-width);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 2rem; /* 預設給一點下方留白 */
}

/* 線條設定 (PC/Pad/Mobile 共用) */
.section-header::before,
.section-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-header);
  opacity: 1;
}

/* 文字設定 (PC 預設) */
.section-header h2 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  color: var(--color-header);
  margin: 0 20px; /* 文字左右留白，避免線條黏太近 */
  white-space: nowrap;
}

/* RWD: 平板與手機 (共用調整) */
@media screen and (max-width: 1023px) {
  .section-header h2 {
    font-size: var(--fs-h2);
    /* margin, color, font-weight 繼承 PC 設定，無需重複寫 */
  }
}

/* --------------------------------------------------------------------------
   Group 2: Buttons - Base (基礎按鈕)
   -------------------------------------------------------------------------- */
.btn-base {
  /* Layout */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;

  /* Appearance */
  background: var(--color-header);
  color: var(--color-white);
  text-decoration: none;

  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;

  /* Gap */
  gap: 8px;

  /* PC Size */
  padding: 12px 40px;
  font-size: var(--fs-body-focus);
  font-weight: var(--fw-regular);
}

/* Hover Effect */
.btn-base:hover {
  background-color: var(--color-black);
  color: var(--color-white);
  transform: scale(1.05);
}

/* RWD: Tablet */
@media screen and (max-width: 1023px) {
  .btn-base {
    padding: 8px 32px;
    font-size: var(--fs-body-base);
    font-weight: var(--fw-semilight);
  }
}

/* RWD: Mobile */
@media screen and (max-width: 767px) {
  .btn-base {
    padding: 10px 36px;
    font-size: var(--fs-body-focus);
    font-weight: var(--fw-regular);
  }
}

/* --------------------------------------------------------------------------
   Group 3: Tab Filter (篩選標籤群組)
   -------------------------------------------------------------------------- */
.tab-filter {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  background-color: var(--color-bg-light, #ffffff);
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 8px;
  position: relative;
  max-width: 100%;
}

.tab-filter__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease;
  padding: 8px 24px;
  font-size: var(--fs-body-focus);
  font-weight: var(--fw-regular);
  line-height: 1.5;
}

/* Icons */
.tab-filter__btn svg,
.tab-filter__btn img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
  fill: currentColor;
}

/* Active State */
.tab-filter__btn.is-active {
  background-color: var(--secondary-color-1);
  color: var(--color-white);
  font-weight: 500;
}

/* Hover State */
.tab-filter__btn:hover:not(.is-active) {
  background-color: #f5f5f5;
}

/* RWD: Tablet & Mobile Combined (若邏輯相似可合併以精簡代碼) */
@media screen and (max-width: 1023px) {
  .tab-filter {
    padding: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Hide Scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tab-filter::-webkit-scrollbar {
    display: none;
  }

  .tab-filter__btn {
    padding: 6px 20px;
    font-size: var(--fs-body-base);
  }

  .tab-filter__btn svg,
  .tab-filter__btn img {
    width: 20px;
    height: 20px;
  }
}

/* Mobile Specific Fine-tuning */
@media screen and (max-width: 767px) {
  .tab-filter__btn {
    padding: 6px 10px;
  }

  .tab-filter__btn svg,
  .tab-filter__btn img {
    width: 18px;
    height: 18px;
  }
}

/* ==========================================================================
   Component: 通用輪播導航 (UI Carousel Nav)
   Description: 整合左右箭頭與圓點的通用控制器
   Structure: [ < ] [ o ] [ o ] [ o ] [ > ]
   ========================================================================== */

/* 1. 容器外框 */
.ui-carousel-nav {
  /* Flex 排版：水平置中、垂直置中 */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px; /* 元件之間的間距 */

  /* 定位設定 (預設疊在內容下方) */
  position: absolute;
  right: 0;
  bottom: -5%;
  left: 0;
  z-index: 10;

  /* 清除 Bootstrap carousel-indicators 可能的預設影響 */
  padding: 0;
  margin-bottom: 20px;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Element: 圓點 (Dots)
   -------------------------------------------------------------------------- */
.ui-carousel-nav .nav-dot {
  /* 尺寸設定 */
  width: 12px;
  height: 12px;
  flex-shrink: 0; /* 防止被擠壓 */

  /* 外觀設定 */
  background-color: #fff; /* 預設內部白色 */
  border: 2px solid var(--primary-color); /* 外框主色 */
  border-radius: 50%;

  /* 移除 Button 預設樣式 */
  opacity: 1;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-indent: -999px; /* 隱藏文字 */
  transition: all 0.3s ease;
}

/* 狀態：被選中 (Active) */
.ui-carousel-nav .nav-dot.active {
  background-color: var(--primary-color); /* 填滿主色 */
  transform: scale(1.1); /* 稍微放大 */
}

/* --------------------------------------------------------------------------
   Element: 箭頭 (Arrows)
   技術: Mask Image (讓 SVG 跟隨主色變色)
   -------------------------------------------------------------------------- */
.ui-carousel-nav .nav-arrow {
  /* 尺寸設定 */
  width: 24px;
  height: 24px;
  flex-shrink: 0;

  /* 外觀設定 */
  background-color: var(--primary-color); /* ✅ 箭頭顏色 */
  border: none;
  opacity: 0.8; /* 預設微透明 */

  /* Mask 設定：將 SVG 作為遮罩 */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;

  padding: 0;
  margin: 0;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    opacity 0.2s;
}

/* 指定圖示路徑 (請確保路徑正確) */
.ui-carousel-nav .nav-arrow.prev {
  -webkit-mask-image: url("../../img/placeholders/icon/all=prev.svg");
  mask-image: url("../../img/placeholders/icon/all=prev.svg");
}

.ui-carousel-nav .nav-arrow.next {
  -webkit-mask-image: url("../../img/placeholders/icon/all=next.svg");
  mask-image: url("../../img/placeholders/icon/all=next.svg");
}

/* 互動：Hover 效果 */
.ui-carousel-nav .nav-arrow:hover {
  opacity: 1;
  transform: scale(1.2); /* 滑鼠移入放大 */
}

/* ==========================================================================
   RWD: 手機版微調 (< 768px)
   ========================================================================== */
@media screen and (max-width: 767px) {
  .ui-carousel-nav {
    gap: 8px; /* 間距縮小 */
    bottom: 10px; /* 距離底部縮小 */
  }

  .ui-carousel-nav .nav-dot {
    width: 10px;
    height: 10px;
    border-width: 1.5px; /* 邊框稍微變細 */
  }

  .ui-carousel-nav .nav-arrow {
    width: 18px;
    height: 18px;
  }
}

/* --------------------------------------------------------------------------
   Group 4: Subtitle Badge (次標題 - 鳥頭與膠囊樣式)
   -------------------------------------------------------------------------- */

.subtitle-badge {
  /* --- Frame 6271 樣式移植 --- */
  display: flex;
  flex-direction: row;
  justify-content: center; /* 文字水平居中 */
  align-items: center; /* 文字垂直居中 */

  /* 關鍵：左邊留 64px 給鳥頭，避免文字被蓋住 */
  padding: 8px 24px 8px 64px;
  gap: 8px;

  /* 尺寸設定 */
  width: max-content;
  height: 47px;

  /* 視覺設定 */
  background: #2f3e46; /* 深灰藍色 */
  border-radius: 50px;

  /* 定位設定 (網頁流) */
  position: relative; /* 改為 relative 以佔據空間 */
  margin-left: 10px; /* 稍微往右推，讓突出的鳥頭不被切到 */

  /* 字體設定 (繼承自之前的變數) */
  color: var(--color-white, #fff);
  font-size: var(--fs-h2, 1.75rem);
  font-weight: var(--fw-semilight, 300);
  line-height: 1.2;
}

/* --- 鳥頭 Icon (維持使用偽元素 ::before) --- */
.subtitle-badge::before {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 2;

  /* PC 版 Icon 設定 */
  width: 69px;
  height: 69px;
  /* 鳥頭需要比文字框更靠左與靠上，這裡進行微調 */
  left: -15px;
  top: -12px;
  /* 👇 只有這裡要改！優先使用 API 傳來的變數，如果沒有才退回使用預設圖 */
  background-image: var(--icon-subtitle);
}

/* --------------------------------------------------------------------------
   RWD: Tablet (平板) - max-width: 1023px
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  .subtitle-badge {
    height: 42px;
    /* 平板字體調整 */
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
  }

  .subtitle-badge::before {
    /* Pad 版 Icon 設定 */
    width: 61px;
    height: 61px;
    left: -12px;
    top: -10px;
    /* background-image: url("../../img/placeholders/icon/small-title-icon-Pad.svg");
  } */
}

/* --------------------------------------------------------------------------
   RWD: Mobile (手機) - max-width: 767px
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .subtitle-badge {
    /* 手機版：寬度改為自適應，避免 352px 撐爆小螢幕 */
    height: 39px;

    /* 手機版字體調整 */
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);

    /* 手機版 Padding 微調，稍微縮小間距 */
    padding-left: 54px;
    justify-content: flex-start; /* 手機版靠左對齊通常較易閱讀 */
  }

  .subtitle-badge::before {
    /* Mobile 版 Icon 設定 */
    width: 57px;
    height: 57px;
    left: -8px;
    top: -10px;
    /* background-image: url("../../img/placeholders/icon/small-title-icon-Phone.svg"); */
  }
}

/* --------------------------------------------------------------------------
   Group 5: Tab Navigation (頁籤導覽)
   -------------------------------------------------------------------------- */

/* 頁籤容器 */
.ui-tabs-nav {
  display: flex;
  flex-direction: row;
  justify-content: center; /* Desktop 預設置中 */
  align-items: flex-end; /* 讓頁籤底部對齊線條 */
  flex-wrap: nowrap;

  width: 100%;
  position: relative;

  /* 底部線條 */
  border-bottom: 4px solid #2f3e46;

  /* 移除列表預設樣式 */
  list-style: none;
  margin: 0;
  padding: 0;

  /* Desktop Gap */
  gap: 40px;
}

/* 個別頁籤按鈕 (<a> 或 <button>) */
.ui-tabs-nav__item {
  display: flex;
  justify-content: center;
  align-items: center;

  /* 尺寸與間距 */
  padding: 12px 32px 20px; /* Top, LR, Bottom */
  min-height: 58px; /* 確保高度 */

  /* 外觀 */
  background: transparent;
  border: none;
  border-radius: 12px 12px 0px 0px; /* 上方圓角 */
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap; /* 防止文字換行 */
  transition: all 0.2s ease;

  /* 文字設定 */
  font-family: "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: #2f3e46;

  /* 防止被壓縮 */
  flex: none;
}

/* 互動狀態：Hover */
.ui-tabs-nav__item:hover {
  background-color: rgba(47, 62, 70, 0.05); /* 輕微灰色背景 */
  color: #000;
}

/* 互動狀態：Active (當前選中) */
.ui-tabs-nav__item.is-active {
  background-color: #2f3e46;
  color: #ffffff !important; /* 選中時變白字 */
}

/* --------------------------------------------------------------------------
   RWD: Tablet (平板) - max-width: 1023px
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  .ui-tabs-nav {
    /* Pad 版線條變細 */
    border-bottom-width: 3px;

    /* 間距縮小 (Figma: gap 16px) */
    gap: 16px;

    /* Pad 版對齊方式 (Figma 為 space-between，建議視數量決定，這裡維持置中或依需求調整) */
    justify-content: center;
  }

  .ui-tabs-nav__item {
    /* Pad 版 Padding */
    padding: 12px 24px;
    min-height: 47px;

    /* Pad 版文字大小 */
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------------
   RWD: Mobile (手機) - max-width: 767px
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .ui-tabs-nav {
    /* Mobile 線條最細 */
    border-bottom-width: 2px;

    /* 啟用橫向捲動 */
    justify-content: flex-start; /* 靠左對齊以便捲動 */
    overflow-x: auto; /* 允許捲動 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* iOS 滑動優化 */

    /* 隱藏捲軸 (Chrome, Safari, Opera) */
    &::-webkit-scrollbar {
      display: none;
    }
    /* 隱藏捲軸 (IE, Edge, Firefox) */
    -ms-overflow-style: none;
    scrollbar-width: none;

    /* 確保左右有留白，滑到底才好看 */
    padding-left: 16px;
    padding-right: 16px;
    gap: 8px; /* Mobile Gap 更小 */
  }

  .ui-tabs-nav__item {
    /* Mobile Padding */
    padding: 10px 16px;
    min-height: 43px;

    /* Mobile 文字維持 18px (Figma Spec) */
    font-size: 18px;
  }
}