/* style.css — 消防员题库：首页分区与内页版式（版心 1280，分区高度按 03-ui 稿的分区预算落位） */

/* ================================================================== 首屏 */
.hero {
  position: relative;
  height: 504px;
  overflow: hidden;
  background: #961b15;
  color: #fff;
}

.hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 40%;
  filter: brightness(1.18) saturate(1.06);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(150, 26, 19, .97) 0%,
      rgba(152, 28, 20, .95) 32%,
      rgba(152, 30, 22, .62) 42%,
      rgba(152, 32, 24, .22) 52%,
      rgba(152, 34, 26, 0) 62%);
}

.hero .wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100%;
  padding-top: 30px;
}

.hero-copy { max-width: 960px; }

.hero h1 {
  font-size: 62px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: .5px;
}

.hero h1 .hl {
  position: relative;
  display: block;
  color: var(--yellow);
  white-space: nowrap;
}

.hero h1 .hl::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: -16px;
  width: 84px;
  height: 4px;
  border-radius: 2px;
  background: var(--yellow);
}

.hero-lead {
  max-width: 640px;
  margin-top: 34px;
  color: rgba(255, 255, 255, .9);
  font-size: 26px;
  line-height: 1.72;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 28px;
}

.hero-actions .btn { padding: 18px 38px; font-size: 19px; }

.hero-meta {
  margin-top: 26px;
  font-size: 16px;
  color: rgba(255, 255, 255, .82);
  letter-spacing: .3px;
}

.hero-meta a { border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 1px; }
.hero-meta a:hover { color: var(--yellow); border-color: var(--yellow); }
.hero-meta .sep { margin: 0 6px; color: rgba(255, 255, 255, .45); }

/* ============================================================== 分类索引 */
.categories { padding: 35px 0 27px; }

.categories .section-head { margin-bottom: 18px; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-height: 180px;
  padding: 16px 13px 14px;
  text-align: center;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.cat-card:hover {
  background: #fff;
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.cat-icon { color: var(--red); line-height: 0; }
.cat-icon svg { width: 34px; height: 34px; }
.cat-icon-blue { color: #2f6fd0; }

.cat-card h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .3px;
}

.cat-card p {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.72;
  max-width: 176px;
}

.cat-wide {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding: 17px 28px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background-color .18s ease, border-color .18s ease;
}

.cat-wide:hover { background: #fff; border-color: var(--line-strong); }
.cat-wide .cat-icon svg { width: 40px; height: 40px; }

.cat-wide h3 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .3px;
}

.cat-wide p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
}

/* ============================================================== 编辑推荐 */
.featured { padding: 4px 0 0; }

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.feature-card {
  display: flex;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.feature-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 6px 18px rgba(20, 24, 40, .07);
}

.feature-thumb {
  flex-shrink: 0;
  width: 132px;
  height: 166px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.feature-thumb img { width: 100%; height: 100%; object-fit: cover; }

.feature-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.feature-body .tag { align-self: flex-start; }

.feature-body h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
}

.feature-body p {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feature-body .meta-dot { margin-top: auto; }

/* ============================================================ 三步备考路径 */
.study-path { padding: 0; }

.study-band {
  padding: 23px 34px 26px;
  background: var(--surface-2);
  border-radius: var(--radius);
}

.study-band .section-title { font-size: 28px; margin-bottom: 18px; }

.study-body {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  min-height: 112px;
}

.study-illus {
  flex-shrink: 0;
  width: 88px;
  color: var(--red);
  opacity: .9;
}

.study-illus svg { width: 100%; height: auto; }

.study-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 26px;
  flex: 1;
  align-items: start;
}

.study-step { position: relative; display: flex; gap: 12px; }

.study-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -30px;
  top: 46px;
  color: #eaa9a4;
  font-size: 28px;
  line-height: 1;
}

.study-no {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 26px;
  text-align: center;
}

/* 序号用 CSS 生成，避免在正文文本里插入数字破坏文案连续性 */
.study-step:nth-child(1) .study-no::before { content: "1"; }
.study-step:nth-child(2) .study-no::before { content: "2"; }
.study-step:nth-child(3) .study-no::before { content: "3"; }

.study-step h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.study-step p {
  margin-top: 7px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.85;
}

/* ============================================================== 最新整理 */
.latest { padding: 20px 0 7px; }

.latest-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 38px;
  padding: 8px 22px;
  background: var(--surface);
  border-radius: var(--radius);
}

.latest-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(232, 234, 238, .9);
}

.latest-row:nth-child(3) { border-bottom: 0; }

.latest-row a {
  flex: 1;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.latest-row a:hover { color: var(--red); }

.latest-row .meta-dot { flex-shrink: 0; font-size: 12px; }

/* ============================================================== 备考问答 */
.faq { padding: 10px 0 27px; }

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  gap: 12px 22px;
}

.faq-item {
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0 16px;
  transition: background-color .18s ease;
}

.faq-item[open] { background: #fff; border-color: var(--line); }

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-q {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.faq-q::before { content: "?"; }

.faq-chevron {
  margin-left: auto;
  color: var(--muted);
  line-height: 0;
  transition: transform .2s ease;
}

.faq-item[open] .faq-chevron { transform: rotate(90deg); }

.faq-a {
  padding: 0 0 16px 34px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.85;
}

/* =================================================================== 页脚 */
.site-footer .footer-nav { max-width: 700px; }

/* ============================================================ 内页：列表 */
.page-hero .page-hero-stats { align-self: end; }

.list-section .section-head { margin-bottom: 20px; }

/* ============================================================ 内页：详情 */
.article-wrap .toc + * { min-width: 0; }

/* 移动端首屏高度收口 */
@media (max-width: 980px) {
  .hero { height: auto; min-height: 400px; }
  .hero .wrap { padding-top: 46px; padding-bottom: 46px; align-items: flex-start; }
  .hero h1 { font-size: 34px; }
  .hero-media { width: 100%; }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(124, 13, 9, .95) 0%, rgba(124, 14, 10, .90) 55%, rgba(124, 14, 10, .86) 100%),
      linear-gradient(90deg, rgba(124, 13, 9, .5) 0%, rgba(124, 13, 9, 0) 70%);
  }
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .featured-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-thumb { width: 116px; height: 132px; }
  .study-body { flex-direction: column; gap: 16px; }
  .study-illus { width: 64px; }
  .study-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .study-step:not(:last-child)::after { content: none; }
  .latest-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .latest-row:nth-child(3) { border-bottom: 1px solid rgba(232, 234, 238, .9); }
  .latest-row:last-child { border-bottom: 0; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}

@media (max-width: 620px) {
  .hero { min-height: 0; }
  .hero h1 { font-size: 25px; line-height: 1.36; }
  .hero h1 .hl { white-space: normal; }
  .hero h1 .hl::after { display: none; }
  .hero-lead { font-size: 15px; }
  .hero-actions .btn { flex: 1; padding: 11px 16px; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-card { min-height: 0; padding: 18px 12px 16px; }
  .cat-wide { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; }
  .study-band { padding: 20px 18px 22px; }
  .study-band .section-title { font-size: 20px; }
  .feature-card { flex-direction: column; }
  .feature-thumb { width: 100%; height: 160px; }
  .latest-row { flex-wrap: wrap; gap: 6px 10px; }
  .latest-row a { flex: 1 0 100%; white-space: normal; }
}

/* 无图时的占位 */
.hero-ph { display: grid; place-items: center; width: 100%; height: 100%; min-height: 320px; font-size: 72px; background: var(--surface); }
.feature-thumb .thumb-ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 34px; background: var(--surface); }