/* === FAQs Page ===
   Requires: global.css (tokens, resets, Kadence overrides, topbar, footer)
   Requires: faq.css (reusable FAQ component)
   Figma source: FAQs (node 303:479), 1512px frame
   ========================================================================== */

.cc-faqs {
  padding-top: 79px;
}

/* --- Page header ---
   Same rail as Insights, Transactions and Manage: 79px topbar + 130px, title
   indented 123px. */
.cc-faqs-header {
  padding: 0 var(--cc-gutter);
  width: 100%;
  max-width: 1512px;
  margin: 130px auto 0;
}

.cc-faqs-header__title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.2;
  color: var(--cc-ink);
  margin-left: 123px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Section spacing (from Figma y-coordinates) ---
   Heading: y=322 → divider margin-bottom = 322 - 296 = 26px
   First item: y=426, heading bottom: y=333 → label margin-bottom = 93px
   The old 217px top padding stood in for the missing page title; with the
   header above it, this is the title-to-content gap Insights uses. */
.cc-faqs__section.cc-faq {
  padding-top: 80px;
  padding-bottom: 0;
}

.cc-faqs__section .cc-faq__divider {
  margin-bottom: 26px;
}

/* 12px to match the homepage's EXPLORE OUR PORTFOLIO / FAQs labels; the shared
   component stays at 10px elsewhere. The 93px it used to carry was sized for a
   page with no title above it — 60px now that the header does that work. */
.cc-faqs__section .cc-faq__label {
  font-size: 12px;
  margin-bottom: 60px;
}

/* --- Item spacing (from Figma group metadata) ---
   Item text height: 30px, group height: 41px
   Divider at group bottom (e.g. y=467 for first group)
   Next group starts 25px after divider (e.g. y=492)
   → padding-top: 25px (divider to text), padding-bottom: 11px (text to next divider) */
.cc-faqs__section .cc-faq__question {
  padding: 25px 0 11px 0;
}

/* --- Expanded answer spacing ---
   Question text bottom: y=654, answer text: y=727 → top gap = 73px
   Answer bottom: y=790, next divider: y=805 → bottom gap = 15px
   Answer: x=32, width=960, gutter x=28 → padding-left = 4px */
.cc-faqs__section .cc-faq__answer {
  padding: 73px 0 15px 4px;
}

.cc-faqs__section .cc-faq__answer p {
  max-width: 960px;
}

.cc-faqs .cc-footer {
  margin-top: 110px;
}

/* ============================================================
   RESPONSIVE — Mobile (max-width: 768px)
   ============================================================ */
/* Below 1024 the 123px indent runs the title too close to the right edge —
   other pages drop it here too. */
@media (max-width: 1024px) {
  .cc-faqs-header {
    margin-top: 120px;
  }

  .cc-faqs-header__title {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  /* Matches the 80px other pages use at this width. */
  .cc-faqs-header {
    margin-top: 80px;
  }

  .cc-faqs-header__title {
    font-size: 32px;
    margin-left: 0;
  }

  .cc-faqs__section.cc-faq {
    padding-top: 60px;
  }

  .cc-faqs__section .cc-faq__label {
    margin-bottom: 40px;
  }

  .cc-faqs__section .cc-faq__question {
    padding: 18px 0 8px 0;
  }

  .cc-faqs__section .cc-faq__answer {
    padding: 30px 0 12px 4px;
  }

  .cc-faqs .cc-footer {
    margin-top: 60px;
  }
}