/* ============================================================================
   可驾官网 · 首页桌面端首屏优化（styles-home.css）
   只有 index.html 引用；styles.css 保持全站共用、一个字节未改。

   ⚠ 本文件分两段：
     · ≥801px：桌面/平板使用整幅大图首屏；
     · ≤800px：手机使用专用版式（入口清单、深色卡片等）。

   桌面端做法：沿用原 HTML 结构（.hero-visual > .road-card > .road-card-image），
   仅用样式把右侧小卡片「拉满」成整幅照片，再叠一层从左到右的浅米色渐变，
   让深色文字保持可读；页面整体仍是浅色，不使用深色/黑色压图。
   ============================================================================ */

@media(min-width:801px){

  /* ---- 首屏容器：整屏照片 + 左侧浅色渐变 ---- */
  .hero-home{
    position:relative;
    display:flex;
    align-items:center;
    min-height:min(86vh,740px);
    padding:0;
    overflow:hidden;
    isolation:isolate;
    background:#eef2ee;
  }
  /* 原首屏右上角的英文小字与整幅照片冲突，桌面端隐藏 */
  .hero-home:before{display:none}

  /* ---- 文案层 ---- */
  .hero-home .hero-copy{
    position:relative;
    z-index:3;
    /* 内边距随视口增长，max-width 同步加上这段；
       并用 min() 让文案在中等宽度屏幕收窄，避免文字压到照片右半部 */
    max-width:calc(min(600px,46vw) + 9vw);
    padding:clamp(64px,8vw,104px) 0 clamp(58px,7vw,92px) 9vw;
  }
  .hero-home .lead{max-width:520px}

  /* ---- 视觉层：小卡片变成铺满的整幅照片 ---- */
  .hero-home .hero-visual{
    position:absolute;
    inset:0;
    z-index:0;
    margin:0;
  }
  /* 干掉原来那圈错位描边，换成浅色蒙层（z-index:1，低于照片上的两张小卡） */
  .hero-home .hero-visual:after{
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    border:0;
    border-radius:0;
    background:linear-gradient(100deg,
      #faf9f4 0%,
      #faf9f4 28%,
      rgba(250,249,244,.97) 40%,
      rgba(250,249,244,.87) 50%,
      rgba(250,249,244,.52) 62%,
      rgba(250,249,244,.10) 78%,
      rgba(250,249,244,0) 100%);
  }
  .hero-home .road-card{
    position:absolute;
    inset:0;
    height:auto;
    min-height:0;
    aspect-ratio:auto;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:#dfe9e4;
    animation:none;
  }
  .hero-home .road-card-image{position:absolute;inset:0}
  .hero-home .road-card-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:64% 44%;
  }
  /* 原来的照片自带一层深色渐变，这里去掉，统一用上面的浅色蒙层 */
  .hero-home .road-card-image:after{background:none}

  /* ---- 两张小卡：标语落在照片下半部，练习目标移到右上角 ---- */
  .hero-home .hero-image-tag{
    left:62%;
    /* Keep the whole caption above both the facts ribbon and a short viewport edge.
       136px = the 76px navigation plus a 60px visible bottom clearance. */
    top:min(calc(100% - 110px),calc(100vh - 136px));
    top:min(calc(100% - 110px),calc(100svh - 136px));
    bottom:auto;
    transform:translateY(-100%);
    z-index:2;
    text-shadow:0 2px 22px rgba(8,30,26,.92);
  }
  .hero-home .hero-image-tag b{font-size:25px;margin-top:8px;line-height:1.36}
  .hero-home .floating-note{
    right:clamp(26px,3.4vw,54px);
    left:auto;
    top:clamp(26px,4vh,44px);
    bottom:auto;
    z-index:2;
    background:#fffffff2;
    box-shadow:0 10px 28px rgba(24,54,48,.22);
  }
}

/* ============================================================================
   手机端优化（≤800px）
   解决三处观感问题：
   1) 「你更接近哪一种」入口区原来 2+1 落单、行距过大 → 改成带分隔线的竖排清单；
   2) 深色宣言区上下与浅色区块硬切、过于割裂 → 改成带圆角的深色卡片，并修正标题孤字；
   3) 首屏节奏偏松、图片卡片外有一圈错位描边 → 收紧间距、去掉描边、放大照片。
   ============================================================================ */
@media(max-width:800px){

  /* ---- 1) 首屏 ---- */
  .hero-home{padding-top:44px;padding-bottom:40px}
  .hero-home .hero-actions{gap:10px;margin:26px 0 0}
  .hero-home .hero-visual{margin-top:26px}
  /* 去掉卡片外那圈错位描边 */
  .hero-home .hero-visual:after{display:none}
  .hero-home .road-card{
    aspect-ratio:4 / 3.4;
    border:0;
    border-radius:18px;
    box-shadow:0 16px 34px rgba(24,70,58,.16);
  }
  .hero-home .hero-image-tag{left:18px;top:18px}
  .hero-home .hero-image-tag b{font-size:17px;line-height:1.32}
  .hero-home .floating-note{right:12px;bottom:12px;padding:9px 11px;border-radius:10px}
  .hero-home .floating-note b{font-size:11px}
  .hero-home .floating-note small{font-size:9.5px}

  /* ---- 2) 入口区：3 段带分隔线的清单，不再 2+1 落单 ---- */
  .trust-strip{display:block;padding:18px 7vw 6px;background:#fbfaf6}
  .trust-strip>span{
    display:block;
    font:600 10.5px 'DM Mono',monospace;
    letter-spacing:.14em;
    color:#7d8f8a;
    text-transform:uppercase;
  }
  .trust-strip div{display:grid;grid-template-columns:1fr;gap:0;margin-top:6px}
  .trust-strip div a{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:0;
    padding:14px 0;
    border-top:1px solid var(--line);
    font-size:15.5px;
    font-weight:700;
    letter-spacing:-.01em;
  }
  .trust-strip div a:last-child{border-bottom:1px solid var(--line)}
  .trust-strip div a i{
    order:-1;
    width:24px;
    margin:0;
    font:600 10.5px 'DM Mono',monospace;
    font-style:normal;
    color:var(--teal);
  }
  .trust-strip div a span{margin-left:auto;color:#9fb3ad;font-size:14px}

  /* ---- 3) 深色宣言区：改成圆角深色卡片，上下不再硬切 ---- */
  .manifesto{
    margin:26px 14px 0;
    padding:48px 24px 42px;
    border-radius:22px;
    background:linear-gradient(168deg,#1a3330 0%,#122522 100%);
  }
  /* 装饰圆环收进卡片内，避免溢出圆角 */
  .manifesto:before{width:60vw;height:60vw;right:-24vw;top:-30vw;border-color:rgba(153,224,210,.14);box-shadow:none}
  .manifesto-top{display:block;font-size:9.5px;line-height:1.9;letter-spacing:.1em}
  .manifesto-top span{display:block}
  .manifesto-body{display:block;margin-top:26px}
  /* 8 字整行，避免最后只剩「始。」 */
  .manifesto h2{font-size:clamp(29px,8.9vw,38px);line-height:1.22;letter-spacing:-.03em}
  .manifesto-body p{margin:20px 0 0;font-size:13.5px;line-height:1.95}
  .manifesto-track{
    margin:32px 0 0;
    padding-top:14px;
    gap:10px;
    font-size:12px;
    justify-content:space-between;
  }
  .manifesto-track i{color:#5d8c84}

  /* ---- 4) 与下方浅色区块的衔接：给深色卡片一点呼吸，浅色区收紧 ---- */
  .slogan-wall{padding:52px 7vw 60px}
  .slogan-wall h2{font-size:clamp(28px,8.6vw,36px);line-height:1.22}
  .section{padding-top:66px;padding-bottom:66px}
  .app-showcase{padding-top:62px;padding-bottom:62px}
  .cities{padding-bottom:66px}
  .faq{padding-top:64px;padding-bottom:72px}
}

/* 手机端：旧版两处标题在窄屏会只剩 1–2 个字，收紧字号让长句整行 */
@media(max-width:800px){
  #coaches .coach-copy h2{font-size:clamp(24px,7.6vw,32px);line-height:1.28;letter-spacing:-.05em}
  .after-class h2{font-size:clamp(24px,7.6vw,32px);line-height:1.28;letter-spacing:-.05em}
}

/* 320px 级别的小屏：标题再收一档，避免只剩两个字 */
@media(max-width:360px){
  .hero-home h1{font-size:clamp(36px,11.4vw,46px)}
  .download h2{font-size:clamp(26px,8.2vw,31px)}
}

/* ============================================================================
   首页「我们的特色」板块（2026-10-18）
   把原来讲流程/口号的位置换成可直接核对的能力与优势
   ============================================================================ */
.hp-values{background:var(--cream);padding:clamp(64px,7vw,96px) 6vw}
.hp-values .hp-head{max-width:1500px;margin:0 auto}
.hp-values .hp-head h2{font-family:inherit;font-weight:800;letter-spacing:-.05em;font-size:clamp(30px,3.6vw,46px);line-height:1.2;margin:16px 0 0;color:var(--ink)}
.hp-values .hp-head h2 em{font-style:normal;color:var(--teal)}
.hp-values .hp-head>p{margin:0 0 6px;color:var(--muted);font-size:14.5px;line-height:1.95;max-width:520px}
.hp-value-grid{max-width:1500px;margin:clamp(32px,3.6vw,48px) auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hp-value-grid article{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:26px 24px 28px;box-shadow:0 10px 26px rgba(24,70,58,.06);
  display:flex;flex-direction:column;
}
.hp-value-grid span{font:600 11px 'DM Mono',monospace;color:var(--warm);letter-spacing:.08em}
.hp-value-grid h3{margin:26px 0 12px;font-size:18px;line-height:1.35;letter-spacing:-.03em}
.hp-value-grid p{margin:0;color:var(--muted);font-size:13px;line-height:1.85}
@media(max-width:1100px){.hp-value-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){
  .hp-values{padding:48px 7vw 52px}
  .hp-values .hp-head h2{font-size:clamp(26px,7.8vw,34px)}
  .hp-value-grid{grid-template-columns:1fr;gap:12px;margin-top:28px}
  .hp-value-grid article{padding:22px 20px}
  .hp-value-grid h3{margin:18px 0 10px;font-size:17px}
}

/* 教练区标题：避免最后一行只剩「开。」 */
.coaches .coach-copy h2{font-size:clamp(34px,3.7vw,53px);line-height:1.2;letter-spacing:-.05em}
@media(min-width:801px){
  .coaches .coach-copy{padding:88px 8vw 76px 6vw}
}

/* 首屏底部渐隐到米白，让事实横条压在图上有过渡 */
.hero-home{position:relative}
.hero-home:after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:170px;
  background:linear-gradient(180deg,rgba(248,247,242,0),var(--cream));
  pointer-events:none;z-index:1;
}
@media(max-width:800px){.hero-home:after{height:110px}}

/* ============================================================================
   2026-10-18 首屏冲击力 + 质感升级
   目标：更接近整屏大图的视觉压迫感，但保持浅色底、不用黑色压图
   ============================================================================ */
@media(min-width:801px){
  .hero-home{
    min-height:min(90vh,800px);
    background:#e9efea;
  }
  /* 收窄米色蒙层：让右侧照片露出更多，左侧仍保证文字可读 */
  .hero-home .hero-visual:after{
    background:linear-gradient(100deg,
      #f8f7f2 0%,
      #f8f7f2 22%,
      rgba(248,247,242,.96) 33%,
      rgba(248,247,242,.82) 45%,
      rgba(248,247,242,.46) 58%,
      rgba(248,247,242,.08) 74%,
      rgba(248,247,242,0) 100%);
  }
  .hero-home .road-card-image img{
    object-position:60% 42%;
    filter:saturate(1.06) contrast(1.04) brightness(1.01);
  }
  /* 照片加一层细网格，靠近参考站那种设计感纹理 */
  .hero-home .hero-visual:before{
    content:'';
    position:absolute;inset:0;z-index:2;pointer-events:none;
    background-image:
      linear-gradient(rgba(20,60,52,.055) 1px,transparent 1px),
      linear-gradient(90deg,rgba(20,60,52,.055) 1px,transparent 1px);
    background-size:72px 72px;
    -webkit-mask-image:linear-gradient(100deg,#000 0%,#000 30%,rgba(0,0,0,.35) 52%,transparent 72%);
    mask-image:linear-gradient(100deg,#000 0%,#000 30%,rgba(0,0,0,.35) 52%,transparent 72%);
  }
  .hero-home .hero-copy{
    padding:clamp(76px,9vw,120px) 0 clamp(96px,10vw,132px) 9vw;
  }
  .hero-home h1{
    font-size:clamp(56px,6.3vw,92px);
    line-height:1.06;
    letter-spacing:.002em;
  }
  .hero-home .lead{
    font-size:18px;
    line-height:1.85;
    max-width:560px;
    color:#4e5f5a;
  }
  .hero-home .hero-actions{margin:36px 0 0}
  .hero-home .button{padding:18px 26px;font-size:15px;border-radius:14px}
  .hero-home .button.primary{box-shadow:0 14px 34px rgba(15,111,102,.28)}
  .hero-home .trust-chips{margin-top:30px;gap:10px}
  .hero-home .trust-chips span{
    background:rgba(255,255,255,.72);
    border-color:rgba(20,60,52,.16);
    font-size:12.5px;padding:8px 13px;
    color:#33433f;
  }
}

/* ---------- 质感：更深的墨色、更克制的线条、更细的投影 ---------- */
:root{
  --ink:#0e1b18;
  --muted:#5c6b67;
  --teal:#0e7168;
  --line:#d9e4df;
  --stone:#f2f5f2;
}
.home-sec--dark{background:linear-gradient(168deg,#132a26 0%,#0d1d1a 100%)}
.home-sec--mint{background:linear-gradient(180deg,#eef5f0,#e9f1ec)}
.eyebrow:before{background:linear-gradient(90deg,var(--warm),var(--teal))}
.hp-values,
.home-sec--cream{background:linear-gradient(180deg,#f8f7f2,#f6f5ef)}
.fact-ribbon{box-shadow:0 22px 48px -18px rgba(17,60,52,.20),0 1px 0 rgba(255,255,255,.9) inset}
.fact-ribbon strong{color:#0b1714}
.hp-value-grid article,.concern-grid article,.tier-cards article,.teach-grid article{
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 16px 36px -22px rgba(17,60,52,.28);
}
.app-showcase .showcase-cards article{box-shadow:0 18px 44px -24px rgba(17,60,52,.32)}