/*
 * FAQ 页 —— 1:1 对应设计稿 Astra 6月 / 1054:1655（1920×4774）
 *
 *   首屏 1051:1005   整幅 1920×960，居中白字（走 page-banner 默认款）
 *   问答区 1051:1157 #F9F9F9 上下 120、左右 240（内容 1440），页签条与列表之间 48
 *     页签条 1054:1285  1440×80 三等分：选中 #FDF1F1 底 + 1px 主题色下边 + 18/25 Bold 主题色
 *                       常态 白底 + 1px #DEDFE0 下边 + 18/25 Bold #333
 *     列表 1051:1161    每条间距 20
 *       收起态 1051:1162  白底 104 高、px36 py32、1px #DEDFE0 下边（Figma 内描边，下留白要减 1px）
 *                         Q: 36/40 Bold #808080 →32→ 问题 24/32 Semi #808080，右端 32 的圈箭头（灰、转 90°朝左）
 *       展开态 1054:2013  白底、四周 1px #DEDFE0
 *                         问句行 px36 py32：Q: 转主题色、问题转 #333，圈箭头转主题色、不旋转（朝下）
 *                         答句行 px36 pb32：A: 36/40 Bold #999 →32→ 答案 18/28 Regular #333
 *   页尾 CTA 1051:1061 沿用全站那条
 *
 * 尺寸字号一律走 CSS 变量，由组件的响应式控制项按断点写入；
 * 这里的媒体查询只翻转排布方向，绝不写死尺寸（写死会盖掉控制项，见记忆里那条坑）。
 */

.astra-faq {
  --faq-primary: #e60012;
  --faq-primary-soft: #fdf1f1;
  --faq-text: #333333;
  --faq-muted: #808080;
  --faq-subtle: #999999;
  --faq-border: #dedfe0;
  --faq-surface: #ffffff;

  font-family: inherit;
  color: var(--faq-text);
}

.astra-faq-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--faq-stack-gap, 48px);
  padding: var(--faq-padding, 120px) 0;
}

/* ====================================================== 页签条 1054:1285 */
.astra-faq__filters {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: calc(var(--faq-width, 1440px) + 32px);
  margin: 0 auto;
  padding: 0 16px;
}

.astra-faq__filter {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--faq-filter-padding, 10px) 16px;
  min-height: var(--faq-filter-height, 80px);
  border: 0;
  border-bottom: 1px solid var(--faq-border);
  border-radius: 0;
  background: var(--faq-surface);
  font-family: inherit;
  font-size: var(--faq-filter-size, 18px);
  line-height: var(--faq-filter-line, 25px);
  font-weight: 700;
  letter-spacing: -0.36px;
  color: var(--faq-text);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.astra-faq__filter:hover {
  color: var(--faq-primary);
}

.astra-faq__filter.is-active {
  background: var(--faq-primary-soft);
  border-bottom-color: var(--faq-primary);
  color: var(--faq-primary);
}

/* ======================================================= 列表 1051:1161 */
.astra-faq__items {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--faq-item-gap, 20px);
  width: 100%;
  max-width: calc(var(--faq-width, 1440px) + 32px);
  margin: 0 auto;
  padding: 0 16px;
}

.astra-faq__item {
  box-sizing: border-box;
  width: 100%;
  background: var(--faq-surface);
  border: 0;
  /* Figma 的描边画在框内、不撑高，所以下留白要扣掉这 1px 才等于设计稿的 104 */
  border-bottom: 1px solid var(--faq-border);
}

.astra-faq__item.is-open {
  border: 1px solid var(--faq-border);
}

.astra-faq__item.is-hidden {
  display: none;
}

/* 问句行：整行可点 */
.astra-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 设计稿里问句区和圈箭头之间的 82 是 space-between 撑出来的，
     这里只给一个窄屏保底间距，写死大值会把问句区从 1252 挤窄 */
  gap: var(--faq-row-gap, 16px);
  width: 100%;
  margin: 0;
  padding: var(--faq-row-pad-y, 32px) var(--faq-row-pad-x, 36px)
    calc(var(--faq-row-pad-y, 32px) - 1px);
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* 展开态的四周描边已经占掉那 1px，下留白不用再扣 */
.astra-faq__item.is-open .astra-faq__q {
  padding-bottom: var(--faq-row-pad-y, 32px);
}


.astra-faq__row {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--faq-row-width, 1252px);
  display: flex;
  align-items: center;
  gap: var(--faq-label-gap, 32px);
}

.astra-faq__row--a {
  align-items: flex-start;
}

.astra-faq__label {
  flex: 0 0 auto;
  min-width: var(--faq-label-width, 39px);
  margin: 0;
  font-size: var(--faq-label-size, 36px);
  line-height: var(--faq-label-line, 40px);
  font-weight: 700;
  letter-spacing: -0.72px;
  color: var(--faq-muted);
  white-space: nowrap;
}

.astra-faq__item.is-open .astra-faq__label {
  color: var(--faq-primary);
}

.astra-faq__label--a,
.astra-faq__item.is-open .astra-faq__label--a {
  color: var(--faq-subtle);
}

.astra-faq__question {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--faq-q-size, 24px);
  line-height: var(--faq-q-line, 32px);
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--faq-muted);
  overflow-wrap: break-word;
}

.astra-faq__item.is-open .astra-faq__question {
  color: var(--faq-text);
}

/* 圈箭头：收起转 90°（朝左）、展开归位（朝下），跟设计稿一致 */
.astra-faq__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--faq-icon-size, 32px);
  height: var(--faq-icon-size, 32px);
  color: var(--faq-subtle);
  transform: rotate(var(--faq-icon-rotate, 90deg));
}

.astra-faq__item.is-open .astra-faq__icon {
  color: var(--faq-primary);
  transform: rotate(0deg);
}

.astra-faq__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* 展开面板：只动 grid 的行高，内容不用量高度 */
.astra-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
}

.astra-faq__item.is-open .astra-faq__panel {
  grid-template-rows: 1fr;
}

/* 裁切层自己不能带 padding：它的 padding 不受自身 overflow 约束，
   收起时会把每条撑高 32（设计稿的 104 会变成 136），留白得放到里面这层 */
.astra-faq__panel > .astra-faq__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.astra-faq__answer-pad {
  padding: 0 var(--faq-row-pad-x, 36px) var(--faq-row-pad-y, 32px);
}

.astra-faq__answer-row {
  display: flex;
  align-items: flex-start;
  gap: var(--faq-label-gap, 32px);
  max-width: var(--faq-row-width, 1252px);
}

.astra-faq__answer {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--faq-a-size, 18px);
  line-height: var(--faq-a-line, 28px);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--faq-text);
  overflow-wrap: break-word;
}

.astra-faq__answer > *:first-child {
  margin-top: 0;
}

.astra-faq__answer > *:last-child {
  margin-bottom: 0;
}

.astra-faq__answer p {
  margin: 0 0 1em;
  font-size: inherit;
  line-height: inherit;
}

/* 首帧就是最终态（默认展开的那条由 PHP 直接标 is-open），
   过渡等 JS 挂上 is-ready 之后再开，免得进页面先看到一次展开动画 */
.astra-faq.is-ready .astra-faq__label,
.astra-faq.is-ready .astra-faq__question {
  transition: color 0.25s ease;
}

.astra-faq.is-ready .astra-faq__icon {
  transition: transform 0.3s ease, color 0.25s ease;
}

.astra-faq.is-ready .astra-faq__panel {
  transition: grid-template-rows 0.32s ease;
}

.astra-faq__empty {
  margin: 0;
  padding: 48px 0;
  width: 100%;
  font-size: 18px;
  color: var(--faq-subtle);
  text-align: center;
}

/* ======================================================== 窄屏：只翻方向 */
@media (max-width: 1200px) {
  .astra-faq__row {
    max-width: none;
  }

  .astra-faq__answer-row {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .astra-faq__filters {
    flex-wrap: wrap;
  }

  /* 换成一列后 flex 的基准落到宽度轴上，这里给满宽就行 */
  .astra-faq__filter {
    flex: 1 1 100%;
  }

  .astra-faq__row {
    align-items: flex-start;
  }
}