@charset "UTF-8";
/* ============================================================
   省份列表页（GET /provinces）· 本文件只保留省份页独有规则
   —— 卡片与网格样式见 public/css/lx-card.css（全站共用，已集中到那里）。
   本文件保留：页头（.lx-head/.lx-title/.lx-lead）、省份筛选胶囊（.lx-filter/.lx-fpill/.lx-fcount）、
        区块头与统计（.lx-wall-*）、大区分组（.lx-group*）、底部 CTA（.lx-cta*）、空状态（.lx-empty）、
        容器 .lx-wrap。
   复用站内 token：--primary/--primary-600/--primary-50/--primary-100/--primary-200
        --ice/--card/--border/--border-2
        --text/--text-2/--text-3/--text-4/--radius/--radius-sm/--radius-pill
        --shadow-sm/--shadow-md/--shadow-lg/--font-head/--font-body
   硬约束：过渡一律 <=150ms；grid/flex 全部换行，不产生横向滚动条；零外网依赖。

   ---- 导航高度（本页 sticky 与锚点同源）----
   --nav-h：.navbar-discover = .top-accent(3px) + 品牌 padding 12+12 + 图标 38px + 下边框 1px ≈ 62px
   （折叠态更矮），取 62px。筛选条 top = var(--nav-h, 62px)；锚点落点 = 62 + 8 = 70px；
   index.blade.php 脚本 OFFSET = 70 —— 三处同一个数。
   ============================================================ */

:root { --nav-h: 62px; }
.lx-wrap { padding-top: 26px; padding-bottom: 8px; max-width: 100%; }

/* ===== 页头：左对齐 + 粗体大标题 + 一句导语 ===== */
.lx-head { margin-bottom: 18px; }
.lx-title {
  font-family: var(--font-head); font-size: 2.3rem; font-weight: 700;
  line-height: 1.15; letter-spacing: -.025em; color: var(--text); margin: 0 0 10px;
}
.lx-lead { font-size: .95rem; line-height: 1.8; color: var(--text-2); max-width: 660px; margin: 0; }

/* ===== 筛选胶囊行（sticky）：全包圆 + 数量，选中=深色实心 ===== */
.lx-filter {
  position: sticky; top: var(--nav-h, 62px); z-index: 20;
  margin: 0 0 18px; padding: 9px 12px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.lx-filter-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lx-fpill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: .8rem; font-weight: 600;
  color: var(--text-2); background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 7px 10px 7px 15px; cursor: pointer; white-space: nowrap;
  transition: background .14s, color .14s, border-color .14s, box-shadow .14s, transform .14s;
}
.lx-fpill:hover { border-color: var(--primary-200); color: var(--primary-600); transform: translateY(-1px); }
.lx-fcount {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px;
  font-family: var(--font-head); font-size: .68rem; font-weight: 700;
  color: var(--primary-600); background: var(--primary-50);
  border-radius: var(--radius-pill);
  transition: background .14s, color .14s;
}
.lx-fpill.is-on { background: var(--text); border-color: var(--text); color: #fff; box-shadow: var(--shadow-md); }
.lx-fpill.is-on:hover { background: var(--text); border-color: var(--text); color: #fff; }
.lx-fpill.is-on .lx-fcount { background: rgba(255, 255, 255, .2); color: #fff; }

/* ===== 区块头（沿用 $provinceStats 的数字） ===== */
.lx-wall-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.lx-wall-title { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 0; }
.lx-wall-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lx-wall-stats > span {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: .7rem; font-weight: 600; color: var(--text-3);
  background: var(--ice); border-radius: var(--radius-pill); padding: 4px 12px;
}
.lx-wall-stats b { font-family: var(--font-head); font-weight: 700; color: var(--text); }

/* ===== 大区分组（分组容器 + 组头；组内卡片墙样式见 lx-card.css） ===== */
.lx-group { margin-bottom: 26px; max-width: 100%; scroll-margin-top: 70px; }
.lx-group.lx-hide { display: none; }
.lx-group-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.lx-group-title {
  font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--text);
  margin: 0; display: inline-flex; align-items: center; gap: 9px;
}
.lx-group-title::before {
  content: ""; width: 4px; height: 17px; border-radius: 3px;
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
}
.lx-group-count {
  font-size: .7rem; font-weight: 600; color: var(--text-2);
  background: var(--ice); border-radius: var(--radius-pill); padding: 3px 11px;
}

/* ===== 底部 CTA 横幅：浅色大面板 + 圆形图标 + 文案 + 主色按钮 ===== */
.lx-cta {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 38px 0 12px; padding: 20px 22px;
  background: linear-gradient(135deg, #e5f8f3, #eef9fb);
  border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-sm);
}
.lx-cta-ico {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem; color: #fff;
  background: linear-gradient(135deg, #2ad6a3, #0aa87a);
  box-shadow: 0 8px 18px rgba(19, 200, 146, .3);
}
.lx-cta-copy { flex: 1 1 260px; min-width: 0; }
.lx-cta-title { font-family: var(--font-head); font-size: 1.04rem; font-weight: 700; color: var(--text); margin: 0; }
.lx-cta-sub { margin: 4px 0 0; font-size: .82rem; line-height: 1.7; color: var(--text-3); }
.lx-cta-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary); color: #fff; border-radius: var(--radius-pill); padding: 12px 24px;
  font-family: var(--font-head); font-size: .86rem; font-weight: 600;
  box-shadow: 0 6px 18px rgba(19, 200, 146, .28);
  transition: background .14s, color .14s, box-shadow .14s, transform .14s;
}
.lx-cta-btn:hover { background: var(--primary-600); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(19, 200, 146, .34); }

/* ===== 空状态 ===== */
.lx-empty {
  padding: 56px 20px; text-align: center; color: var(--text-3);
  background: #fff; border: 1px dashed var(--border-2); border-radius: 16px;
}
.lx-empty i { display: block; margin-bottom: 10px; font-size: 2.2rem; opacity: .35; color: var(--primary-600); }
.lx-empty p { margin: 0; font-size: .86rem; }

/* ===== 响应式微调（只用 --nav-h 一个值；不产生横向滚动条） ===== */
@media (max-width: 767px) {
  .lx-wrap { padding-top: 20px; }
  .lx-title { font-size: 1.6rem; }
  .lx-lead { font-size: .86rem; margin-bottom: 14px; }
  .lx-filter { border-radius: var(--radius-sm); padding: 8px 10px; }
  .lx-filter-pills { gap: 6px; }
  .lx-fpill { font-size: .76rem; padding: 6px 9px 6px 13px; }
  .lx-group { margin-bottom: 22px; }
  .lx-cta { padding: 16px; gap: 14px; border-radius: 18px; }
  .lx-cta-ico { width: 44px; height: 44px; font-size: 1rem; }
  .lx-cta-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lx-cta-btn, .lx-fpill { transition: none; }
}

/* 首页热门城市/热门省份：和列表页一样一行 4 个（原来被 6 列的规则盖住了） */
.lx-home--cities .lx-grid.lx-grid--sm,
.lx-home--provinces .lx-grid.lx-grid--sm,
.lx-grid.lx-grid--sm{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
@media (max-width:1199px){ .lx-home--cities .lx-grid.lx-grid--sm,.lx-home--provinces .lx-grid.lx-grid--sm,.lx-grid.lx-grid--sm{grid-template-columns:repeat(3,minmax(0,1fr))!important} }
@media (max-width:991px){ .lx-home--cities .lx-grid.lx-grid--sm,.lx-home--provinces .lx-grid.lx-grid--sm,.lx-grid.lx-grid--sm{grid-template-columns:repeat(2,minmax(0,1fr))!important} }
@media (max-width:575px){ .lx-home--cities .lx-grid.lx-grid--sm,.lx-home--provinces .lx-grid.lx-grid--sm,.lx-grid.lx-grid--sm{grid-template-columns:repeat(1,minmax(0,1fr))!important} }