/* ==========================================================================
   成功案例 / 品牌合作 · cases.css
   --------------------------------------------------------------------------
   来源：原 app/views/site/cases.php 第 44–64 行的内联 <style> 块，整段搬到本文件。
   那段样式写在 <body> 里、晚于 theme.css 加载：主题那套
   html[data-theme="light"] .cases-* 覆盖挂在 theme.css，本可以赢，但内联块里
   写死的字号（10.5px / 11.5px / 12.5px）把日间/夜间两套都压住了，字号偏小。

   本文件的改写约定：
   1) 字号一律走 --fs-*（10.5 → --fs-xs；小屏那几档 12/12.5 同样落 --fs-xs，
      因为令牌在 <=768 会自己降到 14px，写死 12px 反而是两套值）。
      例外：.cases-area-citychip 的 line-height: 17px 是「chip 控件高度」，
      不是行距，跟着字号走会把城市标签撑成两行，故保留原值。
   2) 间距走 --sp-*。app.css 里 .cases-* 的区块节奏是随手值（46px / 22px /
      14px），本次在**本页样式表里**覆盖成令牌，与 articles / page 两页统一：
      区块之间 --sp-7，区块标题与内容 --sp-5，卡片网格 gap --sp-4，卡片内 --sp-4。
      不改 app.css 的同名规则（那是全站共用文件，只在末尾追加）。
   3) 颜色原本就全走令牌（这个块里没有硬编码色值），本次不新增色值。
   ========================================================================== */

/* 商圈改成一张统一网格后，卡片本身就带城市 chip，不再需要「一城一段」的大标题 */
.cases-page .cases-grid-all {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-3, 12px);
}
/* 商圈名和城市 chip 同一行：名字过长时省略，避免把 chip 挤出卡片 */
.cases-page .cases-area-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cases-area-citychip {
    flex: none; font-size: var(--fs-xs, 16px); line-height: 17px; padding: 0 6px; border-radius: 4px;
    border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.cases-filter-note {
    margin: calc(-1 * var(--sp-2, 8px)) 0 var(--sp-3, 12px);
    font-family: var(--mono); font-size: var(--fs-xs, 16px); color: var(--muted);
}
.cases-filter-note b { font-weight: 600; color: var(--text-2); }

/* --------------------------------------------------------------------------
   区块节奏统一（覆盖 app.css 的 .cases-* 随手值）
   -------------------------------------------------------------------------- */

.cases-section { padding: var(--sp-7, 56px) 0 0; }
.cases-head { margin-bottom: var(--sp-5, 32px); }
.cases-filter { margin-bottom: var(--sp-4, 16px); }
.cases-mech, .cases-lib { gap: var(--sp-4, 16px); }
.cases-grid { gap: var(--sp-3, 12px); }
.cases-ways { gap: var(--sp-4, 16px); margin-bottom: var(--sp-5, 32px); }
.cases-way { padding: var(--sp-4, 16px); }
.cases-lib-card { padding: var(--sp-4, 16px); }
.cases-area { padding: var(--sp-4, 16px); }
.cases-city + .cases-city { margin-top: var(--sp-5, 32px); }
.cases-table th, .cases-table td { padding: var(--sp-3, 12px); }
.cases-foot-note { margin-top: var(--sp-3, 12px); }

/* --------------------------------------------------------------------------
   手机：99 个商圈单列排下来是 1.9 万像素，没人会滑到底，必须保底 2 列。
   2 列时单卡约 170px，内边距与字号同步收一档，租金与客群条仍放得下。
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
    .cases-page .cases-grid-all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2, 8px); }
    .cases-page .cases-area { padding: var(--sp-3, 12px) var(--sp-2, 8px); }
    .cases-page .cases-area-top b { font-size: var(--fs-xs, 16px); }
    .cases-page .cases-area-citychip { font-size: var(--fs-xs, 16px); padding: 0 5px; }
    .cases-page .cases-area-rent { font-size: var(--fs-xs, 16px); }
}