/* experience-faq — page-specific section for src/capsule/experience/
 *
 * Figma: Boukan — Capsule
 *   desktop 2668:4508 "repeater_04" (frame 2602:865)
 *   mobile  2935:1057               (frame 2935:868)
 *
 * The Figma layer is named repeater_04, but the catalog's repeater-04 is a
 * property-card slider with a next button — nothing like this list, so it was
 * not used. The Maju catalog has no FAQ accordion; single-open logic follows
 * figma-rules/04-accordion-tabs.md (first item open, mutually exclusive).
 *
 * Deviations from the Figma source:
 *   - Figma draws row 01 expanded with its answer and a chevron-up, and rows
 *     02-08 collapsed with chevron-down. Only row 01 carries answer copy in the
 *     file; the other seven answers are placeholders here and need real content.
 *   - Panel open/close and chevron rotation transition over 300ms (ACCORDION-6);
 *     the duration is a repo convention, not a Figma value.
 *   - One chevron asset is shipped and rotated 180° for the open state, which
 *     is what the two Figma icons are.
 *   - Mobile insets the title and list to grid columns 2/26 rather than the
 *     frame's literal 15px padding (client request), so the section follows the
 *     26-column grid at every breakpoint.
 */

.experience-faq,
.experience-faq *,
.experience-faq *::before,
.experience-faq *::after { box-sizing: border-box; }
.experience-faq :where(p, h2, h3, ul, li) { margin: 0; }
.experience-faq ul { list-style: none; padding: 0; }

.experience-faq {
  display: grid;
  grid-template-columns: repeat(26, minmax(0, 1fr));
  row-gap: 24px;
  width: 100%;
  padding: 64px 0;
  background: var(--color-surface, #FFFFFF);
  font-family: var(--font-body, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
}

.experience-faq__title {
  grid-column: 2 / 26;
  font-family: var(--font-heading, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
  font-size: var(--fs-36, 36px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-gray-900, #101828);
}

.experience-faq__list {
  grid-column: 2 / 26;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.experience-faq__item {
  border: 1px solid var(--color-gray-200, #EAECF0);
}

.experience-faq__trigger {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.experience-faq__index {
  display: block;
  flex-shrink: 0;
  width: 32px;
  font-size: var(--fs-md, 18px);
  font-weight: 500;
  line-height: 1.54;
  color: var(--color-gray-600, #475467);
}

.experience-faq__body {
  flex: 1 1 auto;
  min-width: 0;
}

.experience-faq__question {
  display: block;
  font-size: var(--fs-md, 18px);
  font-weight: 500;
  line-height: 1.54;
  color: var(--color-gray-900, #101828);
}

.experience-faq__answer {
  display: block;
  overflow: hidden;
  max-height: 0;
  font-size: var(--fs-base, 16px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-brand-dark-grey, #4C5155);
  transition: max-height 300ms ease, padding-top 300ms ease;
}

.experience-faq__item.is-open .experience-faq__answer {
  max-height: 400px;
  padding-top: 8px;
}

.experience-faq__icon {
  flex-shrink: 0;
  display: block;
  width: 24px;
  height: 24px;
  margin: 2px;
  transition: transform 300ms ease;
}

.experience-faq__item.is-open .experience-faq__icon { transform: rotate(180deg); }

/* --------------------------------------------------------------- 768px + */

@media (min-width: 768px) {
  .experience-faq__title { font-size: var(--fs-48, 48px); }
  .experience-faq__index { width: 40px; }
}

/* -------------------------------------------------------------- 1024px + */

@media (min-width: 1024px) {
  .experience-faq { padding: 88px 0; }

  .experience-faq__title {
    grid-column: 2 / 11;
    grid-row: 1;
    font-size: var(--fs-60, 60px);
  }

  .experience-faq__list {
    grid-column: 13 / 26;
    grid-row: 1;
  }
}