/* ============================================
   全站 v2 視覺調和樣式
   檔案位置：assets/css/v2-harmonize.css
   用途：讓首頁、醫師介紹、知識專欄、門診掛號
   與專長區（treatment-detail-v2）的視覺語言一致。
   載入順序：置於各頁專屬 CSS「之後」。
   原則：只調整細節（圓角、眉標、hover 語言），
   不改版面結構、不動 JS 依賴的 DOM。
   ============================================ */

/* ---------- 1. 按鈕統一為膠囊圓角 ---------- */
.btn-primary,
.cta-button {
  border-radius: 999px;
}

/* ---------- 2. 區塊英文小標 → 金色眉標 ----------
   對象：首頁與各頁 .section-title 內的 .subtitle
   （page-hero 的 serif 斜體副標保留原樣，是品牌簽名） */
.section-title .subtitle {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--color-accent);
}

/* ---------- 3. 知識專欄篩選 pill 的金色 hover ---------- */
.category-btn:not(.active):hover,
.filter-btn:not(.active):hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ---------- 4. 插入元件用的獨立樣式（不依賴 .treatment-page scope） ---------- */
.v2-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px 24px 90px;
}
.v2-lede {
  max-width: 44em;
  margin: 18px auto 0;
  color: var(--color-text-secondary);
  line-height: 2;
  font-size: 1.02rem;
}

/* ---------- 5. 知識專欄文章卡片 hover ----------
   卡片由 articles.js 渲染為 a.card（無邊框，style.css 已有
   transform 過渡與陰影語言），故依規範採輕微上移回饋、
   不新增邊框，並統一上移幅度為 -3px。 */
.article-grid > .card:hover {
  transform: translateY(-3px);
}

/* ---------- 6. 實心主按鈕（Hero 門診掛號 CTA） ----------
   與 .btn-primary 同尺寸規格，實心深紫、膠囊圓角，
   作為全站主要行動按鈕的層級之首。 */
.btn-solid {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  padding: 12px 32px;
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
}

.btn-solid:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

/* ---------- 7. 首頁專長四卡（靜態插入元件，視覺沿用 tx-card 語言） ---------- */
.v2-tx-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.v2-tx-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 26px 24px;
  color: var(--color-text-secondary);
  transition: border-color 0.2s, background 0.2s;
  text-decoration: none;
}

a.v2-tx-card:hover {
  border-color: var(--color-accent);
  background: rgba(184, 160, 80, 0.05);
  text-decoration: none;
}

.v2-tx-card h3 {
  font-size: 1.12rem;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.v2-tx-card .desc {
  font-size: 0.92rem;
  line-height: 1.9;
  margin: 0 0 16px;
}

.v2-tx-card .go {
  margin-top: auto;
  color: var(--color-accent);
  font-weight: 500;
  font-size: 0.92rem;
}

a.v2-tx-card:hover .go { text-decoration: underline; }

/* 平板：2×2 */
@media (max-width: 1023px) {
  .v2-tx-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 手機：維持 2×2 緊湊格（四大專長須一屏全數可見，不做橫滑） */
@media (max-width: 767px) {
  .v2-tx-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .v2-tx-card { padding: 18px 16px; border-radius: 12px; }
  .v2-tx-card h3 { font-size: 1.02rem; margin-bottom: 8px; }
  .v2-tx-card .desc { font-size: 0.85rem; line-height: 1.8; margin-bottom: 12px; }
  .v2-tx-card .go { font-size: 0.85rem; }
}