/* ============================================================
   layout.css — 版型外殼（統一：首頁與文章頁共用同一套）
   .container = 內容置中；.topbar = 頂列；.shell = 三欄（左 / 中 / 右）
   ============================================================ */

/* 內容置中容器 */
.container{ max-width: var(--container); margin:0 auto; padding: 0 var(--pad-x); }

/* ---- 頂列（slim topbar：品牌左、導覽右） ---- */
header.site-header{ background: transparent; }
/* 只設上下內距：左右沿用 .container 的 --pad-x（padding 縮寫會蓋掉造成 LOGO 凸出） */
.topbar-inner{ display:flex; align-items:center; gap:18px; padding-top:20px; padding-bottom:16px; }
.brand{ font-family: var(--font-display); font-size:1.35rem; text-decoration:none; color: var(--ink); flex-shrink:0; }
.brand .dot{ color: var(--coral); }
.topnav{ margin-left:auto; display:flex; gap:16px; }
.topnav a{ font-size:.85rem; color: var(--ink-soft); text-decoration:none; }
.topnav a:hover{ color: var(--ink); }

/* ---- Hero（首頁）：青綠漸層卡 + 金黃大數字統計 ---- */
.hero-card{ border-radius: var(--radius-xl); padding:34px 38px; color:#fff; position:relative; overflow:hidden; margin-bottom:24px;
  background:linear-gradient(120deg, var(--teal) 0%, var(--teal-dark) 100%);
  box-shadow:0 12px 30px rgba(13,90,78,.3);
  display:grid; grid-template-columns:1.25fr 1fr; gap:26px; align-items:center; }
.hero-card .big-emoji{ position:absolute; right:2%; top:-14px; opacity:.16; transform:rotate(-8deg); pointer-events:none; }
.hero-card .big-emoji .emoji{ width:7.5rem; height:7.5rem; }
.hero-card h2{ font-family: var(--font-serif); font-size:clamp(1.3rem,2.4vw,1.8rem); margin:0 0 8px; line-height:1.5; }
.hero-card .sub{ font-size:.92rem; margin:0 0 20px; opacity:.92; }
.hero-cta .btn{ display:inline-flex; align-items:center; gap:6px; font-family: var(--font-mono); font-weight:600;
  padding:12px 26px; border-radius:26px; font-size:.95rem; border:none; cursor:pointer; text-decoration:none; }
.btn-primary{ background: var(--coral); color:#fff; box-shadow:0 6px 16px rgba(232,93,61,.4); }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-white{ background:rgba(255,255,255,.92); color: var(--teal-dark); margin-left:10px; }
.hero-stats{ display:flex; gap:12px; }
.hero-stats .stat{ flex:1; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);
  border-radius:16px; padding:16px 6px; text-align:center; }
.hero-stats b{ display:block; font-family: var(--font-mono); font-size:1.9rem; line-height:1.2; color:#FFE9A8; }
.hero-stats small{ font-size:.74rem; opacity:.92; letter-spacing:1px; }

/* ---- 三欄外殼（統一） ---- */
.shell{
  max-width: var(--container); margin:0 auto; padding: 8px var(--pad-x) 70px;
  display:grid; grid-template-columns: var(--rail-left) minmax(0,1fr) var(--rail-right);
  gap: var(--gap); align-items:start;
}
.shell-left, .shell-right{ position:sticky; top:20px; }
.shell-main{ min-width:0; }
/* 右欄無內容（贊助/廣告皆未啟用）時收合，中欄變寬（由 app.js mountSupport 掛上） */
.shell.no-right{ grid-template-columns: var(--rail-left) minmax(0,1fr); }

/* 側欄卡片（左右欄共用） */
.side-card{ background: var(--card); border-radius: var(--radius-lg); padding:18px;
  box-shadow: var(--shadow); border:1px solid var(--line); margin-bottom:16px; }
.side-card h4,
.rail-title{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--ink-soft); margin:0 0 12px; padding-bottom:8px; border-bottom:1.5px solid var(--line); }

/* ---- 頁尾 ---- */
footer{ text-align:center; padding:26px 0 46px; color: var(--ink-soft); font-family: var(--font-mono); font-size:.78rem;
  border-top:1.5px solid var(--line); }
.credit{ margin-top:8px; font-size:.68rem; opacity:.75; }
.credit a{ color:inherit; }
.footer-nav{ margin-bottom:10px; }
.footer-nav a{ color: var(--teal); text-decoration:none; margin:0 8px; font-weight:600; }
.footer-nav a:hover{ text-decoration:underline; }

/* ---- 響應式：三欄收合成單欄 ---- */
@media (max-width:960px){
  /* .no-right 也要一併蓋回單欄（它的權重比 .shell 高，漏寫會在手機變兩欄） */
  .shell, .shell.no-right{ grid-template-columns:1fr; gap:12px; padding:14px 16px 70px; }
  .shell-left, .shell-right{ position:static; }
  .topbar-inner{ padding-top:22px; padding-bottom:18px; }
  .hero-card{ grid-template-columns:1fr; padding:28px 22px; gap:18px; margin-top:2px; }
  .hero-stats b{ font-size:1.45rem; }
  .container{ padding:0 16px; }
}