/* ============================================================
   Shifang Packaging — faq.css
   FAQ 页：问题手风琴列表
   （Banner、面包屑、柔和 CTA 带、相关服务卡片、CTA 带、页脚等共用组件见 main.css）
   ============================================================ */

/* ---------- Banner（ACF 背景图，不传则无背景） ---------- */
.faq-hero .hero-card {
  background-image:
    linear-gradient(95deg, #fff 0%, #fff 46%, rgba(255, 255, 255, 0) 76%),
    var(--faq-hero-img, none);
}
img.soft-cta__ic { object-fit: contain; }
/* 引导模块背景：仅用 ACF faq-info-bg，不传则只保留白色蒙层，不显示静态底图 */
.soft-cta--faq {
  background-image:
    linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .86)),
    var(--faq-info-img, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ---------- 1. 问题列表 ---------- */
.faq-list { padding: 56px 0 72px; }
.faq-list__item { border-bottom: 1px solid var(--c-border); }
.faq-list__item summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 4px;
  font-weight: 600;
  color: var(--c-text);
  cursor: pointer;
  list-style: none;
}
.faq-list__item summary::-webkit-details-marker { display: none; }
.faq-list__item summary::before {
  content: "";
  width: 0;
  height: 0;
  flex: none;
  border: 6px solid transparent;
  border-left-color: var(--c-teal);
  transition: transform var(--t-fast);
}
.faq-list__item[open] summary::before { transform: rotate(90deg); }
.faq-list__item > p {
  margin: 0 0 22px;
  padding-left: 22px;
  max-width: 980px;
}

/* ---------- 2. 相关服务卡片容器 ---------- */
.faq-cards { padding: 56px 0 72px; }
.link-card--noimg { grid-template-columns: 1fr; }

/* ---------- 3. 响应式（三端适配） ---------- */
@media (max-width: 1024px) {
  .faq-hero .hero-card {
    background-image:
      linear-gradient(95deg, #fff 0%, #fff 56%, rgba(255, 255, 255, 0) 88%),
      var(--faq-hero-img, none);
  }
}

@media (max-width: 860px) {
  .faq-list { padding: 40px 0 56px; }
  .faq-cards { padding: 40px 0 56px; }
}

@media (max-width: 720px) {
  .faq-hero .hero-card {
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .8) 100%),
      var(--faq-hero-img, none);
  }
}