/* ==========================================================
   1. Page Banner (通用於內頁頂部形象圖)
   ========================================================== */

.page-banner {
  width: 100%;
  position: relative;
  /* Navbar 避讓邏輯 */
  margin-top: var(--nav-height-mobile, 45px);
  display: block;
}

/* Tablet */
@media (min-width: 768px) {
  .page-banner {
    margin-top: var(--nav-height-tablet, 55px);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .page-banner {
    margin-top: var(--nav-height-desktop, 79px);
  }
}

.page-banner img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ==========================================================
   2. 全域容器 (RWD Width Control)
   依據 variables.css 定義的寬度
   ========================================================== */
.x720-container {
  /* 核心：讀取 CSS 變數 */
  width: var(--container-fluid-width, 90%);

  /* 置中 */
  margin-left: auto;
  margin-right: auto;

  /* 避免貼邊 */
  padding-left: 15px;
  padding-right: 15px;
}

/* ==========================================================
   3. 關於我們 & 交通方式 (Section Styles)
   取代 bootstrap 的 my-5, py-5
   ========================================================== */

.section-about,
.section-transport {
  /* 設定區塊的垂直間距 (約等於 my-5) */
  padding-top: 1rem;
  padding-bottom: 4rem;
}

.section-header {
  margin-bottom: 2rem; /* 取代 mb-4 */
}

/* ==========================================================
   4. Grid Spacing (取代 g-5, g-4)
   透過 CSS 重新定義 Bootstrap Row 的間隙
   ========================================================== */

/* 針對這兩個區塊內的 row 增加間距 */
.section-about .row,
.section-transport .row {
  /* 水平間距 (Gutter X) */
  --bs-gutter-x: 3rem;

  /* 垂直間距 (Gutter Y - 手機版堆疊時會用到) */
  --bs-gutter-y: 2rem;
}

/* 手機版微調 */
@media (max-width: 768px) {
  .section-about,
  .section-transport {
    padding-top: 0.5rem;
    padding-bottom: 2.5rem;
  }
}

/* ==========================================================
   5. 內容樣式 (Typography & Components)
   ========================================================== */

/* 內容文字 */
.about-context-word {
  font-size: var(--fs-body-focus, 1rem);
  font-weight: var(--fw-semilight, 400);
  color: var(--color-header, #333);
  line-height: 1.7; /* 增加行距提升閱讀感 */
}

/* 內容標題 */
.about-h2 {
  margin-top: 3%;
  margin-bottom: 1.5rem;
  font-size: var(--fs-h2, 2rem);
  font-weight: var(--fw-bold, 700);
  color: var(--color-header, #000);
}

/* 交通方式詳細資訊微調 */
.transport-details {
  background: #f9f9f9;
  padding: 2rem;
  border-radius: 12px;
  height: 100%; /* 等高 */
}

@media (max-width: 1024px) {
  .about-context-word {
    font-size: var(--fs-body-base, 0.95rem);
  }
}

/*  2. 更新 CSS (assets/css/pages/about.css)

請將以下樣式加入到 CSS 檔案中。我已經整合了您提供的 Figma 參數，並針對圖片中的細節（如首頁的下底線顏色、文字顏色）進行了調整。

``` */
/* =========================================
   Breadcrumb (麵包屑導覽)
   ========================================= */
.x720-breadcrumb {
  /* --- Figma Auto Layout 設定 --- */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px; /* Figma 寫 4px，但在網頁上 8px 視覺比較不會太擠，可依需求改回 4px */
  height: 28px;

  /* 位置調整 */
  margin-bottom: 1.5rem; /* 與下方標題保持距離 */
}

/* 連結項目 (首頁) */
.breadcrumb-link {
  display: flex;
  align-items: center;
  gap: 6px; /* Icon 與文字的間距 */
  text-decoration: none;
  color: var(--color-header); /* 深灰色 */
  font-size: var(--fs-body-base); /* 配合圖片視覺大小 */
  font-weight: var(--fw-semilight);

  /* 圖片中的 "首頁" 有下底線，這裡用 border 模擬比較好看 */
  padding-bottom: 1px; /* 讓底線跟文字有點呼吸空間 */
  transition: all 0.3s ease;
}

.breadcrumb-link span {
  border-bottom: 1px solid #666;
}

.breadcrumb-link:hover {
  color: #000;
  border-bottom-color: #000;
}

/* Icon 尺寸設定 */
.breadcrumb-link img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-bottom: 2px; /* 微調對齊 */
}

/* 分隔線箭頭 (Next Icon) */
.breadcrumb-sep {
  width: 14px;
  height: 14px;
  object-fit: contain;
  opacity: 0.6; /* 讓箭頭稍微淡一點，突顯文字 */
}

/* 當前頁面 (關於我們) */
.breadcrumb-current {
  color: var(--primary-color); /* 深灰色 */
  font-size: var(--fs-body-base); /* 配合圖片視覺大小 */
  font-weight: var(--fw-semilight);
  letter-spacing: 0.5px;
}

@media (max-width: 1024px) {
  .breadcrumb-link {
    font-size: var(--fs-body-md); /* 配合圖片視覺大小 */
  }

  .breadcrumb-current {
    font-size: var(--fs-body-md); /* 配合圖片視覺大小 */
  }
}


.info-group-content {
  color: var(--color-header); /* 深灰色 */
  font-size: var(--fs-body-focus); /* 配合圖片視覺大小 */
  font-weight: var(--fw-semilight);
}

@media (max-width: 1024px) {
  .info-group-content {
    font-size: var(--fs-body-base); /* 配合圖片視覺大小 */
  }
}

/*-------------------三大特色------------------------*/

.about-center-reality {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .about-center-reality {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px;
    position: relative;
    z-index: 1;
  }
}

.step-img {
  width: 50%;
  max-width: 350px;
  border-radius: 10px;
  display: block;
}

@media (max-width: 1024px) {
  .step-img {
    max-width: 200px;
    border-radius: 10px;
    display: block;
  }
}

@media (max-width: 768px) {
  .step-img {
    width: 75%;
    max-width: 200px;
    border-radius: 10px;
    display: block;
  }
}

/* ==========================================================
   6. 主題導覽表格 (Custom Theme Table - Card Style RWD)
   ========================================================== */

.about-content {
  padding-bottom: 4rem;
}

.about-center-table {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border: 1px solid #eee;
}

.theme-table {
  width: 100%;
  border-collapse: collapse;
}

/* --- 表頭樣式 --- */
.theme-table thead th {
  background-color: var(--secondary-color-1, #2f3e46);
  color: #fff;
  padding: 1.2rem;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-align: center; /* 電腦版標題置中 */
  border-bottom: 3px solid var(--primary-color, #4fa8d8);
}

/* --- 表格內容樣式 --- */
.theme-table tbody tr {
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s ease;
}

.theme-table tbody tr:last-child {
  border-bottom: none;
}

.theme-table tbody tr:hover {
  background-color: #f8fbff;
}

.theme-table td {
  padding: 1.5rem;
  vertical-align: middle;
  line-height: 1.8;
  color: var(--color-black, #333);
  font-size: var(--fs-body-focus, 1rem);
  font-weight: var(--fw-semilight, 400);
}

/* 左側主題欄位 */
.theme-title-cell {
  background-color: #fcfcfc;
  border-right: 1px solid #eee;
  width: 25%; /* 電腦版固定寬度 */
  text-align: center;
}

.theme-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: 700;
  color: var(--secondary-color-1, #333);
  font-size: 1.1rem;
}

.theme-x {
  color: var(--primary-color, #4fa8d8);
  font-size: 0.8rem;
  opacity: 0.7;
  margin: 2px 0;
}

/* 右側內容欄位 */
.theme-content-cell {
  width: 75%;
}

.spot-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; /* 讓景點自動換行 */
  gap: 8px 16px; /* 項目間距 */
}

.spot-list li {
  display: inline-block;
  color: #555;
}

/* ==========================================================
   📱 手機版 RWD (Stacked Cards Mode)
   ========================================================== */
@media (max-width: 768px) {
  /* 1. 強制變成區塊堆疊 */
  .theme-table,
  .theme-table thead,
  .theme-table tbody,
  .theme-table th,
  .theme-table td,
  .theme-table tr {
    display: block;
  }

  /* 2. 隱藏原本的表頭 (因為變成了卡片，不需要傳統表頭) */
  .theme-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  /* 3. 卡片外觀 */
  .theme-table tbody tr {
    border: 1px solid #eee;
    margin-bottom: 1rem; /* 卡片間距 */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  }

  /* 4. 主題標題區 (變身為卡片標題) */
  .theme-title-cell {
    width: 100%;
    border-right: none;
    background-color: var(--secondary-color-2, #eaf4f8); /* 淺色背景區隔 */
    padding: 1rem;
    border-bottom: 1px solid #ddd;
  }

  .theme-box {
    flex-direction: row; /* 手機版橫向排列 */
    gap: 8px;
    font-size: 1.1rem;
  }

  .theme-x {
    margin: 0;
    font-size: 0.9rem;
  }

  /* 5. 內容區 */
  .theme-content-cell {
    width: 100%;
    padding: 1rem 1.2rem;
  }

  .spot-list {
    display: block; /* 手機版改為垂直列表，比較好讀 */
  }

  .spot-list li {
    display: block;
    margin-bottom: 4px;
    padding-left: 4px;
  }
}