/* ============================================================
   JO — UI/UX Designer · Product & Systems
   DESIGN SYSTEM · SHARED COMPONENT LAYER  ·  v1
   ============================================================
   三层结构（加载顺序即依赖顺序，不得颠倒）：

     1. tokens.css    值。颜色 / 字体 / 间距 / 圆角 / 动效 / 层级
                      全站唯一来源，禁止在别处再定义同义变量。
     2. system.css    跨页面复用的组件（本文件）。
                      由首页与所有案例页共用，因此只能引用 token。
     3. 页面样式表      只放这一页独有的排版：
                      style.css（首页）/ work/case-ui.css、
                      erp-case.css、detail.css、video.css（案例页）

   ------------------------------------------------------------
   组件清单（本文件）

     .o-project_meta        §07 项目标签 ——  PROJECT TYPE · YEAR · PLATFORM
     .o-cta_link            §24 统一行动号召 —— VIEW / REQUEST CASE STUDY
     .o-decision-set        Case Study · Key Design Decisions 组
     .o-decision               单个决定（Problem / Decision / Solution / Result）
     .o-editorial_section   案例页统一章节骨架（编号 + 标题 + 正文）
     .o-editorial_lead      章节导语（大字陈述）

   ------------------------------------------------------------
   §07 项目标签格式（硬性规则）
     统一为   TYPE · YEAR · PLATFORM
     例       Government System · 2024 · WeChat Mini Program
              B2B ERP · 2024—2025 · Web + Mini Program
              Wellness App · 2024 · Mobile
     禁止     "Mini Program · 2024"、"Web Console · 2023—2024"、
              "Mobile App · 2024 — Mood & Period Tracker" 这类
              平台在前 / 年份在末 / 用不同分隔符的写法。
     标记     <p class="o-project_meta">
                <span class="o-project_meta-type">Government System</span>
                <span class="o-project_meta-sep">·</span>
                <span class="o-project_meta-year">2024</span>
                <span class="o-project_meta-sep">·</span>
                <span class="o-project_meta-platform">WeChat Mini Program</span>
              </p>
     三者缺一不可；确实没有平台时写 "Web"，不要留空。

   ------------------------------------------------------------
   §24 统一 CTA（硬性规则，全站只有两种）
     公开案例   VIEW CASE STUDY    →   <a class="o-cta_link" href="...">
     私有案例   REQUEST CASE STUDY →   <a class="o-cta_link o-cta_link--request" href="mailto:...">
     禁止       Learn More / Read More / View Project / See Details /
                Request the write-up / 任何第三种说法。
     文案由 CSS 统一转成大写，HTML 里写正常大小写即可。
   ============================================================ */

/* ============================================================
   §07  Project Meta
   ============================================================ */
.o-project_meta{
  color:var(--c-ink-3);
  display:block;
  font-size:1.1rem;
  font-weight:600;
  letter-spacing:.2em;
  line-height:1.4;
  text-transform:uppercase;
}
@media (min-width:48em){ .o-project_meta{font-size:1.2rem} }

/* 三段各自不折行，换行只发生在分隔符处 */
.o-project_meta-type,
.o-project_meta-year,
.o-project_meta-platform{white-space:nowrap}

/* 分隔符两侧带真实空格：视觉间距 = 空格 + padding，
   这样复制/朗读出来的是 "Government System · 2024 · WeChat Mini Program"，
   而不是挤在一起的标签串。 */
.o-project_meta-sep{color:var(--c-ink-4);padding:0 .55rem}

/* 深色 / 灰底上的反转变体 */
.o-section--dark .o-project_meta{color:var(--c-ink-3)}

/* ============================================================
   §24  CTA — 全站唯一的两种行动号召
   ============================================================ */
.o-cta_link{
  align-items:center;
  color:var(--c-accent);
  display:inline-flex;
  font-size:1.8rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.o-cta_link:hover{color:var(--c-accent-hover)}
.o-cta_link-text{display:block;margin-right:.75rem}
.o-cta_link-arrow{
  display:inline-block;font-size:2.2rem;line-height:1;
  transition:transform var(--dur-fast) var(--ease-out);
}
.o-cta_link:hover .o-cta_link-arrow{transform:translateX(.6rem)}

/* 私有案例：文案换成 REQUEST CASE STUDY，箭头改为「写信」语义 */
.o-cta_link--request .o-cta_link-arrow{font-size:1.8rem}

/* 小尺寸（卡片内、页脚） */
.o-cta_link--small{font-size:1.3rem;letter-spacing:.12em}
.o-cta_link--small .o-cta_link-arrow{font-size:1.6rem}

/* ============================================================
   Case Study · Key Design Decisions
   ------------------------------------------------------------
   案例页的核心段落。每个项目 2–4 条，每条固定四格：
     Problem   当时真正卡住的是什么
     Decision  我做了什么选择（不是做了什么界面）
     Solution  因此界面/流程长成什么样
     Result    结果或代价（没数据就写「上线后…」的定性判断，
               不要编数字）
   ============================================================ */
.o-decision-set{margin-top:var(--rhythm-m)}

.o-decision{
  border-top:1px solid var(--c-hairline);
  margin-top:var(--space-3xl);
  padding-top:var(--space-2xl);
}
.o-decision-set > .o-decision:first-child{margin-top:0}

.o-decision-head{align-items:baseline;display:flex;gap:var(--space-sm)}

.o-decision-index{
  color:var(--c-accent);
  flex:none;
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.o-decision-title{
  color:var(--c-ink);
  font-size:2.2rem;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.2;
}
@media (min-width:48em){ .o-decision-title{font-size:2.8rem} }

.o-decision-grid{
  display:grid;
  gap:var(--space-2xl) var(--space-lg);
  grid-template-columns:1fr;
  margin-top:var(--space-xl);
}
@media (min-width:48em){ .o-decision-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:81.25em){ .o-decision-grid{grid-template-columns:repeat(4,1fr)} }

.o-decision-label{
  color:var(--c-ink-3);
  display:block;
  font-size:1.1rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.o-decision-text{
  color:var(--c-ink-2);
  font-size:1.6rem;
  line-height:1.6;
  margin-top:var(--space-sm);
}

/* ============================================================
   案例页统一章节骨架
   ------------------------------------------------------------
   统一节奏：chapter → section → subsection
   每页固定 7 章，编号只用两位数字 + 句点，标题永远一句话。
   ============================================================ */
.o-editorial_section{margin-top:var(--rhythm-xl)}
.o-editorial_section:first-child{margin-top:0}

.o-editorial_head{align-items:baseline;display:flex;gap:var(--space-sm)}

.o-editorial_number{
  color:var(--c-accent);
  flex:none;
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:.24em;
}

.o-editorial_title{
  color:var(--c-ink);
  font-size:2.6rem;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.15;
}
@media (min-width:48em){ .o-editorial_title{font-size:4rem} }

.o-editorial_body{
  color:var(--c-ink-2);
  font-size:1.7rem;
  line-height:1.75;
  margin-top:var(--space-lg);
  max-width:74rem;
}
.o-editorial_body p{margin-top:var(--space-md)}
.o-editorial_body p:first-child{margin-top:0}

.o-editorial_lead{
  color:var(--c-ink);
  font-size:2rem;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.35;
  margin-top:var(--space-lg);
  max-width:74rem;
}
@media (min-width:48em){ .o-editorial_lead{font-size:2.6rem} }

/* ============================================================
   无障碍 / 动效
   ------------------------------------------------------------
   全站只有这两种缓动、四档时长（见 tokens.css）。
   任何位移或淡入都必须能在 prefers-reduced-motion 下关闭。
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .o-cta_link-arrow{transition:none}
  .o-cta_link:hover .o-cta_link-arrow{transform:none}
}