/**
 * 吉日查询 - 工具页专属样式
 * 前缀 jr-，主题色：科技蓝 #2563eb（全站主色）
 * 结构：事项网格（4列按钮）→ 月份头卡（蓝渐变+翻月箭头）→ 月份切换条 → 吉日卡片（details 展开）
 */

/* ---------- 工具区 ---------- */
.jr-tool {
  padding-top: calc(4 * var(--u)); /* 30px */
  padding-bottom: calc(2 * var(--u));
}

.jr-title {
  font-size: calc(4.4 * var(--u)); /* 33px */
  font-weight: 700;
  color: var(--c-text);
  text-align: center;
}

.jr-sub {
  margin-top: calc(1.2 * var(--u)); /* 9px */
  font-size: calc(2.8 * var(--u)); /* 21px */
  color: #7a8699;
  text-align: center;
}

/* ---------- 事项网格（4 列按钮，index 与 item 页共用） ---------- */
.jr-items {
  margin-top: calc(2.4 * var(--u));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(1.2 * var(--u));
}

.jr-items a {
  display: block;
  text-align: center;
  font-size: calc(2.5 * var(--u)); /* 18.75px */
  color: #334155;
  background: #f8faff;
  border: 1px solid #bfdbfe;
  border-radius: calc(1 * var(--u));
  padding: calc(1.5 * var(--u)) calc(0.6 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.jr-items a:nth-child(4n+1):hover,
.jr-items a:hover {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1e40af;
}

.jr-hint {
  margin-top: calc(1.6 * var(--u));
  font-size: calc(2.1 * var(--u)); /* 15.75px */
  color: #7a8699;
  text-align: center;
}

/* ---------- 月份头卡（蓝渐变 + 上/下月箭头） ---------- */
.jr-head {
  margin-top: calc(2.4 * var(--u));
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-radius: calc(1.6 * var(--u));
  padding: calc(2.6 * var(--u)) calc(3.2 * var(--u));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(1.6 * var(--u));
}

.jr-head-mid {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.jr-head-month {
  font-size: calc(3.8 * var(--u)); /* 28.5px */
  font-weight: 700;
}

.jr-head-count {
  margin-top: calc(0.6 * var(--u));
  font-size: calc(2.4 * var(--u));
  opacity: 0.92;
}

.jr-arrow {
  position: relative;
  flex-shrink: 0;
  width: calc(5.4 * var(--u));
  height: calc(5.4 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.jr-arrow::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(1.5 * var(--u));
  height: calc(1.5 * var(--u));
  border-left: calc(0.4 * var(--u)) solid #fff;
  border-bottom: calc(0.4 * var(--u)) solid #fff;
  transform: translate(-40%, -50%) rotate(45deg);
}

.jr-arrow.next::after {
  transform: translate(-60%, -50%) rotate(-135deg);
}

/* ---------- 月份切换条（前后各 3 个月，当前月蓝色） ---------- */
.jr-months {
  margin-top: calc(1.6 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(1 * var(--u));
}

.jr-months a {
  flex: 1;
  text-align: center;
  font-size: calc(2.5 * var(--u));
  color: #64748b;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: calc(0.8 * var(--u));
  padding: calc(1.2 * var(--u)) 0;
  text-decoration: none;
}

.jr-months a.cur {
  color: #fff;
  background: #2563eb;
  border-color: #2563eb;
  font-weight: 700;
}

/* ---------- 本月吉日列表（details 折叠卡） ---------- */
.jr-day-list {
  margin-top: calc(2 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--u));
}

.jr-day {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: calc(1.2 * var(--u));
  overflow: hidden;
}

.jr-day summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: calc(1.2 * var(--u));
  padding: calc(2 * var(--u)) calc(2.2 * var(--u));
  cursor: pointer;
}

.jr-day summary::-webkit-details-marker { display: none; }

.jr-day-date {
  font-size: calc(2.8 * var(--u)); /* 21px */
  font-weight: 700;
  color: #1e40af;
  white-space: nowrap;
}

.jr-day-info {
  flex: 1;
  min-width: 0;
  font-size: calc(2.2 * var(--u));
  color: #7a8699;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jr-day-hit {
  flex-shrink: 0;
  font-size: calc(2 * var(--u));
  font-weight: 600;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: calc(0.6 * var(--u));
  padding: calc(0.2 * var(--u)) calc(0.9 * var(--u));
}

.jr-day summary .bi {
  flex-shrink: 0;
  font-size: calc(2.4 * var(--u));
  color: #94a3b8;
  transition: transform 0.2s;
}

.jr-day[open] summary .bi {
  transform: rotate(180deg);
}

.jr-day-body {
  padding: calc(1.4 * var(--u)) calc(2.2 * var(--u)) calc(1.8 * var(--u));
  border-top: 1px solid #eff6ff;
  background: #f8faff;
}

.jr-day-body p {
  display: flex;
  align-items: baseline;
  gap: calc(1 * var(--u));
  font-size: calc(2.4 * var(--u));
  line-height: 1.6;
}

.jr-day-body p + p {
  margin-top: calc(0.6 * var(--u));
}

.jr-day-body strong {
  flex-shrink: 0;
  font-weight: 600;
  color: #1e40af;
}

.jr-day-body em {
  flex-shrink: 0;
  font-style: normal;
  font-weight: 600;
  color: #15803d;
}

.jr-day-body em.ji {
  color: #be123c;
}

.jr-day-body span {
  color: #475569;
}

/* 卡片底部：查看当日完整黄历（链到万年历日期页） */
.jr-day-go {
  display: inline-flex;
  align-items: center;
  gap: calc(0.4 * var(--u));
  margin-top: calc(1.2 * var(--u));
  font-size: calc(2.4 * var(--u));
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  border-bottom: 1px dashed rgba(37, 99, 235, 0.4);
  padding-bottom: calc(0.2 * var(--u));
}

.jr-day-go .bi {
  font-size: calc(2.2 * var(--u));
}

/* ---------- 本月无吉日 ---------- */
.jr-empty {
  margin-top: calc(2 * var(--u));
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: calc(1.2 * var(--u));
  padding: calc(4 * var(--u)) calc(2.4 * var(--u));
  text-align: center;
}

.jr-empty .bi {
  font-size: calc(4.4 * var(--u));
  color: #bfdbfe;
}

.jr-empty p {
  margin-top: calc(1.2 * var(--u));
  font-size: calc(2.8 * var(--u));
  font-weight: 600;
  color: var(--c-text);
}

.jr-empty span {
  display: block;
  margin-top: calc(0.8 * var(--u));
  font-size: calc(2.2 * var(--u));
  color: #7a8699;
}

/* ---------- 择日说明 ---------- */
.jr-guide {
  margin-top: calc(3.2 * var(--u));
  background: #eff6ff;
  border-radius: calc(1.6 * var(--u));
  padding: calc(3.2 * var(--u));
  list-style: none;
}

.jr-guide li + li {
  margin-top: calc(2 * var(--u));
}

.jr-guide strong {
  display: block;
  font-size: calc(2.8 * var(--u)); /* 21px */
  font-weight: 700;
  color: #1d4ed8;
}

.jr-guide p {
  margin-top: calc(0.8 * var(--u));
  font-size: calc(2.7 * var(--u));
  line-height: 1.8;
  color: #475569;
}

/* ---------- 介绍 / 说明区块 ---------- */
.jr-intro {
  margin-top: calc(3.2 * var(--u));
  background: #eff6ff;
  border-radius: calc(1.6 * var(--u));
  padding: calc(3.2 * var(--u));
}

.jr-intro p {
  font-size: calc(2.8 * var(--u)); /* 21px */
  line-height: 1.8;
  color: #475569;
}

.jr-intro p + p {
  margin-top: calc(1.6 * var(--u));
}

.jr-intro strong {
  color: #1d4ed8;
}

/* item 页「其他吉日查询」网格沿用 .jr-items，缩一点上边距 */
.gj-section .jr-items {
  margin-top: calc(1.6 * var(--u));
}