/* =====================================================================
   前台補充樣式
   版面、導航、頁尾、按鈕、表單等全部沿用原有設計
   （css/variables.css · base.css · layout.css · components.css）。
   本檔案只加入原設計沒有的新元件：輪播、Blog、分頁、搜尋、
   查詢表單強化、頁尾製作單位、以及浮動按鈕的位置調整。
   ===================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sr-only:focus {
  position: static; width: auto; height: auto; margin: 0; clip: auto;
  background: var(--color-brand); color: #fff; padding: .6rem 1rem; z-index: 999;
}

/* =====================================================================
   捲動淡入 —— 沒有 JavaScript 時內容必須立即可見
   ===================================================================== */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(1.25rem); }
html.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   首頁 Banner 輪播（需求 2）
   ===================================================================== */
.banner { position: relative; overflow: hidden; background: var(--color-bg-muted); }
.banner-track { display: flex; }
.banner-slide { position: relative; min-width: 100%; display: none; }
.banner-slide.is-active { display: block; }
.banner-slide img { width: 100%; height: auto; object-fit: cover; }
.banner-caption {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(24,10,14,.82), rgba(24,10,14,0));
  color: #fff; padding: var(--space-7) 0 var(--space-5);
}
.banner-caption h2 { color: #fff; margin: 0 0 var(--space-2); font-size: clamp(1.3rem, 3vw, 2rem); }
.banner-caption p { margin: 0 0 var(--space-4); color: rgba(255,255,255,.92); }
.banner-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.85); color: var(--color-brand);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.banner-nav:hover { background: #fff; }
.banner-prev { left: 1rem; }
.banner-next { right: 1rem; }
.banner-dots { position: absolute; left: 0; right: 0; bottom: .8rem; display: flex; justify-content: center; gap: .45rem; }
.banner-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; }
.banner-dots button.is-active { background: #fff; width: 22px; border-radius: 5px; }

/* =====================================================================
   Blog（需求 5）
   ===================================================================== */
.post-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-5); margin: var(--space-5) 0;
}
.post-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex; flex-direction: column; gap: .4rem;
}
.post-card .post-thumb { display: block; margin: calc(var(--space-4) * -1) calc(var(--space-5) * -1) var(--space-4); }
.post-card .post-thumb img { width: 100%; border-radius: var(--radius) var(--radius) 0 0; object-fit: cover; aspect-ratio: 16 / 9; }
.post-card h2, .post-card h3 { font-size: var(--fs-lg); margin: 0; }
.post-card p { margin: 0; font-size: var(--fs-sm); color: var(--color-ink-muted); }
.post-card time { font-size: var(--fs-xs); color: var(--color-ink-muted); }
.post-meta { display: flex; gap: .7rem; align-items: center; font-size: var(--fs-xs); }
.post-cat { font-weight: 600; }
.read-more { margin-top: auto; padding-top: .5rem; font-size: var(--fs-sm); font-weight: 600; }

.blog-cats { margin-bottom: var(--space-5); }
.blog-cats .count {
  display: inline-block; margin-left: .35rem; padding: 0 .35rem;
  background: rgba(0,0,0,.07); border-radius: 4px; font-size: .78em;
}
.blog-cats a.is-active { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }

.post-cover { width: 100%; border-radius: var(--radius); margin-bottom: var(--space-5); object-fit: cover; }
.post-byline { font-size: var(--fs-sm); color: rgba(255,255,255,.85); margin: var(--space-3) 0 0; }
.post-byline a { color: var(--color-accent); }
.post-content { margin-bottom: var(--space-6); }

/* =====================================================================
   分頁（需求 21）
   ===================================================================== */
.pagination { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: center; margin: var(--space-6) 0 0; }
.pagination a, .pagination span {
  min-width: 2.6rem; padding: .5rem .75rem; text-align: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm, 8px);
  background: var(--color-bg-elevated); color: var(--color-ink);
  text-decoration: none; font-size: var(--fs-sm);
}
.pagination a:hover { border-color: var(--color-brand); color: var(--color-brand); }
.pagination .is-current { background: var(--color-brand); border-color: var(--color-brand); color: #fff; font-weight: 600; }
.pagination .is-disabled { opacity: .45; }
.pagination .pg-gap { border: 0; background: none; min-width: 1.5rem; padding: .5rem .2rem; }

/* =====================================================================
   搜尋
   ===================================================================== */
.search-form { display: flex; gap: .6rem; margin: var(--space-4) 0; flex-wrap: wrap; }
.search-form input {
  flex: 1; min-width: 14rem; padding: .7rem .9rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm, 8px);
  font-family: inherit; font-size: var(--fs-base); background: #fff;
}
.search-count { color: var(--color-ink-muted); font-size: var(--fs-sm); }
.search-results { list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.search-results li { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.search-results li > a { font-size: var(--fs-lg); font-weight: 600; }
.search-results p { margin: .3rem 0; color: var(--color-ink-muted); font-size: var(--fs-sm); }
.result-url { font-size: var(--fs-xs); color: #4a6b3f; word-break: break-all; }
.empty-note { color: var(--color-ink-muted); padding: var(--space-5) 0; }

/* =====================================================================
   查詢表單（需求 11）
   ===================================================================== */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-4); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.req { color: var(--color-error); }
.form-errors {
  background: #fbeceb; border: 1px solid #efc4c2; color: var(--color-error);
  border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
}
.form-errors ul { margin: 0; padding-left: 1.1rem; }
.enquiry-form button { margin-top: var(--space-4); }

/* =====================================================================
   頁尾補充
   ===================================================================== */
.footer-social { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: var(--space-3); font-size: var(--fs-sm); }

/* 需求 30：網頁設計署名 —— 細字、低調 */
.footer-credit {
  text-align: center;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .72rem;
  letter-spacing: .02em;
  opacity: .6;
  transition: opacity var(--transition);
}
.footer-credit:hover { opacity: 1; }
.footer-credit a {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

/* =====================================================================
   浮動 WhatsApp 按鈕（需求 12：右下角）
   沿用原設計的 .whatsapp-float 外觀，只調整位置與圖示排列。
   ===================================================================== */
.whatsapp-float {
  left: auto;
  right: 1.25rem;
  bottom: 1.25rem;
  border-radius: 999px;
  gap: .45rem;
}
.whatsapp-float svg { flex: none; }

/* 回到頂部按鈕移到 WhatsApp 之上，避免重疊 */
.back-to-top { bottom: 5rem; }

@media (max-width: 560px) {
  .whatsapp-float { padding: .75rem; }
  .whatsapp-float span { display: none; }
  .back-to-top { bottom: 4.6rem; }
}

/* =====================================================================
   導航：加入「網上練習」之後有 10 個項目
   .container 封頂在 72rem（1152px），所以畫面再闊，導航可用的空間都一樣。
   收窄間距因此必須套用於「有橫向導航」的所有闊度，不可以只做某一段 —— 
   之前只做到 1320px，1440px 以上反而變回原本的闊間距，把「預約試堂」逼到兩行。
   ===================================================================== */
@media (min-width: 961px) {
  .nav-list { gap: 0; }
  .nav-list a,
  .nav-item--has-sub > button {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    font-size: .875rem;
    white-space: nowrap;
  }
  /* 按鈕與語言切換一律不換行：換行會把整條頁首撐高 */
  .nav-actions { flex: none; }
  .nav-actions .btn {
    padding: .5rem .7rem;
    font-size: .8125rem;
    white-space: nowrap;
  }
  .lang-switch a { white-space: nowrap; }
}

@media (min-width: 961px) and (max-width: 1080px) {
  .nav-list a,
  .nav-item--has-sub > button {
    padding-left: .3rem;
    padding-right: .3rem;
    font-size: .8125rem;
  }
  .nav-actions { gap: .4rem; }
  .nav-actions .btn { padding: .5rem .55rem; }
}

/* =====================================================================
   麵包屑
   .breadcrumb 沒有自己的連結顏色，會落到全站的 a { color: var(--color-brand) }。
   而 .page-hero 的底色正正就是同一隻酒紅（#6b1d2a），對比度只有 1.83:1，
   等於看不見。深色 hero 上一律改用白色系。
   ===================================================================== */
.page-hero .breadcrumb { opacity: 1; }

.page-hero .breadcrumb a {
  color: rgba(255, 255, 255, .92);
  text-decoration-color: rgba(255, 255, 255, .45);
}
.page-hero .breadcrumb a:hover,
.page-hero .breadcrumb a:focus-visible {
  color: #fff;
  text-decoration-color: #fff;
}

/* 分隔符號與目前頁面：比連結淡一級，但仍然看得清楚 */
.page-hero .breadcrumb li::after { color: rgba(255, 255, 255, .55); opacity: 1; }
.page-hero .breadcrumb [aria-current] { color: rgba(255, 255, 255, .72); }

/* =====================================================================
   內文版面在窄畫面的收斂
   grid / flex 的子項預設 min-width:auto —— 即係「唔可以縮到細過內容」。
   內文有 .data-table（min-width:620px），它雖然放在可橫向捲動的
   .table-wrap 內，但只要外面有一層 grid，那 620px 就會反過來把整欄撐大，
   結果不是爆出畫面，就是把旁邊的文字壓成一行一個字。
   給子項 min-width:0，表格就會乖乖在自己的框內捲動。
   ===================================================================== */
.decision-grid > *,
.keyfacts > *,
.metric-grid > *,
.process-grid > *,
.result-profile dl > *,
.sitemap-grid > *,
.tutor-profile > * { min-width: 0; }

/* 圖片與影片永遠不超出容器 */
.page-body img,
.page-body video,
.page-body iframe { max-width: 100%; height: auto; }

/* 長網址、英文長字不應撐爆版面 */
.page-body p,
.page-body li,
.page-body td,
.page-body dd { overflow-wrap: break-word; }