/* =====================================================================
   许昌网站建设 · xuchang.css （T1 布局模板 · 变体）
   布局：左文右图引入(带浮动角标) / 产业图文交替行 / 竖排坑列表 /
        浅色服务半径带 / 双列FAQ / 卡片式城市互链
   ===================================================================== */

/* ---------- 横幅 ---------- */
.banner-city{background-image:url('../images/banner-city.jpg')}

/* ---------- 主诉求：左文右图 ---------- */
.xc-intro{background:var(--c-ice-2)}
.xc-intro-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.xc-intro-text h2{font-size:clamp(24px,2.8vw,34px);margin:14px 0 18px;line-height:1.35}
.xc-intro-text p{color:var(--c-text-2);margin-bottom:14px;font-size:15px}
.xc-intro-text a{color:var(--c-accent);font-weight:600}
.xc-intro-text .btn{margin-top:10px}
.xc-intro-media{position:relative}
.xc-intro-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);aspect-ratio:3/2;object-fit:cover;width:100%}
.xc-intro-media::after{content:"";position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--c-ice);border-radius:var(--radius-lg);z-index:-1}
.xc-intro-badge{
  position:absolute;right:-18px;bottom:-24px;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);
  padding:16px 22px;text-align:center;border-bottom:5px solid var(--c-accent);
}
.xc-intro-badge b{display:block;font-size:28px;font-weight:800;color:var(--c-primary);line-height:1.1}
.xc-intro-badge span{font-size:12.5px;color:var(--c-muted)}

/* ---------- 产业图文交替行 ---------- */
.xc-industry{background:#fff}
.xc-row{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;margin-bottom:80px}
.xc-row:last-child{margin-bottom:0}
.xc-row-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);aspect-ratio:3/2;object-fit:cover;width:100%}
.xc-row-flip .xc-row-media{order:2}
.xc-row-tag{
  display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:1.5px;color:#fff;
  background:linear-gradient(135deg,var(--c-primary),var(--c-accent));
  padding:6px 16px;border-radius:6px;margin-bottom:14px;
}
.xc-row-text h3{font-size:clamp(21px,2.4vw,27px);margin-bottom:14px;line-height:1.35}
.xc-row-text p{color:var(--c-text-2);margin-bottom:12px;font-size:15px}
.xc-row-text a{font-weight:700;color:var(--c-accent);font-size:15px}
.xc-row-text a:hover{letter-spacing:.5px}

/* ---------- 常踩坑：竖排行 ---------- */
.xc-pit{background:var(--c-ice-2)}
.xc-pit-list{max-width:920px;margin:0 auto;display:grid;gap:18px}
.xc-pit-item{
  display:grid;grid-template-columns:110px 1fr;gap:24px;align-items:center;
  background:#fff;border-radius:14px;padding:24px 28px;box-shadow:var(--shadow);
  border-left:4px solid transparent;transition:all var(--trans);
}
.xc-pit-item:hover{border-left-color:var(--c-accent);transform:translateX(6px)}
.xc-pit-item b{
  font-size:14.5px;font-weight:800;color:var(--c-accent);text-align:center;
  background:var(--c-ice);border-radius:8px;padding:10px 0;letter-spacing:1px;
}
.xc-pit-item h3{font-size:17.5px;margin-bottom:6px}
.xc-pit-item p{color:var(--c-text-2);font-size:14.5px}

/* ---------- 服务半径：浅色带 ---------- */
.xc-range{background:#fff}
.xc-range-inner{display:grid;grid-template-columns:1.25fr 1fr;gap:60px;align-items:center}
.xc-range-text h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:16px}
.xc-range-text p{color:var(--c-text-2);margin-bottom:14px}
.xc-range-call{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.xc-range-list{
  background:var(--c-ice-2);border:1px solid var(--c-line);border-radius:var(--radius-lg);
  padding:26px 30px;display:grid;gap:0;
}
.xc-range-list li{
  padding:13px 0;font-weight:600;color:var(--c-primary);font-size:15px;
  border-bottom:1px dashed var(--c-line);position:relative;padding-left:28px;
}
.xc-range-list li:last-child{border-bottom:none}
.xc-range-list li::before{
  content:"";position:absolute;left:0;top:20px;width:12px;height:12px;transform:rotate(45deg);
  background:var(--c-accent);
}

/* ---------- FAQ：双列 ---------- */
.xc-faq{background:var(--c-ice-2)}
.xc-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.faq-item{background:#fff;border:1px solid var(--c-line);border-radius:14px;overflow:hidden;transition:all var(--trans)}
.faq-item[open]{box-shadow:var(--shadow);border-color:var(--c-accent)}
.faq-item summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:18px 22px;font-weight:700;color:var(--c-primary);font-size:15.5px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:22px;font-weight:400;color:var(--c-accent);transition:transform var(--trans);flex-shrink:0}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 22px 18px;color:var(--c-text-2);font-size:14.5px}
.faq-item p a{color:var(--c-accent);font-weight:600}

/* ---------- 城市互链：卡片网格 ---------- */
.xc-cities{background:#fff;padding-top:70px;padding-bottom:70px}
.xc-city-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.xc-city-grid a{
  background:var(--c-ice-2);border:1px solid var(--c-line);border-radius:var(--radius-lg);
  padding:26px 24px;transition:all var(--trans);display:block;
}
.xc-city-grid a:hover{background:var(--c-grad);border-color:transparent;transform:translateY(-6px);box-shadow:0 14px 30px rgba(37,99,235,.3)}
.xc-city-grid h3{color:var(--c-primary);font-size:17px;margin-bottom:8px;transition:color var(--trans)}
.xc-city-grid p{color:var(--c-muted);font-size:13px;transition:color var(--trans)}
.xc-city-grid a:hover h3,.xc-city-grid a:hover p{color:#fff}

/* ---------- 响应式 ---------- */
@media (max-width:992px){
  .xc-intro-wrap,.xc-range-inner{grid-template-columns:1fr;gap:40px}
  .xc-row{grid-template-columns:1fr;gap:28px}
  .xc-row-flip .xc-row-media{order:0}
  .xc-city-grid{grid-template-columns:1fr 1fr}
  .xc-faq-grid{grid-template-columns:1fr}
  .xc-intro-media::after{inset:10px -10px -10px 10px}
  .xc-intro-badge{right:12px;bottom:-18px}
}
@media (max-width:640px){
  .xc-pit-item{grid-template-columns:1fr;gap:10px;padding:20px}
  .xc-pit-item b{display:inline-block;justify-self:start;padding:6px 14px}
  .xc-city-grid{grid-template-columns:1fr}
}