/* =====================================================================
   HP - FAQs  (homepage redesign)
   UK desktop node 10125:23080 / UK mobile node 10129:214.
   Token-only. BEM, all classes prefixed .hp-faqs-.
   ===================================================================== */

.hp-faqs {
  background: var(--gray-0);
  /* Match the 80px top rhythm of the other homepage sections (was 40px). */
  padding-block: var(--home-sec-pad-y) var(--hp-faqs-pad-bottom);
}

.hp-faqs__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hp-faqs-stack-gap);
}

/* ---- Title : OG Desktop H2 (Axiforma Medium 32/45) -------------------- */
.hp-faqs__title {
  margin: 0;
  max-width: var(--faq-set-max);          /* 900px wrapper cap */
  width: 100%;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45);
  letter-spacing: 0;
  color: var(--gray-8);
  text-align: center;
  word-break: break-word;
}

/* ---- Two-column flat list (desktop) ---------------------------------- */
.hp-faqs__list {
  width: 100%;
  column-count: 2;
  column-gap: var(--hp-faqs-col-gap);     /* 40px between the two columns */
}

.hp-faqs__item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

.hp-faqs__item + .hp-faqs__item {
  margin-top: var(--hp-faqs-q-gap);       /* 40px between stacked questions */
}

/* ---- Question row (summary) ------------------------------------------ */
.hp-faqs__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hp-faqs-row-gap);            /* 5px (matches mobile spec) */
  min-height: var(--hp-faqs-row-h);       /* 27px */
  list-style: none;
  cursor: pointer;
}
.hp-faqs__summary::-webkit-details-marker { display: none; }
.hp-faqs__summary:focus-visible {
  outline: 2px solid var(--og-blue);
  outline-offset: 4px;
}

/* OG Desktop Large Body (Axiforma Regular 18/25) */
.hp-faqs__question {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-25);
  letter-spacing: 0;
  color: var(--gray-8);
  word-break: break-word;
}

/* ---- Chevron : tinted mask, flips when open -------------------------- */
.hp-faqs__chevron {
  flex: none;
  width: var(--hp-faqs-chevron-box);      /* 24px hit box */
  height: var(--hp-faqs-chevron-box);
  background-color: var(--gray-8);
  -webkit-mask: url("../../img/hp-faqs-chevron.svg") no-repeat center / var(--hp-faqs-chevron-glyph-w) var(--hp-faqs-chevron-glyph-h);
          mask: url("../../img/hp-faqs-chevron.svg") no-repeat center / var(--hp-faqs-chevron-glyph-w) var(--hp-faqs-chevron-glyph-h);
  transition: transform 0.2s ease;
}
.hp-faqs__item[open] .hp-faqs__chevron { transform: rotate(180deg); }

/* ---- Answer (revealed) ----------------------------------------------- */
.hp-faqs__answer {
  margin-top: var(--faq-answer-gap);      /* 10px */
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-25);
  color: var(--gray-7);
}
.hp-faqs__answer :first-child { margin-top: 0; }
.hp-faqs__answer :last-child  { margin-bottom: 0; }

/* =====================================================================
   Tablet (768–1023): Archetype E — step heading, tighten padding
   ===================================================================== */
@media (max-width: 1023.98px) {
  .hp-faqs {
    padding-block: var(--hp-faqs-pad-top); /* 40px */
  }
  .hp-faqs__title {
    font-size: var(--fs-28);
    line-height: var(--lh-36);
  }
  .hp-faqs__question {
    font-size: var(--fs-16);
    line-height: normal;
  }
}

/* Large-mobile (600–767): step heading further */
@media (max-width: 767.98px) {
  .hp-faqs__title {
    font-size: var(--fs-26);
    line-height: var(--lh-36);
  }
}

/* =====================================================================
   Phone (≤599): single-column accordion (Figma mobile node 10129:214)
   ===================================================================== */
@media (max-width: 599.98px) {
  .hp-faqs__inner {
    gap: var(--hp-faqs-stack-gap-mobile);    /* 20px */
    align-items: stretch;
  }
  .hp-faqs__title {
    text-align: left;
    max-width: none;
  }
  .hp-faqs__list {
    column-count: 1;
    column-gap: 0;
  }
  .hp-faqs__item + .hp-faqs__item {
    margin-top: var(--hp-faqs-q-gap-mobile); /* 30px */
  }
}