/* 自動補樣式：js/screens/questions.js（_build/style.py） */
/* ==========================================================================
   js/screens/questions.js 補樣式
   範圍：.c-question-lists、.u-footnote、.u-title3
   ========================================================================== */

/* ---------- 清單容器（待問、已問兩個分組卡片的外層） ---------- */
.c-question-lists {
  width: 100%;
  min-width: 0;
  /* 讓內部卡片也能依這一欄的寬度做容器查詢 */
  container-type: inline-size;
  container-name: question-lists;
  /* 避免鍵盤聚焦或捲動時，分組標題被黏性頂部列遮住 */
  scroll-margin-top: calc(var(--topbar-h, 52px) + var(--sp-3));
}

.c-question-lists > * {
  min-width: 0;
  /* 重新整理後，清單項目以淡入呈現 */
  animation: c-question-lists-in var(--dur-2) var(--ease) backwards;
}

.c-question-lists > *:nth-child(2) {
  animation-delay: 40ms;
}

/* 空狀態置中，不被卡片間距擠壓 */
.c-question-lists > .c-empty {
  margin-inline: auto;
}

/* 窄欄（例如分割版面中的窄欄）：卡片內距略縮，長文字不撐破版面 */
@container question-lists (max-width: 420px) {
  .c-question-lists > .c-card {
    padding-inline: var(--sp-4);
  }
}

/* 較寬時，分組標題與清單的呼吸空間稍增 */
@container question-lists (min-width: 640px) {
  .c-question-lists > .c-card {
    padding-inline: var(--sp-6);
  }
}

@keyframes c-question-lists-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ---------- 註腳文字 ---------- */
.u-footnote {
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  font-weight: var(--fw-footnote);
  letter-spacing: 0.005em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* 註腳裡的連結：維持可辨識與足夠的點擊範圍 */
.u-footnote a {
  color: var(--primary);
  text-underline-offset: 3px;
}

.u-footnote a:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (hover: hover) and (pointer: fine) {
  .u-footnote a:hover {
    color: var(--primary-strong);
  }
}

/* ---------- 區段小標題（title3） ---------- */
.u-title3 {
  font-size: var(--fs-title3);
  line-height: var(--lh-title3);
  font-weight: var(--fw-title3);
  letter-spacing: var(--ls-title);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* ---------- 減少動態 ---------- */
@media (prefers-reduced-motion: reduce) {
  .c-question-lists > * {
    animation: none;
  }
}

/* ---------- 矮螢幕（手機橫式）：縮小間距感 ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  .c-question-lists > * {
    animation-duration: 0.01ms;
  }
}