/* ===================================================
   首頁（2026-11 改版）：第一屏多放新聞、焦點＋最新並排、生活工具一排、分類分頁
   Mobile-first；共用元件（trending、cat-card、feed）沿用 public.css
   =================================================== */

/* ===== 熱搜 ===== */
.hm-kw { display: flex; align-items: center; gap: 10px; padding: 10px 0 2px; min-width: 0; }
.hm-kw-label { flex-shrink: 0; font-size: 0.8125rem; font-weight: 800; color: var(--red); }
.hm-kw-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; min-width: 0; }
.hm-kw-list::-webkit-scrollbar { display: none; }
.hm-kw-list a { flex-shrink: 0; padding: 4px 12px; border-radius: 999px; background: var(--bg-section); color: var(--text-secondary); font-size: 0.85rem; text-decoration: none; white-space: nowrap; }
.hm-kw-list a:hover { color: var(--primary-light); }

/* ===== 焦點＋最新 ===== */
.hm-top { padding: 10px 0 4px; }
.hm-top-grid { display: grid; gap: 14px; }
.hm-focus { display: grid; gap: 10px; min-width: 0; }
.hm-hero { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--bg-section); color: #fff; text-decoration: none; aspect-ratio: 16 / 9; }
.hm-hero img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.hm-hero:hover img { transform: scale(1.02); }
.hm-hero-ov { position: absolute; inset: auto 0 0 0; padding: 48px 16px 14px; background: linear-gradient(transparent, rgba(0,0,0,0.82)); }
.hm-hero-ov h2 { font-size: 1.2rem; font-weight: 800; line-height: 1.45; margin: 6px 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-hero-ov time { font-size: 0.8125rem; opacity: 0.85; }
.hm-src { display: inline-block; padding: 2px 8px; border-radius: 4px; background: var(--red); font-size: 0.8125rem; font-weight: 700; }
.hm-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hm-sub-card { display: block; min-width: 0; color: var(--text); text-decoration: none; }
.hm-sub-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-section); display: block; }
.hm-sub-card h3 { margin-top: 6px; font-size: 1.0625rem; font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 24 小時內有封面的焦點只有 2 篇時，下面只剩一張：改成圖左字右佔滿整排，不留半邊空白 */
.hm-sub-card:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; }
.hm-sub-card:only-child h3 { margin-top: 0; font-size: 1.05rem; -webkit-line-clamp: 3; }

.hm-latest { min-width: 0; }
.hm-latest-hd { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 6px; border-bottom: 2px solid var(--primary); }
.hm-latest-hd h2 { font-size: 1.05rem; font-weight: 800; color: var(--text); }
.hm-latest-more { font-size: 0.82rem; color: var(--primary-light); text-decoration: none; font-weight: 700; }
.hm-latest-list { list-style: none; }
.hm-latest-list li { border-bottom: 1px solid var(--border-light); }
.hm-latest-list a { display: block; padding: 10px 0; color: var(--text); text-decoration: none; }
.hm-latest-list strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1rem; font-weight: 700; line-height: 1.5; }
.hm-latest-list a:hover strong { color: var(--primary-light); }
.hm-desc { display: none; }
.hm-meta { display: block; margin-top: 3px; font-size: 0.8125rem; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-desk-only { display: none; }

/* ===== 生活工具一排 ===== */
.hm-quick { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 10px 0 14px; }
.hm-quick::-webkit-scrollbar { display: none; }
.hm-quick a { flex: 0 0 auto; width: 92px; display: grid; justify-items: center; gap: 2px; padding: 10px 4px 9px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); color: var(--text); text-decoration: none; text-align: center; }
.hm-quick a .tic { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 3px; }
.hm-quick a .tic .ti { width: 22px; height: 22px; }
.hm-quick a.is-hot { border-color: var(--red); }
.hm-q-t { font-size: 0.95rem; font-weight: 800; line-height: 1.3; }
.hm-q-s { font-size: 13px; line-height: 1.3; color: var(--text-secondary); max-width: 100%; overflow-wrap: anywhere; }
.hm-quick a.is-hot .hm-q-s { color: var(--red); font-weight: 700; }
.hm-quick a.hm-q-all { border-style: dashed; }
.hm-tools a.hm-q-x { display: none; }
/* 手機、平板：分組外框拆掉（display: contents），只留 8 格並依 --o 排序；桌機才分三組全部列出 */
.hm-tools a { order: var(--o, 99); }

/* ===== 桌機左側便民選單（入口網站式左欄，跟著捲動） =====
   設計：像報紙目錄一樣一行一個工具（圖示＋名稱，右邊對齊小字），不用彩色方塊，讓新聞照片當主角
   寬度分段（決定欄寬與右邊小字）：
   <1024        不顯示（手機、平板用上面那排 8 格＋底部「便民」tab）
   1024–1279    128px：只有圖示＋名稱；選舉只放「12 天」徽章（主欄還有 870px）
   1280–1439    172px：右邊只放即時資訊（台北 25°、39 天後連假、倒數 12 天）
   ≥1440        212px：右邊放全部小字（即時資訊用主色加粗，其他用灰字說明）
   高度分段（決定行高；16 項＋3 個分組標題要不捲動就看得完，開頁時也盡量整欄露出）：
   <800         行高 29、標題 24（1024×768、1366×768）
   800–959      行高 31、標題 26（1280×800、1440×900、1536×864）
   ≥960         行高 36、標題 30（1280×1024、1680×1050、1920×1080）
   有「常用」群組（多 3 項＋1 個標題）時，高度 <850 的螢幕再壓扁一級，仍不必捲動；萬一真的放不下，欄內可捲動 */
.hm-rail { display: none; }
@media (min-width: 1024px) {
  .hm-quick.hm-tools { display: none; }
  .hm-shell { --rail: 128px; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); max-width: calc(var(--max-w) + var(--rail)); margin: 0 auto; padding-left: 20px; }
  .hm-main { min-width: 0; }
  .hm-rail { display: block; }
  .hm-rail-in { --row: 29px; --hd: 24px; --fs: 0.875rem; position: sticky; top: 72px; max-height: calc(100vh - 84px); overflow-y: auto; scrollbar-width: thin; padding: 10px 10px 12px 0; border-right: 1px solid var(--border); }
  /* 分組標題：小字加一條細線延伸到右邊，取代原本整條分隔線，分組更清楚又不搶眼 */
  .hm-rg + .hm-rg { margin-top: 6px; }
  .hm-rg h2 { display: flex; align-items: center; gap: 8px; height: var(--hd); margin: 0; padding: 0 8px; font-size: 0.75rem; font-weight: 700; line-height: 1; color: var(--text-tertiary); letter-spacing: .12em; white-space: nowrap; }
  .hm-rg h2::after { content: ""; flex: 1; height: 1px; background: var(--border); }
  .hm-rg-fav h2 { color: var(--primary); }
  .hm-rl { display: grid; gap: 1px; }
  .hm-rl a { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; height: var(--row); padding: 0 8px; border-radius: 8px; color: var(--text); text-decoration: none; transition: background-color .12s, color .12s; }
  /* 左邊一條主色細條：滑過或鍵盤選到時出現，讀者知道現在指著哪一項 */
  .hm-rl a::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); opacity: 0; transition: opacity .12s; }
  .hm-rl a:hover, .hm-rl a:focus-visible { background: var(--bg-section); color: var(--primary); }
  .hm-rl a:hover::before, .hm-rl a:focus-visible::before { opacity: 1; }
  .hm-rl a:focus-visible { outline: 2px solid var(--primary-light); outline-offset: -2px; }
  [data-theme="night"] .hm-rl a:hover, [data-theme="night"] .hm-rl a:focus-visible { color: #fff; }
  /* 左欄圖示不要底色方塊，只留線條（16 個方塊排在一起太像手機桌面） */
  .hm-rl .tic { width: 20px; height: 20px; border-radius: 0; background: none; }
  .hm-rl .tic .ti { width: 19px; height: 19px; }
  .hm-rl b { flex: 0 0 auto; font-size: var(--fs); font-weight: 600; line-height: 1.2; white-space: nowrap; }
  .hm-rl small { display: none; margin-left: auto; min-width: 0; font-size: 0.75rem; line-height: 1.2; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hm-rl small.is-live { color: var(--primary); font-weight: 700; }
  /* 選舉：整行淡紅底＋紅字，倒數用徽章，一眼看出是限時的 */
  .hm-rl a.is-hot { background: rgba(225,29,46,.07); color: #C8102E; }
  .hm-rl a.is-hot:hover, .hm-rl a.is-hot:focus-visible { background: rgba(225,29,46,.12); color: #A50D26; }
  .hm-rl a.is-hot::before { background: #E11D2E; }
  .hm-rl a.is-hot b { font-weight: 800; }
  .hm-rl a.is-hot small { color: #C8102E; }
  .hm-cd { margin-left: auto; padding: 1px 6px; border-radius: 999px; background: #E11D2E; color: #fff; font-size: 0.75rem; font-style: normal; font-weight: 700; line-height: 1.4; white-space: nowrap; }
  [data-theme="night"] .hm-rl a.is-hot { background: rgba(255,107,120,.12); color: #FF8A94; }
  [data-theme="night"] .hm-rl a.is-hot:hover, [data-theme="night"] .hm-rl a.is-hot:focus-visible { background: rgba(255,107,120,.2); color: #FFB3BA; }
  [data-theme="night"] .hm-rl a.is-hot small { color: #FF8A94; }
  [data-theme="night"] .hm-cd { background: #D61F30; }
}
/* 1280–1439：欄寬 172，右邊只放即時資訊 */
@media (min-width: 1280px) {
  .hm-shell { --rail: 172px; }
  .hm-rl small.is-live { display: block; }
  .hm-cd { display: none; }
}
/* ≥1440：欄寬 212，右邊小字全部顯示 */
@media (min-width: 1440px) {
  .hm-shell { --rail: 212px; }
  .hm-rl small { display: block; }
  .hm-rl a { gap: 10px; padding: 0 10px; }
  .hm-rg h2 { padding: 0 10px; }
}
/* 高度分段 */
@media (min-width: 1024px) and (min-height: 800px) {
  .hm-rail-in { --row: 31px; --hd: 26px; }
}
@media (min-width: 1024px) and (min-height: 960px) {
  .hm-rail-in { --row: 36px; --hd: 30px; --fs: 0.94rem; }
  .hm-rg + .hm-rg { margin-top: 8px; }
}
/* 有「常用」群組、螢幕又不夠高：行高再壓一級，19 項＋4 個標題仍一次看完 */
@media (min-width: 1024px) and (max-height: 799px) {
  .hm-rail-in:has(> .hm-rg-fav:not([hidden])) { --row: 26px; --hd: 22px; }
  .hm-rail-in:has(> .hm-rg-fav:not([hidden])) .hm-rg + .hm-rg { margin-top: 4px; }
}
@media (min-width: 1024px) and (min-height: 800px) and (max-height: 849px) {
  .hm-rail-in:has(> .hm-rg-fav:not([hidden])) { --row: 28px; --hd: 24px; }
  .hm-rail-in:has(> .hm-rg-fav:not([hidden])) .hm-rg + .hm-rg { margin-top: 4px; }
}
/* 很矮的視窗（<700，例如瀏覽器開很多工具列）：再壓扁，還放不下就欄內捲動 */
@media (min-width: 1024px) and (max-height: 699px) {
  .hm-rail-in { --row: 25px; --hd: 20px; }
}

/* ===== 分類分頁 ===== */
.hm-cats { padding: 12px 0 8px; }
.hm-cat-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.hm-cat-tabs::-webkit-scrollbar { display: none; }
.hm-cat-tab { flex-shrink: 0; padding: 10px 14px; border: 0; background: none; font: inherit; font-size: 1rem; font-weight: 700; color: var(--text-tertiary); border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; }
.hm-cat-tab.is-on { color: var(--primary); border-bottom-color: var(--accent); }
[data-theme="night"] .hm-cat-tab.is-on { color: var(--text); }
.hm-cat-panel[hidden] { display: none; }
.hm-cat-more { display: inline-block; margin-top: 12px; font-size: 0.88rem; font-weight: 700; color: var(--primary-light); text-decoration: none; }

/* 沒有封面圖：不放「LIFE.TW」預設圖，改純文字 */
.cat-card.no-img { padding: 8px 0; border-bottom: 1px solid var(--border-light); }
.trending-item.no-img .trending-info h3 { -webkit-line-clamp: 3; }

/* ===== 桌機 ===== */
@media (min-width: 768px) {
  .hm-hero-ov h2 { font-size: 1.5rem; }
  .hm-quick { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); overflow: visible; }
  .hm-quick a { width: auto; }
}
@media (min-width: 1024px) {
  .hm-top-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .hm-hero-ov { padding: 64px 24px 20px; }
  .hm-hero-ov h2 { font-size: 1.65rem; }
  .hm-sub { gap: 14px; }
  .hm-desk-only { display: list-item; }
  .hm-latest-list a { padding: 9px 0; }
  .hm-latest-list strong { -webkit-line-clamp: 1; font-size: 0.98rem; }
  .hm-desc { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hm-cat-tab { font-size: 1.05rem; padding: 10px 18px; }
}

/* 24 小時熱門：手機縮圖小一點、時間來源不換行 */
.trending-meta { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.trending-meta span:last-child { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) {
  .trending-thumb { width: 104px; height: 70px; }
  .trending-item { gap: 12px; }
}

/* 首頁「最新消息」清單裡的廣告（第 3 則後）：上下留白，跟新聞標題分清楚 */
.hm-latest-list li.hm-latest-ad { border-bottom: 1px solid var(--border-light); padding: 4px 0 8px; }
.hm-latest-list li.hm-latest-ad .ad-inarticle { margin: 12px 0; }
#hmFeed > .divADFrame { margin: 20px 0; }