/* ============================================================
   传统节日 /jieri —— 列表页与专题页共用
   依赖 tokens.css + app.css。颜色一律用 --c-* 令牌（§3.3）。
   ============================================================ */

/* 此前本页样式内联在 index.blade.php 的 <style> 里，且用了 --c-border / --c-card
   这类**本站没有定义**的变量名（靠 var() 第二参硬编色兜住才没露馅）。
   未定义变量会让整条声明被静默丢弃，页面照常 200、只是「有点淡」——
   迁到这里的同时一并换成真实令牌。 */

.jr-lead { background: var(--c-primary-soft); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 var(--sp-4); line-height: 1.7; }

/* ====================== 主列表：汉族传统节日 ====================== */

.jr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.jr-list > * { min-width: 0; }

.jr-card {
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: 14px 16px; background: var(--c-paper-card);
  transition: border-color .18s, box-shadow .18s;
}
.jr-card:hover { border-color: var(--c-gold-light); box-shadow: var(--shadow-sm); }

.jr-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.jr-name { font-family: var(--font-serif); font-size: var(--t-h2); font-weight: 700; }
.jr-solar {
  flex: none; font-size: var(--t-xs); white-space: nowrap;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--c-primary-soft); color: var(--c-primary-deep);
}
/* 「就是今天」由脚本加 .is-today——静态页绝不烘焙当天日期（§3.2），故只能前端判 */
.jr-solar.is-today { background: var(--c-primary); color: #fff; }

.jr-lunar { font-size: var(--t-xs); color: var(--c-ink-3); margin-bottom: 8px; }
.jr-row { font-size: var(--t-sm); line-height: 1.65; margin: 3px 0; color: var(--c-ink-2); }
.jr-row b { color: var(--c-gold); font-weight: 700; }
.jr-links { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--c-line); font-size: var(--t-sm); }
.jr-links a { color: var(--c-primary-deep); }
.jr-links a:hover { text-decoration: underline; }

.jr-note { margin-top: var(--sp-4); color: var(--c-ink-3); font-size: var(--t-sm); line-height: 1.7; }

/* ====================== 多民族节庆 ====================== */

/* ⚠️ 这一组**不要复用 home.css 的 .hot-list/.rk**。`.rk` 是 20×20px 固定尺寸的
   排名徽章（width:20px;flex:none），塞「贵州黔东南」这种地区名进去必然挤成一团；
   而且 `.hot-list a:nth-child(-n+3) .rk` 会把前三条染成主色，在这里读起来像
   「热门排行前三」——地区不是排名。故另起一套卡片栅格。 */

.jr-eth { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.jr-eth > * { min-width: 0; }

.jr-eth-item {
  display: block; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 12px 14px; background: var(--c-paper-card);
  transition: border-color .18s, box-shadow .18s;
}
.jr-eth-item:hover { border-color: var(--c-primary); box-shadow: var(--shadow-sm); }

.jr-eth-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.jr-eth-name { font-family: var(--font-serif); font-size: var(--t-md); font-weight: 700; }

/* 地区做成描边 pill：与主色 chip 区分开，避免看着像可点的标签 */
.jr-eth-region {
  flex: none; font-size: var(--t-xs); color: var(--c-ink-3);
  border: 1px solid var(--c-line); border-radius: var(--radius-pill); padding: 1px 8px;
}
.jr-eth-tag {
  flex: none; font-size: var(--t-xs); padding: 1px 8px; border-radius: var(--radius-pill);
  background: var(--c-line); color: var(--c-ink-2);
}

/* 日期说明长达三十余字（「伊斯兰历十二月十日，公历日期每年不同，以新疆维吾尔自治区
   官方公布为准」），必须正常换行——放在单行 flex 里窄屏会直接溢出视口。 */
.jr-eth-date { font-size: var(--t-sm); line-height: 1.6; color: var(--c-ink-2); overflow-wrap: anywhere; }
.jr-eth-item.is-exact .jr-eth-date { color: var(--c-primary-deep); font-weight: 700; }

@media (max-width: 480px) {
  .jr-list, .jr-eth { grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: dark) {
  .jr-card, .jr-eth-item { background: rgba(255,255,255,.04); }
}