/*
 * 成功案例故事內文的排版
 *
 * 這份檔案是單一真相來源，同時餵給兩個地方：
 *   1. 前台 /portfolios/{slug} 的故事區塊（.lx-story）
 *   2. Admin 後台 TinyMCE 編輯器的 iframe（content_css）
 * 後台編輯時看到的排版就是前台的樣子，不必存檔後再切到前台比對。
 *
 * Admin 優先載入「公開站上的這一份」（絕對網址，見 SiteSettings:PublicSiteUrl）。
 * 這樣下面 @import 的字體檔會相對於公開站解析，編輯器才拿得到 Cormorant 與
 * 思源黑體 —— 只載 Admin 本機那份複本的話字體會退回系統預設，排版就不一致了。
 * 公開站網址沒設定時退回 Admin 建置時複製的本機複本（見 STCore.Admin.csproj 的
 * CopyPortfolioStoryCss target），字級與間距仍正確，只有字體會 fallback。
 *
 * 色票與字級沿用「靛與瓷」既有變數，不另立一套。TinyMCE 的 iframe 是獨立文件、
 * 讀不到外層的 :root，所以這裡自己再宣告一次同名變數當 fallback。
 */

/* 字體宣告與前台共用同一份。跨網域載字體需要 CORS 標頭，
   OfficialWeb 的 Program.cs 已對 /assets/fonts 加上。 */
@import url('fonts.css');
@import url('noto-sans-tc.css');

.lx-story {
    --lx-paper:    #F0F2F1;
    --lx-ink:      #16202A;
    --lx-ink-2:    #2B3843;
    --lx-ink-soft: #566670;
    --lx-accent:      #4A7D74;
    --lx-accent-soft: rgba(74, 125, 116, 0.12);
    --lx-rule:        rgba(22, 32, 42, 0.13);
    --lx-rule-soft:   rgba(22, 32, 42, 0.06);
    --lx-serif: 'Cormorant Garamond', 'NotoSansTC', 'PingFang TC', 'Microsoft JhengHei', Georgia, serif;
    --lx-sans:  'NotoSansTC', 'PingFang TC', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lx-mono:  'IBM Plex Mono', 'NotoSansTC', Menlo, Consolas, 'Courier New', monospace;

    font-family: var(--lx-sans);
    font-size: 16px;
    line-height: 1.75;
    color: var(--lx-ink-2);
    /* 一行 45-75 字最好讀。故事是長文，沒有上限會在寬螢幕拉成一整行難以換行 */
    max-width: 68ch;
}

/* 標題：襯線體、緊行距，與內文的無襯線形成層級對比 */
.lx-story h2,
.lx-story h3,
.lx-story h4 {
    font-family: var(--lx-serif);
    color: var(--lx-ink);
    line-height: 1.2;
    font-weight: 600;
    /* 上緣留白大於下緣，讓標題在視覺上黏著它所屬的段落而非上一段 */
    margin: 2.5em 0 0.6em;
}

.lx-story h2 { font-size: clamp(26px, 3vw, 34px); }
.lx-story h3 { font-size: clamp(21px, 2.2vw, 26px); }
.lx-story h4 { font-size: 18px; font-family: var(--lx-sans); font-weight: 600; }

.lx-story > :first-child { margin-top: 0; }

.lx-story p {
    margin: 0 0 1.4em;
}

.lx-story a {
    color: var(--lx-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.lx-story a:hover {
    text-decoration-thickness: 2px;
}

.lx-story strong { color: var(--lx-ink); font-weight: 600; }

.lx-story ul,
.lx-story ol {
    margin: 0 0 1.4em;
    padding-left: 1.4em;
}

.lx-story li { margin-bottom: 0.5em; }

.lx-story ul li::marker { color: var(--lx-accent); }
.lx-story ol li::marker { color: var(--lx-accent); font-variant-numeric: tabular-nums; }

/* 引言：左側細線而非整塊底色，克制且不搶走內文的注意力 */
.lx-story blockquote {
    margin: 2em 0;
    padding: 0.2em 0 0.2em 1.4em;
    border-left: 2px solid var(--lx-accent);
    font-family: var(--lx-serif);
    font-size: 1.2em;
    line-height: 1.5;
    color: var(--lx-ink);
}

.lx-story blockquote p:last-child { margin-bottom: 0; }

.lx-story img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2em 0;
    border: 1px solid var(--lx-rule);
}

.lx-story figure {
    margin: 2em 0;
}

.lx-story figure img { margin: 0; }

.lx-story figcaption {
    margin-top: 0.7em;
    font-size: 13px;
    line-height: 1.6;
    color: var(--lx-ink-soft);
}

/* 表格在窄螢幕會撐破版面，所以自己橫向捲動，不讓整頁跟著捲 */
.lx-story table {
    width: 100%;
    margin: 2em 0;
    border-collapse: collapse;
    font-size: 15px;
}

.lx-story th,
.lx-story td {
    padding: 0.7em 0.9em;
    border-bottom: 1px solid var(--lx-rule);
    text-align: left;
    vertical-align: top;
}

.lx-story th {
    font-weight: 600;
    color: var(--lx-ink);
    background: var(--lx-rule-soft);
    border-bottom-color: var(--lx-rule);
}

.lx-story code {
    font-family: var(--lx-mono);
    font-size: 0.88em;
    padding: 0.15em 0.4em;
    background: var(--lx-accent-soft);
    color: var(--lx-ink);
}

.lx-story pre {
    margin: 2em 0;
    padding: 1.2em;
    overflow-x: auto;
    background: var(--lx-ink);
    color: #E4E8E7;
    font-family: var(--lx-mono);
    font-size: 13px;
    line-height: 1.65;
}

.lx-story pre code {
    padding: 0;
    background: none;
    color: inherit;
}

.lx-story hr {
    margin: 3em 0;
    border: 0;
    border-top: 1px solid var(--lx-rule);
}

/*
 * TinyMCE 的 iframe body 會被加上 .lx-story（body_class 設定）。
 * body 本身沒有外層容器可以置中，所以在這裡補左右留白與置中，
 * 讓編輯器裡的行寬與前台一致 —— 不然編輯時看到的斷行位置跟前台對不上。
 *
 * 底色用前台實際的紙面色（--lx-paper #F0F2F1）而不是白色：
 * 文字與背景的對比是排版的一部分，編輯時看到純白、發布後變紙色，
 * 那就不算所見即所得了。
 */
body.lx-story {
    margin: 0 auto;
    padding: 24px 20px;
    background: #F0F2F1;
}