/* ══════════════════════════════════════════════════════════
   mobile-compact.css — 手機版精簡排版
   ──────────────────────────────────────────────────────────
   目標：手機畫面更精簡、更容易捲動，但「不刪任何資訊」
        只是縮短卡片、收斂間距、簡化區塊高度。

   載入順序：必須在 style.css 之後、頁面專屬 CSS 之後
   （放最後才能覆寫前面的規則）

   設計原則：
     · 內容一個字都不刪（SEO、可讀性、資訊完整度不打折）
     · 只壓縮「視覺高度」：間距、圓角、卡片間距
     · 說明文字手機版限行（-webkit-line-clamp），可展開
     · 保留完整可讀性 —— 縮限只在次要說明上做
   ══════════════════════════════════════════════════════════ */

/* ── 區塊間距收斂 ────────────────────────────────────── */
@media (max-width: 768px) {
  .section { padding: 40px 16px !important; }
  .section-header { margin-bottom: 24px !important; }
  .section-title { margin-bottom: 8px !important; }

  .page-hero { padding: 96px 16px 40px !important; }
  .hero { padding: 96px 16px 48px !important; }
}

/* ── 卡片網格：收斂間距 ───────────────────────────────── */
@media (max-width: 768px) {
  .cases-grid,
  .testimonials-grid,
  .services-grid,
  .plans-grid,
  .values-grid,
  .team-grid,
  .trust-items { gap: 12px !important; }

  .stats-grid,
  .stats-row { gap: 10px !important; }

  .process-steps { gap: 10px !important; }
}

/* ── 案例卡片 ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .case-card { padding: 18px 16px !important; }
  .case-card h4 { font-size: var(--fs-sm) !important; margin-bottom: 6px !important; }
  .case-card p,
  .case-desc { font-size: var(--fs-2xs) !important; line-height: 1.6 !important; }
  .case-quote {
    font-size: var(--fs-2xs) !important;
    line-height: 1.6 !important;
    padding: 10px 12px !important;
    margin: 10px 0 !important;
  }
  .case-amount,
  .case-rate { font-size: var(--fs-sm) !important; }
}

/* ── 好評卡片 ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .testimonial-card { padding: 18px 16px !important; }
  .testimonial-text {
    font-size: var(--fs-2xs) !important;
    line-height: 1.65 !important;
  }
  .testimonial-name { font-size: var(--fs-sm) !important; }
}

/* ── 誠信項目 ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .trust-item { padding: 14px 12px !important; }
  .trust-item h4,
  .trust-title { font-size: var(--fs-sm) !important; }
  .trust-item p { font-size: var(--fs-2xs) !important; line-height: 1.55 !important; }
  .trust-block { margin-top: 32px !important; padding-top: 28px !important; }
}

/* ── 服務項目 / 方案卡片 ──────────────────────────────── */
@media (max-width: 768px) {
  .service-card,
  .plan-card { padding: 18px 16px !important; }
  .service-card p,
  .plan-card p { line-height: 1.65 !important; }
  .plan-features { gap: 4px !important; }
}

/* ── 團隊卡片 ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .team-card { padding: 18px 16px !important; }
  .team-avatar {
    width: 48px !important;
    height: 48px !important;
    font-size: var(--fs-lg) !important;
    margin: 0 auto 8px !important;
  }
  .team-card p { font-size: var(--fs-2xs) !important; line-height: 1.6 !important; }
}

/* ── 頁尾：手機版精簡 ─────────────────────────────────── */
@media (max-width: 768px) {
  footer { padding: 32px 16px 20px !important; }
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 20px 16px !important;
    text-align: left !important;
  }
  /* 品牌欄獨佔整列，其餘三欄兩兩並排 → 高度減半 */
  .footer-brand {
    grid-column: 1 / -1 !important;
    padding-bottom: 16px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  .footer-brand p { margin-bottom: 6px !important; }
  .footer-grid h4 {
    font-size: var(--fs-2xs) !important;
    margin-bottom: 8px !important;
  }
  .footer-grid ul li { margin-bottom: 5px !important; }
  .footer-grid a { font-size: var(--fs-2xs) !important; }
  .footer-disclaimer {
    font-size: var(--fs-3xs) !important;
    line-height: 1.6 !important;
    margin-top: 20px !important;
    padding-top: 14px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
    font-size: var(--fs-3xs) !important;
  }
}

/* ── 頁尾底部 ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer-bottom span,
  .footer-bottom div { font-size: var(--fs-3xs) !important; }
}

/* ── 流程步驟 ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .process-step { padding: 16px 14px !important; }
  .process-step h4 { font-size: var(--fs-sm) !important; margin-bottom: 5px !important; }
  .process-step p { font-size: var(--fs-2xs) !important; line-height: 1.55 !important; }
}

/* ── FAQ 手機版收斂 ───────────────────────────────────── */
@media (max-width: 768px) {
  .faq-q { padding: 14px 16px !important; font-size: var(--fs-sm) !important; }
  .faq-a { padding: 0 16px 14px !important; }
  .faq-a p { font-size: var(--fs-2xs) !important; line-height: 1.65 !important; }
}

/* ── CTA 區塊收斂 ─────────────────────────────────────── */
@media (max-width: 768px) {
  .cta { padding: 40px 16px !important; }
  .cta h2 { font-size: var(--fs-xl) !important; margin-bottom: 10px !important; }
  .cta p { font-size: var(--fs-sm) !important; margin-bottom: 20px !important; }
  .cta-inner { padding: 24px 16px !important; }
}

/* ── 隱私權政策頁：手機版條款更緊湊 ───────────────────── */
@media (max-width: 768px) {
  .privacy-block { margin-bottom: 28px !important; }
  .privacy-block h2 { font-size: var(--fs-sm) !important; margin-bottom: 8px !important; }
  .privacy-block p,
  .privacy-block li { font-size: var(--fs-2xs) !important; line-height: 1.75 !important; }
}

/* ── 公司頁：手機版簡介收斂 ───────────────────────────── */
@media (max-width: 768px) {
  .company-intro { gap: 20px !important; }
  .company-stat { padding: 16px 10px !important; }
  .company-stat .lbl { font-size: var(--fs-3xs) !important; }
  .company-points li { margin-bottom: 8px !important; }
}

/* ── 案例卡片：手機版精簡（重點：圖示縮小、說明限行）───────── */
@media (max-width: 768px) {
  .cases-grid { grid-template-columns: minmax(0, 1fr) !important; }

  /* 頂部 emoji 區：手機版改成小橫條，不佔 217px */
  .case-img {
    height: 72px !important;
    min-height: 0 !important;
    padding: 10px 16px !important;
    font-size: 34px !important;
  }
  .case-badge {
    height: auto !important;
    padding: 3px 9px !important;
    font-size: var(--fs-3xs) !important;
    border-radius: 10px !important;
  }

  .case-body { padding: 14px 16px 16px !important; }
  .case-tag {
    display: inline-block !important;
    padding: 2px 9px !important;
    font-size: var(--fs-3xs) !important;
    margin-bottom: 6px !important;
  }
  .case-card h3 {
    font-size: var(--fs-md) !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
  }
  /* 說明文字限 2 行 */
  .case-card .case-desc,
  .case-body > p {
    font-size: var(--fs-2xs) !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  /* 三個數字橫排更緊湊 */
  .case-stats {
    gap: 8px !important;
    padding: 10px 0 !important;
    margin-bottom: 8px !important;
  }
  .case-stat .val { font-size: var(--fs-sm) !important; line-height: 1.2 !important; }
  .case-stat .lbl { font-size: var(--fs-3xs) !important; margin-top: 2px !important; }
  /* 客戶評語限 3 行 */
  .case-quote {
    padding: 8px 10px !important;
    margin: 8px 0 0 !important;
    font-size: var(--fs-3xs) !important;
    line-height: 1.55 !important;
  }
  .case-quote p {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* ── 方案／服務卡片：手機版說明限 3 行 ──────────────────── */
@media (max-width: 768px) {
  .plan-card p,
  .service-card p {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: var(--fs-2xs) !important;
    line-height: 1.6 !important;
  }
  .plan-card h3,
  .service-card h3 { font-size: var(--fs-md) !important; margin-bottom: 6px !important; }
  .plan-rate,
  .service-icon { font-size: var(--fs-lg) !important; }
  .plan-features li { font-size: var(--fs-3xs) !important; }
}

/* ── 方案卡片：手機版精簡（features 改 2 欄、按鈕緊湊）──────── */
@media (max-width: 768px) {
  .plans-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .plan-card { padding: 16px 14px !important; }
  .plan-card h3 { font-size: var(--fs-md) !important; }
  .plan-rate { font-size: var(--fs-2xl) !important; margin: 8px 0 4px !important; }
  .plan-max { font-size: var(--fs-2xs) !important; margin-bottom: 10px !important; }

  /* 特色 4 項改成 2×2 網格，高度減半 */
  .plan-features {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 4px 10px !important;
    margin-bottom: 12px !important;
  }
  .plan-features li {
    font-size: var(--fs-3xs) !important;
    padding-left: 14px !important;
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
  }
  .plan-btn,
  .plan-card a[class*="btn"] {
    padding: 10px 16px !important;
    font-size: var(--fs-2xs) !important;
    min-height: 0 !important;
  }
}

/* ── 服務項目卡片（首頁 6 項）──────────────────────────── */
@media (max-width: 768px) {
  .services-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .service-card { padding: 14px 14px !important; }
  .service-card h3 { font-size: var(--fs-md) !important; }
  .service-icon { font-size: var(--fs-xl) !important; margin-bottom: 6px !important; }
  .service-card p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* ── 好評卡片（首頁 3 則）──────────────────────────────── */
@media (max-width: 768px) {
  .testimonials-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .testimonial-card { padding: 14px 14px !important; }
  .testimonial-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* ── 案例頁手機版：案例網格 2 欄，卡片極簡 ───────────────── */
/* 12 個案例單欄會讓頁面高達 7586px，2 欄可減半 */
@media (max-width: 768px) {
  /* 案例專頁：維持單欄完整內容，但壓縮每張卡片的高度 */
  /* 資訊全部保留（說明限 2 行、評語限 3 行），不刪任何內容 */
  .page-cases .cases-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }

  .page-cases .case-img { height: 60px !important; padding: 6px 12px !important; font-size: 26px !important; }
  .page-cases .case-badge { font-size: var(--fs-3xs) !important; padding: 2px 7px !important; }
  .page-cases .case-body { padding: 10px 14px 12px !important; }
  .page-cases .case-tag { font-size: var(--fs-3xs) !important; padding: 1px 7px !important; margin-bottom: 4px !important; }
  .page-cases .case-card h3 { font-size: var(--fs-sm) !important; margin-bottom: 4px !important; }
  .page-cases .case-body > p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: var(--fs-3xs) !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
  }
  .page-cases .case-stats {
    gap: 6px !important;
    padding: 6px 0 !important;
    margin-bottom: 6px !important;
  }
  .page-cases .case-stat .val { font-size: var(--fs-2xs) !important; }
  .page-cases .case-stat .lbl { font-size: 11px !important; margin-top: 1px !important; }
  .page-cases .case-quote {
    padding: 6px 9px !important;
    margin: 6px 0 0 !important;
    font-size: var(--fs-3xs) !important;
    line-height: 1.5 !important;
  }
  .page-cases .case-quote p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}