@charset "UTF-8";
/* ============================================================
   城市列表页（GET /cities）独有的页面级样式
   卡片与网格样式见 public/css/lx-card.css
   本文件只保留城市页自己的部分：
     .lx-head .lx-lead          页头（左对齐大标题 + 导语）
     .lx-filters .lx-pill       筛选胶囊行（含数量徽章，选中=深色实心）
     .lx-toolbar .lx-field      搜索 / 排序 / 计数
     .lx-more-wrap .lx-empty .lx-cta
   复用站内 token：--primary/--primary-500/--primary-600/--primary-200
     --text/--text-2/--text-3/--text-4/--ice/--bg/--border/--border-2
     --radius-pill/--shadow-sm/--shadow-md/--font-head/--font-body
   复用站内类：.st-head .st-kicker .st-sub（区块标题）
   ⚠️ 过渡 ≤150ms；不产生横向滚动条。
   ⚠️ 本文件由布局 @stack('styles') 输出，位于布局 <style> 之前，
      覆盖布局同名规则时用「多一个类」提权，不依赖先后顺序。
   ============================================================ */

/* ===== 吸顶偏移（与省份页完全一致，三个数同源）
   真正 sticky 的是 .navbar-discover（position:sticky; top:0; padding:0）
   = 品牌 padding 12+12 + 图标 38px + border-bottom 1px ≈ 63px，取 62px 贴住、不留缝。
   布局里的 92px / 96px 是给右侧竖导航 .group-nav 的，不是顶部导航，本页不用。
     .lx-toolbar 吸顶 top        = var(--nav-h, 62px)
     锚点 scroll-margin-top      = 70px（62 + 8）
     JS 滚动偏移 ANCHOR_OFFSET   = 70（与上面同一个数）
   兜底语义：本文件输出在布局 <style> 之前，布局里若将来定义 --nav-h，以布局的为准。 */
:root { --nav-h: 62px; }

/* 页面内锚点：滚到区块顶部时留出导航 + 8px 呼吸位（= 62 + 8，与 JS 偏移一致） */
.lx-sec, .lx-cta { scroll-margin-top: 70px; }

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

/* ===== 筛选胶囊行（紧接页头） ===== */
.lx-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.lx-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 14px; cursor: pointer;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: .78rem; font-weight: 600; color: var(--text-2);
  box-shadow: var(--shadow-sm);
  transition: background .14s, color .14s, border-color .14s, box-shadow .14s, transform .14s;
}
.lx-pill:hover { border-color: var(--primary-200); color: var(--primary-600); transform: translateY(-1px); }
.lx-pill em {
  font-style: normal; font-size: .68rem; font-weight: 700; color: var(--text-3);
  background: var(--ice); border-radius: var(--radius-pill); padding: 1px 7px;
  transition: background .14s, color .14s;
}
.lx-pill.is-on { background: var(--text); border-color: var(--text); color: #fff; box-shadow: var(--shadow-md); }
.lx-pill.is-on:hover { background: var(--text); border-color: var(--text); color: #fff; }
.lx-pill.is-on em { background: rgba(255, 255, 255, .2); color: #fff; }

/* ===== 搜索 / 排序 / 结果计数 ===== */
.lx-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 18px; padding: 11px 13px;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-sm);
  position: sticky; top: var(--nav-h, 62px); z-index: 20;
}
.lx-field {
  display: flex; align-items: center; gap: 8px; min-width: 0; height: 40px; padding: 0 13px;
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-pill);
  transition: border-color .14s, box-shadow .14s, background .14s;
}
.lx-field:hover { border-color: var(--primary-200); }
.lx-field:focus-within { background: #fff; border-color: var(--primary-500); box-shadow: 0 0 0 4px rgba(19, 200, 146, .16); }
.lx-field > i, .lx-field .lx-fi { flex: 0 0 auto; font-size: .8rem; color: var(--text-4); }
.lx-field input, .lx-field select {
  height: 100%; min-width: 0; max-width: 100%;
  border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: .82rem; color: var(--text);
}
.lx-field input { width: 100%; }
.lx-field select { cursor: pointer; max-width: 190px; }
.lx-search { flex: 1 1 220px; }
.lx-reset {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; cursor: pointer;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: .76rem; font-weight: 600; color: var(--text-2);
  transition: all .14s;
}
.lx-reset:hover { border-color: var(--primary-200); color: var(--primary-600); }
.lx-result { margin-left: auto; font-size: .76rem; color: var(--text-3); white-space: nowrap; }
/* 窄屏只调整排布，不改吸顶 top：所有断点统一 var(--nav-h, 62px)（贴在 63px 高的导航下面） */
@media (max-width: 575px) {
  .lx-search { flex: 1 1 100%; }
  .lx-field { flex: 1 1 44%; }
  .lx-result { margin-left: 0; }
}

/* ===== 区块 ===== */
.lx-sec { margin-top: 30px; }
.lx-sec:first-of-type { margin-top: 4px; }
/* .sec-count 在布局里只在 .section-header 下好看，这里是 .st-head，补一份同样的药丸样式 */
.lx-sec .st-head h2 .sec-count {
  display: inline-block; vertical-align: middle; margin-left: 9px;
  font-family: var(--font-body); font-size: .72rem; font-weight: 600; color: var(--text-2);
  background: var(--ice); border-radius: var(--radius-pill); padding: 4px 13px;
}

/* ===== 加载更多 / 空状态 ===== */
.lx-more-wrap { display: flex; justify-content: center; margin: 22px 0 6px; }
.lx-more-wrap[hidden] { display: none; }
.lx-more-wrap .lx-more { transition: all .14s; }
.lx-more-wrap .lx-more span { font-variant-numeric: tabular-nums; opacity: .75; }
.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[hidden] { display: none; }
.lx-empty i { display: block; margin-bottom: 10px; font-size: 2.2rem; opacity: .35; color: var(--primary-600); }
.lx-empty p { margin: 0 0 14px; font-size: .86rem; }

/* ===== 页面底部 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-txt { flex: 1 1 260px; min-width: 0; }
.lx-cta-txt b { display: block; font-family: var(--font-head); font-size: 1.04rem; font-weight: 700; color: var(--text); }
.lx-cta-txt span { display: block; margin-top: 4px; font-size: .82rem; line-height: 1.7; color: var(--text-3); }
.lx-cta .lx-cta-btn { flex: 0 0 auto; transition: all .14s; }
@media (max-width: 575px) {
  .lx-cta { padding: 16px; gap: 14px; border-radius: 18px; }
  .lx-cta-ico { width: 44px; height: 44px; font-size: 1rem; }
  .lx-cta .lx-cta-btn { width: 100%; }
}

/* 首页热门城市/热门省份：和列表页一样一行 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} }
/* ===== 两栏：右侧省份筛选面板（桌面 sticky）+ 左侧城市卡片墙 =====
   窄屏（<992px）时面板自动回到卡片上方，横向排布，仍不出现横向滚动条。 */
.lx-cities-cols { /* 列保持默认拉伸：右侧面板靠 position:sticky 跟随滚动（面板自身是内容高度） */ }
.lx-prov-box {
  background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 12px 12px 4px;
  position: sticky; top: 78px;
}
.lx-prov-box-t {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700; color: var(--text-2); margin: 0 0 10px;
}
.lx-prov-box-t i { color: var(--primary-600, #0a8a63); }
.lx-prov-box-t span {
  margin-left: auto; font-size: .7rem; font-weight: 600; color: var(--text-3);
  background: var(--ice, #eef7f9); border-radius: 999px; padding: 1px 8px;
}
.lx-prov-box .lx-filters { margin: 0 0 8px; }
@media (max-width: 991px) {
  .lx-prov-box { position: static; top: auto; padding: 12px; }
}