/* ============================================================================
   城市体系样式（全国城市 / 区县 / 街道页）
   ----------------------------------------------------------------------------
   只作用于 .g- 前缀的类，**不含任何全局 reset**，与 assets/css/main.css 互不干扰。
   主站在 main.css 之后加载本文件，因此可以在 g- 组件内覆盖基础排版。
   配色：医药深蓝 + 认证青，与全站主色一致。
   ========================================================================== */

:root {
    --g-blue: #0E4D92;        /* 主色：医药深蓝 */
    --g-blue-dark: #093562;   /* 深蓝（页头/页脚底色） */
    --g-blue-light: #E8F1FA;  /* 浅蓝（区块底色） */
    --g-teal: #12A5A0;        /* 强调色：认证青 */
    --g-teal-dark: #0C817D;
    --g-text: #1F2B38;
    --g-text-sub: #5A6B7D;
    --g-line: #DCE6F0;
    --g-bg: #F5F8FC;
    --g-white: #fff;
    --g-radius: 10px;
    --g-shadow: 0 6px 24px rgba(14, 77, 146, .10);
    --g-shadow-hover: 0 12px 32px rgba(14, 77, 146, .18);
}

body.gmp-body {
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    color: var(--g-text);
    background: var(--g-bg);
    font-size: 16px;
    line-height: 1.7;
}
/* 与 includes/header.php 顶部导航的 .container 保持一致（1280px / 20px），确保面包屑等内容左边缘与导航对齐 */
.g-wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 768px) { .g-wrap { padding: 0 15px; } }

/* ---------- 顶栏 ---------- */
.g-topbar { background: var(--g-blue-dark); color: #cfe0f2; font-size: 13px; }
.g-topbar .g-wrap { display: flex; justify-content: space-between; align-items: center; min-height: 36px; }
.g-topbar a { color: #fff; }
.g-topbar strong { color: #7FD8D4; font-size: 15px; }

/* ---------- 页头与导航 ---------- */
.g-header { background: var(--g-white); box-shadow: 0 2px 10px rgba(14, 77, 146, .08); position: sticky; top: 0; z-index: 100; }
.g-header .g-wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.g-logo { display: flex; align-items: center; gap: 10px; }
.g-logo-badge {
    width: 44px; height: 44px; border-radius: 10px; background: var(--g-blue);
    color: #fff; font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center;
    letter-spacing: 1px;
}
.g-logo-name { font-size: 20px; font-weight: 700; color: var(--g-blue-dark); line-height: 1.25; }
.g-logo-sub { font-size: 12px; color: var(--g-teal); font-weight: 600; letter-spacing: 2px; }
.g-nav { display: flex; align-items: center; gap: 4px; }
.g-nav a {
    padding: 8px 16px; border-radius: 6px; font-size: 16px; color: var(--g-text); font-weight: 500;
}
.g-nav a:hover { color: var(--g-blue); background: var(--g-blue-light); }
.g-nav a.on { color: #fff; background: var(--g-blue); }
.g-header-cta { display: flex; gap: 10px; margin-left: 18px; }
.g-burger { display: none; background: none; border: 0; width: 42px; height: 42px; cursor: pointer; }
.g-burger span { display: block; width: 22px; height: 2px; background: var(--g-blue-dark); margin: 5px auto; border-radius: 2px; }

/* ---------- 按钮 ---------- */
.g-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 22px; border-radius: 8px; font-size: 15px; font-weight: 600;
    border: 1px solid transparent; cursor: pointer; transition: all .18s ease; line-height: 1.4;
}
.g-btn-primary { background: var(--g-blue); color: #fff; }
.g-btn-primary:hover { background: var(--g-blue-dark); color: #fff; box-shadow: var(--g-shadow-hover); }
.g-btn-teal { background: var(--g-teal); color: #fff; }
.g-btn-teal:hover { background: var(--g-teal-dark); color: #fff; box-shadow: var(--g-shadow-hover); }
.g-btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.55); }
.g-btn-ghost:hover { background: rgba(255,255,255,.22); color: #fff; }
.g-btn-light { background: #fff; color: var(--g-blue); border-color: var(--g-line); }
.g-btn-light:hover { border-color: var(--g-blue); color: var(--g-blue); }
.g-btn-lg { padding: 13px 30px; font-size: 16px; }
/* v3.0.5：彩色按钮 / 胶囊标签的 hover 文字色统一锁定。
   main.css 的 a:hover 会把文字染成认证青（#12A5A0），这些元素背景本身是青/深蓝，
   hover 时就成了同色系叠色、文字不可读。下面逐类锁回高对比文字色。 */
.g-btn:hover { text-decoration: none; }
.g-nav a.on:hover { color: #fff; }
.g-toolbar a.on:hover { color: #fff; }
.g-pager .cur:hover { color: #fff; }
.g-city-search button:hover { color: #fff; }
.g-mobile-bar a:hover { color: var(--g-blue); }

/* ---------- Hero ---------- */
.g-hero {
    background: linear-gradient(120deg, var(--g-blue-dark) 0%, var(--g-blue) 55%, #1668B8 100%);
    color: #fff; padding: 84px 0 92px; position: relative; overflow: hidden;
}
.g-hero::after {
    content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px;
    border-radius: 50%; background: rgba(18, 165, 160, .18); pointer-events: none;
}
.g-hero-kicker { display: inline-block; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); padding: 4px 14px; border-radius: 999px; font-size: 13px; letter-spacing: 2px; margin-bottom: 18px; }
.g-hero h1 { font-size: 40px; line-height: 1.3; margin-bottom: 16px; max-width: 720px; }
.g-hero p { font-size: 17px; color: #D5E4F4; max-width: 640px; margin-bottom: 30px; }
.g-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.g-hero-stats { display: flex; gap: 46px; margin-top: 46px; flex-wrap: wrap; }
.g-hero-stats b { font-size: 30px; display: block; }
.g-hero-stats span { font-size: 13px; color: #BCD2E8; }

/* ---------- 区块通用 ---------- */
.g-section { padding: 64px 0; }
.g-section.alt { background: var(--g-white); }
.g-sec-head { text-align: center; margin-bottom: 40px; }
.g-sec-head h2 { font-size: 30px; color: var(--g-blue-dark); }
.g-sec-head h2 em { font-style: normal; color: var(--g-teal); }
.g-sec-head p { color: var(--g-text-sub); margin-top: 8px; }
.g-sec-bar { width: 46px; height: 4px; background: var(--g-teal); border-radius: 2px; margin: 14px auto 0; }

/* ---------- 业务范围卡片 ---------- */
.g-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.g-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.g-svc-card {
    background: var(--g-white); border: 1px solid var(--g-line); border-radius: var(--g-radius);
    padding: 26px 22px; transition: all .2s ease; display: block;
}
.g-svc-card:hover { transform: translateY(-4px); box-shadow: var(--g-shadow-hover); border-color: var(--g-blue); }
.g-svc-icon {
    /* 图标框：内容是 gmp_biz_icon_glyph() 输出的单个汉字（v3.0.2）。
       早期这里输出过英文名/多字简称，把卡片顶爆过 —— 所以框体加 min-width +
       padding + nowrap 三重保险：内容超长时框自动加宽，不再溢出卡片。 */
    min-width: 52px; height: 52px; padding: 0 12px; border-radius: 12px;
    background: var(--g-blue-light); color: var(--g-blue);
    font-size: 24px; font-weight: 700; line-height: 52px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 16px; box-sizing: border-box;
    max-width: 100%;
}
.g-svc-card h3 { font-size: 17px; color: var(--g-blue-dark); margin-bottom: 8px; }
.g-svc-card p { font-size: 14px; color: var(--g-text-sub); }
.g-svc-more { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--g-teal); font-weight: 600; }

/* ---------- 优势 / 流程 ---------- */
.g-adv-item { display: flex; gap: 14px; background: var(--g-white); border: 1px solid var(--g-line); border-radius: var(--g-radius); padding: 22px; }
.g-adv-item b { color: var(--g-blue-dark); font-size: 16px; display: block; margin-bottom: 6px; }
.g-adv-item p { font-size: 14px; color: var(--g-text-sub); }
.g-adv-num {
    flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--g-blue); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px;
}
.g-flow { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.g-flow li {
    background: var(--g-white); border: 1px solid var(--g-line); border-radius: var(--g-radius);
    text-align: center; padding: 18px 6px 14px; font-size: 14px; font-weight: 600; color: var(--g-blue-dark);
    /* v3.0.3：去掉 ::before 数字圆圈（1.2.3.4.5.6），下方明细列表已有「第 N 步」说明，序号重复且显乱 */
    position: relative;
    list-style: none;
}

/* ---------- 卡片（案例 / 资讯） ---------- */
.g-card {
    background: var(--g-white); border: 1px solid var(--g-line); border-radius: var(--g-radius);
    overflow: hidden; transition: all .2s ease; display: flex; flex-direction: column;
}
.g-card:hover { transform: translateY(-4px); box-shadow: var(--g-shadow-hover); }
.g-card-cover { height: 190px; background: linear-gradient(135deg, var(--g-blue) 0%, var(--g-teal) 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; overflow: hidden; text-align: center; padding: 12px 18px; box-sizing: border-box; word-break: break-word; line-height: 1.35; }
.g-card-cover img { width: 100%; height: 100%; object-fit: cover; }
/* v3.1.10：城市页案例卡片封面改为真实图片时去掉内边距，图片铺满整个封面区 */
.g-card-cover.g-cover-img { padding: 0; }
.g-card-cover.g-cover-img img { display: block; }
.g-card-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.g-card-tag { align-self: flex-start; background: var(--g-blue-light); color: var(--g-blue); font-size: 12px; padding: 2px 10px; border-radius: 999px; margin-bottom: 10px; }
.g-card-body h3 { font-size: 16px; color: var(--g-blue-dark); line-height: 1.5; margin-bottom: 8px; }
.g-card-body p { font-size: 13px; color: var(--g-text-sub); flex: 1; }
.g-card-meta { margin-top: 12px; font-size: 12px; color: #93A5B8; display: flex; justify-content: space-between; }

/* ---------- 详情页 ---------- */
.g-detail { background: var(--g-white); border: 1px solid var(--g-line); border-radius: var(--g-radius); padding: 36px 40px; }
/* v3.0.3：列表改为「标签行 + 说明行」两行式。
   原来的 <b>标签</b>：说明 是行内连排，手机上标签换行后「：」会掉到下一行行首，很难看；
   现在标签独占一行、说明另起一行，模板里也不再输出冒号。 */
/* v3.0.5：列表符号结构性收口。list-style 同时写在 ul 和 li 上 ——
   只写在 ul 上时，若列表嵌在 .g-content 里（.g-content ul 的 list-style:disc 优先级更高），
   浏览器默认黑点会重新冒出来，和 ::before 的青绿圆点叠成"双点"（用户截图里那个多余符号）。
   写在 li 上属于元素自身声明，任何祖先的 disc 都继承不进来，从根上杜绝双符号。 */
.g-detail ul, .g-detail ol { margin: 0 0 14px; padding: 0; list-style: none; }
.g-detail ul li, .g-detail ol li {
    position: relative; padding-left: 18px; margin-bottom: 12px;
    list-style: none; list-style-image: none;
}
.g-detail ul li::before, .g-detail ol li::before {
    content: ""; position: absolute; left: 0; top: .62em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--g-teal);
}
.g-detail li > b:first-child { display: block; color: var(--g-blue-dark); margin-bottom: 3px; }
.g-detail h1 { font-size: 26px; color: var(--g-blue-dark); line-height: 1.4; margin-bottom: 10px; }
.g-detail-meta { font-size: 13px; color: #93A5B8; padding-bottom: 18px; border-bottom: 1px solid var(--g-line); margin-bottom: 22px; display: flex; gap: 20px; flex-wrap: wrap; }
.g-content { font-size: 16px; color: var(--g-text); }
.g-content h2 { font-size: 20px; color: var(--g-blue-dark); margin: 26px 0 12px; padding-left: 10px; border-left: 4px solid var(--g-teal); }
.g-content h3 { font-size: 17px; color: var(--g-blue-dark); margin: 20px 0 10px; }
.g-content p { margin-bottom: 14px; }
.g-content ul, .g-content ol { margin: 0 0 14px 22px; list-style: disc; }
.g-content li { margin-bottom: 6px; }
.g-content table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.g-content th, .g-content td { border: 1px solid var(--g-line); padding: 8px 12px; font-size: 14px; }
.g-content th { background: var(--g-blue-light); color: var(--g-blue-dark); }

/* ---------- 表单 ---------- */
.g-form-panel { background: var(--g-white); border: 1px solid var(--g-line); border-radius: var(--g-radius); padding: 30px; }
.g-field { margin-bottom: 16px; }
.g-field label { display: block; font-size: 14px; font-weight: 600; color: var(--g-blue-dark); margin-bottom: 6px; }
.g-field label em { color: #D64545; font-style: normal; margin-left: 2px; }
.g-field input, .g-field select, .g-field textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--g-line); border-radius: 8px;
    font-size: 15px; font-family: inherit; color: var(--g-text); background: #FBFDFF;
}
.g-field input:focus, .g-field select:focus, .g-field textarea:focus {
    outline: none; border-color: var(--g-blue); box-shadow: 0 0 0 3px rgba(14, 77, 146, .12);
}
.g-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.g-form-tip { font-size: 13px; color: var(--g-text-sub); margin-top: 10px; }
.g-form-msg { display: none; margin-top: 14px; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.g-form-msg.ok { display: block; background: #E8F7EC; color: #1E7B34; border: 1px solid #BFE7C9; }
.g-form-msg.err { display: block; background: #FDECEC; color: #B42323; border: 1px solid #F2C6C6; }

/* ---------- CTA 条 ---------- */
.g-cta-band { background: linear-gradient(120deg, var(--g-teal) 0%, var(--g-blue) 100%); color: #fff; padding: 44px 0; }
.g-cta-band .g-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.g-cta-band h2 { font-size: 24px; }
.g-cta-band p { color: #D9F2F0; font-size: 14px; margin-top: 4px; }

/* ---------- 面包屑 ---------- */
.g-crumb { font-size: 13px; color: var(--g-text-sub); padding: 16px 0 0; }
.g-crumb a { color: var(--g-blue); }
.g-crumb span.sep { margin: 0 8px; color: #B7C6D6; }

/* ---------- 页脚 ---------- */
.g-footer { background: var(--g-blue-dark); color: #A9C2DB; margin-top: 64px; font-size: 14px; }
.g-footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 28px; padding: 48px 0 34px; }
.g-footer h4 { color: #fff; font-size: 16px; margin-bottom: 14px; }
.g-footer a { display: block; padding: 3px 0; color: #A9C2DB; }
.g-footer a:hover { color: #fff; }
.g-footer .g-f-about p { margin-bottom: 8px; }
.g-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 16px 0; text-align: center; font-size: 13px; color: #7E99B5; }
.g-footer-bottom a { display: inline; color: #7E99B5; }

/* ---------- 悬浮工具栏 ---------- */
.g-float { position: fixed; right: 18px; bottom: 88px; z-index: 90; display: flex; flex-direction: column; gap: 10px; }
.g-float a, .g-float button {
    width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--g-blue); color: #fff; font-size: 12px; font-weight: 600;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: var(--g-shadow); line-height: 1.3;
}
.g-float .g-ft-teal { background: var(--g-teal); }
.g-float .g-ft-top { background: #5D7288; font-size: 10px; }
.g-float a:hover, .g-float button:hover { transform: translateY(-2px); color: #fff; }
.g-mobile-bar { display: none; }

/* ---------- 弹窗 ---------- */
.g-modal-mask {
    display: none; position: fixed; inset: 0; background: rgba(9, 33, 60, .55);
    z-index: 200; align-items: center; justify-content: center; padding: 16px;
}
.g-modal-mask.show { display: flex; }
.g-modal {
    background: #fff; border-radius: 14px; width: 100%; max-width: 460px;
    max-height: 90vh; overflow: auto; padding: 26px 26px 22px; position: relative;
}
.g-modal h3 { color: var(--g-blue-dark); font-size: 19px; margin-bottom: 16px; }
.g-modal-close {
    position: absolute; top: 12px; right: 14px; background: none; border: 0;
    font-size: 24px; color: #93A5B8; cursor: pointer; line-height: 1;
}

/* ---------- 列表工具条 / 分页 ---------- */
.g-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.g-toolbar a {
    padding: 7px 16px; border-radius: 999px; border: 1px solid var(--g-line);
    background: var(--g-white); font-size: 14px; color: var(--g-text-sub);
}
.g-toolbar a.on { background: var(--g-blue); border-color: var(--g-blue); color: #fff; }
.g-pager { display: flex; gap: 8px; justify-content: center; margin-top: 36px; }
.g-pager a, .g-pager span {
    min-width: 36px; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--g-line);
    background: var(--g-white); display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--g-text-sub);
}
.g-pager .cur { background: var(--g-blue); border-color: var(--g-blue); color: #fff; }
.g-empty { text-align: center; color: var(--g-text-sub); padding: 60px 0; }

/* ---------- 移动端 ---------- */
@media (max-width: 900px) {
    .g-nav {
        display: none; position: absolute; top: 72px; left: 0; right: 0;
        background: var(--g-white); flex-direction: column; align-items: stretch;
        padding: 10px 16px 16px; box-shadow: 0 14px 24px rgba(14, 77, 146, .14); gap: 2px;
    }
    .g-nav.open { display: flex; }
    .g-header-cta { display: none; }
    .g-burger { display: block; }
    .g-hero h1 { font-size: 27px; }
    .g-hero { padding: 54px 0 60px; }
    .g-hero-stats { gap: 26px; }
    .g-grid-4, .g-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .g-flow { grid-template-columns: repeat(2, 1fr); }
    .g-footer-main { grid-template-columns: 1fr 1fr; gap: 22px; }
    .g-detail { padding: 24px 18px; }
    .g-field-row { grid-template-columns: 1fr; }
    .g-float { display: none; }
    .g-section { padding: 44px 0; }
    /* 移动端底栏（同认证站布局：预约 / 电话 / 报价 / 咨询） */
    .g-mobile-bar {
        display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0;
        background: var(--g-white); border-top: 1px solid var(--g-line); z-index: 95; padding: 6px 0 8px;
    }
    .g-mobile-bar a { text-align: center; font-size: 12px; color: var(--g-blue-dark); font-weight: 600; }
    .g-mobile-bar i { display: block; font-style: normal; font-size: 18px; margin-bottom: 2px; }
    body.gmp-body { padding-bottom: 58px; }
}
@media (max-width: 480px) {
    .g-grid-4 { grid-template-columns: 1fr; }
    .g-grid-3 { grid-template-columns: 1fr; }
    .g-logo-name { font-size: 16px; }
    .g-sec-head h2 { font-size: 23px; }
}

/* ============================================================================
   全国城市布局（城市索引 / 城市站 / 区县页 / 街道页 / 区域选择器）
   —— 追加段落，不影响上方既有规则
   ========================================================================== */

/* ---------- 城市索引页头部 ---------- */
.g-subhero {
    background: linear-gradient(120deg, var(--g-blue-dark) 0%, var(--g-blue) 62%, #1462b4 100%);
    color: #fff; padding: 56px 0 48px;
}
.g-subhero h1 { font-size: 34px; line-height: 1.3; margin-bottom: 10px; }
.g-subhero > .g-wrap > p { color: #CFE0F2; font-size: 15px; margin-bottom: 22px; }
.g-city-search { position: relative; max-width: 640px; display: flex; }
.g-city-search input {
    flex: 1; height: 48px; border: 0; border-radius: 8px 0 0 8px; padding: 0 16px;
    font-size: 15px; font-family: inherit; outline: none;
}
.g-city-search button {
    height: 48px; padding: 0 26px; border: 0; border-radius: 0 8px 8px 0;
    background: var(--g-teal); color: #fff; font-size: 15px; cursor: pointer; font-family: inherit;
}
.g-city-search button:hover { background: var(--g-teal-dark); }
.g-city-drop, .g-region-drop {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px);
    background: #fff; border-radius: 8px; box-shadow: 0 14px 34px rgba(9, 53, 98, .2);
    z-index: 120; max-height: 340px; overflow: auto; text-align: left; padding: 6px;
}
.g-city-drop.show, .g-region-drop.show { display: block; }
.g-city-drop a, .g-region-drop a {
    display: block; padding: 9px 12px; border-radius: 6px; color: var(--g-text);
}
.g-city-drop a:hover, .g-region-drop a:hover { background: var(--g-blue-light); }
.g-city-drop a b, .g-region-drop a b { display: block; font-size: 14px; color: var(--g-blue-dark); }
.g-city-drop a span, .g-region-drop a span { font-size: 12px; color: var(--g-text-sub); }
.g-city-empty, .g-region-empty { padding: 12px; font-size: 13px; color: var(--g-text-sub); }
.g-city-stats { display: flex; gap: 40px; margin-top: 28px; flex-wrap: wrap; }
.g-city-stats b { display: block; font-size: 26px; }
.g-city-stats span { font-size: 13px; color: #BCD2E8; }

/* ---------- 城市索引：大区 / 省份 / 城市 ---------- */
.g-region-block { margin-bottom: 34px; }
.g-region-title {
    font-size: 19px; color: var(--g-blue-dark); padding-left: 12px; border-left: 4px solid var(--g-teal);
    margin-bottom: 14px;
}
.g-province-row { display: grid; grid-template-columns: 190px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--g-line); }
.g-province-name { font-size: 15px; font-weight: 700; color: var(--g-blue); }
.g-province-name em { font-style: normal; font-weight: 400; font-size: 12px; color: #93A5B8; margin-left: 8px; }
.g-province-cities { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.g-province-cities a { font-size: 14px; color: var(--g-text-sub); }
.g-province-cities a:hover { color: var(--g-teal); }

/* ---------- 城市卡片 / 徽标 ---------- */
.g-city-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.g-city-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px;
    background: var(--g-white); border: 1px solid var(--g-line); font-size: 15px; color: var(--g-blue-dark);
    transition: all .18s;
}
.g-city-chip em { font-style: normal; font-size: 12px; color: var(--g-text-sub); }
/* 当前选中项：整枚胶囊蓝底白字，em「当前」同样锁白（否则灰字压在蓝底上看不清） */
.g-city-chip.on { color: #fff; }
.g-city-chip.on em { color: rgba(255, 255, 255, .85); }
.g-city-chip:hover { border-color: var(--g-blue); box-shadow: var(--g-shadow); transform: translateY(-2px); }

/* ---------- 城市 / 区县 / 街道页头部 ---------- */
.g-city-hero { background: var(--g-blue-light); border-bottom: 1px solid var(--g-line); padding: 34px 0 38px; }
.g-city-hero .g-wrap { display: grid; grid-template-columns: 1.6fr 1fr; gap: 34px; align-items: start; }
.g-city-hero h1 { font-size: 32px; color: var(--g-blue-dark); line-height: 1.3; margin-bottom: 8px; }
.g-city-hero-sub { font-size: 14px; color: var(--g-teal-dark); font-weight: 600; margin-bottom: 14px; }
.g-city-hero-intro { font-size: 15px; color: var(--g-text-sub); margin-bottom: 22px; }
.g-city-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.g-city-facts {
    background: #fff; border-radius: var(--g-radius); padding: 20px 22px; box-shadow: var(--g-shadow);
}
.g-city-fact { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--g-line); font-size: 14px; }
.g-city-fact:last-child { border-bottom: 0; }
.g-city-fact span { color: var(--g-text-sub); }
.g-city-fact b { color: var(--g-blue-dark); }

/* ---------- 区县 / 街道网格 ---------- */
.g-district-group { margin-bottom: 26px; }
.g-district-group h3 { font-size: 17px; color: var(--g-blue-dark); margin-bottom: 12px; }
.g-district-group h3 em { font-style: normal; font-size: 12px; color: #fff; background: var(--g-teal); border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.g-district-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.g-district-grid a {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    background: var(--g-white); border: 1px solid var(--g-line); border-radius: 8px; padding: 12px 14px;
    font-size: 14px; color: var(--g-blue-dark);
}
.g-district-grid a span { font-size: 12px; color: var(--g-text-sub); white-space: nowrap; }
.g-district-grid a:hover { border-color: var(--g-blue); background: var(--g-blue-light); }
.g-town-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.g-town-grid a {
    padding: 7px 13px; border-radius: 6px; background: var(--g-white); border: 1px solid var(--g-line);
    font-size: 13px; color: var(--g-text-sub);
}
.g-town-grid a:hover { border-color: var(--g-blue); color: var(--g-blue); }

/* ---------- 问答 / 资讯列表 ---------- */
.g-faq details {
    background: var(--g-white); border: 1px solid var(--g-line); border-radius: 8px;
    padding: 14px 18px; margin-bottom: 10px;
}
.g-faq summary { cursor: pointer; font-weight: 600; color: var(--g-blue-dark); font-size: 15px; }
.g-faq details p { margin-top: 10px; font-size: 14px; color: var(--g-text-sub); }
.g-news-mini { margin-top: 22px; display: grid; gap: 8px; }
.g-news-mini a {
    display: flex; gap: 14px; align-items: center; padding: 10px 14px; background: var(--g-white);
    border: 1px solid var(--g-line); border-radius: 8px; font-size: 14px; color: var(--g-text);
}
.g-news-mini a span { color: #93A5B8; font-size: 12px; white-space: nowrap; }
.g-news-mini a:hover { border-color: var(--g-blue); }
/* v3.1.10：城市页资讯行封面缩略图 */
.g-news-mini .g-news-thumb { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; flex: none; display: block; }

/* ---------- 表单内的区域选择器 ---------- */
.g-region { position: relative; }
.g-region-text {
    width: 100%; padding: 10px 12px; border: 1px solid var(--g-line); border-radius: 8px;
    font-size: 14px; font-family: inherit; background: #fff; color: var(--g-text);
}
.g-region-text:focus { outline: none; border-color: var(--g-blue); }
.g-region-drop a b { font-weight: 600; }
.g-field-hint { display: block; margin-top: 5px; font-size: 12px; color: #93A5B8; }
.g-opt { font-style: normal; font-weight: 400; color: #93A5B8; font-size: 12px; margin-left: 4px; }

@media (max-width: 900px) {
    .g-city-hero .g-wrap { grid-template-columns: 1fr; gap: 22px; }
    .g-city-hero h1 { font-size: 25px; }
    .g-province-row { grid-template-columns: 1fr; gap: 6px; }
    .g-subhero { padding: 40px 0 36px; }
    .g-subhero h1 { font-size: 25px; }
    .g-city-stats { gap: 22px; }
    .g-city-stats b { font-size: 21px; }
}

/* ============================================================================
 * 全国区域四级联动（省 / 市 / 区县 / 街道镇乡）
 * 组件：core/gmp_region_field.php，用于预约·报价·咨询表单与页脚弹窗
 * ========================================================================== */
.g-rs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.g-rs select {
    width: 100%;
    padding: 10px 8px;
    font-size: 14px;
    border: 1px solid var(--g-line);
    border-radius: 8px;
    background: #FBFDFF;
    color: var(--g-text);
    font-family: inherit;
    text-overflow: ellipsis;
}
.g-rs select:focus {
    outline: none;
    border-color: var(--g-blue);
    box-shadow: 0 0 0 3px rgba(14, 77, 146, .12);
}
.g-rs select:disabled { background: #F1F5F9; color: #9AA9B8; }

/* 弹窗内空间窄：两列两行 */
.g-modal .g-rs { grid-template-columns: 1fr 1fr; }
.g-modal .g-rs select { font-size: 13px; padding: 9px 8px; }

/* 移动端 */
@media (max-width: 768px) {
    .g-rs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
    .g-rs { grid-template-columns: 1fr; }
}