/* ===== Page background =====
   Figma's root frame for this page sets a cream (#F5F3EF) page background,
   same precedent as body.news-page / body.column-page. */

body.faq-page {
  background: var(--color-cream);
}

/* ===== Hero =====
   Reuses .guide-hero wholesale (breadcrumb + intro, no CTA). Breadcrumb
   separator is 46px here, matching Figma's actual line width (same
   precedent as .news-hero__crumb-sep / .column-hero__crumb-sep).
   .guide-hero__intro's shared 472px desktop width assumes a sibling
   .guide-hero__media (see individual/guide.html, corporate/guide.html) —
   this page has no media, and Figma sizes the intro to the full row
   width instead, so it's overridden back to auto here (the heading is
   long enough that 472px would force an unwanted wrap). */

.faq-hero__crumb-sep {
  width: 46px;
}

@media (min-width: 992px) {
  .faq-hero__crumb-sep {
    width: 46px;
  }

  .faq-hero__intro {
    width: auto;
  }
}

/* ===== FAQ category list =====
   Each category is the shared sitewide .faq-list/.faq-item accordion
   (see main.css) under a page-specific label bar. Centered to a 976px
   column at desktop, same precedent as .news-list's own content width. */

.faq-list-section {
  padding-block: 48px 64px;
}

.faq-categories {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.faq-category__label {
  padding: 16px;
  border-radius: 4px;
  background: var(--color-gold-tint);
  font-size: 18px;
  font-weight: 500;
}

.faq-category__body {
  margin-top: 24px;
}

@media (min-width: 992px) {
  .faq-list-section {
    padding-block: 48px 104px;
  }

  .faq-categories {
    max-width: 976px;
    margin-inline: auto;
    gap: 64px;
  }

  .faq-category__label {
    padding: 16px 24px;
    font-size: 22px;
  }
}

/* ===== Contact CTA =====
   Gold rounded box with a white-bordered inner column, same shape as
   .map-cta__inner/.product-notice__inner elsewhere, but wider than the
   standard .container gutter (Figma uses a 32px edge gutter here instead
   of the usual 80px), so this section sets its own padding rather than
   reusing .container. */

.faq-cta {
  padding: 24px 20px 48px;
}

@media (min-width: 768px) and (max-width: 991px) {
  .faq-cta {
    padding-inline: 40px;
  }
}

@media (min-width: 992px) {
  .faq-cta {
    padding: 32px;
  }
}

.faq-cta__box {
  background: var(--color-gold);
  border-radius: 10px;
  padding: 32px;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.faq-cta__heading-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-cta__eyebrow {
  font-family: var(--font-en);
  font-size: 24px;
  line-height: 1;
}

.faq-cta__heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
}

.faq-cta__details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-cta__desc {
  font-size: 14px;
  line-height: 1.9;
}

.faq-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.faq-cta__buttons .pill-btn span {
  color: var(--color-black);
}

@media (min-width: 992px) {
  .faq-cta__box {
    flex-direction: row;
    align-items: center;
  }

  .faq-cta__content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-inline: 40px;
    border-left: 1px solid var(--color-white);
    border-right: 1px solid var(--color-white);
  }

  .faq-cta__details {
    align-items: flex-end;
  }

  .faq-cta__desc {
    font-size: 15px;
    text-align: right;
  }
}

/* The <h3> wraps each question's trigger button (a heading can't sit inside
   a <button>); it carries no styling of its own — the button and
   .faq-item__text keep the question's existing type. */
.faq-item__heading {
  font-size: inherit;
  font-weight: inherit;
}