/* 三大区域页（/region/<slug>/）的补充样式。
 *
 * 复用 county.css 的版式骨架与 city.css 的 .city-counties / .county-chip / .bento /
 * .card / .season-grid / .photo-grid / .city-nav，这里只加区域页独有的三块：
 *   01 概览末尾的「三大区域对比条」——纯 CSS 横条，不新增图片字节
 *   03 市域卡片（带区内占比条）
 *   05 沿界县名单
 * 所有颜色取自页面内联的 --paper / --ink / --accent，随三大区域各自的配色变化。
 */

/* ── 01 三大区域对比 ─────────────────────────────────────
 * 横条长度 = 该区域量算面积占全省的比例；三段分母相同，所以三条长度可直接比较。
 * 当前区域加粗边框并让填色不透明，其余淡一档。 */
.region-compare { margin: 34px 0 0; display: grid; gap: 10px; }
.region-bar {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) minmax(0, 2.1fr) minmax(0, auto);
  gap: clamp(10px, 2.4vw, 22px);
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.region-bar:hover,
.region-bar:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  box-shadow: 0 18px 40px -34px var(--ink);
}
.region-bar.is-current { border-color: color-mix(in srgb, var(--accent) 62%, var(--line)); }
.region-bar-name {
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing: .1em;
  line-height: 1.2;
}
.region-bar-name em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--ink2);
}
.region-bar-track {
  position: relative;
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  overflow: hidden;
}
.region-bar-track i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--accent);
  opacity: .45;
}
.region-bar.is-current .region-bar-track i { opacity: 1; }
.region-bar-num {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.region-compare .caveat { margin: 4px 0 0; }

/* ── 03 市域卡片 ─────────────────────────────────────────
 * 与 .county-chip 同构：上方代码与类型、中间市名、下方县数与面积，
 * 底部一条淡色占比条表示该市在本区域量算面积里的份额。 */
.region-cities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin: 24px 0 0;
}
.region-city {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 132px;
  padding: 16px 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease;
}
.region-city:hover,
.region-city:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}
.region-city-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
}
.region-city-name {
  font-family: var(--serif);
  font-size: 1.32rem;
  letter-spacing: .08em;
  color: var(--accent);
}
.region-city-foot {
  margin-top: auto;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
}
.region-city-share {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  overflow: hidden;
}
.region-city-share i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  opacity: .6;
}

/* ── 05 沿界县 ───────────────────────────────────────────
 * 区域内至少有一条边界邻着别的区域的县，括注它挨着的区域。 */
.region-rim {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 26px;
}
.region-rim li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
  line-height: 1.6;
}
.region-rim a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.region-rim a:hover,
.region-rim a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.region-rim span {
  flex: none;
  color: var(--ink2);
  font-size: 11.5px;
  letter-spacing: .08em;
}

/* ── 04 四时 ─────────────────────────────────────────────
 * 县页的四时卡每张两三段物候，min-height 240px 刚好；区域页每季只有一句话，
 * 沿用同一档高度会空掉半张卡，在版式 2/3 的双列下尤其明显。这里压到内容高度，
 * 水印字也收小，避免 9rem 的「春夏秋冬」压在短文本边上抢视线。 */
.region-page .season {
  min-height: 0;
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.region-page .season h3 { margin: 0; }
.region-page .season p { margin: 0; }
.region-page .season-cn {
  right: 2px;
  bottom: -22px;
  font-size: 5.4rem;
  opacity: .07;
}

@media (max-width: 560px) {
  .region-page .season { padding: 18px 18px 20px; }
  .region-page .season-cn { font-size: 4.6rem; bottom: -18px; }
}


/* ── 06 区域实景 ─────────────────────────────────────────
 * 沿用县页那批 896px WebP，方格与市域页照片墙一套样式，只收窄列宽。 */
.region-photo-label { margin: 44px 0 0; }
.region-photo-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }

@media (max-width: 900px) {
  .region-bar { grid-template-columns: minmax(84px, .9fr) minmax(0, 1.6fr); row-gap: 4px; }
  .region-bar-num { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 560px) {
  .region-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .region-city { min-height: 124px; padding: 14px 13px 16px; }
  .region-city-name { font-size: 1.15rem; }
  .region-rim { grid-template-columns: minmax(0, 1fr); }
  .region-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .region-bar, .region-city { transition: none; }
}