/* ===================================================================
   KeySearch - responsive.css (CLEAN, with Apple-like ks-footer)
   只放 RWD 覆寫（不更動桌機 styles.css）
   斷點：
     ≤1200px: 平板 / 大手機直
     ≤980px : 手機主斷點（Header 抽屜 / 格線收斂）
     ≤768px : Mobile header polish
     ≤640px : Footer 手風琴
     ≤560px : 小手機
   =================================================================== */

/* ------- 共通安全護欄 ------- */
html, body { overflow-x: hidden; }
.site-header, .bm-header { overflow: visible; }
.nav-links.open { z-index: 999; }

/* =========================
   ≤1200px：Hero/Features 單欄化
   ========================= */
@media (max-width: 1200px){
  .hero{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-top: 110px !important;
    padding-bottom: 60px !important;
  }
  .hero > * { min-width: 0; }
  .hero-text{ text-align: center !important; justify-self: center !important; }
  .hero-text .actions{ justify-content: center !important; }

  .device-mock{ max-width: 92vw !important; margin-inline: auto !important; }
  .feature{
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .feature.reverse{ direction: ltr !important; }
  .feature-img{ margin-bottom: 24px !important; }
  .feature-img img{ max-width: 92vw !important; }

  .feat-grid{ grid-template-columns: repeat(3, 1fr) !important; }
}

/* =========================
   ≤980px：主斷點（Header 抽屜 / 格線收斂）
   ========================= */
@media (max-width: 980px){
  /* Header */
  .nav-toggle{ display: block !important; }
  .nav-links{ display: none !important; }
  .nav-links.open{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    position: fixed !important;
    top: 72px !important; left: 0 !important; right: 0 !important;
    background: #0d0d0d !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    padding: 18px 24px 22px !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.5);
    z-index: 9999 !important;
  }
  .bm-header .nav-actions .bm-cta,
  .site-header .nav-actions .bm-cta{ display: none !important; }

  /* Hero */
  .hero{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-top: 104px !important;
    padding-bottom: 56px !important;
  }
  .hero-text{ text-align: center !important; justify-self: center !important; }
  .hero-text .actions{ justify-content: center !important; }
  .hero-title-wrap h1{ white-space: normal !important; }

  /* Cards/Grids */
  .features-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .feat-grid    { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .pricing-toggle{ text-align: center !important; }
  .pricing-grid  { grid-template-columns: 1fr !important; }
  .price-card    { max-width: 630px; margin-inline: auto; }

  .feedback-form .row2{ grid-template-columns: 1fr !important; }
  .feedback .actions  { justify-content: center !important; }

  .dl-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .dl-card{ max-width: 560px; margin-inline: auto; }

  .news-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* 行動裝置：動畫降低 */
  .device-mock{
    transform: none !important;
    animation: fadeInOnly .6s ease both !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.45) !important;
  }
  @keyframes fadeInOnly{
    from{ opacity:0; transform: translateY(10px); }
    to  { opacity:1; transform: translateY(0); }
  }
  .feature-img:hover,
  .dl-card:hover,
  .price-card:hover,
  .feat-card:hover,
  .about-card:hover{
    transform: translateY(-3px) !important;
  }

  /* Donate 小調整 */
  .donate-card{ margin-inline: 16px !important; }
  .donate-actions{ justify-content: center !important; }
}

/* =========================
   ≤768px：Mobile Header Polish
   ========================= */
@media (max-width: 768px){
  .bm-header{
    background: rgba(10,10,10,.92);
    backdrop-filter: saturate(120%) blur(8px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding-top: max(0px, env(safe-area-inset-top));
    box-shadow: 0 2px 14px rgba(0,0,0,.35);
  }
  .bm-header .nav{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: 56px;
    padding: 0 12px;
  }
  .bm-header .brand { display:inline-flex; align-items:center; gap:6px; font-weight:600; color:#fff; text-decoration:none; }
  .bm-header .brand img{ width:24px; height:24px; }
  .bm-header .brand-text{ font-size:2rem; letter-spacing:.2px; }
  @media (max-width: 420px){ .bm-header .brand-text{ display:none; } }
  .bm-header .nav-toggle{
    display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center;
    border-radius:10px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  }
  .bm-header .nav-toggle:active{ transform: translateY(1px); }

  .bm-header .nav-links{
    position: absolute; left: 12px; right: 12px;
    top: calc(56px + max(0px, env(safe-area-inset-top)));
    background: #0f0f0f; border:1px solid rgba(255,255,255,.08);
    border-radius: 12px; padding: 10px 12px; display: none;
    box-shadow: 0 14px 28px rgba(0,0,0,.45);
  }
  .bm-header .nav-links.open{ display: flex; flex-direction: column; gap: 10px; }
  .bm-header .nav-links a{ padding: 10px 8px; border-radius: 8px; }
  .bm-header .nav-links a:hover{ background: rgba(255,255,255,.06); color:#fff; }

  .bm-header .nav-actions{ gap: 8px; }
  .bm-header .bm-cta{ display: none !important; }

  .lang-btn{
    height: 36px; padding: 6px 10px; border-radius: 10px;
    font-size: .9rem; border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
  }
}

/* =========================
   ≤560px：小手機細節
   ========================= */
@media (max-width: 560px){
  .hero-title-wrap h1{ font-size: 1.9rem !important; }
  .hero-text .actions{ flex-wrap: wrap !important; gap: 12px !important; }

  .features-grid,
  .feat-grid,
  .news-grid,
  .dl-grid{ grid-template-columns: 1fr !important; }

  .feedback-form{ padding-inline: 2px !important; }
}

/* =========================
   語言選單（Portal 版）
   ========================= */
.lang-portal{
  position: fixed;
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  padding: 10px;
  min-width: 220px; max-width: 90vw; max-height: 60vh;
  overflow: auto;
  display: none;
  z-index: 12000;

  display: grid;
  grid-template-columns: repeat(3, minmax(140px,1fr));
  gap: 6px 16px;
}
.lang-portal.open{ display: grid; }
.lang-portal[aria-hidden="true"]{ display: none !important; }

.lang-portal button{
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 100%; text-align: left; padding: 8px 10px;
  border-radius: 8px; color: #e7ecf3; font-size: .95rem;
}
.lang-portal button:hover{
  background: rgba(255,255,255,.08); color: var(--brand-gold);
}
.lang-portal button[aria-current="true"]{
  color: var(--brand-gold); font-weight: 600;
}
@media (max-width: 980px){
  .lang-portal{ grid-template-columns: repeat(2, minmax(120px,1fr)); min-width: 200px; }
}
@media (max-width: 560px){
  .lang-portal{ grid-template-columns: 1fr; min-width: 180px; }
}

/* ===== News page Responsive ===== */
@media (max-width: 640px) {
  .page-hero.container { padding-top: 32px; padding-bottom: 8px; text-align: center; }
  .page-hero h1 { font-size: 24px; }
  .page-hero .lead { font-size: 14px; }

  .chip-group { justify-content: center; gap: 6px; }
  .chip { font-size: 13px; padding: 5px 10px; }

  .news-grid { grid-template-columns: 1fr; gap: 12px; }
  .news-card { padding: 14px 14px 12px; }
  .news-card h2 { font-size: 18px; }
  .news-meta { font-size: 12px; }
  .news-meta .badge { font-size: 11px; padding: 3px 7px; }
}
@media (min-width: 641px) and (max-width: 879px) {
  .news-grid { grid-template-columns: 1fr; gap: 14px; }
  .news-card { padding: 16px 16px 14px; }
  .news-card h2 { font-size: 19px; }
}
@media (min-width: 880px) {
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .news-card h2 { font-size: 20px; }
}
@media (min-width: 1280px) {
  .news-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

/* =========================================================
   Apple-like Footer: ks-footer  (唯一 footer 版本)
   ========================================================= */

/* 基本色（主色／邊界） */
:root{
  --accent: #f5d37a;                 /* 你的品牌金，可調 */
  --border: rgba(255,255,255,.12);
}

/* Base */
.ks-footer{
  background:#0b0b0d;
  color:#e7ecf3;
  font-size:.9rem;
  line-height:1.65;
  border-top:1px solid rgba(255,255,255,.08);
}
.ks-footer a{ color:#e7ecf3; opacity:.85; text-decoration:none; }
.ks-footer a:hover{ opacity:1; color:var(--accent); }

/* Grid (桌機/平板) */
.ks-foot-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:24px;
  padding:32px 0;
}
.ks-foot-grid h4{
  font-size:.95rem;
  margin:0 0 10px;
  color:var(--accent);
}
.ks-foot-links{ list-style:none; padding:0; margin:0; }
.ks-foot-links li{ margin:4px 0; }

/* 底部列 */
.ks-foot-bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
  border-top:1px solid var(--border);
  padding:16px 0 24px;
}
#footLangLink{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:#e7ecf3;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}

/* 行動版（≤640px）：單欄 + 手風琴 */
@media (max-width: 640px){
  .ks-foot-grid{
    grid-template-columns: 1fr;
    gap:0;
    padding:8px 0 0;
  }
  .ks-foot-grid section{
    border-top:1px solid var(--border);
    padding:0;
  }
  .ks-foot-grid section:last-child{
    border-bottom:1px solid var(--border);
  }

  /* h4 當按鈕（加箭頭） */
  .ks-foot-grid section h4{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 2px; margin:0;
    cursor:pointer; color:#e7ecf3;
  }
  .ks-foot-grid section h4::after{
    content:'▾';
    font-size:12px; opacity:.8;
    transition: transform .2s ease;
  }
  .ks-foot-grid section.open h4::after{
    transform: rotate(180deg);
  }

  /* 折疊面板 */
  .ks-foot-grid section ul{
    max-height:0; overflow:hidden;
    transition:max-height .25s ease;
    padding:0;
  }
  .ks-foot-grid section.open ul{
    max-height:320px; /* 足夠 6~8 列 */
    padding:0 0 10px 0;
  }

  /* 底部列直向 */
  .ks-foot-bottom{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
}

/* 桌機：四欄攤開（保險覆寫） */
@media (min-width: 641px){
  .ks-foot-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:24px;
  }
}

/* 桌機：logo 左對齊 */
@media (min-width: 641px){
  .ks-foot-brand { text-align: left; }
  .ks-footer-top {
    display: grid;
    grid-template-columns: 220px 1fr; /* 左 logo + 右四欄 */
    gap: 40px;
    align-items: start;
  }
}

/* 手機：logo 置中 */
@media (max-width: 640px){
  .ks-foot-brand {
    text-align: center;
    margin-bottom: 16px;
  }
  .ks-foot-brand .tagline {
    margin-left: auto;
    margin-right: auto;
  }
}

/* 手機再多一點呼吸感 */
@media (max-width: 640px){
  .ks-footer {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .ks-footer-top {
    margin-bottom: 32px;
  }
}

/* Responsive 改寫（與你的 responsive.css 相容） */
@media (max-width: 1200px){
  .hero-modern{ grid-template-columns: 1fr; gap: 28px; padding-top: 110px; padding-bottom: 64px; text-align: center; }
  .hero-modern .sub{ margin-left:auto; margin-right:auto; }
  .hero-modern .hero-stats{ justify-content:center; }
}
@media (max-width: 980px){
  .hero-modern{ padding-top: 104px; }
  .feature-modern{ grid-template-columns: 1fr; gap: 20px; }
  .feature-modern .feature-media, .feature-modern .feature-text{ order: initial; text-align: center; }
}

/* 斷點：調整欄數，同步維持居中 */
@media (max-width: 1200px) {
  .feat-grid.container { grid-template-columns: repeat(3, minmax(220px, 1fr)); max-width: 860px; }
}
@media (max-width: 900px) {
  .feat-grid.container { grid-template-columns: repeat(2, minmax(220px, 1fr)); max-width: 680px; }
}
@media (max-width: 560px) {
  .feat-grid.container { grid-template-columns: 1fr; max-width: 520px; }
}

/* 桌機專用 */
.desktop-only { display: none; }
@media (min-width: 981px) {
  .desktop-only { display: block; }
  .mobile-only { display: none; }
#langBtnMobile{display:block;}
}



/* =======================================================
   KeySearch — Pricing page responsive overrides
   Scope: .page-pricing …
   ======================================================= */

/* ---------------------------
   ≤1200px
--------------------------- */
@media (max-width: 1200px){
  .page-pricing .pricing-hero{
    padding: 88px 0 50px;
  }
  .page-pricing .pricing-hero h1{
    font-size: 2.1rem;
  }
}

/* ---------------------------
   ≤980px（主要斷點）
--------------------------- */
@media (max-width: 980px){
  /* Hero */
  .page-pricing .pricing-hero{
    padding: 84px 0 44px;
  }
  .page-pricing .pricing-hero p.lead{
    max-width: 60ch; margin-inline: auto; text-align: center;
  }
  .page-pricing .pricing-hero .cta-row{
    justify-content: center;
  }

  /* Segmented billing toggle */
  .page-pricing .billing-toggle-wrap{
    padding: 16px 0 8px;
  }

  /* Plans grid：2 欄 */
  .page-pricing .plans{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
  }

  /* Plan card spacing */
  .page-pricing .plan{
    padding: 16px;
  }
  .page-pricing .plan .subtitle{
    font-size: .9rem;
    text-align: center;
  }
  .page-pricing .price{
    font-size: 1.8rem;
  }

  /* Comparison table：外框滑動 */
  .page-pricing .table-wrap{
    margin-top: 24px;
  }
  .page-pricing .cmp{
    min-width: 720px;
  }
}

/* ---------------------------
   ≤768px（平板/小筆電）
--------------------------- */
@media (max-width: 768px){
  /* Hero 更緊湊 */
  .page-pricing .pricing-hero{
    padding: 76px 0 36px;
  }

  /* Plans grid：單欄 */
  .page-pricing .plans{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Plan subtitle */
  .page-pricing .plan .subtitle{
    font-size: .9rem;
    margin-bottom: 6px;
    text-align: left;
  }

  /* Most Popular 標章縮小些 */
  .page-pricing .most-pop{
    top: 10px; right: 10px; font-size: .75rem; padding: 3px 7px;
  }

  /* FAQ 間距 */
  .page-pricing .faq{
    margin-top: 28px;
  }
  .page-pricing .faq details{
    padding: 10px 12px;
  }
  .page-pricing .faq summary{
    font-size: 1rem;
  }

  /* Final CTA */
  .page-pricing .final-cta{
    margin: 28px 0 18px;
    padding: 22px 16px;
  }
  .page-pricing .final-cta .cta-row{
    justify-content: center;
  }
}

/* ---------------------------
   ≤560px（小手機）
--------------------------- */
@media (max-width: 560px){
  /* Hero 字體與 CTA 行為 */
  .page-pricing .pricing-hero h1{
    font-size: 1.8rem;
  }
  .page-pricing .pricing-hero .cta-row{
    gap: 10px;
  }

  /* Segmented toggle：緊湊 */
  .page-pricing .seg button{
    padding: 7px 12px;
  }
  .page-pricing .seg .badge{
    display: inline-block; transform: scale(.95);
  }

  /* Plan 卡片內容間距 */
  .page-pricing .plan h3{ margin: 4px 0 4px; font-size: 1.2rem; }
  .page-pricing .plan .subtitle{ font-size: .85rem; }
  .page-pricing .price{ font-size: 1.6rem; }
  .page-pricing .ul li{ margin: 6px 0; }

  /* 表格：放大點擊區、方便橫滑 */
  .page-pricing .table-wrap{
    margin-top: 22px;
  }
  .page-pricing .cmp th, 
  .page-pricing .cmp td{
    padding: 10px 12px;
  }
}


/* ====== END ====== */