/* 九清国内站 · 工程案例 /cases/
   ⚠️ 铁律：本文件是这一页 CSS 的唯一副本。不要在页面正文、页脚 widget 或 Customizer 再放一份。
      版本号由 joeqing-cases.php 用 filemtime 生成，改完即时生效，不吃缓存。

   ── 规格：和 about.css 同一套（tesla.cn/about 实测，1440 视口，2026-08-28）──
     H1 40/500/行高48/白，居中压在首屏大图上；H2 28/500/行高36/#171A20，居中
     首屏高 85svh（tesla 首屏 = 85% 视口高，不铺满）
   ⚠️ 不是产品详情页那套（product.css：H1 56 / H2 48）。tesla 自己两套值，别互相抄。
   ⚠️ 标题一律 500 字重，不是粗体。

   ⚠️ 类名前缀是 jqc2-，不是 jqc- —— jqc- 已经被 /contact/ 的 contact.css 占用了。
      两页同时被 footer.css 之后加载，前缀撞了就会互相污染。加新页前先 grep 一遍前缀。
*/

.jqc2{color:#393C41;font-size:16px;line-height:1.75}
.jqc2 *{box-sizing:border-box}

.jqc2-page .site-content .content-area{margin-top:0!important;margin-bottom:0!important}

.jqc2-bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.jqc2-mid{width:100%;max-width:1040px;margin-inline:auto;padding-inline:var(--jq-gutter,28px);text-align:center}
.jqc2-wide{max-width:var(--jq-shell,1344px)}

/* ── 首屏 ─────────────────────────────────────────────────────────── */
.jqc2-hero{
  position:relative;overflow:hidden;background:#171a20;
  height:clamp(400px,72svh,760px);   /* 索引页比关于页矮一档：下面是卡片列表，早点露出来 */
  display:flex;align-items:center;justify-content:center;
}
.jqc2-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.jqc2-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.22) 46%,rgba(0,0,0,.5) 100%);
}
.jqc2-hero-in{position:relative;z-index:2;text-align:center;padding-inline:var(--jq-gutter,28px)}
.jqc2-h1{
  font-size:clamp(28px,2.8vw,40px);line-height:1.2;font-weight:500;color:#fff;
  margin:0 0 10px!important;letter-spacing:-.01em;
}
.jqc2-hero-sub{margin:0!important;font-size:clamp(15px,1.4vw,18px);line-height:1.5;color:rgba(255,255,255,.9)}

/* ── 区块 ─────────────────────────────────────────────────────────── */
.jqc2-sec{padding:clamp(56px,7vw,104px) 0}
.jqc2-h2{
  font-size:clamp(22px,2.2vw,28px);line-height:1.28;font-weight:500;color:#171a20;
  margin:0 0 14px!important;letter-spacing:-.01em;
}
.jqc2-lead{margin:0 auto!important;max-width:56ch;font-size:clamp(15px,1.4vw,18px);line-height:1.6;color:#5C5E62}

/* ── 案例网格：8 个，桌面四列（两行整齐），中屏两列 ────────────────── */
.jqc2-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.2vw,32px);
  margin-top:clamp(36px,4vw,56px);text-align:left;
}
.jqc2-card{min-width:0}
/* 卡片整块可点。用 <a> 包住整张卡而不是只包标题：手指在手机上点图更自然。
   ⚠️ a 默认是 inline，必须转成 block，否则里面的图和文字会挤成一行。
   ⚠️ **图片不要 hover 放大**。站长 2026-08-20 实测 tesla 的图卡「图片和产品名都没有
      hover 效果」，导航下拉面板那次已经因为 scale(1.04) 被打回一次。这里只留标题变色。 */
.jqc2-card-link{display:block;text-decoration:none!important;color:inherit!important}
.jqc2-card-link .jqc2-card-t{transition:color .2s ease}
.jqc2-card-link:hover .jqc2-card-t{color:#3E6AE1}
.jqc2-card-media{aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:#f4f4f4;margin-bottom:14px}
.jqc2-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.jqc2-card-t{margin:0 0 6px!important;font-size:17px;font-weight:500;line-height:1.45;color:#171a20}
.jqc2-card-d{margin:0!important;font-size:14px;line-height:1.75;color:#5C5E62}

/* ── 详情页 ──────────────────────────────────────────────────────────
   三段式（问题 → 拆成接口 → 交付结果），版式沿用老站的叙事骨架。 */
.jqc2-eyebrow{
  margin:0 0 8px!important;font-size:13px;font-weight:500;line-height:1.4;
  letter-spacing:.08em;color:rgba(255,255,255,.78);
}
.jqc2-story{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.2vw,48px);
  margin-top:clamp(8px,1vw,16px);text-align:left;
}
.jqc2-story-item{min-width:0;padding-top:20px;border-top:2px solid #171a20}
.jqc2-story-n{
  margin:0 0 10px!important;font-size:13px;font-weight:500;line-height:1;
  letter-spacing:.06em;color:#8a8d92;
}
.jqc2-story-t{
  margin:0 0 10px!important;font-size:clamp(17px,1.5vw,20px);font-weight:500;
  line-height:1.45;color:#171a20;letter-spacing:-.01em;
}
.jqc2-story-d{margin:0!important;font-size:15px;line-height:1.75;color:#5C5E62}

/* ── 详情页：导语 / 概览 / 阅读列 / FAQ ──────────────────────────────
   正文（背景、FAQ）用 680 阅读宽 —— 和法务页、单篇文章同一套，中文长段落这个宽度最舒服。
   概览和工程要点用整幅宽度，它们是信息块不是长文。 */
.jqc2-sec-tight{padding:clamp(40px,4.5vw,64px) 0 0}
/* 「项目概览」是一块紧凑的信息表，不是一屏内容 —— 用整块 104px 的上下留白会在
   下面留一个很大的空洞（7 条事实在四列网格里还空着第 8 格）。这里单独收窄。 */
.jqc2-sec-facts{padding:clamp(40px,4.5vw,64px) 0}
.jqc2-read{max-width:680px;text-align:left}
.jqc2-stand{
  margin:0 auto!important;max-width:56ch;
  font-size:clamp(16px,1.6vw,20px);line-height:1.7;color:#171a20;
}
.jqc2-h2-left{text-align:left}
.jqc2-p{margin:0 0 16px!important;font-size:15px;line-height:1.85;color:#5C5E62}
.jqc2-p:last-child{margin-bottom:0!important}

/* 项目概览：定义列表，桌面四列 */
.jqc2-facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,32px);
  margin:clamp(28px,3vw,44px) 0 0!important;padding:0!important;text-align:left;
}
.jqc2-fact{min-width:0;padding-top:14px;border-top:1px solid #dcdfe3}
.jqc2-fact dt{margin:0 0 4px;font-size:13px;line-height:1.4;color:#8a8d92}
.jqc2-fact dd{margin:0;font-size:15px;font-weight:500;line-height:1.5;color:#171a20}

/* 工程要点：四列编号块 */
.jqc2-eng{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,2.8vw,40px);
  margin-top:clamp(28px,3vw,44px);text-align:left;
}
.jqc2-eng-item{min-width:0;padding-top:18px;border-top:2px solid #171a20}
.jqc2-eng-n{margin:0 0 8px!important;font-size:13px;font-weight:500;line-height:1;letter-spacing:.06em;color:#8a8d92}
.jqc2-eng-t{margin:0 0 8px!important;font-size:17px;font-weight:500;line-height:1.45;color:#171a20}
.jqc2-eng-d{margin:0!important;font-size:14px;line-height:1.8;color:#5C5E62}

/* 常见问题 */
.jqc2-faq{margin:clamp(24px,3vw,36px) 0 0!important;padding:0!important;text-align:left}
.jqc2-faq-item{padding:18px 0;border-top:1px solid #e3e5e8}
.jqc2-faq-item:first-child{border-top:0;padding-top:0}
.jqc2-faq dt{margin:0 0 6px;font-size:16px;font-weight:500;line-height:1.55;color:#171a20}
.jqc2-faq dd{margin:0;font-size:15px;line-height:1.85;color:#5C5E62}

/* ── 按钮：和全站同一套（200×40 / 圆角4 / 14px·500）───────────────── */
.jqc2-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:28px 0 0!important}
.jqc2-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:200px;height:40px;padding:0 24px;border:0;border-radius:4px;
  font-size:14px;font-weight:500;line-height:1;text-decoration:none!important;
  transition:background-color .2s ease,color .2s ease;
}
.jqc2-btn-primary{background:#3E6AE1;color:#fff!important}
.jqc2-btn-primary:hover{background:#3457b8;color:#fff!important}
.jqc2-btn-ghost{background:#fff;color:#171a20!important}
.jqc2-btn-ghost:hover{background:#e8e8e8;color:#171a20!important}
.jqc2-cta{background:#f4f4f4;padding:clamp(56px,7vw,104px) 0;text-align:center}

/* ── 手机 ─────────────────────────────────────────────────────────────
   站长的流量几乎全在手机，这段是主版本不是适配版。 */
@media(max-width:1100px){
  .jqc2-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1100px){
  .jqc2-facts{grid-template-columns:repeat(2,1fr)}
  .jqc2-eng{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .jqc2-hero{height:clamp(360px,62svh,560px)}
  .jqc2-sec{padding:48px 0}
  .jqc2-grid{gap:20px;margin-top:28px}
  .jqc2-story{grid-template-columns:1fr;gap:24px}
  .jqc2-cta{padding:48px 0}
}
@media(max-width:560px){
  .jqc2-grid{grid-template-columns:1fr}
  .jqc2-facts{grid-template-columns:1fr}
  .jqc2-eng{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .jqc2-btn,.jqc2-card-link .jqc2-card-t{transition:none}
}