/* ==========================================================================
   LUYUN 麓云茶号 · 首页
   --------------------------------------------------------------------------
   只放「这一页的版面」：Hero / 信任条 / 产地故事 / 冲煮三步 / 订阅专区 /
   评价与媒体 / 邮件订阅。组件（商品卡 / 磁贴 / 文章卡 / 区块标题行）的样式
   在 components.css —— 那些是跨页复用的，不属于任何一页。

   数值全部取自设计稿画板 6:1，已逐节点核对（字号 / 字体 / 圆角 / 间距），
   不凭感觉写。与 tokens 不一致处的取舍写在各自注释里。

   ★ 首页没有一处投影。分层全靠填色 + 1px hairline
     （设计系统 14:2757 的 Elevation 规则）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 段节奏
   --------------------------------------------------------------------------
   模板每段都挂了 .lu-section（base.css 的通用段距 56/96），但首页各段的
   上下留白是设计稿逐段定死的，不都是 96。这里在 .lu-home 作用域内覆写，
   不影响站点里其他用 .lu-section 的页面。

   ★★ 特异性陷阱（2026-10-18 修的线上问题）
   `.lu-home .lu-section` 是**两个类**（0,2,0），而下面各段的
   `.lu-bestsellers` / `.lu-categories` / `.lu-origin` / `.lu-reviews` /
   `.lu-journal` 都是**一个类**（0,1,0）。
   于是这条「清零」把每一段的 padding-block 全部压成 0 ——
   设计稿的 96 一个都没生效，品类的 96 底距也没了，
   「Find your cup」的磁贴和下面「OUR ORIGIN」的大图直接贴在一起（间距 0）。
   修法：那五条也必须带 .lu-home 前缀（同特异性 + 在后面出现），才能压过这条。
   新增首页段落时同理 —— 写 `.lu-xxx { padding-block: … }` 是无效的。 */
.lu-home .lu-section { padding-block: 0; }

/* --------------------------------------------------------------------------
   1. Hero —— 全幅大图 + 渐变罩 + 沉底文案
   --------------------------------------------------------------------------
   设计稿 6:29：整段高 720，深茶绿底，茶汤大图铺满，上盖一层
   「上暗 → 中透 → 下暗」的渐变罩（6:31 三个色标：0% 50% / 40% 10% /
   100% 78% 不透明度）。文案区底部对齐、下留白 88 —— 渐变最暗处在底部，
   文字压在最暗处才读得清，这是罩子存在的原因，不是装饰。 */
.lu-hero {
  position: relative;
  min-height: 720px;
  display: flex;
  background-color: var(--c-ink);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* 没有媒体库大图时的降级：纯深茶绿底，不露白 */
.lu-hero:not([style*="background-image"]) { background-image: none; }

.lu-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(31, 61, 43, 0.50) 0%,
    rgba(31, 61, 43, 0.10) 40%,
    rgba(31, 61, 43, 0.78) 100%
  );
  pointer-events: none;
}

.lu-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;      /* 文案沉底，见上方注释 */
  gap: 22px;
  min-height: 720px;
  padding-block: 0 88px;
}

/* 眉标：设计稿实测 12.5px，比 token 的 11 大一级。
   Hero 是门面，这一处按设计稿走；站内其他眉标仍用 token 的 11px。 */
.lu-hero__inner .lu-eyebrow {
  font-size: var(--fs-label);
}

.lu-hero__title {
  max-width: 860px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 58px;
  line-height: 66px;
  letter-spacing: var(--ls-tight);
  color: #F5F3EE;                 /* 设计稿 6:34 实测 */
}

.lu-hero__sub {
  max-width: 520px;
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: 26px;
  color: #D8CCB5;                 /* 设计稿 6:35 实测 */
}

.lu-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 6px;
}

@media (max-width: 767px) {
  .lu-hero { min-height: 560px; }
  .lu-hero__inner { min-height: 560px; padding-block: 0 56px; }
  .lu-hero__title { font-size: var(--fs-display-1-mobile); line-height: 46px; }
}

/* --------------------------------------------------------------------------
   2. 信任条 —— 四枚图标 + 短句，通栏铺开
   --------------------------------------------------------------------------
   设计稿 6:41：高 76，无填色无描边，四项 space-between 铺满容器。
   图标抹茶绿（实测），文字 12.5px。 */
.lu-trust__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  min-height: 76px;
}
.lu-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: #292921;                 /* 设计稿 6:46 实测：中性近黑，不是 ink */
}
.lu-trust__item .lu-icon { color: var(--c-matcha); flex: none; }

@media (max-width: 767px) {
  .lu-trust__inner { padding-block: var(--sp-4); }
  .lu-trust__item { font-size: var(--fs-caption); }
}

/* --------------------------------------------------------------------------
   3. 畅销单品
   --------------------------------------------------------------------------
   设计稿 6:63：padding 96 / 96，标题行到卡行 gap 40。
   卡片与网格本身在 components.css。 */
.lu-home .lu-bestsellers { padding-block: 96px; }
.lu-bestsellers .lu-card-grid { margin-top: 40px; }

/* --------------------------------------------------------------------------
   4. 品类入口
   --------------------------------------------------------------------------
   设计稿 6:118：padding 0 / 96（上留白由上一段的 96 承担，不重复累加），
   标题行到磁贴行 gap 36。 */
.lu-home .lu-categories { padding-block: 0 96px; }
.lu-categories .lu-tile-grid { margin-top: 36px; }

/* --------------------------------------------------------------------------
   5. 产地故事 —— 左图右文
   --------------------------------------------------------------------------
   设计稿 6:159：gap 80，图 560 × 640、文案列填满，padding 0 / 100。 */
.lu-home .lu-origin { padding-block: 0 100px; }
.lu-origin__inner {
  display: grid;
  grid-template-columns: 560px minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.lu-origin__media { margin: 0; }
.lu-origin__media img {
  display: block;
  width: 100%; height: 640px;
  object-fit: cover;
  border-radius: var(--r-lg);     /* 大媒体容器，design token r-lg = 10 */
  background: var(--c-skeleton);
}
.lu-origin__text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 520px;
}
.lu-origin__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}
.lu-origin__body {
  margin: 0;
  max-width: 480px;
  font-size: 14.5px;
  line-height: 26px;
  color: var(--fg-mid);           /* 设计稿 6:164 实测 */
}
.lu-origin__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  margin: var(--sp-2) 0 0;
}
.lu-origin__stats dt {
  font-size: 10.5px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-field-label);
  color: var(--fg-mid);
}
.lu-origin__stats dd {
  margin: var(--sp-1) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 23px;
  line-height: 1.15;
  color: var(--fg-accent);
}
.lu-origin__link {
  align-self: flex-start;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-accent);
}
.lu-origin__link:hover { color: var(--fg-primary); }

@media (max-width: 1023px) {
  .lu-origin__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .lu-origin__media img { height: 420px; }
  .lu-origin__text { max-width: none; }
}

/* --------------------------------------------------------------------------
   6. 冲煮三步 —— 深茶绿底反衬
   --------------------------------------------------------------------------
   设计稿 6:176：整段深底，内衬 padding 96 / 96；标题组 gap 14，
   副文与标题组之间 14、与步骤行之间 48；步骤行 gap 32，每步 gap 18。 */
.lu-ritual { background: var(--bg-inverse); }
.lu-ritual__inner { padding-block: 96px; }

.lu-ritual__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lu-ritual__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  letter-spacing: var(--ls-tight);
  color: #F5EDE3;                 /* 设计稿 6:180 实测 */
}
.lu-ritual__lede {
  max-width: 660px;
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: 24px;
  color: #A9B8A6;                 /* 设计稿 6:181 实测 */
}

.lu-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 48px;
}
.lu-step { display: flex; flex-direction: column; gap: 18px; }
.lu-step__media {
  aspect-ratio: var(--ratio-card);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.lu-step__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.lu-step__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.lu-step__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.lu-step__num {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 13px;
  color: var(--fg-accent-inverse);
}
.lu-step__meta .lu-eyebrow { color: #A9B8A6; }
.lu-step__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 22px;
  line-height: 1.3;
  color: #F5EDE3;
}
.lu-step__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: #A9B8A6;
}
.lu-ritual__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 48px 0 0;
  font-size: var(--fs-body-sm);
  color: #A9B8A6;
}
.lu-ritual__note .lu-icon { color: var(--fg-accent-inverse); flex: none; }

@media (max-width: 1023px) {
  .lu-steps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}

/* --------------------------------------------------------------------------
   7. 订阅专区 —— 左权益右卡片
   --------------------------------------------------------------------------
   设计稿 6:210：整段底色 #FBF7F1（= --c-card，比纸深一档），
   内衬 padding 100 / 100、gap 80；右卡白底、宽 430、圆角 12。 */
.lu-club { background: var(--c-card); }
.lu-club__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 80px;
  align-items: start;
  padding-block: 100px;
}
.lu-club__lede {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.lu-club__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}
.lu-club__sub {
  max-width: 520px;
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: 24px;
  color: var(--fg-body);
}
.lu-club__perks {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lu-club__perks li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}
/* 权益前的勾：琥珀描边小圆（设计稿 6:218） */
.lu-club__perk-icon {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  margin-top: 3px;
  border: var(--bw-hairline) solid var(--c-amber);
  border-radius: var(--r-full);
  color: var(--c-amber);
}
.lu-club__perks strong {
  display: block;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
}
.lu-club__perks span span {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-body-sm);
  color: var(--fg-body);
}

/* 订阅卡 */
.lu-club__card {
  background: #FFFFFF;
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.lu-club__card-head { padding: 28px 28px 0; }
.lu-club__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 24px;
  line-height: 1.25;
  color: var(--fg-primary);
}
.lu-club__card-sub {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-body-sm);
  color: var(--fg-body);
}
.lu-club__options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 20px 28px 24px;
}
.lu-club__option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 13px var(--sp-4);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
}
.lu-club__option small {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  color: var(--fg-body);
}
.lu-club__option em {
  flex: none;
  margin-left: auto;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-xs);
  background: var(--c-ink);
  font-size: var(--fs-badge);
  font-style: normal;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-badge);
  color: var(--c-on-ink);
}
.lu-club__option.is-active {
  border-color: var(--c-ink);
  background: var(--c-card);
}
.lu-club__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0;
  padding: 20px 28px;
  border-top: var(--bw-hairline) solid var(--border-soft);
}
.lu-club__price strong {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-price-xl);
  line-height: var(--lh-price-xl);
  color: var(--fg-primary);
}
.lu-club__price span {
  font-size: var(--fs-label);
  color: var(--fg-body);
}
.lu-club__card-cta { padding: 0 28px; }
.lu-club__card-cta .lu-btn { width: 100%; }
.lu-club__card-note {
  margin: 0;
  padding: 14px 28px 24px;
  font-size: var(--fs-label);
  color: var(--fg-body);
}

@media (max-width: 1023px) {
  .lu-club__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
}

/* --------------------------------------------------------------------------
   8. 评价与媒体
   --------------------------------------------------------------------------
   设计稿 6:280：padding 96 / 96；评价卡在 components.css；
   底部 hairline 之后是 AS SEEN IN 字标行（ Fraunces 19 宽字距 ）。 */
.lu-home .lu-reviews { padding-block: 96px; }
.lu-press {
  margin-top: 48px;
  padding-top: 40px;
  border-top: var(--bw-hairline) solid var(--border-default);
  text-align: center;
}
.lu-press__label {
  display: block;
  font-family: var(--font-eyebrow);
  font-weight: var(--fw-medium);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-eyebrow-sm);
  text-transform: uppercase;
  color: var(--fg-body);
}
.lu-press__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6) 56px;
  margin-top: var(--sp-6);
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: var(--ls-wide);
  color: var(--fg-body);
}

/* --------------------------------------------------------------------------
   9. Journal
   --------------------------------------------------------------------------
   设计稿 6:338：padding 96 / 96。文章卡与网格在 components.css。 */
.lu-home .lu-journal { padding-block: 96px; }

/* —— 邮件订阅带的样式已移到 components.css 第 9 节：
   它现在是首页 / 文章页 / 归档页共用的组件，留在只给首页加载的
   home.css 里会让另外两页拿到「没有样式的深色区块」。 */

/* --------------------------------------------------------------------------
   11. main 外距清零
   --------------------------------------------------------------------------
   Blocksy 的页面容器自带上下留白，而首页每一段都自己管 padding。
   不清零就会「段距 = 段距 + 容器距」双重累加，第一段离头部老远。 */
.lu-home { display: block; }