/* DS v2 — /q question library */

body.ds-v2.ds-v2-q {
  background: var(--color-bg);
}

body.ds-v2.ds-v2-q .mobile-tabbar {
  display: none;
}

.q-page {
  padding-top: var(--space-4);
}

/* ── Hero ── */
.q-hero-v2 {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid rgba(26, 20, 16, 0.08);
}

@media (min-width: 768px) {
  .q-hero-v2 {
    grid-template-columns: 1fr 280px;
    align-items: center;
  }
}

.q-hero-v2 .q-eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-gold);
}

.q-hero-v2 h1 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink);
}

.q-hero-v2 .q-hero-lead {
  margin: 0 0 var(--space-6);
  font-size: var(--text-base);
  color: var(--color-ink-muted);
  line-height: 1.65;
  max-width: 36rem;
}

.q-prompt-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.q-prompt-rail > span {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  margin-right: var(--space-1);
}

.q-prompt-rail a {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  background: var(--color-surface);
  border: 1px solid rgba(26, 20, 16, 0.1);
  border-radius: var(--radius-full);
  transition:color 160ms ease,background-color 160ms ease,border-color 160ms ease,transform 160ms cubic-bezier(.23,1,.32,1);
}

.q-prompt-rail a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.q-hero-visual {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: var(--color-surface) url('/static/gaodao-oracle-surface.webp') center/cover no-repeat;
  box-shadow: var(--shadow-1);
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
}

.q-hero-visual-inner {
  padding: var(--space-3) var(--space-4);
  background: rgba(20, 17, 14, 0.72);
  border-radius: var(--radius-sm);
  color: #fff;
}

.q-hero-visual-inner span {
  display: block;
  font-size: var(--text-xs);
  opacity: 0.7;
}

.q-hero-visual-inner strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

/* ── Tabs ── */
.q-tabs-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(26, 20, 16, 0.08);
  position: sticky;
  top: 3.5rem;
  z-index: 50;
  background: rgba(247, 243, 236, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding-top: var(--space-3);
}

.q-tabs-v2 .q-tab {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-muted);
  background: transparent;
  border: 1px solid rgba(26, 20, 16, 0.12);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:color 160ms ease,background-color 160ms ease,border-color 160ms ease,transform 160ms cubic-bezier(.23,1,.32,1);
}

.q-tabs-v2 .q-tab:hover {
  border-color: var(--color-ink-muted);
  color: var(--color-ink);
}

.q-tabs-v2 .q-tab.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-weight: 600;
}

/* ── Section heads ── */
.q-section-v2 {
  margin-bottom: var(--space-12);
}

.q-section-head-v2 {
  margin-bottom: var(--space-6);
}

.q-section-head-v2 h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-ink);
}

.q-section-head-v2 p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: 1.55;
}

.q-section-head-v2 a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── QuestionCard component ── */
.question-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .question-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .question-card-grid.question-card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.question-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.question-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.question-card__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  color: inherit;
}

.question-card__tag {
  display: inline-block;
  align-self: flex-start;
  padding: 2px var(--space-2);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-gold);
  background: rgba(154, 123, 69, 0.1);
  border-radius: var(--radius-full);
}

.question-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.35;
}

.question-card__desc {
  margin: 0;
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: 1.55;
}

.question-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 var(--space-4) var(--space-4);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  text-align: center;
  transition: background 0.15s;
}

.question-card__cta:hover {
  background: #7a251e;
}

/* Cluster nav */
.q-cluster-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .q-cluster-grid-v2 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.q-cluster-jump-v2 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(26, 20, 16, 0.08);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.q-cluster-jump-v2:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-1);
}

.q-cluster-jump-v2 span {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.q-cluster-jump-v2 strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-ink);
}

.q-cluster-jump-v2 em {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  font-style: normal;
}

/* SEO list collapsed */
.q-all-v2 {
  margin-top: var(--space-12);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.q-all-v2 summary {
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
}

.q-all-v2 summary::-webkit-details-marker {
  display: none;
}

.q-all-v2 summary span {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
}

.q-all-v2 summary em {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  font-style: normal;
}

.q-all-v2 .seo-list-v2 {
  margin: 0;
  padding: 0 var(--space-6) var(--space-6);
  list-style: none;
  columns: 1;
  column-gap: var(--space-8);
}

@media (min-width: 640px) {
  .q-all-v2 .seo-list-v2 {
    columns: 2;
  }
}

@media (min-width: 900px) {
  .q-all-v2 .seo-list-v2 {
    columns: 3;
  }
}

.q-all-v2 .seo-list-v2 li {
  break-inside: avoid;
  padding: var(--space-1) 0;
}

.q-all-v2 .seo-list-v2 a {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  transition: color 0.15s;
}

.q-all-v2 .seo-list-v2 a:hover {
  color: var(--color-accent);
}

.q-all-v2 .seo-list-v2 .seo-tag {
  display: inline-block;
  margin-right: var(--space-2);
  font-size: 0.65rem;
  color: var(--color-gold);
}

/* Hide legacy q-library styles bleed */
body.ds-v2.ds-v2-q .q-library.q-library-v2 {
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}


/* fullsite-polish-20260710 content family */
.q-tab,.q-prompt-rail a,.q-cluster-jump-v2,.question-card__cta { min-height:44px; }
.q-tab:active,.q-prompt-rail a:active,.question-card__cta:active { transform:scale(.98); }
body.ds-v2-q-detail .q-article { max-width:54rem;padding-inline:clamp(1rem,4vw,2rem); }
body.ds-v2-q-detail .q-article-head { border-bottom:1px solid var(--color-line);padding-bottom:clamp(1.5rem,4vw,2.5rem); }
body.ds-v2-q-detail .q-start-slip { max-width:42rem;margin:1rem auto 2rem!important;padding:1rem 1.1rem;border-radius:4px;box-shadow:none;background:#fffaf2; }
body.ds-v2-q-detail .seo-direct-question { padding:.8rem 0;border:0;border-block:1px solid rgba(143,45,36,.12); }
body.ds-v2-q-detail .seo-body { max-width:42rem;margin-inline:auto;font-size:1.05rem;line-height:1.9; }
body.ds-v2-q-detail .seo-body :where(h2,h3) { font-family:var(--font-display);letter-spacing:0; }
@media (hover:hover) and (pointer:fine) { .q-tab:hover,.q-prompt-rail a:hover,.question-card__cta:hover { transform:translateY(-1px); } }
@media (max-width:600px) { .q-tab,.q-prompt-rail a { padding-block:.7rem; }.q-article-head h1 { text-wrap:pretty;word-break:normal; }.q-start-slip .btn { width:100%;min-height:48px; }body.ds-v2-q-detail .seo-body { font-size:1rem;line-height:1.85; } }