/* ═══════════════════════════════════════════════════════════════════════
投資理念（方法論）專用版型
只有套用 page-templates/methodology.php 的頁面會載入這支（functions.php
的 ifam_enqueue_assets() 判斷），其他頁面不必扛這份樣式。

版面值來自使用者的設計稿：
  - 2026-10-30 第一版（投資理念Desktop-html.zip）
  - 2026-11-09 B 方案（投資理念Desktop－B方案-html.zip）← 目前這份
色票與字族一律沿用主題 style.css 的 token，不另外發明。
全部包在 .mth 底下，避免 .hero／.toc／figure 這類通用名稱和站上其他
版型互相影響。
═══════════════════════════════════════════════════════════════════════ */

.mth {
	/* 設計稿裡的字族別名 → 主題既有的字族 token */
	--sans: var(--font-sans);
	--mono: var(--font-mono);
	--display: var(--font-serif);
	/* 中文標題用的襯線：設計稿把 Noto Serif TC 排在 Cormorant 前面，
	   這樣整句中英夾雜的標題粗細才一致 */
	--serif: "Noto Serif TC", "Songti TC", "Cormorant Garamond", Georgia, serif;
}

.mth * {box-sizing:border-box;margin:0;padding:0}
html {scroll-behavior:smooth}
.mth {margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased}
.mth a {color:inherit;text-decoration:none}
.mth svg {display:block}
.mth strong, .mth b {font-weight:700}

/* 麵包屑用主題既有的那一條（ifam_render_breadcrumb()）；
   上面 .mth * 的 reset 會把它的間距清掉，這裡補回來。 */
.mth .ifam-breadcrumb {margin:0 0 20px}

.mth .progress {position:fixed;top:0;left:0;height:2px;background:var(--bronze);z-index:50;transition:width .1s linear}

/* ---------- shared labels ---------- */
.mth .eyebrow {display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:700;font-size:13px;line-height:1.5;letter-spacing:2px;text-transform:uppercase;color:var(--bronze)}
.mth .eyebrow.rule::before {content:"";display:block;width:48px;height:1px;background:var(--bronze)}
.mth .key {box-shadow:inset 0 -.42em 0 rgba(201,185,142,.45)}

/* ---------- hero ---------- */
.mth .hero {border-bottom:1px solid var(--line);padding:56px 24px 64px}
.mth .hero-inner {max-width:1180px;margin:0 auto}
/* 大標：設計稿是 Cormorant 400 / 52px / 行高 1.5 / 字距 -1px。
   兩處和設計稿不同：
   - 字重改 700（使用者 2026-10-30 指定要粗體）
   - 設計稿寫死 52px 與 600px 寬，手機上會爆版，改成 clamp 與 max-width */
.mth .hero h1 {max-width:600px;margin:24px 0 28px;font-family:var(--display);font-weight:700;font-size:clamp(30px,5.4vw,52px);line-height:1.5;letter-spacing:-1px}
.mth .hero h1 em {font-style:normal;color:var(--bronze-deep)}
/* 大標下面那一句副標（B 方案新增） */
.mth .hero .hero-sub {max-width:600px;margin:-8px 0 28px;font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.7;color:var(--slate)}
/* 標題下方的品牌點陣帶：把標題區塊和下方導言分開 */
.mth .dotband {height:32px;margin:12px 0 48px;background-image:radial-gradient(circle, var(--line) 1px, transparent 1.2px);background-size:4px 4px;background-position:0 1px;background-repeat:repeat}
.mth .lede {font-size:16px;line-height:1.85;max-width:36em}
.mth .lede p {margin:0 0 1em}
.mth .lede p:last-child {margin:0}
.mth .hero-note {margin-top:24px;color:var(--ink);max-width:46em}
.mth .hero-note + .hero-note {margin-top:8px}
/* B 方案：開頭的導言、兩項前提、提問撐滿整個開頭寬度（1180px）；
   最後那個「我們的投資方法」框維持 600px */
.mth .hero-inner > .lede, .mth .hero-inner > .rules, .mth .hero-inner > .kq {max-width:none}
.mth .hero-inner > .kp {max-width:600px}
.mth .hero-inner > .kp > p {max-width:none}

/* ---------- layout + contents ---------- */
/* 內文區和開頭同寬：內容寬 1180px（外加左右 24px 留白），左緣對齊開頭；內文欄撐滿到右緣 */
.mth .layout {max-width:1228px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:72px}
.mth .toc {position:sticky;top:32px;align-self:start;padding:56px 0;max-height:100vh;overflow:auto}
.mth .toc .eyebrow {margin-bottom:16px}
/* B 方案的目錄是單層 9 章（不再分四大主題、不收合） */
.mth .toc ol {list-style:none;border-left:1px solid var(--line)}
.mth .toc a {display:flex;gap:12px;padding:7px 0 7px 16px;font-size:14px;line-height:1.5;color:var(--slate);border-left:2px solid transparent;margin-left:-1px;transition:color .2s ease,border-color .2s ease}
.mth .toc a .n {font-family:var(--mono);font-size:11px;letter-spacing:1px;padding-top:2px;color:var(--bronze)}
.mth .toc a:hover {color:var(--ink)}
.mth .toc a.active {color:var(--ink);border-left-color:var(--bronze-deep);font-weight:500}
.mth .article {min-width:0;padding:24px 0 96px}

/* ---------- chapters ---------- */
.mth .ch {padding:72px 0 32px;border-bottom:1px solid var(--line)}
.mth .ch:last-child {border-bottom:0}
.mth .ch p {margin:0 0 .75em}
/* 章節標題：編號自己一行、標題在下一行（使用者 2026-10-30 指定）。
   原本是「編號｜標題」同一列，手機上標題被擠到只剩半行寬，
   折成三四行之後看起來反而比底下的小標還小。 */
.mth .ch-head {margin-bottom:36px}
.mth .ch-num {display:block;margin-bottom:10px;font-family:var(--display);font-weight:500;font-size:72px;line-height:.8;letter-spacing:-2px;color:var(--bronze)}
.mth .ch-head h2 {font-family:var(--serif);font-weight:600;font-size:30px;line-height:1.4;letter-spacing:.01em}
/* 小標題：純文字粗體；和下方段落貼近、和上方段落拉開，才看得出是標題 */
.mth .ch h3 {font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.5;margin:48px 0 22px}
/* 文章大段落開場那一句（第 06 章開頭）用粗體 */
.mth .part-lead {font-weight:700}

/* 兩種框：上線左端、下線右端放記號；文字最寬 400px，窄螢幕自動縮。
   B 方案把兩者的樣式對調了：
   - .kq 關鍵提問：墨線＋墨藍方塊、墨色粗體
   - .kp 重要觀點：青銅線＋青銅圓點、深青銅粗斜體
   .rl-t 是框線上的小標（開頭「我們的投資方法……」那一框用） */
.mth .kq, .mth .kp {margin:40px 0 36px;font-family:var(--serif);font-weight:500;font-size:18px;line-height:1.75}
.mth .kq > p, .mth .kp > p {max-width:400px;margin:18px 0}
.mth .rl {display:flex;align-items:center;gap:12px}
.mth .rl::after {content:"";flex:1;height:1px}
.mth .rl.end {flex-direction:row-reverse}
.mth .rl .ic {flex-shrink:0;display:block}
.mth .rl .rl-t {flex-shrink:0;font-family:var(--mono);font-weight:700;font-size:13px;line-height:1.5;letter-spacing:1px;color:var(--bronze-deep);white-space:nowrap}
.mth .kq .rl::after {background:var(--ink)}
.mth .kq .ic {width:10px;height:10px;background:var(--ink)}
.mth .kq > p {color:var(--ink);font-weight:700;font-size:18px;line-height:1.7}
.mth .kp .rl::after {background:var(--bronze)}
.mth .kp .ic {width:11px;height:11px;border-radius:50%;background:var(--bronze)}
.mth .kp > p {font-style:italic;font-weight:700;color:var(--bronze-deep)}

.mth figure {margin:36px 0;border:1px solid var(--line);background:var(--white);padding:24px}
.mth figure svg {width:100%;height:auto;font-family:'Noto Sans TC',sans-serif}
.mth .fig-cap {margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:1px;line-height:1.5;color:var(--slate)}
/* 文末那行免責說明（借用 .fig-cap 的字樣，和結語色塊拉開距離） */
.mth .ch p.end-note {margin-top:28px}

.mth .two {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--ink);margin:32px 0}
.mth .two > div {padding:26px 28px;background:var(--white)}
.mth .two > div + div {border-left:1px solid var(--ink)}
.mth .two .eyebrow {display:flex;margin-bottom:8px;font-size:12px}
.mth .two h4 {font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.4;margin-bottom:10px}
.mth .two p {font-size:16px;line-height:1.85;margin:0}

.mth .rules {list-style:none;margin:24px 0;counter-reset:r}
.mth .rules li {counter-increment:r;display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;padding:14px 0;border-top:1px solid var(--line)}
.mth .rules li:last-child {border-bottom:1px solid var(--line)}
.mth .rules li::before {content:"0" counter(r);font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:2px;color:var(--bronze);padding-top:3px}

/* 一列一項、左邊標籤與圖示、右邊說明；無底色，列與列之間用細線分隔。
   B 方案有兩處用：第 01 章三項影響（標題在左欄）、第 06 章三個策略（標題在右欄） */
.mth .strats {display:flex;flex-direction:column;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin:32px 0 12px}
.mth .strat {display:grid;grid-template-columns:280px minmax(0,1fr);column-gap:40px;padding:32px 0}
.mth .strat + .strat {border-top:1px solid var(--line)}
.mth .strat .tag {font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:2px;color:var(--bronze)}
.mth .strat .strat-ic {width:56px;height:56px;margin:18px 0 14px}
.mth .strat h4 {font-family:var(--display);font-weight:600;font-size:28px;line-height:1.15;letter-spacing:-.5px;white-space:nowrap}
.mth .strat .sub {font-size:14px;font-weight:700;line-height:1.6;margin:6px 0 14px}
.mth .strat p {font-size:16px;line-height:1.8;margin:0 0 .7em}
.mth .strat p:last-child {margin:0}

.mth table.map {width:100%;border-collapse:collapse;margin:28px 0;font-size:16px;background:var(--white);border:1px solid var(--line)}
.mth table.map th, .mth table.map td {text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.7}
.mth table.map th {background:var(--ink);color:var(--offwhite);font-family:var(--mono);font-size:11px;letter-spacing:2px;font-weight:700;border-bottom:0}
.mth table.map td:first-child {font-family:var(--serif);font-weight:600;white-space:nowrap;width:9em}
.mth table.map tr:last-child td {border-bottom:0}

.mth .closing {position:relative;margin:56px 0 0;padding:56px 48px;background:var(--ink);color:var(--offwhite)}
.mth .closing::before {content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--bronze),transparent)}
.mth .closing::after {content:"";position:absolute;right:32px;bottom:32px;width:40px;height:3px;background:var(--bronze)}
.mth .closing p {margin:0;font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.7}

/* 巴菲特引言（B 方案新增）：左側一條青銅細線、Cormorant 斜體、mono 出處 */
.mth .quote {margin:32px 0;padding:6px 0 6px 28px;border-left:1px solid var(--bronze)}
.mth .quote p {margin:0;max-width:560px;font-family:var(--display);font-style:italic;font-weight:500;font-size:24px;line-height:1.45;color:var(--ink)}
.mth .quote cite {display:block;margin-top:14px;font-family:var(--mono);font-style:normal;font-weight:500;font-size:11px;line-height:1.5;letter-spacing:2px;text-transform:uppercase;color:var(--slate)}

/* 「待補」虛線框：版型只在登入的編輯面前印出來（見 methodology.php），訪客看不到 */

/* ---------- 開頭「我們的投資方法」那一框（.way） ----------
   2026-11-10 使用者指定改用個股頁「IFA.ai 的作法」重點框的版型（主題 style.css 的 .ifam-way），
   寬度放寬到整個 hero 欄（1180px）。網點外框用 radial-gradient 畫，不用圖檔。 */
.mth .hero-inner > .way {max-width:none;margin:48px 0 0;padding:28px;background-color:var(--paper);background-image:radial-gradient(circle, rgb(196,188,170) .8px, transparent 1px);background-size:4px 4px}
.mth .way-in {display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;padding:48px 56px;background:var(--offwhite)}
.mth .way-lead {display:block;margin-bottom:18px;font-family:var(--mono);font-weight:700;font-size:13px;line-height:1.5;letter-spacing:1px;color:var(--bronze-deep)}
.mth .way-main p {max-width:720px;font-family:var(--serif);font-weight:700;font-size:17px;line-height:2;color:var(--ink)}
.mth .way-main p + p {margin-top:14px}
.mth .way-main em {font-style:normal;color:var(--bronze-deep)}
/* 句尾的青銅小方塊取代句號（仿 The Economist 的文末方塊，和個股頁同一招） */
.mth .way-end {display:inline-block;width:.55em;height:.55em;margin-left:.3em;background:var(--bronze);vertical-align:baseline}
.mth .way-side {display:flex;flex-direction:column;justify-content:center;padding-left:40px;border-left:1px solid rgb(222,205,168)}
.mth .way-jump {display:block;padding-bottom:12px;border-bottom:1px solid var(--slate);color:var(--ink)}
.mth .way-jump + .way-jump {margin-top:32px}
.mth .way-jump:hover {color:var(--bronze-deep);border-bottom-color:var(--bronze-deep)}
.mth .way-label {display:block;margin-bottom:8px;font-family:var(--sans);font-size:13px;line-height:1.4;color:var(--slate)}
.mth .way-name {display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:var(--display);font-weight:500;font-size:19px;line-height:1.4}
.mth .way-arrow {font-family:var(--mono);font-size:15px;line-height:1;transition:transform .18s ease}
.mth .way-jump:hover .way-arrow {transform:translateY(3px)}

/* ---------- responsive ---------- */
@media (max-width:960px) {
	.mth .layout {grid-template-columns:minmax(0,1fr);gap:0}
	.mth .toc {display:none}
	.mth .article {max-width:none}
}
@media (max-width:640px) {
	.mth {font-size:16px}
	.mth .hero {padding:40px 16px}
	.mth .hero .hero-sub {font-size:17px}
	.mth .layout {padding:0 16px}
	.mth .ch {padding-top:56px}
	.mth .ch-num {font-size:56px;margin-bottom:6px}
	.mth .ch-head h2 {font-size:23px}
	/* 小標一律比章節標題小 2px（使用者 2026-10-30 指定）：
	   桌機上 h3 24px < h2 30px 沒問題，手機上 h2 縮到 23px 就反過來了。
	   .strat h4（Trending Value 那三個）同理，而且 28px 配 nowrap
	   在 375px 的螢幕上會直接衝出去。 */
	.mth .ch h3 {font-size:21px;margin:36px 0 18px}
	.mth .strat h4 {font-size:21px;white-space:normal}
	.mth .two, .mth .strats {grid-template-columns:minmax(0,1fr)}
	.mth .two > div + div {border-left:0;border-top:1px solid var(--ink)}
	.mth .strat {grid-template-columns:minmax(0,1fr);row-gap:16px}
	.mth figure {padding:14px}
	.mth table.map td:first-child {white-space:normal;width:auto}
	.mth .closing {padding:40px 24px}
	.mth .quote p {font-size:20px}
	.mth .quote {padding-left:18px}
	/* 開頭那一框的小標在手機上要能折行，不然會把框撐出螢幕 */
	.mth .rl .rl-t {white-space:normal}
	/* 開頭那一框：手機上左右兩欄改上下排，網點框收窄 */
	/* 網點框 5 顆點寬（點距 4px × 5 ＝ 20px），和個股頁那一框一致（2026-11-10） */
	.mth .hero-inner > .way {margin-top:36px;padding:20px}
	.mth .way-in {grid-template-columns:minmax(0,1fr);gap:28px;padding:28px 20px}
	.mth .way-main p {font-size:16px;line-height:1.9}
	.mth .way-side {padding-left:0;padding-top:28px;border-left:0;border-top:1px solid rgb(222,205,168)}
}