/* =============================================================
   邻李康养 LinliCare · 内容板块样式 news.css
   设计系统：DESIGN.md v1（暖橙+暖绿主色 / 海尔蓝仅背书）
   依据：deliverables/内容板块_组件规范与令牌扩展_v1.md
   依赖：site/assets/css/tokens.css + site/assets/css/main.css
   说明：本文件只做「追加」，不修改 site/ 下任何现有文件。
   品牌铁律：站名「邻李康养」· 门店「海尔康养（春申万科店）」· 电话仅 177-1751-4332
   ============================================================= */

/* =============================================================
   §1.2 令牌扩展（追加到 :root，不覆盖任何现有令牌）
   ============================================================= */
:root{
  /* 内容卡片 */
  --post-card-radius:var(--radius-lg);
  --post-card-gap:var(--space-5);
  --post-cover-ratio:16/9;
  --post-body-pad:var(--space-5);
  --post-title-size:var(--text-h4);
  --post-title-lines:2;
  --post-excerpt-size:var(--text-body);
  --post-excerpt-lines:2;
  /* 元信息 */
  --meta-size:var(--text-small);
  --meta-color:var(--color-text-secondary);
  --badge-gap:6px;
  /* 长文正文 */
  --article-maxw:720px;
  --article-body-size:18px;
  --article-line-height:1.8;
  --article-para-gap:1.25em;
  --article-h2-size:24px;
  --article-h3-size:20px;
  --article-h4-size:18px;
  --article-heading-rule:3px;
  /* 控件（标签 Chip 已移除，不再保留 --chip-* 令牌） */
  --tab-height:48px; --tab-pad-x:20px;
  --pager-size:48px; --pager-gap:var(--space-2);
  /* 状态色 */
  --color-status-active:var(--color-secondary-strong);
  --color-status-active-soft:var(--color-secondary-soft);
  --color-status-ended:var(--color-text-secondary);
  --color-status-ended-soft:#EDE7DE;
  --color-neutral-soft:#EDE7DE;
}

/* =============================================================
   页面版式：页头 / 栏目简介 / 段落分区
   ============================================================= */
.page-head{padding:var(--space-7) 0 var(--space-2)}
.page-head .eyebrow{display:inline-block;margin-bottom:var(--space-2)}
.page-head h1{font-size:var(--text-h1);line-height:1.25}
.page-head .lead{max-width:720px;margin-top:var(--space-3);color:var(--color-text-secondary);font-size:var(--text-body-lg)}
.news-section{padding:var(--space-5) 0 var(--space-8)}
.result-count{font-size:var(--text-small);color:var(--color-text-secondary);margin-bottom:var(--space-4)}

/* =============================================================
   §2.1 文章卡片（.post-list 栅格 + .post-card）
   响应式：移动 1 列 / 平板 2 列 / 桌面 3 列
   ============================================================= */
.post-list{display:grid;grid-template-columns:1fr;gap:var(--post-card-gap)}
@media(min-width:768px){.post-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.post-list{grid-template-columns:repeat(3,1fr)}}

.post-card{
  display:flex;flex-direction:column;height:100%;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--post-card-radius);overflow:hidden;
  box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;
  transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease;
}
.post-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--color-border-strong);text-decoration:none}
.post-card:active{transform:translateY(0)}
.post-card:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.post-card__media{position:relative;overflow:hidden;background:var(--color-surface-soft)}
.post-card__cover{
  display:block;width:100%;aspect-ratio:var(--post-cover-ratio);
  object-fit:cover;transition:transform .3s ease;
}
.post-card:hover .post-card__cover{transform:scale(1.03)}
/* 无实拍图时的品牌色 16:9 占位块（纯 CSS，不引用任何外链） */
.post-card__cover.ph--orange{background:var(--ph-gradient-orange)}
.post-card__cover.ph--green{background:var(--ph-gradient-green)}
.post-card__body{padding:var(--post-body-pad);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
/* 卡片的分类 + 标签标识行（静态，不可点） */
.post-card__tags{display:flex;flex-wrap:wrap;gap:var(--badge-gap)}
.post-card__title{font-size:var(--post-title-size);font-weight:600;line-height:1.4;color:var(--color-text-primary)}
.post-card__excerpt{font-size:var(--post-excerpt-size);line-height:1.6;color:var(--color-text-secondary)}
.post-card__title,.post-card__excerpt{
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
  -webkit-line-clamp:2;line-clamp:2;
}
.post-card__title{-webkit-line-clamp:var(--post-title-lines)}
.post-card__excerpt{-webkit-line-clamp:var(--post-excerpt-lines)}
.post-card__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  margin-top:auto;padding-top:var(--space-2);
  font-size:var(--meta-size);color:var(--meta-color);
}
.post-card__meta .dot{color:var(--color-border-strong)}

/* 卡片上的静态标识（替代已移除的 Chip 筛选；标签只展示、不可点）
   · 分类徽章复用 main.css 的 .badge--cat（暖橙）/ .badge--ok（暖绿），不重复定义
   · 新增 .badge--tag（中性暖灰底）承载标签，不引入新色系 */
.badge--tag{background:var(--color-neutral-soft);color:var(--color-text-secondary);font-weight:500}

/* =============================================================
   §2.8 活动状态徽章（.status-badge）
   ============================================================= */
.status-badge{
  display:inline-flex;align-items:center;gap:var(--badge-gap);
  height:28px;padding:0 12px;border-radius:var(--radius-pill);
  font-size:13px;font-weight:600;line-height:1;
}
.status-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status-badge--active{background:var(--color-status-active-soft);color:var(--color-status-active)}
.status-badge--ended{background:var(--color-status-ended-soft);color:var(--color-status-ended)}
/* 浮于封面左上（列表卡）；加阴影保证白底图上也可见 */
.post-card__media .status-badge{position:absolute;top:var(--space-3);left:var(--space-3);z-index:2;box-shadow:0 1px 3px rgba(43,43,43,.12)}

/* =============================================================
   §2.2 分类 Tab（.cat-tabs）
   ============================================================= */
.cat-tabs{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-5)}
.cat-tab{
  display:inline-flex;align-items:center;height:var(--tab-height);padding:0 var(--tab-pad-x);
  border-radius:var(--radius-pill);background:var(--color-surface);
  border:1px solid var(--color-border-strong);color:var(--color-text-primary);
  font-size:var(--text-body);font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.cat-tab:hover{border-color:var(--color-primary);color:var(--color-primary-strong);text-decoration:none}
.cat-tab.is-active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-contrast);font-weight:700}
.cat-tab:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* =============================================================
   §2.3 标签 Chip —— 已按审查意见整块移除
   理由：站上无 JS 绑定时 Chip 是「点了没反应」的假控件，对中老年用户是明确陷阱，
   且标签筛选对本站 SEO 无增益（标签页需 noindex）。
   标签改为卡片上的静态标识（见 .post-card__tags / .badge--tag）。
   ============================================================= */

/* =============================================================
   §2.4 分页器（.pager）
   ============================================================= */
.pager{display:flex;justify-content:center;align-items:center;gap:var(--pager-gap);flex-wrap:wrap;margin-top:var(--space-6)}
.pager__num,.pager__link{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--pager-size);height:var(--pager-size);padding:0 14px;
  border-radius:var(--radius-md);background:var(--color-surface);
  border:1px solid var(--color-border-strong);color:var(--color-text-primary);
  font-size:var(--text-body);font-weight:600;text-decoration:none;
}
.pager__num:hover,.pager__link:hover{border-color:var(--color-primary);color:var(--color-primary-strong);text-decoration:none}
.pager__num.is-current{background:var(--color-primary);border-color:var(--color-primary);color:#fff;font-weight:700}
.pager__link.is-disabled{opacity:.4;pointer-events:none}
.pager__ellipsis{min-width:var(--pager-size);text-align:center;color:var(--meta-color)}
.pager :focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.pager__status{display:none;align-items:center;height:var(--pager-size);font-size:var(--text-body);font-weight:600;color:var(--meta-color);padding:0 var(--space-2)}

/* =============================================================
   §2.5 面包屑（.crumb）
   ============================================================= */
.crumb{margin-bottom:var(--space-4)}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);list-style:none;font-size:var(--meta-size);color:var(--meta-color)}
.crumb li{display:inline-flex;align-items:center;gap:var(--space-2)}
.crumb li+li::before{content:"›";color:var(--color-border-strong)}
.crumb a{color:var(--color-text-secondary)}
.crumb a:hover{color:var(--color-primary-strong);text-decoration:underline}
.crumb [aria-current="page"]{color:var(--color-text-primary);max-width:14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* =============================================================
   §2.6 长文正文排版（.article-body）+ §5 R1 兜底覆盖
   作用域严格限定 .article-body，不污染全局
   ============================================================= */
.article-body{
  max-width:var(--article-maxw);margin:0 auto;
  padding:var(--space-5) var(--space-4) var(--space-8);
  font-size:var(--article-body-size);line-height:var(--article-line-height);
  color:var(--color-text-primary);letter-spacing:.01em;word-break:break-word;
}
/* 段落：左对齐（不用两端对齐），段距明显大于行距
   说明：字号/行高不再在此 !important 竞争——已由 main.css 的 .article-body p 统一提供
   （--article-body-size / --article-line-height 提到 tokens.css 后由 main.css 引用）。
   此处只做「内联样式清洗兜底」：色 / 底 / 段距 / 空白 / 对齐。 */
.article-body p{
  color:var(--color-text-primary)!important;
  background:transparent!important;
  margin:0 0 var(--article-para-gap)!important;
  white-space:normal!important;
  text-align:start!important;
}
.article-body section{
  color:var(--color-text-primary)!important;
  background:transparent!important;
  margin:0 0 var(--article-para-gap)!important;
  white-space:normal!important;
  text-align:start!important;
}
/* 标题：H2 带品牌橙左侧竖条 */
.article-body h1,.article-body h2,.article-body h3,.article-body h4{color:var(--color-text-primary)!important;font-weight:700}
.article-body h1{font-size:22px!important;line-height:1.35;margin:1.4em 0 .6em!important}
.article-body h2{
  font-size:var(--article-h2-size)!important;line-height:1.35;margin:1.6em 0 .6em!important;
  border-left:var(--article-heading-rule) solid var(--color-primary);padding-left:14px;
}
.article-body h3{font-size:var(--article-h3-size)!important;line-height:1.4;font-weight:600;margin:1.4em 0 .5em!important}
.article-body h4{font-size:var(--article-h4-size)!important;line-height:1.4;font-weight:600;margin:1.2em 0 .4em!important}
/* 列表 */
.article-body ul{margin:var(--space-4) 0;padding-left:1.6em;list-style:disc}
.article-body ol{margin:var(--space-4) 0;padding-left:1.6em;list-style:decimal}
.article-body li{margin:.5em 0;line-height:var(--article-line-height);color:var(--color-text-primary)}
.article-body li::marker{color:var(--color-primary)}
.article-body ol li::marker{color:var(--color-primary-strong);font-weight:600}
/* 引用块：不用斜体 */
.article-body blockquote{
  background:var(--color-primary-soft);border-left:4px solid var(--color-primary);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:var(--space-4) var(--space-5);margin:var(--space-5) 0;
  color:var(--color-text-primary);font-size:17px;line-height:1.75;font-style:normal;
}
.article-body blockquote p{margin:0!important;font-size:17px!important;line-height:1.75!important}
/* 图片 / 图注 */
.article-body figure{margin:var(--space-5) 0}
.article-body img{max-width:100%!important;height:auto!important;border-radius:var(--radius-md);margin:var(--space-4) 0;display:block}
.article-body figure img{margin:0}
.article-body figcaption{font-size:var(--meta-size);color:var(--meta-color);text-align:center;margin-top:var(--space-2);line-height:1.6}
/* 正文内图片占位块（无实拍图时，纯 CSS 品牌色 16:9） */
.prose-ph{
  width:100%;aspect-ratio:16/9;border-radius:var(--radius-md);
  background:var(--ph-gradient-warm);border:1px solid var(--color-border);
}
/* 提示块（三态：info / tip / warn） */
.prose-callout{
  display:flex;gap:var(--space-3);align-items:flex-start;
  padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);
  margin:var(--space-5) 0;font-size:17px;line-height:1.75;
}
.prose-callout__icon{flex:0 0 auto;width:22px;height:22px;margin-top:2px}
.prose-callout__icon svg{width:22px;height:22px;display:block}
.prose-callout__title{font-weight:700;display:block;margin-bottom:4px}
.prose-callout--info{background:var(--color-secondary-soft);color:var(--color-text-primary)}
.prose-callout--tip{background:var(--color-primary-soft);color:var(--color-text-primary)}
.prose-callout--warn{background:var(--color-warning-soft);color:var(--color-warning-text)}
/* 表格（外层须包 .table-scroll 防窄屏溢出） */
.article-body table{width:100%;border-collapse:collapse;font-size:var(--text-small)}
.article-body th,.article-body td{padding:12px 14px;border:1px solid var(--color-border);text-align:left;vertical-align:top}
.article-body th{background:var(--color-surface-soft);font-weight:600}
/* 链接：常驻下划线（不靠颜色区分） */
.article-body a{color:var(--color-primary-strong);text-decoration:underline;text-underline-offset:2px}
.article-body a:hover{text-decoration-thickness:2px}
/* 强调仅加粗，不改色 */
.article-body strong,.article-body b{font-weight:700;color:inherit}
/* 分隔线 */
.article-body hr{border:0;height:1px;background:var(--color-border);margin:var(--space-6) 0}
/* 兜底：任何子元素不溢出 */
.article-body *{max-width:100%}

/* =============================================================
   §2.7 文末 CTA 区块（.post-cta）★品牌铁律区
   ============================================================= */
.post-cta{
  display:grid;gap:var(--space-6);align-items:center;margin-top:var(--space-7);
  background:linear-gradient(135deg,var(--color-surface-soft),var(--color-primary-soft));
  border:1px solid var(--color-border);border-radius:var(--radius-xl);
  padding:var(--space-6);box-shadow:var(--shadow-sm);
}
.post-cta__title{font-size:var(--text-h3);margin-bottom:var(--space-3)}
.post-cta__tel{font-size:var(--text-h3);font-weight:700;line-height:1.5;margin-bottom:var(--space-2)}
.post-cta__tel a{color:var(--color-primary-strong);text-decoration:underline;text-underline-offset:3px;letter-spacing:.02em}
.post-cta__store{font-size:var(--text-small);color:var(--color-text-secondary);line-height:1.7}
.post-cta__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* =============================================================
   §2.9 相关文章区（.related-posts / .post-card--sm）
   ============================================================= */
.related-posts{margin-top:var(--space-8)}
.related-grid{display:grid;grid-template-columns:1fr;gap:var(--post-card-gap);margin-top:var(--space-5)}
@media(min-width:768px){.related-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.related-grid{grid-template-columns:repeat(3,1fr)}}
.post-card--sm{--post-title-size:17px;--post-body-pad:var(--space-4)}
.post-card--sm .post-card__excerpt{-webkit-line-clamp:1;line-clamp:1}

/* =============================================================
   响应式（断点沿用基线：移动 <768 / 平板 768–1023 / 桌面 ≥1024）
   ============================================================= */
@media(max-width:767px){
  /* 分类 Tab：横向滚动，避免挤压换行 */
  .cat-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .cat-tabs::-webkit-scrollbar{display:none}
  /* 分页器：紧凑「上一页 · 1/7 · 下一页」 */
  .pager__num,.pager__ellipsis{display:none}
  .pager__status{display:inline-flex}
  /* 文末 CTA：按钮全宽堆叠 */
  .post-cta__actions{flex-direction:column}
  .post-cta__actions .btn{width:100%}
  /* 面包屑当前项省略号 */
  .crumb [aria-current="page"]{max-width:12em}
}
@media(min-width:768px){
  .post-cta{padding:var(--space-6)}
}
@media(min-width:1024px){
  .post-cta{grid-template-columns:1fr auto;padding:var(--space-7)}
}

/* =============================================================
   减弱动效（无障碍；叠加现有全局规则，无副作用）
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  .post-card,.post-card__cover,.cat-tab{transition:none!important;transform:none!important}
}