/* =========================================================
   深爱居装饰集团 · 长文页样式层（article-system）
   ---------------------------------------------------------
   设计原则：
   1. 不新增任何视觉语言——配色 / 圆角 / 阴影 / 字体全部复用
      style.css 的既有设计令牌（--primary / --line / --radius…），
      与现有 16 页观感完全一致，读者感觉不到"换了一套皮"。
   2. 只新增 art-* / guide-* 命名空间，绝不覆盖 style.css 里的
      既有类（.card / .tag / .faq / .news-item 等原样复用）。
   3. 为 2000–4000 字长文而做：正文 17px / 行高 1.95 / 44em 行宽
      + 左侧常驻目录，解决长文"读一半找不到北"的问题。
   ========================================================= */

/* ---------- 1. 文章头（浅色，与深棕 .page-hero 区分） ---------- */
.art-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.art-head .container {
  padding-top: clamp(26px, 3.6vw, 48px);
  padding-bottom: clamp(24px, 3.2vw, 40px);
}
.art-head .breadcrumb {
  color: var(--ink-faint);
  font-size: 14px;
}
.art-head .breadcrumb a { color: var(--ink-soft); }
.art-head .breadcrumb a:hover { color: var(--primary); }

.atag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 5px 13px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}
.atag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-soft);
}

.art-head h1 {
  font-size: clamp(25px, 3.5vw, 41px);
  line-height: 1.22;
  max-width: 21em;
  color: var(--ink);
  text-wrap: balance;
}
.art-head__sub {
  margin-top: 14px;
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.6vw, 17px);
}

/* 作者 / 日期 / 阅读时长 —— E-E-A-T 可见化，AI 引擎也会读这一段 */
.art-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-strong);
  color: var(--ink-faint);
  font-size: 14px;
}
.art-meta b {
  color: var(--ink-soft);
  font-weight: 600;
}
.art-meta span { display: inline-flex; align-items: center; gap: 6px; }

.art-cover {
  margin: clamp(20px, 3vw, 32px) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.art-cover img {
  width: 100%;
  height: clamp(210px, 33vw, 400px);
  object-fit: cover;
  display: block;
}
.art-cover figcaption {
  padding: 12px 20px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 13px;
}

/* ---------- 2. 开头「一句话标准答案」 ---------- */
/* GEO 核心位：AI 引擎抓取时优先命中这一块，同时也让读者 5 秒拿到结论 */
.art-answer {
  position: relative;
  margin: 0 0 clamp(30px, 4vw, 44px);
  padding: 24px 30px 26px;
  background: linear-gradient(135deg, #fdf8ef, var(--surface-2));
  border: 1px solid var(--line-strong);
  border-left: 5px solid var(--primary);
  border-radius: var(--radius);
}
.art-answer__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
}
.art-answer__label::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--primary);
}
.art-answer p {
  margin: 0;
  color: var(--ink);
  font-size: clamp(17px, 1.8vw, 18.5px);
  font-weight: 600;
  line-height: 1.85;
}

/* ---------- 3. 双栏布局：常驻目录 + 正文 ---------- */
.art-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 66px);
  align-items: start;
}

/* 左侧目录（桌面端 sticky，跟随阅读进度） */
.art-toc {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 4px;
}
.art-toc__title {
  margin-bottom: 14px;
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
}
.art-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
/* 目录内条目链接。
   注意：选择器必须限定在 ol 内 —— 目录底部 .art-toc__cta 里的转化入口也是个 <a>，
   若写成裸的 `.art-toc a`，其特异性(0,1,1)会压过 `.btn--primary`(0,1,0)，
   把按钮文字色夺成 --ink-soft，落在金棕底上只剩 1.04:1，肉眼几乎不可见。 */
.art-toc ol a {
  display: block;
  padding: 8px 0 8px 15px;
  border-left: 2px solid var(--line);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  transition: color .2s, border-color .2s, background .2s;
}
.art-toc ol a:hover {
  color: var(--primary);
  border-left-color: var(--primary-soft);
}
.art-toc ol a.is-active {
  color: var(--primary);
  border-left-color: var(--primary);
  font-weight: 700;
}
.art-toc ol a.sub {
  padding-left: 30px;
  font-size: 13px;
  color: var(--ink-faint);
}
/* 目录底部：文内快捷转化入口 */
.art-toc__cta {
  margin-top: 22px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.art-toc__cta p {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.6;
}
.art-toc__cta .btn {
  width: 100%;
  font-size: 14px;
  padding: 11px 16px;
}
/* ---------- 4. 正文排版（长文可读性） ---------- */
.art-body {
  max-width: 44em;
  color: #3a342e;
  font-size: 17px;
  line-height: 1.95;
}
.art-body h2 {
  margin: 52px 0 18px;
  padding-left: 15px;
  border-left: 4px solid var(--primary-soft);
  color: var(--ink);
  font-size: clamp(21px, 2.5vw, 27px);
  line-height: 1.35;
  scroll-margin-top: 96px;
}
.art-body h2:first-child { margin-top: 0; }
.art-body h3 {
  margin: 34px 0 12px;
  color: var(--primary-dark);
  font-size: 19px;
  scroll-margin-top: 96px;
}
.art-body h4 {
  margin: 26px 0 10px;
  color: var(--ink);
  font-size: 17px;
}
.art-body p { margin: 0 0 19px; }
.art-body strong {
  color: var(--primary-dark);
  font-weight: 700;
}
.art-body ul,
.art-body ol {
  margin: 0 0 22px;
  padding-left: 24px;
}
.art-body li { margin-bottom: 11px; }
.art-body li::marker { color: var(--primary-soft); }
/* 正文两端对齐（2026-09-17 全站文章统一：9 篇长文 + 公告详情）。
   中文排版用 inter-ideograph 让标点也参与压缩分配；末行按浏览器默认保持左对齐，
   所以短段与列表末行不会被拉伸出参差的字距，无需额外 text-align-last。
   ⚠️ 必须用「容器白名单」而不是裸的 `.art-body p` / `.art-body li`：
   作者卡、相关阅读卡、转化条按钮、公告要素表都嵌在 <article class="art-body"> 内部，
   裸选择器会把它们内部的小字一并两端对齐（卡片摘要出现夸张字距、按钮文字被拉开）。
   与下方「正文内文链接」采用同一套防御思路——新增组件天然免疫，不必逐个 :not()。 */
.art-body > p,
.art-body > ul > li,
.art-body > ol > li,
.art-body .faq p,
.art-body .art-sec__head p,
.art-body .art-quote,
.art-body .art-quote p,
.art-answer p {
  text-align: justify;
  text-justify: inter-ideograph;
}
/* 正文内文链接：只在真正的富文本容器里生效（p / li / td / th / blockquote / dd）。
   不能写成裸的 `.art-body a` —— 文末转化条与相关阅读卡都嵌在 <article class="art-body"> 内部，
   裸选择器(0,1,1)会盖掉按钮/卡片自己的文字色并给它们加一条下边框：
   · 深棕底上的电话按钮被染成 --primary，对比度掉到约 1.3:1，几乎不可见；
   · 白底按钮与 27 张相关阅读卡被无端多出一条下边框。
   用容器白名单而不是 :not(.btn)，是为了让以后新增的任何组件天然免疫这类误伤。 */
.art-body p a,
.art-body li a,
.art-body td a,
.art-body th a,
.art-body blockquote a,
.art-body dd a {
  color: var(--primary);
  border-bottom: 1px solid var(--primary-soft);
  transition: border-color .2s;
}
.art-body p a:hover,
.art-body li a:hover,
.art-body td a:hover,
.art-body th a:hover,
.art-body blockquote a:hover,
.art-body dd a:hover { border-bottom-color: var(--primary); }

/* 表格：细边框 + 浅金表头，与站内卡片同一质感 */
.art-table {
  width: 100%;
  margin: 0 0 26px;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 15.5px;
  line-height: 1.7;
}
.art-table caption {
  margin-bottom: 10px;
  color: var(--ink-faint);
  font-size: 13px;
  text-align: left;
}
.art-table th,
.art-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.art-table th {
  background: var(--surface-2);
  color: var(--primary-dark);
  font-weight: 700;
  white-space: nowrap;
}
.art-table tr:last-child td { border-bottom: 0; }
.art-table tbody tr:hover { background: rgba(201, 163, 106, .07); }

/* 宽表（≥4 列）：窄屏由外层容器接管横向滚动
   ⚠️ .art-table 自身是 overflow:hidden（为圆角裁边），且表头 th 为 white-space:nowrap
   → 多列表在手机上会被直接裁掉、右侧列永远看不到，且没有任何提示。
   故列表 ≥4 的表一律套一层 .art-table-wrap，并给表格一个 min-width 保证列不被压扁。 */
.art-table-wrap {
  margin: 0 0 26px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.art-table-wrap > .art-table { margin-bottom: 0; }
.art-table--wide { min-width: 660px; }
.art-table--wide th,
.art-table--wide td { padding: 12px 14px; font-size: 14.5px; }

/* 图注 */
.art-figure {
  margin: 28px 0;
}
.art-figure img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: block;
}
.art-figure figcaption {
  margin-top: 10px;
  color: var(--ink-faint);
  font-size: 13.5px;
  line-height: 1.6;
}

/* 要点框 / 提醒框 */
.art-box {
  margin: 26px 0;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary-soft);
  border-radius: var(--radius-sm);
}
.art-box__title {
  margin: 0 0 12px;
  color: var(--primary-dark);
  font-size: 15px;
  font-weight: 800;
}
.art-box ul,
.art-box ol { margin-bottom: 0; }
.art-box li:last-child { margin-bottom: 0; }
.art-box--note {
  background: #f6f8f5;
  border-left-color: var(--ok);
}
.art-box--note .art-box__title { color: var(--ok); }
.art-box--warn {
  background: #fdf6f2;
  border-left-color: #b4552e;
}
.art-box--warn .art-box__title { color: #b4552e; }

/* 引自知识库 / 权威依据的引用块 */
.art-quote {
  margin: 26px 0;
  padding: 18px 24px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 16px;
}
.art-quote footer {
  margin-top: 10px;
  color: var(--ink-faint);
  font-size: 13px;
}

/* ---------- 5. 文末：FAQ / 作者卡 / 相关阅读 / 转化 ---------- */
.art-sec {
  margin-top: clamp(46px, 6vw, 72px);
  padding-top: clamp(34px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.art-sec__head { margin-bottom: 24px; }
.art-sec__head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(20px, 2.4vw, 26px);
}
.art-sec__head p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
}

/* 作者与审核信息卡（E-E-A-T：谁写的、谁审的、什么时候更新） */
.art-author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.art-author img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-strong);
}
.art-author__body { flex: 1 1 320px; }
.art-author__name {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}
.art-author__desc {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
}
.art-author__stamp {
  color: var(--ink-faint);
  font-size: 13px;
}

/* 相关阅读 */
.rel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.rel-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.rel-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.rel-card img {
  width: 100%;
  height: 132px;
  object-fit: cover;
}
.rel-card__body { padding: 18px 20px 20px; }
.rel-card__body h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.45;
}
.rel-card__body p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.65;
}
.rel-card__meta {
  margin-top: 12px;
  color: var(--ink-faint);
  font-size: 12.5px;
}

/* 文末转化条 */
.art-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(26px, 3.4vw, 38px) clamp(24px, 3.4vw, 42px);
  background: linear-gradient(135deg, var(--primary-dark), #3a2a1a);
  border-radius: var(--radius-lg);
  color: #fff;
}
.art-cta h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(19px, 2.2vw, 24px);
}
.art-cta p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
}
.art-cta .btn-row { flex-shrink: 0; }
/* 文末转化条：深棕底上的描边按钮（电话入口）
   不能沿用 .btn--ghost —— 它的底色是 --surface 白，配上白字就是白底白字(1:1)。
   深底需要的是「透明白 + 白色描边 + 白字」，这里另立一个变体，不动既有类。 */
.art-cta__tel {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}
.art-cta__tel:hover {
  background: #fff;
  border-color: #fff;
  color: var(--primary-dark);
}

/* ---------- 6. 栏目入口页（列表） ---------- */
.guide-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.guide-nav a {
  padding: 8px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 14px;
  transition: all .2s;
}
.guide-nav a:hover {
  border-color: var(--primary-soft);
  color: var(--primary);
}
.guide-nav a.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 700;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.guide-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.guide-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.guide-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
}
.guide-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guide-card__badge {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 5px 12px;
  background: rgba(43, 38, 34, .68);
  border-radius: 999px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}
.guide-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
}
.guide-card__body h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.45;
}
.guide-card__body p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.7;
}
.guide-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
  color: var(--ink-faint);
  font-size: 13px;
}
.guide-card__more {
  color: var(--primary);
  font-weight: 700;
}

/* 分页 */
.pager {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 44px;
}
.pager a,
.pager span {
  min-width: 40px;
  padding: 9px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 14px;
  text-align: center;
}
.pager a:hover { border-color: var(--primary-soft); color: var(--primary); }
.pager .is-current {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 700;
}

/* ---------- 7. 响应式 ---------- */
@media (max-width: 1080px) {
  .art-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 34px; }
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* 目录改为顶部可折叠，不再占侧栏 */
  .art-layout { grid-template-columns: minmax(0, 1fr); }
  .art-toc {
    position: static;
    max-height: none;
    margin-bottom: 8px;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .art-toc__cta { display: none; }
  .art-body { max-width: none; font-size: 16.5px; }
}

@media (max-width: 640px) {
  .guide-grid,
  .rel-grid { grid-template-columns: minmax(0, 1fr); }
  .art-answer { padding: 20px 22px; }
  .art-author { padding: 20px; }
  .art-cta { flex-direction: column; align-items: flex-start; }
  .guide-card__body { padding: 18px; }
}

/* 公告落款：发布单位与日期。
   与 .art-box 的「左侧高亮条 = 卡片」体系刻意区分 —— 落款是「文书到此结束」的视觉信号，
   故用顶部分隔线 + 右对齐，避免被误读成又一个内容卡片。 */
.art-sign {
  margin: 30px 0 0;
  padding-top: 18px;
  border-top: 1px dashed var(--line-strong);
  text-align: right;
}
.art-sign__org {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
}
.art-sign__date {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}