/* ---------- LAKEFOX section-products-preview.css ----------
   任务 17 — 产品品类预览（5 品类卡片，blocks: product，纯静态营销）

   契约：
     - 卡片 .lf-product-card：圆角 --radius-card / 底 --color-card-background /
       边框 --color-card-border / 基座 --shadow-card；hover 升 --shadow-lift + 上移 ≤4px（§5.2）
     - 移动端（<768px）：.lf-products__track 横向 scroll-snap（x mandatory），隐藏滚动条；
       仅 overflow-x: auto（原生滚动链传播垂直滚动，不劫持页面纵向滚动）
     - 桌面（≥768px）：track 转 grid（auto-fit minmax，1→2→3→4 列阶梯精神，§6）
     - 动效：仅 transform + opacity（shadow 属绘制层）+ --duration-fast + --ease-out（§7）；
       prefers-reduced-motion 由 base.css §12 全局降级
     - 全部令牌引用（§9 无裸 hex），水平方向一律逻辑属性（RTL 自动镜像） */

.lf-products {
  padding-block: var(--section-pad); /* 48px 移动端区块节奏（base.css §6 令牌） */
}

/* header：标题 + view all（flex 两端，基线对齐） */
.lf-products__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-block-end: var(--space-8);
}

/* 标题字号由 base.css h2 阶梯负责（clamp 26→36px），此处仅清默认 margin */
.lf-products__title {
  margin: 0;
}

/* view all 链接：采纳 base.css .lf-btn--link（44px 触摸目标/下划线/砖红 hover），
   此处仅保留布局性声明与字号覆盖 */
.lf-products__more {
  flex-shrink: 0;
  font-size: var(--text-4);
}

.lf-products__more-icon {
  display: inline-flex;
  align-items: center;
}

/* 卡片区：移动端 flex 横向滑轨（scroll-snap），触摸友好 */
.lf-products__track {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
  padding-block-end: var(--space-2); /* 预留卡片 hover 阴影不被裁切 */
}

.lf-products__track::-webkit-scrollbar {
  display: none; /* WebKit 隐藏滚动条 */
}

/* 卡片：皮层（bg/border/radius/shadow + hover 抬升）采纳 base.css .lf-card .lf-card--hover，
   此处保留滑轨刚性（flex/scroll-snap）、布局与 <a> 去装饰。
   flex-basis 72%（原 85%）：375 实测 85% 仅 1.17 卡可见、后 2/4 入口零可见；
   收窄至 72% 使次卡边缘露出约 70px 作滑动线索（Stage A P-04，仅移动端滑轨形态） */
.lf-product-card {
  flex: 0 0 min(72%, 300px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  color: inherit;
  text-decoration: none;
}

/* 图标章：采纳 .lf-icon-chip--accent（砖红 16% 浅底 + 砖红图标，白底 ≈5.7:1 ✓ 达图形 3:1 门槛，
   替代原 --surface 金 on 白 ≈2.3:1 不足权衡；§5.8 卡片内层次） */
.lf-product-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lf-product-card__name {
  margin: 0;
  font-family: var(--font-heading-family);
  font-size: var(--text-6); /* 卡片语境标题：不用全局 h3 clamp，取卡片标题字阶 18px */
  line-height: var(--leading-heading);
  color: var(--text-primary);
}

.lf-product-card__summary {
  margin: 0;
  font-size: var(--text-3);
  line-height: var(--leading-body);
  color: var(--text-secondary); /* 辅助说明（§4.1 仅辅助文案） */
}

/* 桌面 ≥768px：track 转 grid（§6 断点体系），卡片不再横滚 */
@media (min-width: 768px) {
  .lf-products {
    padding-block: var(--section-pad-lg); /* 72px 桌面区块节奏（base.css §6 令牌） */
  }

  .lf-products__track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-8);
    overflow: visible;
    padding-block-end: 0;
  }

  .lf-product-card {
    flex: none;
  }
}

/* 标题朱砂强调（heading_accent 覆盖时） */
.lf-products__title em {
  color: var(--acc);
  font-style: normal;
}