/* ==========================================================
   觀點網 —— 首页样式
   依赖 main.css 中的设计变量（:root）与公共组件
   ========================================================== */

/* ---------- 版面骨架：左索引軌 + 主欄 ---------- */
.shell{display:grid;grid-template-columns:168px minmax(0,1fr);gap:0 15px}
.shell>main{min-width:0}
:root{--home-header-height:65px;--home-anchor-offset:calc(var(--home-header-height) + 0px)}
.railnav{position:sticky;top:var(--home-anchor-offset);align-self:start;margin-top:0px;padding-bottom:100px;
  display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - var(--home-anchor-offset) - 16px);
  max-height:var(--home-rail-height,calc(100dvh - var(--home-anchor-offset) - 16px))}
.rail-links{min-height:0;overscroll-behavior-y:contain;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.rail-links::-webkit-scrollbar{width:3px}
.rail-links::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.railnav a{display:flex;gap:10px;align-items:baseline;padding:6px 0;font-size:13px;
           border-bottom:1px dotted var(--line)}
.rail-links > a{align-items:center;gap:10px;white-space:nowrap}
.railnav .rail-mark{display:block;flex:0 0 2px;height:10px;background:var(--line-2);border-radius:1px}
.rail-links > a:hover .rail-mark,.rail-links > a:focus-visible .rail-mark{background:var(--brand)}
.rail-links > a:focus-visible{color:var(--brand)}
.railnav a:hover{color:var(--brand)}
.railnav .app{margin-top:10px;font-size:11.5px;color:var(--ink-3);line-height:1.7}
.railnav .app a{display:inline;border:0;padding:0;color:var(--brand)}

/* 目錄折疊：縮為圖示欄，主內容自動佔用釋放的寬度 */
.rail-toggle{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:12px;width:100%;height:32px;margin-bottom:4px;
  padding:0;border:0;border-radius:var(--r);background:transparent;
  color:var(--ink-3);font:400 11px/1 var(--sans);letter-spacing:.08em;white-space:nowrap;cursor:pointer}
.rail-toggle[hidden],.rail-links[hidden]{display:none}
.rail-toggle svg{flex:none;width:14px;height:14px;order:2}
.rail-toggle .rail-collapse-icon{display:block}
.rail-toggle .rail-menu-icon{display:none}
.rail-toggle[aria-expanded="false"] .rail-collapse-icon{display:none}
.rail-toggle[aria-expanded="false"] .rail-menu-icon{display:block}
.rail-toggle:hover{color:var(--brand)}
.rail-toggle:active{color:var(--brand-deep)}
.shell.is-rail-collapsed{grid-template-columns:44px minmax(0,1fr);column-gap:0}
.is-rail-collapsed .rail-toggle{justify-content:center;padding:0;height:40px}
.is-rail-collapsed .rail-toggle span{display:none}
.is-rail-collapsed .railnav{padding-bottom:0}

/* ---------- 頭條：文字在左，圖在右，可橫向切換 ---------- */
.hero{position:relative;margin-bottom:30px;padding-top:6px}
/* 區塊標題在輪播外、疊在左側文字欄頂部（寬度 = 文字欄 1.15fr），各頭條文字欄預留同樣高度 */
.hero-head{position:absolute;z-index:1;top:6px;left:0;width:calc((100% - 44px) * 1.15 / 2.15);
           height:33px;margin:0;padding-top:10px}
.hero{--card-shadow:0 1px 2px oklch(19.4% .006 56 / .08),0 12px 28px -10px oklch(19.4% .006 56 / .34);
      --card-shadow-sm:0 1px 2px oklch(19.4% .006 56 / .07),0 6px 14px -6px oklch(19.4% .006 56 / .26);
      --card-shadow-hover:0 2px 4px oklch(19.4% .006 56 / .08),0 12px 22px -8px oklch(19.4% .006 56 / .34)}
.lead-switch{width:100%;max-width:100%;min-width:0;border-bottom:1px solid var(--line);touch-action:pan-y}
/* 卡片疊放輪換：所有頭條疊在同一格，文字原位淡入淡出，圖片按 data-pos 前後排列 */
/* 作為尺寸容器：文字欄高度按圖片高度計算（cqw = 輪播寬度） */
.lead-track{display:grid;width:100%;max-width:100%;min-width:0;container-type:inline-size;
            --lead-fig-h:calc(((100cqw - 44px) / 2.15 - 32px) * 275 / 488)}
.lead{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px;align-items:stretch;
      width:100%;max-width:100%;min-width:0;padding-bottom:13px}
/* 未激活的頭條疊在上層，不能擋住當前頭條的按鈕和連結；只保留後面露出的卡片可點 */
.lead:not(.is-active){pointer-events:none}
.lead:not(.is-active) figure[data-pos="1"],.lead:not(.is-active) figure[data-pos="2"]{pointer-events:auto}
.lead .ltxt,.lead figure{min-width:0;max-width:100%}
/* 文字欄高度 = 圖片頂部下移 10px + 圖片高度，切換按鈕貼底，底邊與圖片底邊對齊 */
.lead .ltxt{display:flex;flex-direction:column;padding-top:48px;height:calc(var(--lead-fig-h) + 10px);overflow:hidden;
            transition:opacity .25s ease,visibility 0s linear .25s}
.lead:not(.is-active) .ltxt{opacity:0;visibility:hidden}
.lead.is-active .ltxt{transition:opacity .4s ease .12s,visibility 0s}
.lead .ltxt > .kicker,.lead .ltxt > .lead-title,.lead .ltxt > p{transition:transform .55s var(--media-ease),opacity .55s ease}
.lead:not(.is-active) .ltxt > .kicker,.lead:not(.is-active) .ltxt > .lead-title,.lead:not(.is-active) .ltxt > p{transform:translateY(12px);opacity:0}
.lead.is-active .ltxt > .kicker{transition-delay:.12s}
.lead.is-active .ltxt > .lead-title{transition-delay:.18s}
.lead.is-active .ltxt > p{transition-delay:.26s}
.lead .ltxt > .kicker{margin-bottom:8px}
.lead .lead-title{flex:none;min-width:0;overflow-wrap:anywhere;font:700 30px/1.25 var(--serif);
                  letter-spacing:-.02em;margin:0 0 10px;
                  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lead .lead-title a:hover{color:var(--brand)}
.lead .ltxt p{flex:none;font-size:14px;font-weight:300;color:var(--ink-4);line-height:1.72;
              display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 輪播較窄時圖片變矮，摘要只留一行，保證按鈕不超出圖片底部 */
@container (max-width:1030px){
  .lead .ltxt p{-webkit-line-clamp:1}
}
.lead .row{display:none}
/* 圖框與頻道疊層頭條 .band-lead 一致：圓角、深底、底部漸變黑、懸停放大 */
/* 右側預留 32px 給後面疊放的卡片露出邊緣 */
.lead figure{position:relative;width:calc(100% - 32px);aspect-ratio:488/275;align-self:start;margin-top:10px;overflow:hidden;justify-self:start;
             border-radius:var(--r);background:var(--ink);box-shadow:var(--card-shadow);
             transform-origin:right center;opacity:0;z-index:0;
             transition:transform .7s var(--media-ease),filter .7s ease,opacity .5s ease,box-shadow .7s ease}
.lead.is-active figure{opacity:1;z-index:3}
/* 0 = 最前；1、2 = 疊在後面，從右側預留位露出邊緣；x = 更後面的隱藏 */
.lead figure[data-pos="0"]{opacity:1;z-index:3;transform:none;filter:none}
.lead figure[data-pos="1"]{opacity:1;z-index:2;transform:translateX(18px) scale(.9);filter:brightness(.72) saturate(.85);cursor:pointer}
.lead figure[data-pos="2"]{opacity:1;z-index:1;transform:translateX(32px) scale(.8);filter:brightness(.5) saturate(.7);cursor:pointer}
.lead figure[data-pos="x"]{opacity:0;z-index:0;transform:translateX(32px) scale(.8)}
.lead figure[data-pos="1"],.lead figure[data-pos="2"]{box-shadow:0 8px 18px -8px oklch(19.4% .006 56 / .3)}
/* 下一則：前卡下沉淡出後回到最後；上一則：新前卡由下方浮上 */
.lead figure.is-out{animation:lead-card-out .8s var(--media-ease)}
.lead figure.is-in{animation:lead-card-in .7s var(--media-ease)}
@keyframes lead-card-out{
  0%{z-index:4;opacity:1;transform:none;filter:none}
  42%{z-index:4;opacity:0;transform:translateY(18px) scale(.95);filter:none}
  43%{z-index:0;opacity:0}
}
@keyframes lead-card-in{
  0%{z-index:4;opacity:0;transform:translateY(18px) scale(.95);filter:none}
  100%{z-index:4}
}
@media (prefers-reduced-motion:reduce){
  .lead .ltxt,.lead .ltxt > *,.lead figure{transition:none!important}
  .lead figure.is-out,.lead figure.is-in{animation:none}
}
.lead figure > a{position:absolute;inset:0;display:block}
.lead figure::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--media-shade2)}
.lead figure img{width:100%;max-width:100%;height:auto;aspect-ratio:488/275;object-fit:cover;
                 transition:transform .35s var(--media-ease)}
/* 效果圖裁切：大圖只取右上部分 */
.lead figure .ps-city{position:absolute;max-width:none;width:284.836%;height:auto;aspect-ratio:auto;left:-172.336%;top:-37.455%}

.lead-nav{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;padding-top:10px}
.lead-nav[hidden]{display:none}
.lead-nav a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-2);
            border-radius:var(--r);background:var(--card);color:var(--ink);
            white-space:nowrap}
.lead-nav .count{min-width:56px;text-align:center;color:var(--ink-3);font:400 10.5px/1 var(--mono);
                 font-variant-numeric:tabular-nums}
.lead-nav a:focus-visible{outline-color:var(--brand)}
.lead-nav a:active{transform:translateY(1px);background:var(--brand-soft)}
@media(hover:hover) and (pointer:fine){
  .lead-nav a:hover{border-color:var(--brand);color:var(--brand)}
}

.subs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:18px}
.sub{display:flex;flex-direction:column;gap:8px;padding:0 16px;border-left:1px solid var(--line)}
.sub:first-child{padding-left:0;border-left:0}
.sub:last-child{padding-right:0}
/* 圖框與頭條大圖、頻道疊層頭條一致：圓角、深底、底部漸變黑、懸停放大；
   文章標籤疊在圖內左下角，圖框高度統一 110px */
.sub .thumb{position:relative;display:block;height:110px;overflow:hidden;border-radius:var(--r);background:var(--ink);
            box-shadow:var(--card-shadow-sm);transition:transform .35s var(--media-ease),box-shadow .35s ease}
.sub:hover .thumb{transform:translateY(-2px);box-shadow:var(--card-shadow-hover)}
.sub .thumb::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--media-shade)}
.sub img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s var(--media-ease)}
.sub .thumb .kicker{position:absolute;z-index:1;left:8px;right:8px;bottom:8px;color:var(--media-accent);
                    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub .dur ~ .kicker{right:60px}
.sub .thumb .kicker.am{color:var(--amber)}
.sub h3{font:600 15px/1.42 var(--serif)}
.sub:hover h3{color:var(--brand)}
.sub .vplay,.sub .dur{z-index:1}
/* 視頻：左下角讓給標籤，播放鍵置中 */
.sub .vplay{position:absolute;left:50%;top:50%;translate:-50% -50%;width:30px;height:30px;border-radius:50%;
            background:var(--overlay);color:var(--dark-text);display:grid;place-items:center;font-size:11px}
.sub .dur{position:absolute;right:8px;bottom:8px;background:var(--overlay);color:var(--dark-text);
          font:10px/1 var(--mono);padding:4px 5px;border-radius:2px}

/* ---------- 全時數據：三欄時間軸 ---------- */
.feedsec{margin-bottom:30px}
/* 廣告（廣告位 17）：編輯推薦與全時數據之間，圖片按原比例縮放 */
.home-ad{margin:0 0 30px;line-height:0}
.home-ad[hidden]{display:none}
.home-ad a{display:block}
.home-ad__item[hidden]{display:none}
.home-ad img{display:block;width:100%;height:auto}
/* 每欄由上往下排滿再換下一欄；欄由模板切好（Home::WIRE_COLS），條數變了不用改 CSS */
.feedwrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 26px;padding-right:0px}
.feedcol{min-width:0}
.feedcol li{min-width:0;border-bottom:1px dotted var(--line)}
/* 每欄最後一條不顯示底線 */
.feedcol li:last-child{border-bottom:0}
.feedwrap a{display:grid;grid-template-columns:35px minmax(0,1fr);gap:10px;padding:8px 0;
            font-size:14px;font-weight:400;line-height:1.5;align-items:baseline}
.feedwrap a > span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feedwrap time{font:11px/1.5 var(--mono);color:var(--ink-3);padding-left: 5px;}
.feedwrap a:hover{background:#eee}

/* ---------- 視頻：單行疊層卡 ---------- */
.video-module{min-width:0;background:var(--sunk);color:var(--ink);padding:20px 24px 24px;box-shadow:var(--video-shadow);
              border-top:1px solid #efefef;margin:0 0 30px;scroll-margin-top:80px;border-radius:var(--r)}
.video-module .vhead{display:flex;align-items:center;gap:16px;margin-bottom:16px;
                    border-bottom:1px solid var(--line);padding-bottom:12px}
.video-module h2{font:700 19px/1.2 var(--serif)}
.vintro{font-size:11.5px;color:var(--ink-3)}
.video-more{margin-left:auto;font:11px/1.5 var(--mono);white-space:nowrap;color:var(--brand)}
.video-more:hover{color:var(--brand-deep)}
.video-controls{display:flex;gap:6px}
.video-controls button{display:grid;place-items:center;width:30px;height:30px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--card);
  color:var(--ink-2);font:16px/1 var(--mono)}
.video-controls button:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.video-controls button:active:not(:disabled){background:var(--brand-soft)}
.video-controls button:disabled{opacity:.35;cursor:default}
.video-rail{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;overscroll-behavior-inline:contain}
.video-rail::-webkit-scrollbar{display:none}
.video-rail:focus-visible{outline-offset:4px}
.vcard2{position:relative;flex:0 0 268px;aspect-ratio:16/9;overflow:hidden;display:block;
        background:var(--ink);color:var(--dark-text);border-radius:var(--r);scroll-snap-align:start}
.vcard2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
           transition:transform .35s var(--media-ease)}
.vcard2:focus-visible{outline-offset:-3px;outline-color:var(--brand-on-dark)}
.vtag{position:absolute;z-index:1;left:10px;top:10px;font:10.5px/1.3 var(--mono);
      color:var(--dark-text);background:var(--overlay);padding:4px 7px;border-radius:var(--r)}
.vtext2{position:absolute;z-index:1;inset:auto 12px 12px}
.vtext2 h3{font:700 15px/1.42 var(--serif);display:-webkit-box;-webkit-line-clamp:2;
          -webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.vtext2 .vmeta{display:none;margin-top:5px;font:10.5px/1.4 var(--mono);color:var(--dark-text)}

/* ---------- 頻道：黑白灰標題列（不分頻道色）、疊層頭條與雙欄列表 ---------- */
.band{margin-bottom:30px}
.channel-band{--pillar:var(--ink);scroll-margin-top:80px}
.channel-band > .sec-head{padding-top:12px;padding-bottom:10px;border-bottom:2px solid var(--pillar)}
.channel-band > .sec-head h2{color:var(--pillar);border-left:4px solid var(--ink-2);padding-left:10px}.channel-band > .sec-head .more{color:var(--ink-3)}
.channel-band > .sec-head .more:hover{color:var(--pillar)}
.band-body{display:grid;grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,1fr));gap:22px}
.band-body > *{min-width:0}
.band-lead{position:relative;display:block;overflow:hidden;border-radius:var(--r);
           background:var(--ink);color:var(--dark-text);width:100%;min-width:0;align-self:start;aspect-ratio:580/318}
.band-lead > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
                transition:transform .35s var(--media-ease)}
.band-lead::after,.vcard2::after{content:"";position:absolute;inset:0;pointer-events:none;
                              background:var(--media-shade)}
.band-caption{position:absolute;z-index:1;inset:auto 0 0;padding:10px}
.band-caption .kicker{color:var(--media-accent);margin-bottom:6px}
.band-caption h3{font:700 16px/1.42 var(--serif);overflow-wrap:anywhere;
                 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.band-lead:focus-visible{outline-offset:3px}
.channel-list li{border-bottom:1px dotted var(--line)}
.channel-list li:last-child{border-bottom:0}
.channel-list a{display:flex;align-items:baseline;gap:10px;padding:10px 0;font-size:13.5px;font-weight:500;line-height:1.5}
.channel-list li:first-child a{padding-top:0}
.channel-list a > span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.channel-list .meta{display:block;margin-left:auto;flex:none;white-space:nowrap;
                    font:11px/1.5 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-3)}
.channel-list a:hover{color:var(--brand)}

@media(hover:hover) and (pointer:fine){
  .band-lead:hover > img,.vcard2:hover img,.lead figure:hover img,.sub:hover img{transform:scale(1.04)}
}

/* ---------- 專欄 ---------- */
.cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.col-card{display:flex;gap:11px;padding:0 16px;border-left:1px solid var(--line)}
.col-card:first-child{padding-left:0;border-left:0}
.avatar{flex:none;width:36px;height:36px;border-radius:50%;background:var(--brand-soft);
        color:var(--brand-deep);display:grid;place-items:center;font:600 14px var(--serif)}
.col-card h3{font:600 14px/1.45 var(--serif)}
.col-card .by{font:10.5px/1 var(--mono);color:var(--ink-3);margin-top:6px}
.col-card:hover h3{color:var(--brand)}

/* ---------- 企業資訊 ---------- */
.corp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 26px}
.corp-item{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:baseline;
           padding:8.5px 0;border-bottom:1px solid var(--line);font-size:13px;font-weight:500}
.corp-item .co{font-size:11px;text-align:center;color:var(--ink-3);background:var(--sunk);
               border-radius:2px;padding:3px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 企業名、標題兩列（不顯示日期）；企業名為空時保留灰底佔位格 */
.corp-item .co:empty::before{content:"\00a0"}
.corp-item .tl{grid-column:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.corp-item:hover .tl{color:var(--brand)}
/* 三欄按行排列：最後三條正好是每一欄的最後一條（條數不是 3 的倍數時也成立），不顯示底線 */
.corp-grid li:nth-last-child(-n+3) .corp-item{border-bottom:0}

/* ---------- 圖片懶加載佔位 ----------
   圖框底層顯示「圖片加載中...」，圖片加載完成後蓋住文字；圖片本身是 loading="lazy"。
   ::before 在 DOM 裡排在 <img> 前面，圖片須為定位元素才會畫在它上面 */
.lead figure::before,.sub .thumb::before,.vcard2::before,.band-lead::before{
  content:"圖片加載中...";position:absolute;inset:0;display:grid;place-items:center;
  font:12px/1 var(--sans);letter-spacing:.12em;color:var(--dark-muted);
  animation:img-pending 1.6s ease-in-out infinite}
@keyframes img-pending{0%,100%{opacity:.6}50%{opacity:1}}

/* ---------- 無障礙：減少動態 ---------- */
.hero,.feedsec,.video-module,.channel-band,#column,#corp{scroll-margin-top:var(--home-anchor-offset)}

@media(prefers-reduced-motion:reduce){
  .lead-track{scroll-behavior:auto}
  .lead-nav a:active{transform:none}
  .band-lead > img,.vcard2 img{transition:none}
  .lead figure::before,.sub .thumb::before,.vcard2::before,.band-lead::before{animation:none}
  .band-lead:hover > img,.vcard2:hover img{transform:none}
}