/* ============================================================
   小满公考新版官网 · 详情页样式（依赖 xm-home.css 的变量与基础）
   ============================================================ */

.dt-hero { position: relative; overflow: hidden; padding: 128px 0 46px; background: radial-gradient(110% 70% at 50% -8%, rgba(221,179,94,0.14), transparent 56%), linear-gradient(180deg, var(--paper), var(--cream) 70%); }
.dt-hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.dt-crumb { display: inline-flex; align-items: center; gap: 10px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; color: var(--blue); text-transform: uppercase; }
.dt-crumb i { width: 22px; height: 2px; background: var(--gold); }
.dt-crumb strong { color: var(--sub); letter-spacing: 0.02em; }
.dt-title-row { display: flex; align-items: baseline; gap: 14px; margin-top: 16px; }
.dt-index { flex: 0 0 auto; font-size: clamp(15px, 1.4vw, 19px); font-weight: 800; color: var(--gold); letter-spacing: 0.06em; }
.dt-hero h1 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; color: var(--blue-ink); text-wrap: balance; }
.dt-lead { margin-top: 16px; max-width: 56ch; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.85; color: var(--sub); }
.dt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.dt-chips span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 8px 15px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-2); font-size: 0.82rem; font-weight: 700; color: var(--blue-ink); }
.dt-chips span::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); }
.dt-hero-media { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 30px 70px rgba(27,42,102,0.18); }
.dt-hero-media img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.dt-hero-media figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 22px 14px; font-size: 0.8rem; font-weight: 700; color: #fff; background: linear-gradient(180deg, transparent, rgba(20,34,90,0.78)); }
.dt-back { position: fixed; left: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(27,42,102,0.16); font-size: 0.86rem; font-weight: 800; color: var(--blue-ink); transition: transform 0.2s, box-shadow 0.2s; }
.dt-back:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(27,42,102,0.2); }
.dt-back em { font-style: normal; color: var(--gold); }

/* 场景图文 */
.dt-show { padding: clamp(50px, 7vw, 84px) 0 10px; }
.dt-show-copy { max-width: 720px; }
.dt-show-copy h2 { margin-top: 12px; font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.18; color: var(--blue-ink); text-wrap: balance; }
.dt-show-copy > p { margin-top: 14px; color: var(--sub); line-height: 1.85; }
.dt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 34px; }
.dt-grid figure { position: relative; border-radius: var(--r); overflow: hidden; background: var(--paper); border: 1px solid var(--line-2); box-shadow: 0 14px 36px rgba(27,42,102,0.07); transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.dt-grid figure:hover { transform: translateY(-4px); box-shadow: 0 24px 54px rgba(27,42,102,0.12); }
.dt-grid img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.dt-grid figcaption { display: grid; gap: 4px; padding: 18px 20px 20px; }
.dt-grid figcaption strong { font-size: 1.05rem; font-weight: 800; color: var(--blue-ink); }
.dt-grid figcaption span { font-size: 0.88rem; line-height: 1.7; color: var(--sub); }

/* 正文 + 侧栏 */
.dt-layout { display: grid; grid-template-columns: 280px 1fr; gap: clamp(26px, 4vw, 56px); align-items: start; padding: clamp(50px, 7vw, 80px) 0 90px; }
.dt-side { position: sticky; top: 100px; padding: 28px 26px; border-radius: var(--r-lg); background: linear-gradient(165deg, var(--blue-ink), var(--blue-deep)); color: #fff; overflow: hidden; }
.dt-side::after { content: ""; position: absolute; right: -48px; top: -34px; width: 200px; height: 156px; background: var(--xm-line-dark) center/contain no-repeat; pointer-events: none; }
.dt-side > * { position: relative; z-index: 1; }
.dt-side p { font-size: 0.84rem; color: rgba(255,255,255,0.72); }
.dt-side strong { display: block; margin: 8px 0 18px; font-size: 1.3rem; font-weight: 800; line-height: 1.35; }
.dt-side .btn { width: 100%; }
.dt-side .mascot { display: block; width: 92px; margin: 18px auto -4px; }
.dt-article { display: grid; gap: clamp(34px, 4.5vw, 50px); min-width: 0; }
.dt-article > * { min-width: 0; } /* 防止数据表 min-width 把 grid 列撑爆（页面变 580px 宽的根因） */
.dt-sec h2 { position: relative; padding-left: 16px; font-size: clamp(20px, 2.3vw, 27px); font-weight: 800; letter-spacing: -0.01em; color: var(--blue-ink); }
.dt-sec h2::before { content: ""; position: absolute; left: 0; top: 0.32em; bottom: 0.18em; width: 5px; border-radius: 3px; background: linear-gradient(180deg, var(--gold), var(--blue)); }
.dt-sec p { margin-top: 12px; line-height: 1.95; color: var(--sub); max-width: 76ch; }
.dt-sec ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; padding: 0; list-style: none; }
.dt-sec li { display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line-2); font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.dt-sec li::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold); }
.dt-note { margin-top: 16px; padding: 14px 18px; border-radius: 12px; background: rgba(221,179,94,0.1); border: 1px dashed rgba(181,121,10,0.4); font-size: 0.86rem; line-height: 1.8; color: #7a5b13; }

/* 上岸榜（详情页版） */
.dt-board { margin-top: 18px; padding: 0; list-style: none; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.dt-board li { display: grid; grid-template-columns: 44px 1.1fr 1.5fr 1.2fr; gap: 10px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--line-2); font-size: 0.9rem; }
.dt-board li:last-child { border-bottom: none; }
.dt-board li.hl { background: rgba(221,179,94,0.08); }
.dt-board .idx { font-size: 0.78rem; font-weight: 800; color: var(--gold); }
.dt-board .nm { font-weight: 800; color: var(--blue-ink); white-space: nowrap; }
.dt-board .post { color: var(--sub); }
.dt-board .sc { font-weight: 700; color: var(--ink); text-align: right; white-space: nowrap; }

/* 进面数据报告 */
.dt-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.dt-metrics div { padding: 18px 16px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line-2); }
.dt-metrics strong { display: block; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.02em; color: var(--blue-ink); }
.dt-metrics span { display: block; margin-top: 4px; font-size: 0.8rem; font-weight: 700; color: var(--sub); }
.dt-bars { display: grid; gap: 10px; margin-top: 20px; }
.dt-bars > div { display: grid; grid-template-columns: 64px 1fr 76px; gap: 12px; align-items: center; }
.dt-bars span { font-size: 0.82rem; font-weight: 800; color: var(--blue-ink); white-space: nowrap; }
.dt-bars i { display: block; height: 12px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line-2); overflow: hidden; }
.dt-bars b { display: block; height: 100%; width: calc(var(--bar-ratio, 0) * 100%); border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--gold)); }
.dt-bars strong { font-size: 0.84rem; font-weight: 800; color: var(--ink); text-align: right; white-space: nowrap; }
.dt-table-wrap { margin-top: 22px; overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); }
.dt-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 560px; }
.dt-table th, .dt-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line-2); }
.dt-table thead th { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; color: var(--sub); background: var(--cream); white-space: nowrap; }
.dt-table tbody th { font-weight: 800; color: var(--blue-ink); white-space: nowrap; }
.dt-table tbody td { color: var(--sub); }
.dt-table tbody tr:last-child th, .dt-table tbody tr:last-child td { border-bottom: none; }

/* 未找到 */
.dt-nf { min-height: 72svh; display: grid; place-items: center; text-align: center; padding: 140px 20px 80px; }
/* hidden 属性必须赢过上面的 display:grid，否则未找到块会出现在每个正常详情底部 */
.dt-nf[hidden], [data-dt-root][hidden] { display: none; }
.dt-nf img { width: min(180px, 40vw); }
.dt-nf h1 { margin-top: 14px; font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--blue-ink); }
.dt-nf p { margin: 10px auto 0; max-width: 42ch; color: var(--sub); }
.dt-nf .acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }

@media (max-width: 960px) {
  .dt-hero { padding-top: 112px; }
  .dt-hero .wrap { grid-template-columns: 1fr; }
  .dt-layout { grid-template-columns: 1fr; }
  /* relative 而非 static：static 会让 ::after 装饰逃出侧栏，把页面撑宽 48px */
  .dt-side { position: relative; top: auto; order: 2; }
  .dt-sec ul { grid-template-columns: repeat(2, 1fr); }
  .dt-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .dt-grid { grid-template-columns: 1fr; }
  .dt-sec ul { grid-template-columns: 1fr; }
  /* 成绩墙单行改三行；每格显式定位——自动放置会把 nm/post 排进同一行叠压 */
  .dt-board li { grid-template-columns: 30px 1fr; grid-template-rows: auto auto auto; row-gap: 2px; }
  .dt-board .idx { grid-area: 1 / 1; }
  .dt-board .nm { grid-area: 1 / 2; white-space: normal; }
  .dt-board .post { grid-area: 2 / 2; }
  .dt-board .sc { grid-area: 3 / 1 / 4 / 3; text-align: left; }
  .dt-back { left: 12px; bottom: 16px; } /* 旧值 76px 是给已移除的底部悬浮条让位 */
}