/*
 * patch_content.css — Team Delta
 * 產品卡片、知識庫、定價、房屋守則區段視覺精修
 * 參考 Linear 設計系統：微邊框、hover 動效、排版細節
 * 不覆蓋深色主題與 amber 色系，僅補強細節層次
 */

/* ══════════════════════════════════════
   產品卡片（.product-card）
   Linear 風格：超細半透明白邊框，hover 輕微上浮
   ══════════════════════════════════════ */

/* 微邊框取代實色邊框，配合 hover 上浮動效 */
.product-card {
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s, transform 0.2s;
}

/* hover 時邊框略微亮起並向上浮 2px */
.product-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════
   產品 Status Badge（.product-status）
   soon / plan 狀態：加強字距，邊框改為同色系低透明度
   ══════════════════════════════════════ */

/* 統一 badge 字距，讓標籤更精緻 */
.product-status {
  letter-spacing: 0.08em;
}

/* soon 狀態：amber 邊框低透明度包邊 */
.status-soon {
  border: 1px solid rgba(212, 168, 67, 0.25);
}

/* plan 狀態：白色邊框低透明度包邊 */
.status-plan {
  border: 1px solid rgba(242, 237, 230, 0.12);
}

/* ══════════════════════════════════════
   知識卡片（.knowledge-card）
   取消 box 感，改用底線分割；k-tag 加邊框框住；
   k-title hover 顏色過渡；k-read → 符號 hover 展開字距
   ══════════════════════════════════════ */

/* 移除背景色塊感，改用底部細線區隔，行列感更俐落 */
.knowledge-card {
  border-bottom: 1px solid var(--line);
  background: transparent;
}

/* hover 時保留淡背景但不搶戲 */
.knowledge-card:hover {
  background: rgba(242, 237, 230, 0.02);
}

/* k-tag：加 amber 薄邊框 + 超淡底色，視覺上有標籤感但不臃腫 */
.k-tag {
  border: 1px solid rgba(212, 168, 67, 0.25);
  background: rgba(212, 168, 67, 0.06);
  border-radius: 3px;
  /* 內縮讓文字不貼邊 */
  padding: 2px 7px;
  display: inline-block;
}

/* k-title：hover 時文字轉 amber，增加可點擊感 */
.k-title {
  transition: color 0.2s;
}

.knowledge-card:hover .k-title {
  color: var(--amber);
}

/* k-read：確保顏色為 amber，hover 時字距微展開以呼應「閱讀更多」動感 */
.k-read {
  color: var(--amber);
  transition: letter-spacing 0.2s, gap 0.2s;
}

.knowledge-card:hover .k-read {
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════
   定價卡片（.pricing-card）
   標準卡：明確邊框；Featured 卡：amber 光暈；
   .pricing-num：大數字字距緊縮
   ══════════════════════════════════════ */

/* 標準定價卡：使用 CSS 變數 --line 維持系統一致性 */
.pricing-card {
  border: 1px solid var(--line);
}

/* Featured 卡：amber 邊框色 + 低強度環繞光暈，突出推薦感 */
.pricing-card.featured {
  border-color: rgba(212, 168, 67, 0.4);
  box-shadow: 0 0 32px rgba(212, 168, 67, 0.08);
}

/* 大數字緊縮字距，視覺上更有份量（Linear 大標題手法） */
.pricing-num {
  letter-spacing: -0.04em;
}

/* ══════════════════════════════════════
   守則卡片（.rule-card）
   加入明確邊框以利 hover 狀態對比；
   .rule-num：等寬數字對齊 + 降飽和度用 amber-d
   ══════════════════════════════════════ */

/* 守則卡：補細邊框，hover 時邊框略微提亮，與背景色變化形成雙層回饋 */
.rule-card {
  border: 1px solid var(--line);
  transition: background 0.2s, border-color 0.2s;
}

.rule-card:hover {
  border-color: rgba(255, 255, 255, 0.10);
}

/* rule-num：等寬數字讓 01～06 對齊整齊；用 amber-d 降低亮度避免與標題搶焦 */
.rule-num {
  font-variant-numeric: tabular-nums;
  color: var(--amber-d);
}