/* ============================================================
   常見問題 Q&A 頁（faq_page）
   依 Figma 1678:17629「資訊消息-FAQ」切版
   - Hero：沿用 #sw-hero 大標題版型（與 news_list 一致）
   - 列表：沿用共用手風琴 .faq-list（components/faq.css）
   ============================================================ */

/* ============================================================
   FAQ HERO（#sw-hero 大標題版型）
   與 news_list / service_host_page 共用同款 hero；
   樣式同步自 css/pages/service_detail.css（多處請保持一致）
   ============================================================ */

/* hero 標題分隔符（細直線視覺） */
.sw-title-sep {
  display: inline-block;
  margin: 0 14px;
  color: var(--c-brand-hover);
  font-weight: 400;
}

/* hero 主打標語（breadcrumb 下方）：關鍵字深色粗體 + 其餘灰字 */
.sw-hero-headline {
  margin: 160px 0 0;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 1px;
  color: var(--c-grey-dark);
}

.sw-hero-headline-key {
  font-weight: 700;
  color: var(--c-text-2);
}

/* 方案介紹頁變體：主打標語整行改橘色強調（關鍵字維持粗體） */
.sw-hero-headline--brand,
.sw-hero-headline--brand .sw-hero-headline-key {
  color: var(--c-brand);
}

/* 描述移入 copy 區塊後與標語的間距 */
#sw-hero .news-hero-desc {
  margin-top: 20px;
}

/* ---- Hero 右側插圖：覆寫共用 .news-hero-img，靠右垂直置中、落在橘色光暈上 ---- */
#sw-hero .news-hero-img {
  top: 60%;
  bottom: auto;
  right: clamp(0px, 3vw, 20px);
  transform: translateY(-50%);
  width: clamp(380px, 42vw, 868px);
  height: auto;
  z-index: 2;
}

/* 平板以下：插圖回到右下當淡色襯底，讓上方大標與麵包屑維持清晰 */
@media (max-width: 991.98px) {
  .sw-title-sep {
    margin: 0 8px;
  }
  #sw-hero .news-hero-img {
    top: 12%;
    right: -10%;
    transform: none;
    width: clamp(300px, 70vw, 520px);
  }
  .sw-hero-headline {
    margin: 24px 0 0;
  }
}

/* ---- Hero 淺底版面（斜紋底紋 + 右側橘色光暈 + 大標題/橘色副標） ---- */
#sw-hero {
  background: url(../../img/sw-hero-bg.png) top center no-repeat;
  background-size: contain;
  overflow: hidden;
  padding-bottom: 0;
}

/* 文案區置於最上層，避免被光暈/插圖覆蓋 */
#sw-hero .container {
  position: relative;
  z-index: 5;
}

/* 主標題：頁面大標（深色，64px 級距） */
#sw-hero .news-hero-eyebrow.sw-hero-h1 {
  font-size: clamp(30px, 4.4vw, 64px);
  line-height: 1.1;
  color: #231815;
  letter-spacing: 1px;
}

/* 副標：橘色英文副標 ＋ 品牌徽章圖示 */
#sw-hero .news-hero-title.sw-hero-uiux {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: 0.5px;
  color: var(--c-brand);
}
#sw-hero .news-breadcrumb {
  margin-top: 80px;
}
@media (max-width: 991.98px) {
  #sw-hero .news-breadcrumb {
    margin-top: 150px;
  }
  #sw-hero .news-hero-title.sw-hero-uiux {
    margin: 6px 0 0;
    gap: 7px;
  }
}
@media (max-width: 575px) {
  #sw-hero .news-breadcrumb {
    margin-top: 215px;
  }
}
/* 主打標語：關鍵字改橘色、其餘深灰 */
#sw-hero .sw-hero-headline {
  color: #222;
  font-size: clamp(16px, 1.8vw, 24px);
}

#sw-hero .sw-hero-headline-key {
  color: var(--c-brand);
}

/* 描述文：18px / 1.6 */
#sw-hero .news-hero-desc {
  font-size: 18px;
  line-height: 1.6;
}

/* 平板以下：副標於窄螢幕換行 */
@media (max-width: 991.98px) {
  #sw-hero .sw-hero-headline-val {
    display: block;
  }
}
@media (max-width: 575px) {
  #sw-hero {
    background: url(../../img/sw-hero-bg-mobile.png) top center no-repeat;
    background-size: contain;
  }
  #sw-hero .news-hero-desc {
    font-size: 14px;
  }
}

/* === FAQ 列表區塊 === */
.faq-section {
  background: var(--c-bg-page);
  padding: clamp(48px, 7vw, 90px) 0 clamp(100px, 12vw, 280px);
  position: relative;
}

/* 列表沿用 .faq-list（flex 直列），此頁加大題目間距並滿版於 container */
.faq-page-list {
  gap: 20px;
}