/* 常见问题页（/faq）专属样式。设计稿 1920 画布，1x；问答卡片样式在 components/faq.css */

/* 1 banner 首屏：背景图自带「关于瑜伽的常见问题」字样，比例与课程页横幅一致 */
.faq-banner { min-height: 0; padding: 0; aspect-ratio: 1920 / 428; background-image: url("/assets/images/faq/banner-bg.jpg"); }
.faq-banner::before { content: none; }

/* 2 分类标签：左对齐换行，间距 24；3 问答列表 */
.faq-body { padding: 4.25rem 0 5.125rem; } /* 设计稿首屏到标签 68；最后一张卡片 36 外边距 + 82 = 到页脚 118 */
.faq-tabs { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 4.25rem; }
/* 问答卡片：本页设计稿左右内边距 48、序号列 79、收起高 102（首页 FAQ 用组件默认值） */
.faq-body .faq-list { --faq-no-width: 4.9375rem; --bs-accordion-btn-padding-x: 3rem; --bs-accordion-btn-padding-y: 1.875rem; --bs-accordion-body-padding-x: 3rem; --bs-accordion-body-padding-y: 1.875rem; }
/* 展开时问题到答案 16、答案到卡片底 30 */
.faq-body .faq-list .accordion-button:not(.collapsed) { padding-bottom: 1rem; }

@media (max-width: 767.98px) {
  .faq-banner { aspect-ratio: auto; min-height: 180px; background-size: auto 100%; }
  .faq-body { padding: 1.5rem 0 3rem; }
  .faq-body .faq-list { --faq-no-width: 2.25rem; --bs-accordion-btn-padding-x: 1rem; --bs-accordion-btn-padding-y: 1.25rem; --bs-accordion-body-padding-x: 1rem; }
  /* 标签横向滚动，不换行 */
  .faq-tabs { flex-wrap: nowrap; gap: 0.5rem; margin-bottom: 1.5rem; padding: 2px 1px; overflow-x: auto; scrollbar-width: none; }
  .faq-tabs::-webkit-scrollbar { display: none; }
}