/* ══════════════════════════════════════════════════════════════════════
   asset-web.css — 資產頁「桌機版」共用樣式(aapl / nvda / nflx … 共用一份)
   webVer: 2

   掛法:每支資產頁的 <head>,在該頁 </style> 之後加一行
     <link rel="stylesheet" href="/css/asset-web.css?v=2">
   順序很重要,一定要在頁內 <style> 之後,否則覆蓋不到。
   ※ 這一行由 scripts/asset-template.html 產生,改版號要兩邊一起改。

   原則
   1. 手機版(頁內 <style>)一律不動。所有規則都關在 @media(min-width:960px) 裡。
   2. 桌機字級是「整組重訂」,不是從手機微調上來。桌機視距遠、行寬大,
      所以字要比手機大,而且行寬要收窄,一行的字數才會跟手機接近。
   3. 版面寬度靠改寫 --gut:桌機把左右留白撐成置中 1200 容器,
      既有的 .gut / .rule / .chartcard / .rail 自動跟著對齊。
   ══════════════════════════════════════════════════════════════════════ */


/* ── 兩段式隱藏:桌機專用元素,手機完全不出現 ── */
.web-only{display:none;}

/* ── 純結構用包裝:手機端等同不存在,桌機才給它版面 ──
   #hero .hcol / .idrow / .idtext / .scorewrap / .snbox → HERO 分欄與分組
   #cta .cta-row                                        → 輸入框與按鈕並排 */
#hero .hcol,#hero .idrow,#hero .idtext,#hero .scorewrap,#hero .snbox,
#cta .cta-row{display:contents;}


@media (min-width:960px){

  /* ═══════════ 0. 容器、字級規範 ═══════════ */
  .page{
    max-width:none;
    padding-top:69px;              /* chrome.js 桌機把 nav 改成 fixed,讓出等高上緣 */
    --gut: max(40px, calc((100% - 1200px) / 2));
    --bg2:#f2efe8;
    --screen: clamp(560px, 100svh, 860px);

    /* ══ 桌機字級(手機 → 桌機)══
       內文 16→18 / 長文 16→20 / 卡片標題 12.5→15 / 卡片數字 34→48
       卡片單位 13→17 / 卡片說明 12→14.5 / 問答問題 15→19 / 問答答案 14→17
       要調字級,改這幾行就好,全頁跟著變。 */
    --fs-eyebrow:13px;
    --fs-title:42px;
    --fs-sub:17px;
    --fs-long:20px;
    --fs-body:18px;
    --fs-ctitle:15px;
    --fs-cnum:48px;
    --fs-cunit:17px;
    --fs-cnote:14.5px;
  }

  section{padding:100px 0;}
  .rule{display:none;}                      /* 改用底色區隔 */

  .sec-title{font-size:var(--fs-title);letter-spacing:-1.3px;line-height:1.15;}
  .sec-sub{font-size:var(--fs-sub);max-width:620px;line-height:1.7;}
  .eyebrow{font-size:var(--fs-eyebrow);letter-spacing:2px;}

  /* 中文斷行:只在標點之後換行,句子內部不拆詞。
     由頁內 JS 把句子按標點切段並包上 .nb,這裡負責讓每一段不可拆。 */
  .nb{white-space:nowrap;}


  /* ═══════════ 1. 交錯底色(相鄰兩區必定不同色)═══════════ */
  #intro   {background:var(--bg2);}
  #secF    {background:var(--bg);}
  #secA    {background:var(--bg2);}
  #secB    {background:var(--bg);}
  #secBD   {background:var(--bg2);}
  #closing {background:var(--bg);}
  #faq     {background:var(--bg2);}
  #related {background:var(--bg);}


  /* ═══════════ 2. HERO ═══════════
     欄寬由內容決定、整組水平置中;圖像元素(Logo / 咖啡豆)的尺寸
     由頁內 JS 量測文字高度後決定,換語言換資產都不用重調。 */
  #hero{
    display:grid;
    grid-template-columns:auto auto;
    column-gap:64px;
    justify-content:center;
    align-items:center;
    align-content:center;
    min-height:clamp(440px, 72svh, 640px);
    padding:clamp(44px,6svh,64px) var(--gut);
    text-align:left;
  }
  #hero .hcol{display:flex;flex-direction:column;justify-content:center;min-width:0;}
  #hero .hcol-a{width:440px;}
  #hero .hcol-b{align-items:center;}

  #hero .idrow{display:flex;align-items:center;gap:22px;}
  #hero .idtext{display:block;min-width:0;}
  #hero .logo{width:64px;height:64px;flex:none;border-radius:18px;margin:0;font-size:26px;}
  /* 內距拿掉:圖貼滿到圓角邊緣,不要在圖與框之間留一圈白。 */
  #hero .logo img{padding:0;}
  #hero .tkr{font-size:54px;letter-spacing:-1.8px;line-height:1;}
  #hero .co{font-size:15px;margin-top:8px;}
  #hero .pxrow{justify-content:flex-start;gap:14px;margin-top:24px;}
  #hero .px{font-size:38px;letter-spacing:-1px;}
  #hero .chg{font-size:18px;}
  #hero .hint{font-size:17px;line-height:1.72;margin:18px 0 0;max-width:100%;}

  #hero .scorewrap{display:flex;align-items:center;gap:24px;}
  #hero .bean{width:170px;flex:none;margin:0;}
  #hero .snbox{display:block;text-align:center;}
  #hero .sn{font-size:82px;letter-spacing:-2.8px;line-height:.92;margin-top:0;}
  #hero .sk{font-size:12.5px;letter-spacing:2.2px;margin-top:12px;}
  #hero .sz{font-size:18px;margin-top:9px;}
  #hero .hero-updated{grid-column:1 / -1;text-align:center;margin-top:26px;font-size:12px;}


  /* ═══════════ 3. 探索:長文 ═══════════ */
  #intro .body{max-width:680px;}
  #intro p{font-size:var(--fs-long);line-height:1.95;margin-bottom:30px;}
  /* 大標與下方第一個內容之間,留一個大標的高度 */
  #intro .sec-title{margin-bottom:56px;}


  /* ═══════════ 4. 橫滑列與箭頭 ═══════════ */
  .railnav{display:flex;justify-content:flex-end;gap:10px;margin:0 var(--gut) 20px;}
  .railnav button{
    width:42px;height:42px;border-radius:50%;
    border:1px solid var(--line);background:#fff;color:var(--ink2);
    font-size:18px;line-height:1;cursor:pointer;font-family:inherit;
    display:flex;align-items:center;justify-content:center;transition:all .15s ease;
  }
  .railnav button:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink);}
  .railnav button:disabled{opacity:.28;cursor:default;}
  /* 排得下、沒東西可滑 → 整組箭頭消失,不留一個點了沒反應的按鈕 */
  .railnav.is-idle{display:none;}


  /* ═══════════ 5. 五個關鍵訊號:五張排不下,改橫滑 ═══════════ */
  #secF .sec-sub{margin-bottom:56px;}
  #secF .grid{
    flex-direction:row;flex-wrap:nowrap;max-width:none;gap:22px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:6px;
  }
  #secF .grid::-webkit-scrollbar{display:none;}
  #secF .card{flex:0 0 312px;scroll-snap-align:start;padding:26px;min-height:404px;}
  /* 標題預留兩行 → 下面的數字基線永遠齊;說明句推到底 → 卡片底部永遠齊 */
  #secF .k{font-size:var(--fs-ctitle);line-height:1.4;min-height:calc(15px * 1.4 * 2);
    text-transform:none;letter-spacing:.3px;}
  #secF .viz{height:118px;margin:8px 0 12px;}
  #secF .bignum{font-size:var(--fs-cnum);letter-spacing:-1.8px;line-height:.9;}
  #secF .auxi{font-size:var(--fs-cnote);margin-top:12px;line-height:1.45;
    min-height:calc(14.5px * 1.45 * 2);}
  #secF .hr{margin:18px 0;}
  #secF .analysis{font-size:24px;}
  #secF .fnote{font-size:var(--fs-cnote);line-height:1.55;max-width:none;
    margin-top:auto;padding-top:12px;}


  /* ═══════════ 6. 圖表 A / B ═══════════
     文字量隨語言差很多(英文長、中文短),所以:
     align-content:center → 文字整組垂直置中,短的時候不留死白
     圖表卡 align-self:stretch + 卡內 .plot flex:1 → 長的時候不被文字超過 */
  #secA,#secB{
    display:grid;
    grid-template-rows:auto auto 1fr;
    column-gap:56px;
    align-content:center;
    min-height:var(--screen);
    padding-left:var(--gut);
    padding-right:var(--gut);
  }
  #secA{grid-template-columns:38% 1fr;}
  #secB{grid-template-columns:1fr 38%;}
  #secA .gut,#secB .gut{padding-left:0;padding-right:0;}

  #secA .eyebrow{grid-column:1;grid-row:1;text-align:left;margin-bottom:14px;}
  #secA .sec-title{grid-column:1;grid-row:2;text-align:left;margin:0 0 24px;}
  #secA .chart-intro{grid-column:1;grid-row:3;max-width:none;margin:0;padding:0;align-self:start;}
  #secA .chartcard{grid-column:2;grid-row:1 / span 3;margin:0;align-self:stretch;}

  #secB .eyebrow{grid-column:2;grid-row:1;text-align:left;margin-bottom:14px;}
  #secB .sec-title{grid-column:2;grid-row:2;text-align:left;margin:0 0 24px;}
  #secB .chart-intro{grid-column:2;grid-row:3;max-width:none;margin:0;padding:0;align-self:start;}
  #secB .chartcard{grid-column:1;grid-row:1 / span 3;margin:0;align-self:stretch;}

  .chart-intro p{font-size:var(--fs-body);line-height:1.85;margin-bottom:18px;}
  #secA .chartcard,#secB .chartcard{
    padding:24px 24px 20px;border-radius:26px;display:flex;flex-direction:column;
  }
  #secA .plot,#secB .plot{flex:1 1 auto;height:auto;min-height:190px;}

  /* 圖表 A 文字欄尾端的行內連結 */
  .ax-inlink{font-size:var(--fs-body);line-height:1.85;color:var(--ink2);margin:24px 0 0;}
  .ax-inlink a{color:var(--score);font-weight:700;text-decoration:underline;
    text-underline-offset:4px;text-decoration-thickness:1px;
    text-decoration-color:rgba(240,138,36,.42);}
  .ax-inlink a:hover{text-decoration-color:var(--score);}


  /* ═══════════ 7. 數據小學堂 ═══════════ */
  #secBD .sec-sub{margin-bottom:56px;}
  #secBD .idcard{display:grid;grid-template-columns:1fr 1fr;}
  #secBD .idcard > *:nth-child(odd){border-right:1px solid var(--line2);}
  #secBD .idrow{padding:20px 26px;}
  #secBD .idlbl{font-size:var(--fs-ctitle);}
  #secBD .idval{font-size:var(--fs-ctitle);}
  #secBD .block-t{font-size:var(--fs-eyebrow);margin:52px 0 18px;}

  /* Safari 在 scroll-snap 容器下會忽略左 padding,改用 scroll-padding 對齊,
     右緣留白由最後一張的 margin 承擔。 */
  #secBD .rail{gap:22px;padding-left:var(--gut);padding-right:0;scroll-padding-left:var(--gut);}
  #secBD .rail > *:last-child{margin-right:var(--gut);}
  #secBD .dots{display:none;}                /* 桌機有箭頭,不需要圓點 */

  #secBD .scard{flex:0 0 268px;max-width:none;padding:26px 26px 24px;border-radius:22px;
    min-height:236px;}
  #secBD .s-head{min-height:0;}              /* 改由 .s-top 預留兩行,不用整塊固定高 */
  #secBD .s-top{font-size:var(--fs-ctitle);line-height:1.4;min-height:calc(15px * 1.4 * 2);}
  #secBD .s-num{margin-top:8px;gap:7px;}     /* 數字往上靠近標題 */
  #secBD .s-num .v{font-size:var(--fs-cnum);letter-spacing:-1.8px;line-height:.9;}
  #secBD .s-num .u{font-size:var(--fs-cunit);padding-bottom:5px;}
  #secBD .s-g{font-size:15px;margin-top:9px;min-height:calc(15px * 1.2);}
  #secBD .s-note{font-size:var(--fs-cnote);line-height:1.55;margin-top:auto;padding-top:20px;}


  /* ═══════════ 8. 你的 DCA 助理 / 問答 ═══════════
     兩區都不用卡框,靠底色自成一塊。 */
  #closing{padding:100px var(--gut);}
  #closing .sec-title{margin-bottom:56px;}
  #closing .close-body{max-width:680px;font-size:var(--fs-body);line-height:1.9;margin-bottom:20px;}
  #closing .closing-btn{margin-top:36px;font-size:16px;padding:17px 32px;}

  #faq .sec-title{margin-bottom:56px;}
  #faq .faq-list{max-width:760px;}
  #faq .faq-q{font-size:19px;font-weight:650;padding:22px 2px;line-height:1.5;}
  #faq .faq-a{padding-bottom:22px;}
  #faq .faq-a p{font-size:17px;line-height:1.85;}
  /* 「更多問題」是清單的第五列,與前四題同寬同高 */
  #faq .faq-more{
    display:flex;align-items:center;gap:16px;
    max-width:760px;margin:0 auto;padding:22px 2px;
    font-size:19px;font-weight:650;
    border-top:1px solid var(--line2);
  }
  /* 箭頭用 ::after 生成:JS 是用 textContent 寫這行字,元素內不能放 span */
  #faq .faq-more::after{content:'\2192';margin-left:auto;flex:none;transition:transform .15s ease;}
  #faq .faq-more:hover::after{transform:translateX(3px);}


  /* ═══════════ 9. 相關資產:固定卡寬 + 橫滑 ═══════════
     原本是 repeat(4,1fr) 固定四欄,那是在 assets.js 只有三支資產時訂的。
     資產頁的相關卡會排除自己,所以四支資產時是 3 張卡 + 入口卡 = 4 格剛好填滿——
     那是巧合不是設計,加到第五支就會跟首頁一樣掉到第二行。改成固定卡寬,
     資產加到幾支都不用回來改 CSS。

     ※ 卡寬 250px / gap 22px / 卡片內部尺寸,與首頁 web.css 的 #hotAssetsSection
       完全一致,使用者從首頁點進資產頁不會看到卡片大小跳動。任一邊要調,兩邊一起調。

     ※ 但「只有卡寬要一致」,首頁那組負邊距與 scroll-padding 不要照抄過來,
       因為兩邊的畫布不同:
         首頁   .wrap = max-width:1200 且左右各 40 內距 → 內容區只有 1120,
                所以要用 margin:0 -40px 把捲動容器撐回 1200,露角才有 72px,
                並用 scroll-padding:0 40px 把 snap 基準推回內容左緣。
         資產頁 .gut  = padding:var(--gut),--gut 是 max(40px,(100%-1200)/2)
                → 內容區在寬螢幕下本來就是 1200,兩側留白由 gut 承擔,不需要撐。
       這裡直接算:4×250 + 3×22 = 1066,第五張卡從 1088 起,露角 112px,已經夠明顯。
       若硬套 -40px,在 1600 寬螢幕(--gut 會是 200)卡片會與上方 .sec-title 錯開 160px。
       scroll-padding 同理不需要:第一張卡的左緣就是內容左緣,snap 基準本來就對齊。

     ※ 手機版(頁內 style)的 flex:0 0 42% 與 max-width:180px 一定要在這裡明確解除,
       否則卡片會被壓回 180px,桌機比首頁小一大截。.hot-more 也要,很容易只改到 .hot-card。
     align-items:start 很重要:預設的 stretch 會蓋掉 aspect-ratio,卡片會塌掉。
     padding 下緣留 16px,不讓卡片投影被捲動容器裁掉。 */
  #related .sec-title{margin-bottom:56px;}
  #related .insights-scroll{
    display:grid;grid-auto-flow:column;grid-auto-columns:250px;gap:22px;
    align-items:start;
    overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding:4px 0 16px;
  }
  #related .insights-scroll::-webkit-scrollbar{height:0;display:none;}
  #related .insights-dots{display:none;}
  #related .hot-card{flex:none;max-width:none;width:auto;padding:24px;border-radius:28px;scroll-snap-align:start;}
  #related .hot-logo{top:24px;left:24px;width:96px;height:96px;border-radius:24px;}
  /* 與首頁 #hotAssetsSection .hot-logo img 同值:貼滿、不留內距。 */
  #related .hot-logo img{padding:0;object-fit:cover;}
  #related .hot-bottom{left:24px;right:22px;bottom:22px;}
  #related .hot-tkr{font-size:30px;margin-right:12px;letter-spacing:-.8px;}
  #related .hot-score{font-size:46px;letter-spacing:-1.6px;}
  #related .hot-more{flex:none;max-width:none;width:auto;border-radius:28px;gap:12px;scroll-snap-align:start;}
  #related .hot-more .plus{font-size:34px;}
  #related .hot-more .mt{font-size:15px;font-weight:600;}
  #related .related-ph{max-width:520px;font-size:var(--fs-cnote);}


  /* ═══════════ 10. CTA:滿版深色,輸入框與按鈕並排 ═══════════ */
  #cta .ctabanner{padding:110px var(--gut) 128px;}
  #cta .ctabanner h3{font-size:var(--fs-title);letter-spacing:-1.3px;line-height:1.15;margin-bottom:16px;}
  #cta .ctabanner p{font-size:var(--fs-body);max-width:620px;margin-bottom:38px;line-height:1.75;}
  #cta .cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
    align-items:stretch;max-width:660px;margin:0 auto;}
  #cta #ctaTs{flex-basis:100%;}
  #cta .cta-field{flex:1;max-width:none;margin:0;}
  #cta .cta-input{height:60px;font-size:var(--fs-sub);border-radius:16px;}
  #cta .btn{flex:none;height:60px;display:flex;align-items:center;padding:0 32px;
    font-size:16px;}

}
