/* ============================================================
   Lesson — 線上免費簡報課程（索引頁 + 課程頁）
   沿用 dslab.css 的紙／墨／朱印色板；主體是「橫列區塊」不是卡片牆
   （簡報本身走 ComfyUI 官方風格，那套在 lesson-deck.css）
   ============================================================ */

.lsn-main {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 4.5rem) var(--pad-x) 0;
}

.mono { font-family: var(--mono); }

/* ── 頁首 ── */
.lsn-head {
    max-width: 920px;
    padding-bottom: clamp(2rem, 4vw, 3.2rem);
    border-bottom: 1px solid var(--rule-strong);
}

.lsn-eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--vermilion);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 1.6rem;
}

.lsn-title {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(3.2rem, 8vw, 6rem);
    line-height: 0.96;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 1.6rem;
}

.lsn-sub {
    font-family: 'Noto Sans TC', var(--sans);
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    font-weight: 400;
    line-height: 1.9;
    color: var(--ink-dim);
    max-width: 52ch;
    margin-bottom: 1.6rem;
}

.lsn-meta {
    font-size: 0.78rem;
    color: var(--ink-fade);
    letter-spacing: 0.12em;
}

/* ━━━━━━━━━━━ 橫列區塊：一門課一整條 ━━━━━━━━━━━ */
.lsn-rows {
    display: flex;
    flex-direction: column;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.lsn-loading { color: var(--ink-faint); letter-spacing: 0.2em; font-size: 0.8rem; padding: 2rem 0; }

.lsn-row {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(340px, 1.15fr);
    gap: clamp(1.8rem, 4vw, 4rem);
    padding: clamp(2.2rem, 4vw, 3.4rem) 0;
    border-top: 1px solid var(--rule-strong);
    align-items: start;
}
.lsn-rows .lsn-row:first-child { border-top: none; padding-top: clamp(1.6rem, 3vw, 2.4rem); }
.lsn-rows .lsn-row:last-child { border-bottom: 1px solid var(--rule-strong); }

.lsn-row-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--ink-fade);
    margin-bottom: 1rem;
}

.lsn-code {
    background: var(--ink);
    color: var(--paper);
    padding: 0.22rem 0.6rem;
    letter-spacing: 0.14em;
}

.lsn-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: var(--vermilion);
    font-weight: 500;
}
.lsn-chip::before { content: ""; width: 9px; height: 9px; background: currentColor; display: block; }

.lsn-h {
    font-family: 'Noto Sans TC', var(--sans);
    font-weight: 800;
    font-size: clamp(1.9rem, 3.2vw, 2.9rem);
    line-height: 1.24;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 0.6rem;
}

.lsn-h a { transition: color 0.25s ease; }
.lsn-h a:hover { color: var(--vermilion-deep); }

.lsn-tagline {
    font-family: 'Noto Sans TC', var(--sans);
    font-weight: 500;
    font-size: 1.02rem;
    color: var(--vermilion-deep);
    margin-bottom: 1.1rem;
}

.lsn-summary {
    font-family: 'Noto Sans TC', var(--sans);
    font-weight: 300;
    font-size: 0.97rem;
    line-height: 1.95;
    color: var(--ink-dim);
    margin-bottom: 1.4rem;
}

.lsn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper);
    background: var(--ink);
    padding: 0.72rem 1.4rem;
    transition: background 0.25s ease;
}
.lsn-cta:hover { background: var(--vermilion-deep); }

/* ── 右欄：這門課有哪幾堂 ── */
.lsn-list { display: flex; flex-direction: column; }

.lsn-item {
    display: grid;
    grid-template-columns: 2.6rem 1fr auto;
    gap: 0.9rem;
    align-items: baseline;
    padding: 0.95rem 0.2rem;
    border-bottom: 1px solid var(--rule);
    transition: background 0.2s ease, padding-left 0.2s ease;
}
.lsn-item:first-child { border-top: 1px solid var(--rule); }
.lsn-item:hover { background: var(--paper-warm); padding-left: 0.7rem; }

.lsn-no {
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--vermilion);
    letter-spacing: 0.06em;
}

.lsn-item-t {
    display: block;
    font-family: 'Noto Sans TC', var(--sans);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--ink);
    line-height: 1.5;
}

.lsn-item-d {
    display: block;
    font-family: 'Noto Sans TC', var(--sans);
    font-weight: 300;
    font-size: 0.86rem;
    line-height: 1.75;
    color: var(--ink-dim);
    margin-top: 0.28rem;
}

.lsn-item-n {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--ink-fade);
    white-space: nowrap;
}

.lsn-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }

.lsn-tag {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    color: var(--ink-fade);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.2rem 0.56rem;
}

.lsn-tail {
    font-family: 'Noto Sans TC', var(--sans);
    font-size: 0.9rem;
    line-height: 1.9;
    color: var(--ink-faint);
    padding: 1.9rem 0 clamp(2.5rem, 5vw, 4rem);
    max-width: 60ch;
}

/* ━━━━━━━━━━━ 課程內頁 ━━━━━━━━━━━ */
.lsn-crumb {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--ink-fade);
    margin-bottom: 1.4rem;
}
.lsn-crumb a { color: var(--vermilion); }
.lsn-crumb a:hover { text-decoration: underline; }

.lsn-sec {
    padding: clamp(2.4rem, 4.5vw, 3.6rem) 0;
    border-top: 1px solid var(--rule-strong);
}

.lsn-sec-h {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--vermilion);
    margin-bottom: 1.5rem;
}

.lsn-prose {
    font-family: 'Noto Sans TC', var(--sans);
    font-weight: 300;
    font-size: 1rem;
    line-height: 2.05;
    color: var(--ink-dim);
    max-width: 62ch;
}
.lsn-prose p { margin-bottom: 1.15rem; }
.lsn-prose strong { font-weight: 700; color: var(--ink); }
.lsn-prose em { font-style: normal; color: var(--vermilion-deep); font-weight: 500; }

/* 課程簡介：左文右平台截圖（原本右側是一大片空白） */
.lsn-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: clamp(1.8rem, 4vw, 4rem);
    align-items: start;
}

.lsn-platform {
    border: 1px solid var(--rule-strong);
    background: var(--paper-warm);
    padding: clamp(1.2rem, 2vw, 1.6rem);
}

.lsn-platform-h {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vermilion);
    margin-bottom: 0.9rem;
}

.lsn-platform-lead {
    font-family: 'Noto Sans TC', var(--sans);
    font-weight: 300;
    font-size: 0.93rem;
    line-height: 1.9;
    color: var(--ink-dim);
    margin-bottom: 1.1rem;
}
.lsn-platform-lead strong { font-weight: 700; color: var(--ink); }

.lsn-shot { margin-bottom: 1.1rem; }

.lsn-shot img {
    width: 100%;
    display: block;
    border: 1px solid var(--rule-strong);
    background: var(--paper);
}

.lsn-shot figcaption {
    font-family: 'Noto Sans TC', var(--sans);
    font-weight: 300;
    font-size: 0.8rem;
    line-height: 1.75;
    color: var(--ink-fade);
    margin-top: 0.5rem;
}
.lsn-shot figcaption strong { font-weight: 700; color: var(--ink-dim); }
.lsn-shot figcaption em { font-style: normal; color: var(--vermilion-deep); font-weight: 600; }

.lsn-platform-note {
    font-family: 'Noto Sans TC', var(--sans);
    font-weight: 300;
    font-size: 0.82rem;
    line-height: 1.8;
    color: var(--ink-fade);
    border-top: 1px solid var(--rule);
    padding-top: 0.8rem;
}
.lsn-platform-note strong { font-weight: 700; color: var(--ink-dim); }

/* 課程原則三欄 */
.lsn-grid3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(1.2rem, 2.4vw, 2rem);
}

.lsn-card {
    border: 1px solid var(--rule-strong);
    padding: 1.5rem 1.6rem 1.7rem;
    background: var(--paper-warm);
}

.lsn-card-k {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: var(--vermilion);
    margin-bottom: 0.75rem;
}

.lsn-card-t {
    font-family: 'Noto Sans TC', var(--sans);
    font-weight: 700;
    font-size: 1.12rem;
    color: var(--ink);
    margin-bottom: 0.6rem;
}

.lsn-card-b {
    font-family: 'Noto Sans TC', var(--sans);
    font-weight: 300;
    font-size: 0.92rem;
    line-height: 1.9;
    color: var(--ink-dim);
}

/* 每堂課的大區塊 */
.lsn-lesson {
    display: grid;
    grid-template-columns: 8rem 1fr auto;
    gap: clamp(1rem, 2.6vw, 2.4rem);
    align-items: start;
    padding: clamp(1.6rem, 3vw, 2.4rem) 0;
    border-bottom: 1px solid var(--rule);
}

.lsn-lesson-no {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1;
    color: var(--paper-warmer);
    /* 幽靈數字：要看得見，但不能搶走課名。原本用 ink-faint 描邊在紙色底上幾乎消失 */
    -webkit-text-stroke: 1px var(--ink-fade);
}

.lsn-lesson-t {
    font-family: 'Noto Sans TC', var(--sans);
    font-weight: 700;
    font-size: clamp(1.25rem, 2.1vw, 1.6rem);
    color: var(--ink);
    margin-bottom: 0.55rem;
}

.lsn-lesson-d {
    font-family: 'Noto Sans TC', var(--sans);
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.95;
    color: var(--ink-dim);
    max-width: 58ch;
}

.lsn-open {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    color: var(--ink);
    border: 1px solid var(--ink);
    padding: 0.6rem 1.1rem;
    white-space: nowrap;
    transition: all 0.22s ease;
}
.lsn-open:hover { background: var(--ink); color: var(--paper); }

/* 說明區的小表 */
.lsn-tbl { width: 100%; border-collapse: collapse; font-size: 0.92rem; max-width: 760px; }
.lsn-tbl th, .lsn-tbl td { text-align: left; padding: 0.72rem 0.9rem; border-bottom: 1px solid var(--rule); }
.lsn-tbl th {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-fade);
    font-weight: 500;
}
.lsn-tbl td { font-family: 'Noto Sans TC', var(--sans); font-weight: 300; color: var(--ink-dim); }
.lsn-tbl td strong { font-weight: 700; color: var(--ink); }

/* ── 手機 ── */
@media (max-width: 860px) {
    .lsn-intro { grid-template-columns: 1fr; gap: 1.8rem; }
    .lsn-row { grid-template-columns: 1fr; gap: 1.8rem; }
    .lsn-lesson { grid-template-columns: 1fr; gap: 0.8rem; }
    .lsn-lesson-no { font-size: 2rem; }
    .lsn-sub { max-width: none; }
}