/* ============================================================
   LAKEFOX — section-news-list.css
   新闻列表（任务 26）：页头 hero → 特色大卡 → 卡片网格（无分页：卡片由编辑器 blocks 维护）
   本文件承载一个跨 section 复用的布局组件样式：
     - .lf-news-card 布局（snippets/card-news.liquid 标记，任务 13；列表页与文章相关区共用）
       —— 视觉配方（bg/border/radius/shadow/hover）由 base.css §7b .lf-card 全局提供（E 组去重）
     - 分页样式已移交 base.css §7b 全局分页组件（本文件零定义，E 组去重）
   卡片契约（DESIGN-SPEC §5.2）：--radius-card / --color-card-background / --color-card-border /
     --shadow-card；hover 升 --shadow-lift + translateY(-4px)（≤4px，§七 transform-only，≤200ms）
    卡片信息层级（编辑化）：日期（金刻度 + 次色 tabular-nums）→ 标题（衬线 h3 主角，3 行 clamp
      防长标题破网格节奏，与摘要 clamp 3 对齐）→ 摘要（次色退后）→ read-more（砖红 accent + 箭头 hover 前移 4px）
    卡片级 hover 反馈（整卡一个可点击条目）：标题 → 砖红（链接语义，§5.1 link 砖红白底 ≈5.7:1 ✓，
      与 read-more .lf-btn--link--accent 同款处理）+ 媒体图 scale(1.03) 微缩放（transform-only §七，
      --duration-slow；media overflow hidden 裁切，零布局位移/零 CLS）
   水印契约（DESIGN-SPEC §8）：base.css .lf-watermark（absolute/z-0/pointer-events none），
     本 section 收敛于页头 end 侧小尺寸，opacity 0.08（白底页头区比 base .1 更克制）
   网格阶梯（§六）：1 列（移动基线 375）→ 2 列（768，--breakpoint-tablet）→ 3 列（1024，--breakpoint-desktop）
   触摸目标：分页/筛选 pill 一律 min-height 44px（§八）
   RTL：水平一律逻辑属性（margin-inline / padding-inline / inset-inline），无裸 hex
   ============================================================ */

/* ---- 列表 section 容器：移动 48px → 桌面 72px（§六，--section-pad 令牌） ---- */
.lf-news {
  padding-block: var(--section-pad);
}

/* 页头：标题 + 筛选 pills（纵向堆叠，水印收敛于 end 侧角落） */
.lf-news__header {
  position: relative; /* 水印锚点（.lf-watermark absolute，base.css §8） */
  display: flex;
  flex-direction: column;
  margin-block-end: var(--space-10); /* 页头与网格间更舒展的节奏 */
}

/* 内容层：压在水印之上（定位元素绘制在 static 之上，仅 DOM 顺序不够——base.css §8 注释） */
.lf-news__title,
.lf-news__filters {
  position: relative;
  z-index: 1;
}

.lf-news__title {
  color: var(--color-foreground, var(--text-primary)); /* 标题字阶由 base.css h1 提供（clamp 32→48px） */
}

/* 页头水印：arch/dome 纹样收敛于 end 侧角落（inset-inline 逻辑定位，RTL 自动镜像），
   溢出部分由 .lf-watermark 的 overflow: hidden 裁切；纯装饰不干扰标题（0.08 + 角落小尺寸） */
.lf-news__header .lf-watermark {
  opacity: 0.08; /* 比 base .lf-watermark 的 0.1 更克制：白底页头区防与标题争抢 */
}

.lf-news__header .lf-watermark svg {
  position: absolute;
  color: var(--acc); /* 装饰线/纹样用金（§4.2 允许；非文字不受对比度门槛） */
}

.lf-news__header .lf-watermark svg:first-child { /* arch 160px：贴 end 上角，轻微出血 */
  inset-inline-end: -1.5rem;
  inset-block-start: -2rem;
}

.lf-news__header .lf-watermark svg:last-child { /* dome 120px：拱门内层，与 arch 组合 */
  inset-inline-end: 0.75rem;
  inset-block-start: 0.75rem;
}

/* 栏目分类筛选（块数据内容，非 t: 键；不做筛选逻辑——标签系统范围外） */
.lf-news__filters {
  margin-block-start: var(--space-6); /* 标题与 pills 行间的编辑化呼吸 */
}

.lf-news__filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3); /* 由 --space-2 放宽：pills 行更疏朗 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.lf-news__filter-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* 触摸目标（§八） */
  padding-inline: var(--space-4);
  border: 1px solid var(--color-card-border, var(--soft));
  border-radius: var(--radius-pill);
  background: var(--color-card-background, var(--bg-gray));
  color: var(--color-foreground, var(--text-primary));
  font-size: var(--text-4); /* 栏目标题档位（15px，卡片正文/导航档） */
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out); /* ≤200ms，transform-only 约束内（§七） */
}

.lf-news__filter-link:hover {
  border-color: var(--acc); /* 装饰性金线 + 字重已为 600（双通道，§1 color-not-only） */
  box-shadow: var(--shadow-card);
}

/* ---- 卡片网格：1 列移动 → 2 列（768）→ 3 列（1024） ---- */
.lf-news__grid {
  display: grid;
  gap: var(--space-6);
}

/* ---- card-news snippet 卡片（任务 13 标记，跨 section 共享） ----
   视觉配方（bg/border/radius/shadow/hover）由 base.css §7b .lf-card + .lf-card--hover 全局提供
   （E 组去重；原本地 border fallback 暖灰与全局中性 rgba 错配一并修正），本文件只留布局 */
.lf-news-card {
  display: flex;
  overflow: hidden; /* 圆角裁切顶部图片（布局性） */
}

.lf-news-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: var(--color-foreground, var(--text-primary));
}

.lf-news-card__media {
  overflow: hidden;
}

.lf-news-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* 固定比例防 CLS（§3 image-dimension） */
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out); /* hover 微缩放进出（transform-only §七） */
}

/* 卡片 hover：媒体图 1.03 微缩放（1.02-1.04 区间；仅 transform，被 __media 的 overflow hidden 裁切，
   无布局位移；无图卡片无 __media 节点，选择器不命中，行为自然降级） */
.lf-news-card:hover .lf-news-card__media img {
  transform: scale(1.03);
}

/* 内容优先级（ui-ux-pro-max content-priority）：日期 → 标题（主角）→ 摘要（退后）→ read-more */
.lf-news-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 由 --space-2 放宽：编辑化行距，层级间留白更足 */
  flex: 1;
  padding: var(--space-6);
}

.lf-news-card__date {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-3); /* 辅助信息（§四.1：--text-secondary 只承载日期/来源等非关键信息） */
  color: var(--color-text-secondary, var(--text-secondary));
  font-variant-numeric: tabular-nums; /* 数字列等宽防跳动（§6 number-tabular） */
}

/* 金色刻度：16px × 1px 品牌金短线，日期前的装饰性前缀（§4.2 装饰分割线用金，非文字） */
.lf-news-card__date::before {
  content: "";
  flex-shrink: 0;
  width: var(--space-4);
  height: 1px;
  background: var(--acc);
}

/* 标题（主角）：3 行 clamp 与摘要对齐，超长标题不破网格节奏；
   默认 foreground（链接语义，base.css h3 为 color:inherit 的显式落地）；
   卡片 hover → 砖红：品牌次级链接色，§5.1 link 砖红白底 ≈5.7:1 ✓（WCAG AA），
   与 read-more .lf-btn--link--accent 同款处理 */
.lf-news-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin-block-start: var(--space-1); /* 日期→标题节奏放大一档（编辑化 meta→headline 间距，逻辑属性 RTL 安全） */
  color: var(--color-foreground, var(--text-primary)); /* 标题字阶由 base.css h3 提供（clamp 22→28px） */
  transition: color var(--duration-fast) var(--ease-out);
}

.lf-news-card:hover .lf-news-card__title {
  color: var(--acc);
}

.lf-news-card__summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: var(--text-4); /* 卡片正文档（§2.11：15px） */
  line-height: var(--leading-body);
  color: var(--color-text-secondary, var(--text-secondary)); /* 摘要退后为辅助文案（§四.1） */
}

.lf-news-card__more {
  margin-block-start: auto; /* 布局：CTA 底部对齐（内容优先级）；视觉配方由全局 .lf-btn--link 提供 */
}

/* read-more 箭头：外层承载 hover 前移（transform-only §七），内层 .lf-rtl-flip 承载 RTL 镜像
   （分层避免 hover transform 覆盖 base.css [dir="rtl"] .lf-rtl-flip 的 scaleX(-1)） */
.lf-news-card__more-icon {
  display: inline-flex;
  align-items: center;
  transition: transform var(--duration-base) var(--ease-out);
}

.lf-news-card:hover .lf-news-card__more-icon {
  transform: translateX(var(--space-1)); /* 卡片 hover 时箭头前移 4px（方向性点击暗示） */
}

[dir="rtl"] .lf-news-card:hover .lf-news-card__more-icon {
  transform: translateX(calc(var(--space-1) * -1)); /* RTL 前向 = 物理向左 */
}

/* ---- 响应式阶梯（§六） ---- */
@media screen and (min-width: 768px) {
  .lf-news {
    padding-block: var(--section-pad-lg); /* 72px 桌面区块节奏（§六） */
  }

  .lf-news__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  .lf-news__header {
    margin-block-end: var(--space-12); /* 桌面 3 列网格前，页头节奏再放宽一档 */
  }

  .lf-news__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

/* ---- reduced-motion（§7.4，base.css §12 全局兜底之外局部强化） ---- */
@media (prefers-reduced-motion: reduce) {
  .lf-news-card,
  .lf-news-card__media img,
  .lf-news-card__title,
  .lf-news-card__more-icon,
  .lf-news__filter-link {
    transition: none;
  }

  .lf-news-card:hover {
    transform: none;
  }

  .lf-news-card:hover .lf-news-card__media img {
    transform: none; /* 微缩放降级为静态（标题砖红为颜色变化非动效，保留） */
  }

  .lf-news-card:hover .lf-news-card__more-icon {
    transform: none;
  }
}


/* ---------- 客户 2026-09：新闻与公告页参考稿重排 ---------- */
.lf-news { padding-block: 0 var(--section-pad); }

/* hero 带（浅灰底 + 大标题 + 副题） */
.lf-news__hero {
  position: relative;
  overflow: hidden;
  /* 铺满整宽（跳出 lf-container 限宽），高度最小 360px */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  min-height: 360px;
  display: flex;
  align-items: center;
  margin-block-end: clamp(var(--space-9), 6vw, var(--space-12));
  padding-block: clamp(var(--space-9), 7vw, var(--space-12));
  background-color: var(--soft);
  background-size: cover;
  background-position: 78% center; /* 底图偏右，左侧留给文案（参考图） */
}

/* 浅色蒙版：左侧留白白→透明，保证深色文字可读 */
.lf-news__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.86) 42%, rgba(255, 255, 255, 0.32) 68%, rgba(255, 255, 255, 0.06) 100%);
  pointer-events: none;
}

.lf-news__hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(var(--page-width, 1240px), 1240px);
  margin-inline: auto;
  padding-inline: 32px;
}

@media (max-width: 820px) {
  .lf-news__hero-inner { padding-inline: 20px; }
}

/* 文案区限宽（标题/副题不横跨整屏） */
.lf-news__hero-inner > * { max-width: 620px; }

/* 小屏：降低最小高度，避免过高留白 */
@media (max-width: 640px) {
  .lf-news__hero { min-height: 280px; }
}


.lf-news__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lf-news__title {
  margin: 0;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.lf-news__title em { color: var(--acc); font-style: normal; }

.lf-news__sub {
  margin: var(--space-5) 0 0;
  max-width: 48ch;
  font-size: var(--text-5);
  line-height: 1.75;
  color: var(--ink-2);
}

/* 特色大卡：左文右图（参考图首条）；上下各 80px（与 hero / 网格拉开一档节奏） */
.lf-news-feature {
  margin-block: 5rem; /* 80px 上下间距（相邻 hero 的 margin-block-end 会被折叠掉，实际取 80px） */
  background: var(--bg-white);
  border: 1px solid var(--color-card-border, rgba(20, 30, 34, 0.08));
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.lf-news-feature__link {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  text-decoration: none;
}

.lf-news-feature__body {
  padding: clamp(var(--space-6), 3vw, var(--space-9));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
}

.lf-news-feature__title {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
}

.lf-news-feature__date { font-size: var(--text-3); color: var(--ink-3); }

.lf-news-feature__media { min-height: 240px; }

.lf-news-feature__media img,
.lf-news-feature__media .lf-news-media-ph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 媒体占位（无图时）：令牌渐变 + 拱顶水印 */
.lf-news-media-ph {
  display: grid;
  place-items: center;
  min-height: 180px;
  background: linear-gradient(150deg, var(--pri2), var(--deep) 70%);
  color: rgba(255, 255, 255, 0.18);
}

/* 网格：3 列（参考图） */
.lf-news__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) { .lf-news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lf-news__grid { grid-template-columns: repeat(3, 1fr); } }

/* 卡片：图上文下，无边框，轻投影 */
.lf-news-card {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.lf-news-card__media { border-radius: 14px; overflow: hidden; }
.lf-news-card__media img { aspect-ratio: 16 / 9; object-fit: cover; }
.lf-news-card__body { padding: var(--space-4) 0 0; }
.lf-news-card__title { font-size: var(--text-5); line-height: 1.45; margin-block: 0 var(--space-3); }
.lf-news-card__date { color: var(--ink-3); font-size: var(--text-3); }
.lf-news-card__summary { color: var(--ink-2); }
.lf-news-card:hover .lf-news-card__title { color: var(--acc); }

/* 极简分页（参考图方块页码） */
.lf-news .lf-pagination__list { justify-content: center; }
.lf-news .lf-pagination__link,
.lf-news .lf-pagination__current {
  min-width: 40px;
  min-height: 40px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-card-border, rgba(20, 30, 34, 0.1));
  background: var(--bg-white);
}

.lf-news .lf-pagination__current { background: var(--ink); color: var(--bg); border-color: var(--ink); }

@media (max-width: 900px) {
  .lf-news-feature__link { grid-template-columns: 1fr; }
  .lf-news-feature__media { order: -1; min-height: 200px; }
}