/**
 * 场景专区（批X409）——门户页 /zones/ + 场景归档页头。0 硬编码色·全 token。
 * 六家族 tint 映射既有状态/品牌 token（亮暗两套自动跟随 tokens.css）。
 *
 * @package BumianTheme
 */

/* —— 字标色块（门户卡 / 家族头 / 归档页头共用） —— */
.b-zone-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	font-size: 17px;
	font-weight: 700;
	flex: none;
}
.b-zone-tile--sm { width: 26px; height: 26px; border-radius: 7px; font-size: 13px; }
.b-zone-tile--lg { width: 52px; height: 52px; border-radius: 14px; font-size: 24px; }
.b-zone-tile--shengyi   { background: var(--success-50); color: var(--success-strong); }
.b-zone-tile--chuangzuo { background: var(--brand-50);   color: var(--brand-700); }
.b-zone-tile--tixiao    { background: var(--info-50);    color: var(--info-strong); }
.b-zone-tile--xuexi     { background: var(--accent-50);  color: var(--accent-strong); }
.b-zone-tile--shenghuo  { background: var(--danger-50);  color: var(--danger-strong); }
/* 〔批X437〕新增 5 族：复用 6 组已 AA 验证 token（char-on-tint 达标）·门户顺序下无相邻同色。 */
.b-zone-tile--shengyin  { background: var(--warning-50); color: var(--warning-strong); }
.b-zone-tile--shijue    { background: var(--accent-50);  color: var(--accent-strong); }
/* 〔批X457〕新族 游戏与三维：门户顺序 …shijue(accent) → youxisanwei → youxijie(danger)…，取 info 组
   （已 AA 验证·与前后两族不同色·且与同用 info 的 tixiao 在门户顺序上不相邻）。 */
.b-zone-tile--youxisanwei { background: var(--info-50);  color: var(--info-strong); }
.b-zone-tile--youxijie  { background: var(--danger-50);  color: var(--danger-strong); }
.b-zone-tile--kaifa     { background: var(--success-50); color: var(--success-strong); }
.b-zone-tile--aigongju  { background: var(--brand-50);   color: var(--brand-700); }

/* —— 门户页 —— */
.b-zones__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 8px 0 10px;
}
.b-zones__title { margin: 0 0 4px; }
.b-zones__sub { margin: 0; color: var(--ink-2); }
.b-zones__stats { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; }
/* 〔批X464 站长选方案 A〕家族分组「肉眼不好观察」：原来族名仅 20px、字标 26px、族间距 26px，
   移动端卡片竖排后各族糊成一片。方案 A = 加一条分隔线 + 放大族名与字标 + 拉开族间距 +
   计数改小胶囊。**纯 CSS·markup 零改动**；刻意不动家族配色（11 族共用 7 色有 5 对撞色，
   但 A 方案颜色只出现在小字标上、受影响最小；补色是另一件事，站长未拍板）。 */
/* 〔批X465 站长指出「卡片和横线之间留白太多」〕原 40/44px 上间距 + 16/18px 下留白＝上是下的
   2.3 倍，横线看着离上一族的卡片很远、像浮在中间。收紧到约 1.6 倍：线更贴近它所引出的新分组。 */
.b-zones__family { margin: 24px 0 0; }
.b-zones__family-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 14px;
	padding-top: 14px;
	border-top: 1px solid var(--line-strong);
}
/* 〔批X465 站长选方案 3〕族头字标：去底色块，改**裸大数字**（序号来自 family_num）。
   仍沿用 .b-zone-tile--{族} 取家族色（背景在此覆写为透明，只留 color）；
   数字比 30px 小方块更醒目，且移动端省下约 30px 横向宽度。tabular-nums 保证两位数等宽不跳。 */
.b-zones__family-head .b-zone-tile {
	width: auto;
	height: auto;
	background: transparent;
	border-radius: 0;
	font-size: 26px;
	line-height: 1;
	letter-spacing: -0.5px;
	font-variant-numeric: tabular-nums;
}
/* 首个家族紧接页头，再画一条线就与页头分隔重复 → 去线去上留白。 */
.b-zones__family:first-of-type { margin-top: 22px; }
.b-zones__family:first-of-type .b-zones__family-head { padding-top: 0; border-top: 0; }
.b-zones__family-name { margin: 0; font-size: 23px; font-weight: 700; }
/* 计数从裸文字改小胶囊：与族名拉开层级，避免两段文字挤在一起分不清主次。 */
.b-zones__family-n {
	color: var(--ink-3);
	font-size: 12px;
	line-height: 1;
	padding: 4px 9px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	white-space: nowrap;
}
/* 〔批X465〕原 X464 的「族头字标放大到 30px 方块」已被上方裸数字规则取代（--sm 的宽高在此不再生效）。 */
.b-zones__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
	gap: 12px;
}
/* 〔批X450〕电脑端：按本族卡数注入的 --zc 列数铺满每排（PHP 端 bumian_theme_scene_family_cols
   算均衡列·无零散末排）。仅 ≥1025px 生效；平板/移动维持上方 auto-fill 与 640px 断点不变。
   回退：删本 @media 块 + page-zones.php 的 style="--zc…" + scene-pages.php 的 family_cols 助手。 */
@media (min-width: 1025px) {
	.b-zones__grid { grid-template-columns: repeat(var(--zc, 5), minmax(0, 1fr)); }
}
.b-zone-card {
	display: block;
	background: var(--bg-0);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 14px 16px;
	text-decoration: none;
	color: var(--ink-1);
}
.b-zone-card:hover { border-color: var(--line-strong); text-decoration: none; }
.b-zone-card__top { display: flex; align-items: center; gap: 10px; }
.b-zone-card__meta { display: flex; flex-direction: column; min-width: 0; }
.b-zone-card__name { font-weight: 600; font-size: 15px; line-height: 1.4; }
.b-zone-card__count { color: var(--ink-3); font-size: 12.5px; }
.b-zone-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* —— 空态 —— */
.b-zones__empty {
	border: 1px dashed var(--line-strong);
	border-radius: 14px;
	padding: 40px 24px;
	text-align: center;
	margin: 18px 0 0;
}
.b-zones__empty-title { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.b-zones__empty-sub { margin: 0 0 16px; color: var(--ink-2); }

/* —— 场景归档页头 —— */
.b-scene-head { margin: 6px 0 14px; }
.b-scene-head__row { display: flex; align-items: center; gap: 14px; }
.b-scene-head__title { margin: 0 0 2px; }
.b-scene-head__desc { margin: 0; color: var(--ink-2); font-size: 14px; }
.b-scene-head__tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }

/* —— 场景 chip（归档页头 + 门户卡 mini） —— */
.b-scene-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg-0);
	color: var(--ink-2);
	font-size: 13px;
	line-height: 1.5;
	text-decoration: none;
}
a.b-scene-chip:hover { border-color: var(--line-strong); color: var(--ink-1); text-decoration: none; }
.b-scene-chip--on { border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.b-scene-chip__n { color: var(--ink-4); font-size: 11.5px; }
.b-scene-chip--mini { font-size: 11.5px; padding: 1px 9px; color: var(--ink-3); }

@media (max-width: 640px) {
	.b-zones__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
	.b-zone-tile--lg { width: 44px; height: 44px; font-size: 20px; }
	/* 〔批X464〕移动端族间距再拉开一档：竖排卡片本就长，族与族靠近时最糊（站长截图即此态）。 */
	/* 〔批X465〕移动端同步收紧（原 44/18 → 26/16·站长「留白太多」）；序号略降一档配 21px 族名。 */
	.b-zones__family { margin-top: 26px; }
	.b-zones__family-head { padding-top: 16px; }
	.b-zones__family-name { font-size: 21px; }
	.b-zones__family-head .b-zone-tile { font-size: 23px; }
}

/* —— 首页场景专区入口（批X410·front-page 唯一插入区块） —— */
.b-zones-home__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}
.b-zones-home__head .b-section__title,
.b-zones-home__head .b-section__subtitle { margin: 0; }
.b-zones-home__more { margin-left: auto; font-size: 13.5px; white-space: nowrap; }
.b-zones-home__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}
.b-zone-card--all {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--brand-50);
	border-color: transparent;
	color: var(--brand-700);
	font-weight: 600;
	font-size: 14px;
}
.b-zone-card--all:hover { border-color: var(--brand); }

/* —— 关注专区按钮（批X411·归档页头右侧） —— */
.b-scene-head__row .b-scene-follow { margin-left: auto; flex: none; }
.b-scene-follow.is-on { background: var(--brand-50); color: var(--brand-700); border-color: transparent; }

/* —— 虚位以待卡（批X414·空专区不再隐身=供给侧空位招募） —— */
.b-zone-card--empty { border-style: dashed; }
.b-zone-card--empty .b-zone-tile { opacity: .55; }
.b-zone-card--empty .b-zone-card__name { color: var(--ink-2); }
.b-zone-card--empty .b-zone-card__count { color: var(--ink-4); }
.b-zone-card--empty:hover { border-color: var(--brand); border-style: dashed; }

/* —— 专区页头补强（批X415·目的地感） —— */
.b-scene-head__stats { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; }
.b-scene-chip--dead { color: var(--ink-4); border-style: dashed; cursor: default; }

/* —— 首页「热门细分」条（批X416·专区卡下二级标签热点直达） —— */
.b-zones-home__hot {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 14px 0 0;
}
.b-zones-home__hot-label { color: var(--ink-3); font-size: 13px; flex: none; }