/* ================================================================
   mhpn.cn · 驻马店九县城市服务页 私有样式（pages-chengshi2.css）
   本分片页面：suiping / xiping / shangcai / runan / pingyu /
                xincai / zhengyang / queshan / biyang
   布局系统（每页只组合其中一部分，保证 9 页不同构）：
     c2-hero      全屏城市大图横幅
     c2-strip     半幅横幅 + 底部信息条
     c2-duo       图文双栏（正反两向）
     c2-mix       12 栏错落宫格
     c2-cards3/4  三列产业卡 / 四小卡
     c2-stats     大数字信息行
     c2-faq       常见问答
     c2-formwrap  左说明右预约表单
     c2-cta       墨黑行动条
     c2-related   相关推荐链接
   ================================================================ */

/* ============ 页首面包屑容器 ============ */
.c2-crumbwrap{ padding:18px 0 0; }

/* ============ A. 全屏城市大图横幅 ============ */
.c2-hero{
  position:relative;
  min-height:min(76vh,620px);
  display:flex; align-items:flex-end;
  color:var(--paper-3);
  overflow:hidden;
}
.c2-hero__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.c2-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(25,21,16,.18) 0%, rgba(25,21,16,.42) 48%, rgba(25,21,16,.82) 100%);
}
.c2-hero__inner{ position:relative; z-index:1; padding:56px 0 66px; width:100%; }
.c2-hero__kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:.36em; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px;
}
.c2-hero__kicker::before{ content:""; width:28px; height:1px; background:var(--gold); }
.c2-hero h1{
  font-size:clamp(28px,4.4vw,52px); line-height:1.25;
  color:#fff; max-width:16em;
}
.c2-hero p{
  margin-top:18px; max-width:660px;
  color:rgba(244,238,226,.86); font-size:16px;
}
.c2-hero__actions{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; }
.c2-hero__tel{
  margin-top:20px; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-serif); font-size:17px; color:var(--gold); letter-spacing:.04em;
}
.c2-hero__tel svg{ width:18px; height:18px; }
.c2-hero__tel:hover{ color:#fff; }

/* ============ B. 半幅横幅 + 信息条（与全屏 hero 区分） ============ */
.c2-strip{ position:relative; height:380px; overflow:hidden; }
.c2-strip__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.c2-strip::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(25,21,16,.72) 0%, rgba(25,21,16,.38) 55%, rgba(25,21,16,.12) 100%);
}
.c2-strip__inner{
  position:relative; z-index:1; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  color:var(--paper-3);
}
.c2-strip__kicker{
  font-size:12.5px; letter-spacing:.36em; text-transform:uppercase;
  color:var(--gold); margin-bottom:12px;
}
.c2-strip h1{ font-size:clamp(26px,3.6vw,42px); color:#fff; max-width:15em; }
.c2-strip p{ margin-top:14px; max-width:600px; color:rgba(244,238,226,.88); }
.c2-strip__bar{
  background:var(--ink); color:rgba(244,238,226,.78);
}
.c2-strip__bar .container{
  display:flex; flex-wrap:wrap; gap:12px 34px;
  padding:16px 0; font-size:13.5px; letter-spacing:.04em;
}
.c2-strip__bar b{ color:var(--gold); font-family:var(--font-serif); font-weight:700; }

/* ============ C. 图文双栏 ============ */
.c2-duo{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:54px; align-items:center;
}
.c2-duo--rev{ grid-template-columns:1fr 1.05fr; }
.c2-duo--rev .c2-duo__media{ order:-1; }
.c2-duo__media img{
  width:100%; border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.c2-duo__media figcaption{
  margin-top:10px; font-size:12.5px; letter-spacing:.1em; color:var(--brown-3);
}
.c2-duo h2{ font-size:clamp(22px,2.6vw,32px); margin-bottom:16px; line-height:1.4; }
.c2-duo p{ color:var(--ink-2); margin-bottom:14px; font-size:15.5px; }
.c2-duo .btn{ margin-top:8px; }

/* ============ D. 12 栏错落宫格 ============ */
.c2-mix{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:22px; align-items:start;
}
.c2-mix__item{
  background:var(--paper-3); border:1px solid var(--line-soft);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition), box-shadow var(--transition);
}
.c2-mix__item:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.c2-mix__item img{ width:100%; height:230px; object-fit:cover; }
.c2-mix__body{ padding:20px 22px 22px; }
.c2-mix__body h3{ font-size:17px; margin-bottom:8px; }
.c2-mix__body p{ font-size:14px; color:var(--ink-2); }
.c2-mix .m-a{ grid-column:span 7; }
.c2-mix .m-b{ grid-column:span 5; margin-top:52px; }
.c2-mix .m-c{ grid-column:span 5; }
.c2-mix .m-d{ grid-column:span 7; margin-top:-34px; }

/* ============ E. 三列产业卡片 ============ */
.c2-cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.c2-pcard{
  background:var(--paper-3); border:1px solid var(--line-soft);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition), box-shadow var(--transition);
}
.c2-pcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.c2-pcard img{ width:100%; height:196px; object-fit:cover; }
.c2-pcard__body{ padding:22px 24px 24px; }
.c2-pcard__body h3{ font-size:17.5px; margin-bottom:9px; }
.c2-pcard__body p{ font-size:14px; color:var(--ink-2); }

/* ============ F. 四小卡 ============ */
.c2-cards4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.c2-minicard{
  background:var(--paper-3); border:1px solid var(--line-soft);
  border-radius:var(--radius-lg); padding:22px 20px;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.c2-minicard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-sm); border-color:var(--gold); }
.c2-minicard .no{
  font-family:var(--font-serif); font-size:26px; color:var(--gold); line-height:1;
}
.c2-minicard h4{ font-size:15.5px; margin:12px 0 8px; }
.c2-minicard p{ font-size:13.5px; color:var(--ink-2); }

/* ============ G. 大数字信息行 ============ */
.c2-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  background:var(--paper-2); border:1px solid var(--line-soft);
  border-radius:var(--radius-lg); padding:38px 20px;
}
.c2-stats .stat__num{ color:var(--brown); }

/* ============ H. 常见问答 ============ */
.c2-faq{ max-width:880px; margin-inline:auto; }
.c2-faq__item{ border-bottom:1px solid var(--line); padding:20px 0; }
.c2-faq__item:first-child{ border-top:1px solid var(--line); }
.c2-faq__q{
  display:flex; gap:12px; align-items:flex-start;
  font-family:var(--font-serif); font-size:17px; color:var(--ink);
}
.c2-faq__q::before{
  content:""; flex:none; width:9px; height:9px; margin-top:9px;
  background:var(--gold); transform:rotate(45deg);
}
.c2-faq__a{ margin:9px 0 0 21px; font-size:14.5px; color:var(--ink-2); }

/* ============ I. 左说明 + 右预约表单 ============ */
.c2-formwrap{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:48px; align-items:start;
}
.c2-formintro h2{ font-size:clamp(22px,2.6vw,32px); margin-bottom:16px; }
.c2-formintro p{ color:var(--ink-2); margin-bottom:14px; font-size:15px; }
.c2-formintro .notice{ margin-top:18px; }
.c2-formbox{
  background:var(--paper-3); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:32px;
  box-shadow:var(--shadow-sm);
}
.c2-formbox h3{ font-size:19px; margin-bottom:6px; }
.c2-formbox .form-note{ margin-top:4px; margin-bottom:16px; display:block; }

/* ============ J. 墨黑行动条 ============ */
.c2-cta{ background:var(--ink); color:var(--paper-3); }
.c2-cta__inner{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:22px;
}
.c2-cta h2{ font-size:clamp(22px,2.8vw,32px); color:var(--paper-3); }
.c2-cta p{ margin-top:10px; color:rgba(244,238,226,.72); font-size:15px; }
.c2-cta .btn--light{ flex:none; }

/* ============ K. 相关推荐 ============ */
.c2-related{ border-top:1px solid var(--line); }
.c2-related__title{
  font-family:var(--font-serif); font-size:16px; letter-spacing:.2em; color:var(--brown);
}
.c2-related__links{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; }
.c2-related__links a{
  padding:7px 16px; border:1px solid var(--line); border-radius:999px;
  font-size:13px; color:var(--brown-2); background:var(--paper-3);
  transition:border-color var(--transition), color var(--transition), transform var(--transition);
}
.c2-related__links a:hover{ border-color:var(--gold); color:var(--brown); transform:translateY(-2px); }

/* ============ L. 通用小工具 ============ */
.c2-prose p{ color:var(--ink-2); margin-bottom:14px; font-size:15.5px; }
.c2-prose--top{ margin-top:20px; }
.c2-tblwrap{ overflow-x:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.c2-tbl .col-w16{ width:16%; } .c2-tbl .col-w30{ width:30%; } .c2-tbl .col-w22{ width:22%; }

/* ============ 响应式 ============ */
@media (max-width:1200px){
  .c2-mix .m-a,.c2-mix .m-b,.c2-mix .m-c,.c2-mix .m-d{ grid-column:span 12; margin-top:0; }
  .c2-cards4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:960px){
  .c2-hero{ min-height:460px; }
  .c2-strip{ height:300px; }
  .c2-duo,.c2-duo--rev{ grid-template-columns:1fr; gap:30px; }
  .c2-duo--rev .c2-duo__media{ order:0; }
  .c2-cards3{ grid-template-columns:1fr; }
  .c2-stats{ grid-template-columns:repeat(2,1fr); gap:26px 16px; }
  .c2-formwrap{ grid-template-columns:1fr; gap:30px; }
  .c2-cta__inner{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:640px){
  .c2-cards4{ grid-template-columns:1fr; }
  .c2-stats{ grid-template-columns:1fr 1fr; padding:26px 18px; }
  .c2-formbox{ padding:24px 20px; }
  .c2-strip{ height:260px; }
  .c2-checklist{ grid-template-columns:1fr !important; }
}

/* ============ M. 追加模块（本轮回填） ============ */
/* 条件/材料 双栏清单 */
.c2-checklist{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.c2-check{
  background:var(--paper-3); border:1px solid var(--line-soft);
  border-radius:var(--radius-lg); padding:26px 28px;
}
.c2-check h3{
  font-size:18px; margin-bottom:16px;
  display:flex; align-items:center; gap:10px;
}
.c2-check h3::before{
  content:""; width:10px; height:10px; background:var(--gold);
  transform:rotate(45deg);
}
.c2-check li{
  display:flex; gap:10px; padding:9px 0;
  border-bottom:1px dashed var(--line-soft);
  font-size:14.5px; color:var(--ink-2);
}
.c2-check li:last-child{ border-bottom:0; }
.c2-check li::before{
  content:""; flex:none; width:16px; height:16px; margin-top:3px;
  border:1.5px solid var(--gold); border-radius:50%;
  background:
    linear-gradient(45deg, transparent 40%, var(--gold) 40%, var(--gold) 60%, transparent 60%) no-repeat center/9px 2px;
}
.c2-check li b{ color:var(--ink); font-weight:700; }

/* 批次节奏横排四步（与 steps 区分：圆点+连线） */
.c2-rhythm{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  position:relative;
}
.c2-rhythm__node{ position:relative; padding-top:30px; }
.c2-rhythm__node::before{
  content:""; position:absolute; top:8px; left:0; width:14px; height:14px;
  background:var(--gold); transform:rotate(45deg);
}
.c2-rhythm__node::after{
  content:""; position:absolute; top:14px; left:22px; right:-18px; height:1px;
  background:var(--line);
}
.c2-rhythm__node:last-child::after{ display:none; }
.c2-rhythm__node h4{ font-size:15.5px; margin-bottom:6px; }
.c2-rhythm__node p{ font-size:13.5px; color:var(--ink-2); }

/* 复审提醒横幅 */
.c2-review{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--ink); color:var(--paper-3);
  border-radius:var(--radius-lg); padding:26px 28px;
}
.c2-review .c2-review__icon{
  flex:none; width:38px; height:38px; color:var(--gold);
}
.c2-review h4{ font-size:17px; color:var(--paper-3); margin-bottom:8px; }
.c2-review p{ font-size:14px; color:rgba(244,238,226,.78); }
.c2-review--top{ margin-top:20px; }

/* 两列 FAQ（复用 c2-faq 视觉，压窄） */
@media (max-width:960px){
  .c2-checklist{ grid-template-columns:1fr; }
  .c2-rhythm{ grid-template-columns:1fr 1fr; gap:26px 18px; }
  .c2-rhythm__node::after{ display:none; }
}