/* ══════════════════════════════════════════════════════════════════
   HKPrice Nexus — 三大比較分頁共用 Desktop 放大樣式
   （首頁「家居寬頻」index.html／5g-broadband-compare.html／mobile-broadband-compare.html）

   目的：喺 1920×1080 / 1440×900 / 1366×768 等大螢幕，令容器、字體、卡片、
   篩選器、按鈕嘅視覺比例更飽滿，唔再出現「大量留白但內容擠成一細塊」。

   規則：
   - 全部包喺 @media (min-width:769px)，768px 或以下手機版完全唔受影響。
   - 呢個檔案要喺三頁 <head> 入面排喺最後（tailwind-output.css 之後），
     等同 specificity 嘅規則可以用 source order 覆寫返頁面自己嘅 <style>。
   - 「全屏比較 Overlay」（mobile-overlay／fiveg-overlay／cmp-overlay）係
     JS 喺點擊時先注入 <style>，DOM 位置喺 <body> 尾、一定遲過 <head> 嘅
     link，所以淨係 source order 唔夠 —— 呢部分選加返 overlay 嘅 id 做
     specificity（例如 `#mobile-overlay .mob-card`）先可以穩定覆寫。
   ══════════════════════════════════════════════════════════════════ */

@media (min-width:769px){
  :root{
    /* 三級 viewport（1366 / 1440 / 1920）平滑過渡，唔會斷點跳躍 */
    --container-6xl: clamp(1100px, calc(790px + 40vw), 1560px);   /* 原 .max-w-6xl 1100px */
    --container-wide: clamp(1200px, calc(860px + 43.5vw), 1700px); /* 原 index.html banner-content 1200px */
    --container-4xl: clamp(896px, calc(706px + 24.5vw), 1180px);   /* 原 .max-w-4xl 896px（FAQ） */
    --container-3xl: clamp(768px, calc(626px + 18.5vw), 980px);    /* 原 .max-w-3xl 768px（指南/CTA） */
  }

  /* ══ 1. 容器寬度統一（mobile / 5g 頁 Tailwind 容器） ══ */
  .max-w-6xl{max-width:var(--container-6xl)}
  .max-w-4xl{max-width:var(--container-4xl)}
  .max-w-3xl{max-width:var(--container-3xl)}

  /* ══ 2. 快捷篩選／推薦卡／使用場景／為何選擇 等 .rounded-card 系統
        （mobile-broadband-compare.html + 5g-broadband-compare.html 共用） ══ */
  .rounded-card.p-4{padding:22px}
  .rounded-card.p-5{padding:26px}
  .max-w-6xl .rounded-card .text-\[13\.5px\]{font-size:15px}
  .max-w-6xl .rounded-card .text-\[15px\]{font-size:16.5px}
  .max-w-6xl .rounded-card .text-\[13px\]{font-size:14px}
  .max-w-6xl .rounded-card .text-2xl{font-size:28px}
  .max-w-6xl .rounded-card .text-xl{font-size:24px}
  .max-w-6xl .rounded-card .w-9.h-9{width:44px;height:44px}
  .max-w-6xl .rounded-card .w-10.h-10{width:48px;height:48px}
  .max-w-6xl .rounded-card .text-\[14\.5px\]{font-size:16px}
  .max-w-6xl .rounded-card .text-\[12px\]{font-size:13px}
  .max-w-6xl .rounded-card .text-\[11px\]{font-size:12px}

  .max-w-6xl > .grid, .max-w-6xl .grid{gap:18px}
  #hero-cards-grid{gap:20px !important}
  #featured-grid{gap:20px}

  /* section 標題 / 副標題（兩頁共用） */
  .max-w-6xl h2.text-lg, .max-w-4xl h2.text-lg, .max-w-3xl h2.text-lg{font-size:22px}
  .max-w-6xl p.text-sm.text-navy\/50, .max-w-6xl p.text-xs.text-navy\/40{font-size:13.5px}

  /* ══ 3. 側欄篩選 + 結果卡（全屏 Overlay：mc-/mob-/fg- 同 cmp- 統一）══
        用 overlay 容器 id 做 specificity boost，先可以穩定覆寫 overlay
        JS 動態注入嘅 <style>（body 尾、source order 較後）。            */
  #mobile-overlay .mc-sidebar,
  #fiveg-overlay .mc-sidebar,
  #cmp-overlay #cmp-sidebar{
    width:220px;
    padding:24px 18px 40px;
  }
  #mobile-overlay .mc-flabel,
  #fiveg-overlay .mc-flabel,
  #cmp-overlay .cmp-sb-title{
    font-size:13px;
  }
  #mobile-overlay .mc-chkrow,
  #fiveg-overlay .mc-chkrow,
  #cmp-overlay .cmp-cb{
    font-size:13.5px;
    padding:7px 5px;
  }
  #mobile-overlay .mc-chkrow input,
  #fiveg-overlay .mc-chkrow input,
  #cmp-overlay .cmp-cb input{
    width:16px;height:16px;
  }
  #mobile-overlay .mc-pill,
  #fiveg-overlay .mc-pill,
  #cmp-overlay .cmp-sb-btn{
    font-size:12.5px;
    padding:7px 14px;
  }
  #mobile-overlay .mc-sortsel,
  #fiveg-overlay .mc-sortsel,
  #cmp-overlay .cmp-sb-btn{
    font-size:13.5px;
  }
  #mobile-overlay .mc-resetbtn,
  #fiveg-overlay .mc-resetbtn,
  #cmp-overlay #cmp-sort-bar > button{
    font-size:13px;
    padding:8px 14px;
  }
  #mobile-overlay #mob-count,
  #fiveg-overlay #fg-count,
  #cmp-overlay #cmp-count-lbl{
    font-size:15px;
  }

  /* 結果區 Grid 對齊：sidebar 固定寬度 + 右側內容 flex:1，「找到 X 個計劃」
     標題列／排序列／結果卡 全部用返完全相同嘅左右 padding，唔再各自加
     max-width/margin:auto 令內容偏移或置中——右側自然由 sidebar 後開始，
     用盡剩餘寬度，唔會再喺中間或右方留低大截無效空白。 */
  #mobile-overlay .mc-topbar,
  #fiveg-overlay .mc-topbar,
  #mobile-overlay .mc-scroll,
  #fiveg-overlay .mc-scroll,
  #cmp-overlay #cmp-sort-bar,
  #cmp-overlay #cmp-scroll{
    padding-left:24px;
    padding-right:24px;
    box-sizing:border-box;
  }
  #mobile-overlay .mc-topbar,
  #fiveg-overlay .mc-topbar{
    padding-top:14px;
    padding-bottom:14px;
  }
  #cmp-overlay #cmp-list{
    max-width:none;
    margin:0;
    padding:0;
    width:100%;
    box-sizing:border-box;
  }

  /* 結果卡本身：改用固定 CSS Grid（唔再靠 flex 按內容自動分配寬度），
     令三頁每張卡嘅 Logo／方案名／月費／合約／速度數據／安裝網絡／
     WhatsApp 呢 7 個欄位，喺同一頁面內垂直對齊，唔會因應方案名長短、
     badge 多寡而移位。 */
  #mobile-overlay .mob-card,
  #fiveg-overlay .fg-card,
  #cmp-overlay .cmp-rcard{
    display:grid;
    grid-template-columns:
      92px                    /* 1: Logo */
      minmax(260px,1.6fr)     /* 2: 方案名稱／標籤 */
      minmax(92px,1.2fr)      /* 3: 月費（第一個 stat，字體較大） */
      repeat(3, minmax(76px,1fr)) /* 4–6: 其餘 3 個 stat */
      188px;                  /* 7: WhatsApp（固定寬度，唔用 auto——auto
                                   會按每張卡按鈕文字長短取唔同闊度，令
                                   前面 fr 欄位跟住逐張卡輕微移位） */
    column-gap:20px;
    row-gap:6px;
    align-items:center;
    padding:22px 26px;
    border-radius:16px;
    min-height:104px;
  }

  /* cmp-rcard 嘅 Logo＋方案名外面多包咗一層冇 class 嘅 wrapper div，用
     display:contents 拆走呢層，等 cmp-logo／cmp-info 一齊直接落返
     card 個 grid（第 1／2 欄）。mob-stats／fg-stats／cmp-stats 同樣用
     display:contents，等入面 4 個 stat 直接落返第 3–6 欄。 */
  #cmp-overlay .cmp-rcard > div:first-child{
    /* 呢層 wrapper 有 inline style="display:flex"，inline 嘅 specificity
       一定贏過外部 stylesheet，所以呢度要用 !important 先蓋得到 */
    display:contents !important;
  }
  #mobile-overlay .mob-stats,
  #fiveg-overlay .fg-stats,
  #cmp-overlay .cmp-stats{
    display:contents;
  }
  #mobile-overlay .mob-logo,
  #fiveg-overlay .fg-logo,
  #cmp-overlay .cmp-logo{
    grid-column:1;
    width:92px;
    height:56px;
    border-radius:10px;
    padding:6px;
  }
  #mobile-overlay .mob-info,
  #fiveg-overlay .fg-info,
  #cmp-overlay .cmp-info{
    grid-column:2;
    min-width:0;
    max-width:none;
    flex:none;
  }
  /* WhatsApp 區永遠係卡片最後一個直屬子元素（唔理中間有冇額外備註行，
     例如手機頁專有嘅「平均月費」note），用 :last-child 確保一定落第 7 欄 */
  #mobile-overlay .mob-card > div:last-child,
  #fiveg-overlay .fg-card > div:last-child,
  #cmp-overlay .cmp-rcard > div:last-child{
    grid-column:7;
    justify-self:start;
  }
  /* 手機頁「平均月費」備註行（唯一冇 class 嘅中間備註 div）獨立佔一整
     行，唔會搶咗 stats／WhatsApp 嘅欄位 */
  #mobile-overlay .mob-card > div[style*="text-align:right"]{
    grid-column:2 / 8;
  }

  #mobile-overlay .mob-name,
  #fiveg-overlay .fg-name,
  #cmp-overlay .cmp-iname{
    font-size:17px;
  }
  #mobile-overlay .mob-tag,
  #fiveg-overlay .fg-tag,
  #cmp-overlay .cmp-itag{
    font-size:11.5px;
    padding:3px 9px;
  }
  #mobile-overlay .mob-stat,
  #fiveg-overlay .fg-stat,
  #cmp-overlay .cmp-stat{
    min-width:0;
    text-align:center;
  }
  #cmp-overlay .cmp-stat:first-child{
    border-left:1px solid #f0f1f4;
    padding-left:20px;
  }
  #mobile-overlay .mob-sl,
  #fiveg-overlay .fg-sl,
  #cmp-overlay .cmp-slabel{
    font-size:11px;
  }
  #mobile-overlay .mob-sv,
  #fiveg-overlay .fg-sv,
  #cmp-overlay .cmp-sval{
    font-size:16px;
  }
  #cmp-overlay .cmp-stat:first-child .cmp-sval{font-size:27px}
  #mobile-overlay .mob-wa,
  #fiveg-overlay .fg-wa,
  #cmp-overlay .cmp-wabtn{
    font-size:14.5px;
    padding:12px 22px;
    border-radius:9px;
  }

  /* ══ 4. CTA / WhatsApp 保密提示列 ══ */
  .bg-navy h2.text-2xl{font-size:32px}
  .bg-navy p.text-white\/55{font-size:15.5px}
  .bg-navy a.inline-flex, .bg-navy .inline-flex.items-center.justify-center{
    padding:15px 34px;
    font-size:15px;
  }
  #mobile-overlay > div[style*="border-top:1px solid #e8eaed"],
  #fiveg-overlay > div[style*="border-top:1px solid #e8eaed"]{
    font-size:12.5px;
    padding:11px 16px;
  }

  /* ══ 5. FAQ / 指南文章區 ══ */
  #faq-list .text-\[14\.5px\]{font-size:16px}
  #faq-list .text-\[13\.5px\]{font-size:14.5px}
  #faq-list summary{padding:18px 22px}
  #faq-list details > div.px-5{padding-left:22px;padding-right:22px;padding-bottom:18px}

  .prose-content{font-size:15.5px}
  .prose-content h3{font-size:17.5px}

  /* ══ 6. index.html 專屬區塊 ══ */
  .banner-content{max-width:var(--container-wide);gap:48px;padding:56px}
  .banner-text h1{font-size:clamp(30px,3.2vw,50px)}
  .banner-text p{font-size:15px}
  .search-card{padding:22px}

  .hero-cats{
    max-width:var(--container-6xl);
    margin:0 auto;
    padding:0 0 48px;
    gap:20px;
  }
  .hero-cat{height:300px}
  .hero-cat-title{font-size:20px}
  .hero-cat-desc{font-size:13.5px;margin-bottom:14px}
  .hero-cat-cta{font-size:13.5px;padding:9px 16px}
  .hero-cat-icon{width:30px;height:30px;font-size:15px}
  .hero-cat-badge{width:34px;height:34px;font-size:16px}

  .wa-sticky{padding:20px 40px}
  .wa-sticky-title{font-size:16px}
  .wa-sticky-sub{font-size:13.5px}
  .wa-sticky-btn{padding:13px 26px;font-size:14.5px}

  .feat-title{font-size:17px}
  .feat-desc{font-size:14.5px}
  .feat-content{padding:20px 24px 24px}
  .feat-img-wrap{height:230px}

  #cmp-overlay #cmp-subtitle{font-size:12.5px}

  /* ══ 7. Logo container 桌面尺寸（轉台優惠 shortcut / 供應商比較區）══ */
  .max-w-6xl a.rounded-card img.h-8{height:34px}

  /* 品牌 Logo 視覺重量校正（只做等比例 scale，唔改 aspect ratio，唔算拉
     伸）：3HK 原圖本身留白多，喺同一個 logo box 入面會顯得比其他品牌
     細好多，加返 1.3x 等比放大令佢喺 box 入面嘅視覺份量同其他品牌睇齊。
     淨係桌面生效，手機版 logo 尺寸完全唔改。 */
  #mobile-overlay .mob-logo img[alt="3HK"],
  #fiveg-overlay .fg-logo img[alt="3HK"],
  #cmp-overlay .cmp-logo img[alt="3HK"]{
    transform:scale(1.3);
  }
}

/* ══════════════════════════════════════════════════════════════════
   Logo 比例統一修正（唔限桌面斷點 —— 呢個係「唔拉伸/唔壓扁」嘅正確性修
   正，box 大小仍然跟返各自嘅手機／桌面尺寸唔變，淨係改 img 點樣填滿 box）

   .mob-logo／.cmp-logo 嘅樣式係 overlay 開啟時先由 JS 注入 <style>，
   DOM 位置喺 <body> 尾、source order 一定遲過本檔案，所以要加返 overlay
   容器 id 做 specificity boost，先可以穩定覆寫（同時亦已經蓋過原本
   `[alt="SmarTone"]` 嗰條逐品牌 hack，唔使再靠佢）。
   .pc-logo／.fg-logo 屬於頁面本身靜態 <style>，一般選擇器已經足夠。
   ══════════════════════════════════════════════════════════════════ */
.pc-logo img, .fg-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  max-width:none;
  max-height:none;
}
#mobile-overlay .mob-logo img,
#cmp-overlay .cmp-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  max-width:none;
  max-height:none;
}
