/* ==========================================================================
   比高创意® · 智库问答模块（作用域：仅 .qa- 前缀；不改 dist/ 与任何原区块）
   依据 docs/design-system.md：纯黑白 + 1px #ccc/#ddd 细线分区；无圆角、无阴影、
   无渐变；#fff500 只做单点强调；本模块字号上限 34px；动效统一 300ms ease。
   ========================================================================== */

/* --- 1. 首页「智库问答」索引带：细线分区 + 内嵌单行搜索 --- */
/* 高度预算：上 2.5rem + 内容 72px + 下 2rem ≈ 144px（落在 120–180 区间），
   下留白取 2rem 而非 2.5rem，让「新闻动态」标题的 pt-20 与之形成 112px 的常规段间距 */
/* 满宽线：负边距抵消父级 px-5 / md:px-[3%]，再补回内边距让文字与其它区块对齐 */
.qa-band { border-top: 1px solid #ddd; margin: 0 -1.25rem; padding: 1.75rem 1.25rem 1.5rem; }
@media (min-width:768px) { .qa-band { margin: 0 -3vw; padding: 2.5rem 3vw 2rem; } }
.qa-band-inner { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width:768px) { .qa-band-inner { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem 2rem; } }
.qa-band-right { width: 100%; }
@media (min-width:1024px) { .qa-band-right { width: 620px; flex: 0 0 auto; } }
/* 标题下 24×2px 品牌黄短线：整条带唯一的彩色标记（黄色只做单点强调） */
.qa-band-title::after { content: ""; display: block; width: 24px; height: 2px; margin-top: .5rem; background: #fff500; }
/* 单行下划线输入：无外框、无圆角、无底色；聚焦时下划线由 1px 加深为 2px */
.qa-search-form { display: flex; align-items: center; gap: 1.25rem; }
.qa-search-input { flex: 1 1 auto; min-width: 0; appearance: none; -webkit-appearance: none;
  border: 0; border-bottom: 1px solid #000; border-radius: 0; background: none;
  padding: .25rem 0; font-size: 15px; line-height: 1.5; color: #000; outline: 0; caret-color: #fff500; }
@media (min-width:768px) { .qa-search-input { font-size: 16px; } }
.qa-search-input::placeholder { color: #777; opacity: 1; }
.qa-search-input:focus { border-bottom-width: 2px; }
.qa-search-submit { flex: none; white-space: nowrap; border: 0; padding: 0; background: none;
  font: inherit; font-size: 15px; color: #000; cursor: pointer; transition: color .3s ease; }
.qa-search-submit:hover { color: #777; text-decoration: underline; text-underline-offset: 4px; }
.qa-band-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding-top: 1rem; font-size: 14px; }
@media (min-width:768px) { .qa-band-links { font-size: 15px; } }
.qa-q { color: #000; text-decoration: none; transition: color .3s ease; }
.qa-q:hover { color: #777; text-decoration: underline; text-underline-offset: 4px; }
.qa-q-sep { width: 1px; height: 12px; background: #ddd; }
/* 移动端问题折行时竖细线会悬在行尾，故 <768px 收起分隔线，改用留白断行
   （与站点「SEE OUR WORK」筛选链接在移动端的做法一致） */
@media (max-width:767px) { .qa-q-sep { display: none; } }
.qa-more { flex: none; white-space: nowrap; color: #000; text-decoration: none; }
@media (min-width:768px) { .qa-more { margin-left: auto; } }
.qa-more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- 2. 头部搜索入口：18px 线条放大镜，无边框无底色 --- */
.qa-nav-search { display: block; margin-left: 4vw; }
.qa-search-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 0; padding: 0; background: none; color: #333; cursor: pointer; transition: color .3s ease; }
.qa-search-btn:hover { color: #000; }
/* 移动端（≤1024，黑色汉堡菜单）：搜索入口置顶，图标反白 */
@media (max-width:1024px) {
  .qa-nav-search { order: -1; width: 100%; margin: 0 0 .5rem; }
  .qa-search-btn { width: 100%; height: 44px; color: #fff; }
}

/* --- 3. 导航「智库」下拉：白底 + 1px #ddd 下边线 + 15px 黑字 --- */
/* 与遗留 .header-sub（rgba(40,40,40,.8) 通栏黑条 + #359db9 蓝字）明确切割 */
.qa-nav-sub { display: none; position: absolute; right: 0; top: 100%; z-index: 5; min-width: 120px;
  padding: 25px 0 0; background: #fff; border-bottom: 1px solid #ddd; }
/* 25px 上内边距 = 90px 头部高 − 40px 导航行高余量：面板贴住头部下沿且不断 hover */
.qa-nav-item:hover .qa-nav-sub, .qa-nav-item.qa-nav-open .qa-nav-sub { display: block; }
.qa-nav-sub a { display: block; padding: .5rem 1.25rem; font-size: 15px; line-height: 20px; color: #000;
  white-space: nowrap; text-decoration: none; transition: color .3s ease; }
.qa-nav-sub a:hover { text-decoration: underline; text-decoration-color: #fff500; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width:1024px) {
  .qa-nav-sub { position: static; display: block; min-width: 0; padding: 0 0 .5rem; background: none; border-bottom: 0; }
  .qa-nav-sub a { padding: .125rem 0; font-size: 14px; line-height: 24px; color: rgba(255,255,255,.7); text-align: center; }
  .qa-nav-sub a:hover { color: #fff; text-decoration: none; }
}

/* --- 4. 全屏搜索浮层：白底、28–34px 单行输入、三栏分组结果 --- */
.qa-overlay { position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column;
  padding: 1.25rem; background: #fff; overflow-y: auto; }
.qa-overlay[hidden] { display: none; }
@media (min-width:768px) { .qa-overlay { padding: 7vh 3vw 4vh; } }
.qa-overlay-top { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: #777; }
.qa-overlay-close { border: 0; padding: 0; background: none; font: inherit; color: #777; cursor: pointer; transition: color .3s ease; }
.qa-overlay-close:hover { color: #000; }
.qa-overlay-input { width: 100%; margin-top: 4vh; border: 0; border-bottom: 2px solid #000; border-radius: 0;
  background: none; padding: .5rem 0 1rem; font-size: 28px; line-height: 1.3; color: #000; outline: 0; caret-color: #fff500; }
@media (min-width:1024px) { .qa-overlay-input { font-size: 34px; } }
.qa-overlay-input::placeholder { color: #777; opacity: 1; }
.qa-overlay-hot { padding-top: 1rem; font-size: 14px; color: #777; }
.qa-overlay-hot a { color: #000; text-decoration: none; }
.qa-overlay-hot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.qa-overlay-results { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 3rem; }
@media (min-width:1024px) { .qa-overlay-results { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.qa-overlay-group { border-top: 1px solid #ddd; padding-top: 1rem; }
.qa-overlay-group h2 { margin: 0 0 .5rem; font-size: 14px; font-weight: 400; color: #777; }
.qa-overlay-item { display: block; padding: .625rem 0; color: #000; text-decoration: none; }
.qa-overlay-item strong { display: block; font-weight: 400; font-size: 16px; line-height: 1.6; }
.qa-overlay-item:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.qa-overlay-meta { display: block; padding-top: .25rem; font-size: 12px; color: #777; }
/* 底部状态线：margin-top:auto 贴住视口底部，用 1px #ddd 收口，避免大片空白 */
.qa-overlay-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem;
  margin-top: auto; padding-top: 1rem; border-top: 1px solid #ddd; font-size: 12px; line-height: 1.6; color: #777; }
.qa-lock { overflow: hidden; }
