/* 水利部问答页：所有屏幕统一使用卡片，随屏幕宽度切换为三列、两列或单列。 */

.news-list-workspace { border: 0; border-radius: 0; background: transparent; box-shadow: none; }

.qa-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 0;
  border: 1px solid var(--news-line);
  border-radius: .5rem;
  padding: .9rem 1rem;
  background: #fff;
}

.qa-filter-field {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
}

.qa-filter-keyword-icon {
  position: absolute;
  top: 50%;
  left: .85rem;
  transform: translateY(-50%);
  color: #8497a8;
  font-size: .85rem;
  pointer-events: none;
}

#qaKeywordInput,
.qa-filter-select {
  height: 2.6rem;
  border: 1px solid #d8e2eb;
  border-radius: .5rem;
  background-color: #fff;
  color: #334155;
  font-size: .875rem;
  outline: none;
  transition: border-color .16s ease;
}

#qaKeywordInput {
  width: 100%;
  padding: 0 2.4rem 0 2.35rem;
}

#qaKeywordInput::placeholder { color: #94a3b8; }

.qa-filter-keyword-clear {
  position: absolute;
  top: 50%;
  right: .4rem;
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8497a8;
  cursor: pointer;
}

.qa-filter-keyword-clear:hover { background: #eef3f8; color: #334155; }
.qa-filter-keyword-clear:focus-visible { outline: 2px solid var(--news-accent-blue); outline-offset: 1px; }
.qa-filter-keyword-clear[hidden] { display: none; }

#qaKeywordInput:focus,
.qa-filter-select:focus {
  border-color: var(--news-accent-blue);
  box-shadow: none;
}

.qa-filter-select {
  width: 180px;
  max-width: 220px;
  padding: 0 1.9rem 0 .75rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23738596' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .65rem center;
  appearance: none;
  cursor: pointer;
}

.qa-filter-search-btn,
.qa-filter-reset-btn {
  display: inline-flex;
  min-height: 2.6rem;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border-radius: .5rem;
  padding: 0 .95rem;
  font-size: .875rem;
  font-weight: 650;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.qa-filter-search-btn {
  border: 1px solid var(--news-accent-blue);
  background: var(--news-accent-blue);
  color: #fff;
}

.qa-filter-search-btn:hover { border-color: #1d4ed8; background: #1d4ed8; }
.qa-filter-search-btn:focus-visible,
.qa-filter-reset-btn:focus-visible { outline: 3px solid rgba(37, 99, 235, .2); outline-offset: 2px; }

.qa-filter-reset-btn {
  border: 1px solid #d8e2eb;
  background: #fff;
  color: #526476;
}

.qa-filter-reset-btn:hover { border-color: #b8c8d8; background: #f8fafc; color: #1e3a5f; }

.qa-answer-text { color: #475569; font-size: .875rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }

.qa-card-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: .85rem; margin-top: .85rem; }
.qa-card { min-width: 0; overflow: hidden; border: 1px solid var(--news-line); border-radius: .65rem; background: #fff; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease; }
.qa-card:hover { border-color: #a9c6e4; box-shadow: 0 4px 16px rgba(30, 58, 95, .06); }
.qa-card-toggle { display: flex; flex-direction: column; width: 100%; height: auto; border: 0; padding: 1rem 1.1rem; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.qa-card-toggle:focus-visible { outline: 3px solid rgba(37, 99, 235, .24); outline-offset: -3px; }
.qa-card-question {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  flex-shrink: 0;
  color: #1e293b;
  font-size: .95rem;
  font-weight: 650;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.qa-card-answer-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  flex-shrink: 0;
  margin-top: .55rem;
  color: #657384;
  font-size: .84rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.qa-detail-question-content p + p,
.qa-answer-text p + p { margin-top: .45rem; }
.qa-card-meta {
  display: grid;
  width: 100%;
  gap: .15rem;
  margin-top: .65rem;
  color: #82919d;
  font-size: .75rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.qa-card-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-card-state { grid-column: 1 / -1; border: 1px solid var(--news-line); border-radius: .5rem; padding: 2.5rem 1rem; background: #fff; color: #64748b; font-size: .875rem; text-align: center; }

html.qa-detail-active { scroll-behavior: auto; }

.qa-detail-modal {
  width: min(960px, calc(100vw - 3rem));
  height: min(760px, calc(100vh - 4rem));
  height: min(760px, calc(100dvh - 4rem));
  border: 1px solid #dce5ee;
  border-radius: 1.1rem;
  background: #fff;
  box-shadow: 0 24px 90px rgba(15, 23, 42, .22);
}
.qa-detail-modal > .relative { min-height: 0; overflow: hidden; }
.qa-detail-layout { display: flex; flex-direction: column; height: 100%; }
.qa-detail-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--news-line); padding: 1.2rem 1.6rem; }
.qa-detail-header h2 { display: flex; align-items: center; gap: .6rem; margin: 0; color: #1e3a5f; font-size: 1.1rem; font-weight: 750; line-height: 1.5; }
.qa-detail-header h2 i { flex-shrink: 0; color: #5d7b99; font-size: 1rem; }
.qa-detail-close { display: inline-flex; width: 2.75rem; height: 2.75rem; flex-shrink: 0; align-items: center; justify-content: center; border: 1px solid #dce5ee; border-radius: 50%; background: #fff; color: #64748b; font-size: 1.1rem; cursor: pointer; }
.qa-detail-close:hover { border-color: #a9c6e4; background: #f1f6fb; color: #1e3a5f; }
.qa-detail-body { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); min-height: 0; flex: 1; }
.qa-detail-question-pane,
.qa-detail-answer-pane { min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.65rem; }
.qa-detail-question-pane { border-right: 1px solid var(--news-line); background: #f6f9fc; }
.qa-detail-section-heading { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.1rem; color: #3b82f6; font-size: .9rem; font-weight: 700; letter-spacing: .03em; line-height: 1.5; }
.qa-detail-question-pane .qa-detail-section-heading i { display: inline-flex; width: 1rem; height: 1rem; flex-shrink: 0; align-items: center; justify-content: center; font-size: .95rem; line-height: 1; }
.qa-detail-answer-pane .qa-detail-section-heading { margin-bottom: 1.1rem; color: #15803d; }
.qa-detail-question-content { color: #263e56; font-size: .95rem; font-weight: 600; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.qa-detail-meta { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; margin-top: 1.3rem; color: #82919d; font-size: .75rem; line-height: 1.6; }
.qa-detail-meta-primary,
.qa-detail-url { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; min-width: 0; }
.qa-detail-org { color: #34714b; overflow-wrap: anywhere; }
.qa-detail-url[hidden] { display: none; }
.qa-detail-url a { min-width: 0; color: #82919d; overflow-wrap: anywhere; }
.qa-detail-url a:hover { color: #64748b; }
.qa-detail-url a:focus-visible { border-radius: .15rem; outline: 2px solid #93c5fd; outline-offset: 2px; }
.qa-detail-answer-pane .qa-answer-text { font-size: .925rem; line-height: 1.95; }
.qa-detail-question-content a,
.qa-detail-answer-pane .qa-answer-text a { color: #2563eb; text-decoration: underline; text-underline-offset: 3px; }
.news-pagination { border-top: 0; }

@media (max-width: 1279px) {
  .qa-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .qa-card-list { grid-template-columns: minmax(0, 1fr); }
  .qa-detail-modal { width: calc(100vw - 1.5rem); height: calc(100vh - 1.5rem); height: calc(100dvh - 1.5rem); border-radius: .85rem; }
  .qa-detail-header { padding: 1rem 1.1rem; }
  .qa-detail-header h2 { font-size: 1rem; }
  .qa-detail-body { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .qa-detail-question-pane,
  .qa-detail-answer-pane { overflow: visible; padding: 1.25rem 1.1rem; }
  .qa-detail-question-pane { border-right: 0; border-bottom: 1px solid var(--news-line); }
  .qa-detail-question-content { font-size: .9rem; }
  .qa-detail-answer-pane .qa-answer-text { font-size: .875rem; }
  .qa-detail-meta-primary,
  .qa-detail-url { gap: .35rem .75rem; }
}

@media (max-width: 1023px) {
  .qa-filter-bar { gap: .5rem; border: 1px solid var(--news-line); border-radius: .5rem; padding: .75rem; }
  .qa-filter-keyword { flex: 1 0 100%; min-width: 0; }
  .qa-filter-select { width: auto; max-width: none; flex: 1 1 calc(50% - .25rem); min-width: 0; }
  .qa-filter-search-btn { flex: 1; }
  .qa-filter-reset-btn { min-width: 4.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .qa-card { transition: none; }
  .qa-detail-modal { animation: none; }
}