/* ==========================================================================
   area.css —— 区县落地页 / 服务区域总览页专用样式
   依赖 assets/site.css + assets/product.css（复用 .p-hero/.p-sec/.p-cta/
   .crumb/.p-quick/.scene-grid/.rel-grid/.ver-table/.faq-list 等既有组件）
   这里只补区县页独有的一小块。
   ========================================================================== */

/* ---------- 区县速览数据条 ---------- */
.area-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
.area-fact{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;align-items:flex-start;transition:.3s}
.area-fact > * + *{margin-left:12px}
.area-fact:hover{border-color:#f4a7b2;box-shadow:var(--shadow)}
.area-fact .ic{width:42px;height:42px;border-radius:12px;background:var(--brand-50);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
.area-fact .ic svg{width:21px;height:21px}
.area-fact b{display:block;font-size:15.5px;color:#262A31;margin-bottom:3px}
.area-fact span{font-size:13.5px;color:var(--muted);line-height:1.65}

/* ---------- 正文段落（本地产业描述） ---------- */
.area-prose{max-width:880px;margin:0 auto}
.area-prose p{font-size:16px;color:#4a4a52;line-height:1.95;margin-bottom:16px}
.area-prose p:last-child{margin-bottom:0}
.area-prose b{color:var(--brand-deep);font-weight:600}

/* ---------- 服务区域总览：区县卡片网格 ---------- */
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.area-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 18px;transition:.3s;position:relative;overflow:hidden}
.area-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#f4a7b2}
.area-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand);opacity:0;transition:opacity .3s}
.area-card:hover::before{opacity:1}
.area-card .a-head{display:flex;align-items:center;margin-bottom:10px}
.area-card .a-head > * + *{margin-left:11px}
.area-card .a-mark{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#ff5a53,#f5222f);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none}
.area-card .a-mark.m-2{background:linear-gradient(135deg,#ff9a4d,#ee4017)}
.area-card .a-mark.m-3{background:linear-gradient(135deg,#9d8bff,#6b52c9)}
.area-card .a-mark.m-4{background:linear-gradient(135deg,#4cc98a,#1e9e5a)}
.area-card .a-mark.m-5{background:linear-gradient(135deg,#5292e5,#3d5cc7)}
.area-card .a-mark.m-6{background:linear-gradient(135deg,#31c2c4,#0da5ca)}
.area-card b{font-size:18.5px;color:#262A31;display:block}
.area-card .a-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.area-card p{font-size:14.2px;color:var(--muted);line-height:1.8;margin-bottom:14px}
.area-card .a-go{font-size:13.5px;font-weight:600;color:var(--brand);margin-top:auto}

/* ---------- 相邻区县 / 内链胶囊 ---------- */
.area-chips{display:flex;flex-wrap:wrap;justify-content:center;margin-top:18px}
.area-chips > * + *{margin-left:10px}
.area-chip{display:inline-flex;align-items:center;}
.area-chip > * + *{margin-left:7px}
.area-chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:14px;color:#4a4a52;font-weight:600;transition:.25s}
.area-chip:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow)}
.area-chip svg{width:15px;height:15px;color:var(--brand)}
.area-chip .go{font-size:12px;color:#9AA0A8;font-weight:500}

/* ---------- 枢纽页：服务方式三档 ---------- */
.area-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.area-tier{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px;transition:.3s}
.area-tier:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#f4a7b2}
.area-tier .t-no{font-size:12.5px;font-weight:700;color:#9AA0A8;letter-spacing:1px}
.area-tier h3{font-size:19px;margin:8px 0 8px}
.area-tier p{font-size:14.4px;color:var(--muted);line-height:1.8;margin-bottom:12px}
.area-tier ul{display:grid;gap:7px}
.area-tier ul li{font-size:13.8px;color:var(--muted);padding-left:18px;position:relative}
.area-tier ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- 产品卡里的本地化说明 ---------- */
.rel-desc{font-size:12.6px;color:var(--muted);line-height:1.65;text-align:left}

/* ---------- 返回总览 ---------- */
.area-back{display:flex;justify-content:center;margin-top:22px}

/* ---------- 响应式 ---------- */
@media(max-width:1024px){
  .area-grid,.area-tiers{grid-template-columns:repeat(2,1fr)}
  .area-facts{grid-template-columns:1fr}
}
@media(max-width:760px){
  .area-grid,.area-tiers{grid-template-columns:1fr}
  .area-prose p{font-size:15.2px}
  .area-card b{font-size:17.5px}
}