/* ===== 页面专属：问题解答 ===== */
.page-faq {
  --faq-side: 300px;
  background: var(--lb-paper);
  font-family: var(--lb-font-body);
}

/* ===== 顶部封面区 ===== */
.page-faq .faq-cover {
  padding: var(--lb-space-5) 0 var(--lb-space-4);
  background: linear-gradient(180deg, #ffffff 0%, var(--lb-paper) 100%);
  border-bottom: 1px solid var(--lb-line);
}

.page-faq .faq-cover__inner .lb-crumbs {
  margin-bottom: var(--lb-space-5);
}

.page-faq .faq-cover__grid {
  display: grid;
  gap: var(--lb-space-4);
}

.page-faq .faq-cover__heading .lb-kicker {
  margin-bottom: var(--lb-space-3);
}

.page-faq .faq-cover__heading h1 {
  font-family: var(--lb-font-head);
  font-size: clamp(2rem, 6vw, 3.8rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 var(--lb-space-3);
  max-width: 13em;
  color: var(--lb-deep);
}

.page-faq .faq-cover__lead {
  font-family: var(--lb-font-body);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--lb-gray);
  max-width: 34em;
}

.page-faq .faq-cover__meta {
  border: 1px solid var(--lb-line);
  background: var(--lb-paper);
  padding: var(--lb-space-4);
  position: relative;
}

.page-faq .faq-cover__meta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--lb-gold);
}

.page-faq .faq-cover__meta .lb-annotate {
  margin-bottom: var(--lb-space-3);
}

.page-faq .faq-cover__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
}

.page-faq .faq-cover .diagonal-line {
  margin-top: var(--lb-space-5);
}

/* ===== 布局主体 ===== */
.page-faq .faq-layout__inner {
  padding-top: var(--lb-space-5);
}

.page-faq .faq-index {
  background: var(--lb-paper);
  border: 1px solid var(--lb-line);
  border-left: 4px solid var(--lb-deep);
  padding: var(--lb-space-4);
  margin-bottom: var(--lb-space-6);
}

.page-faq .faq-index__title {
  font-family: var(--lb-font-head);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--lb-deep);
  margin: 0 0 var(--lb-space-3);
  padding-bottom: var(--lb-space-2);
  border-bottom: 2px solid var(--lb-deep);
}

.page-faq .faq-index__list {
  list-style: none;
  margin: 0 0 var(--lb-space-4);
  padding: 0;
}

.page-faq .faq-index__list li + li {
  border-top: 1px dashed var(--lb-line);
}

.page-faq .faq-index__list a {
  display: flex;
  align-items: baseline;
  gap: var(--lb-space-2);
  text-decoration: none;
  padding: var(--lb-space-3) 0;
  font-family: var(--lb-font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--lb-deep);
  transition: color var(--lb-transition), padding-left var(--lb-transition);
}

.page-faq .faq-index__list a span {
  font-family: var(--lb-font-data);
  font-size: 0.72rem;
  color: var(--lb-gold);
  font-weight: 700;
}

.page-faq .faq-index__list a:hover {
  color: var(--lb-red);
  padding-left: var(--lb-space-2);
}

.page-faq .faq-index__stats {
  margin: var(--lb-space-4) 0;
  border-top: 2px solid var(--lb-deep);
  border-bottom: 1px solid var(--lb-line);
}

.page-faq .faq-index__stats div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--lb-space-2) 0;
}

.page-faq .faq-index__stats dt {
  font-family: var(--lb-font-body);
  font-size: 0.82rem;
  color: var(--lb-gray);
}

.page-faq .faq-index__stats dd {
  font-family: var(--lb-font-data);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--lb-deep);
}

.page-faq .faq-index__cta {
  width: 100%;
  margin-top: var(--lb-space-2);
  justify-content: center;
}

.page-faq .faq-content {
  min-width: 0;
}

/* ===== 问答区块 ===== */
.page-faq .faq-block {
  margin-bottom: var(--lb-space-6);
}

.page-faq .faq-block__head {
  display: flex;
  align-items: flex-start;
  gap: var(--lb-space-3);
  border-bottom: 2px solid var(--lb-deep);
  padding-bottom: var(--lb-space-3);
  margin-bottom: var(--lb-space-2);
}

.page-faq .faq-block__no {
  flex: 0 0 auto;
  font-family: var(--lb-font-data);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--lb-deep);
  background: var(--lb-gold);
  padding: var(--lb-space-1) var(--lb-space-3) var(--lb-space-1) var(--lb-space-2);
  clip-path: polygon(0 0, 100% 0, 100% 76%, 88% 100%, 0 100%);
}

.page-faq .faq-block__titles h2 {
  font-family: var(--lb-font-head);
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 var(--lb-space-1);
  color: var(--lb-deep);
}

.page-faq .faq-block__titles p {
  font-family: var(--lb-font-body);
  font-size: 0.9rem;
  color: var(--lb-gray);
  margin: 0;
}

/* ===== 问题条目 ===== */
.page-faq .faq-item {
  border-bottom: 1px solid var(--lb-line);
}

.page-faq .faq-item details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lb-space-3);
  padding: var(--lb-space-4) 0;
  transition: color var(--lb-transition);
}

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

.page-faq .faq-item summary h3 {
  font-family: var(--lb-font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
  padding: 0;
  color: var(--lb-ink);
  transition: color var(--lb-transition);
}

.page-faq .faq-item details > summary:hover h3 {
  color: var(--lb-deep);
}

.page-faq .faq-item .faq-item__mark {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--lb-deep);
  color: var(--lb-deep);
  font-family: var(--lb-font-head);
  font-weight: 900;
  font-size: 1rem;
  line-height: 1;
  transition: transform var(--lb-transition), background var(--lb-transition), color var(--lb-transition);
}

.page-faq .faq-item details[open] > summary .faq-item__mark {
  background: var(--lb-deep);
  color: var(--lb-gold);
  transform: rotate(45deg);
}

.page-faq .faq-item__answer {
  border-left: 3px solid var(--lb-gold);
  background: #ffffff;
  padding: var(--lb-space-4);
  margin: 0 0 var(--lb-space-4);
  font-family: var(--lb-font-body);
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--lb-ink);
  box-shadow: 4px 4px 0 rgba(10, 31, 68, 0.04);
}

.page-faq .faq-item__answer p + p,
.page-faq .faq-item__answer p + ul {
  margin-top: var(--lb-space-3);
}

.page-faq .faq-item__list {
  padding-left: 1.2em;
  margin: var(--lb-space-2) 0 0;
  font-family: var(--lb-font-body);
  line-height: 1.8;
}

.page-faq .faq-item__list li + li {
  margin-top: var(--lb-space-1);
}

.page-faq .faq-item__link {
  display: inline-block;
  margin-top: var(--lb-space-3);
  font-family: var(--lb-font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--lb-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--lb-gold);
  padding-bottom: 2px;
  transition: color var(--lb-transition), border-color var(--lb-transition);
}

.page-faq .faq-item__link:hover {
  color: var(--lb-red);
  border-color: var(--lb-red);
}

/* ===== 图片 ===== */
.page-faq .faq-media {
  max-width: min(460px, 100%);
  margin: var(--lb-space-5) 0 0;
  border: 1px solid var(--lb-line);
  background: var(--lb-silver);
  padding: var(--lb-space-2);
}

.page-faq .faq-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-faq .faq-media figcaption {
  font-family: var(--lb-font-data);
  font-size: 0.73rem;
  color: var(--lb-gray);
  padding: var(--lb-space-2) var(--lb-space-1) var(--lb-space-1);
}

.page-faq .faq-block--search .faq-media {
  margin-left: auto;
  margin-right: 0;
}

/* ===== 深色赛程区块 ===== */
.page-faq .faq-block--schedule {
  background: var(--lb-deep);
  color: var(--lb-paper);
  padding: var(--lb-space-5) var(--lb-space-4) var(--lb-space-4);
  margin: var(--lb-space-6) 0;
  position: relative;
}

.page-faq .faq-block--schedule::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: repeating-linear-gradient(90deg, var(--lb-gold) 0 24px, transparent 24px 40px);
}

.page-faq .faq-block--schedule .faq-block__head {
  border-bottom-color: var(--lb-gold);
}

.page-faq .faq-block--schedule .faq-block__no {
  background: var(--lb-gold);
  color: var(--lb-deep);
}

.page-faq .faq-block--schedule .faq-block__titles h2 {
  color: var(--lb-gold);
}

.page-faq .faq-block--schedule .faq-block__titles p {
  color: rgba(245, 243, 239, 0.72);
}

.page-faq .faq-block--schedule .faq-item {
  border-bottom-color: rgba(245, 243, 239, 0.16);
}

.page-faq .faq-block--schedule summary h3 {
  color: var(--lb-paper);
}

.page-faq .faq-block--schedule details > summary:hover h3 {
  color: var(--lb-gold);
}

.page-faq .faq-block--schedule .faq-item .faq-item__mark {
  border-color: var(--lb-gold);
  color: var(--lb-gold);
}

.page-faq .faq-block--schedule .faq-item details[open] > summary .faq-item__mark {
  background: var(--lb-gold);
  color: var(--lb-deep);
}

.page-faq .faq-block--schedule .faq-item__answer {
  background: rgba(245, 243, 239, 0.08);
  border-left-color: var(--lb-gold);
  color: var(--lb-paper);
  box-shadow: none;
}

.page-faq .faq-block--schedule .faq-item__answer a {
  color: var(--lb-gold);
  border-bottom-color: rgba(201, 162, 39, 0.6);
}

/* ===== 底部反馈 ===== */
.page-faq .faq-foot {
  margin-top: var(--lb-space-6);
  padding: var(--lb-space-5) var(--lb-space-4);
  background: var(--lb-deep);
  border-left: 6px solid var(--lb-gold);
  color: var(--lb-paper);
  position: relative;
}

.page-faq .faq-foot h2 {
  font-family: var(--lb-font-head);
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 var(--lb-space-3);
  color: var(--lb-gold);
}

.page-faq .faq-foot p {
  font-family: var(--lb-font-body);
  line-height: 1.75;
  margin: 0 0 var(--lb-space-2);
  color: var(--lb-paper);
}

.page-faq .faq-foot__email {
  font-family: var(--lb-font-data);
  color: var(--lb-gold);
  font-size: 0.95rem;
  word-break: break-all;
}

.page-faq .faq-foot__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-3);
  margin-top: var(--lb-space-4);
}

.page-faq .faq-foot__catalog {
  display: inline-block;
  margin-top: var(--lb-space-4);
  font-family: var(--lb-font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--lb-paper);
  text-decoration: none;
  border-bottom: 2px solid var(--lb-gold);
  padding-bottom: 2px;
  transition: color var(--lb-transition), border-color var(--lb-transition);
}

.page-faq .faq-foot__catalog:hover {
  color: var(--lb-gold);
  border-color: var(--lb-red);
}

/* ===== 桌面端布局 ===== */
@media (min-width: 900px) {
  .page-faq .faq-cover__grid {
    grid-template-columns: 1fr 320px;
    align-items: end;
    gap: var(--lb-space-6);
  }

  .page-faq .faq-cover__heading .lb-kicker {
    margin-bottom: var(--lb-space-4);
  }

  .page-faq .faq-cover__heading h1 {
    font-size: clamp(2.4rem, 4.5vw, 4.2rem);
    margin-bottom: var(--lb-space-4);
  }

  .page-faq .faq-cover__meta {
    margin-bottom: var(--lb-space-4);
  }

  .page-faq .faq-layout__inner {
    display: grid;
    grid-template-columns: var(--faq-side) 1fr;
    gap: var(--lb-space-6);
    align-items: start;
  }

  .page-faq .faq-index {
    position: sticky;
    top: var(--lb-space-5);
    margin-bottom: 0;
  }

  .page-faq .faq-block {
    margin-bottom: var(--lb-space-7);
  }
}