/* ==========================================================================
   JIST — FAQ ACCORDION
   Sticky prompt aside, accordion list alongside. Panels open by animating
   grid-template-rows from 0fr to 1fr, so no fixed heights are needed.
   ========================================================================== */

.jist-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--wp--custom--grid-gap);
  align-items: start;
}

.jist-faq__aside {
  display: grid;
  gap: var(--wp--preset--spacing--60);
}

@media (min-width: 901px) {
  .jist-faq__aside {
    position: sticky;
    inset-block-start: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--60));
  }
}

.jist-faq__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--htwo);
  font-weight: 700;
  line-height: var(--wp--custom--leading-snug);
  letter-spacing: var(--wp--custom--tracking-display);
  color: var(--wp--preset--color--contrast);
  text-wrap: balance;
}

.jist-faq__prompt {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  justify-items: start;
  padding: var(--wp--preset--spacing--60);
  background-color: var(--wp--preset--color--paper);
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius-md);
}

.jist-faq__prompt-text {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
  line-height: var(--wp--custom--leading-relaxed);
}

/* --------------------------------------------------------------------------
   The list
   -------------------------------------------------------------------------- */
.jist-faq__list {
  border-block-start: var(--wp--custom--hairline) solid var(--wp--preset--color--line);
}

.jist-faq-item {
  border-block-end: var(--wp--custom--hairline) solid var(--wp--preset--color--line);
}

.jist-faq-item__heading { margin: 0; }

.jist-faq-item__trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: var(--wp--preset--spacing--50);
  align-items: start;
  inline-size: 100%;
  padding: var(--wp--preset--spacing--50) 0;
  text-align: start;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--hfour);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking-heading);
  line-height: var(--wp--custom--leading-snug);
  color: var(--wp--preset--color--slate);
  transition: color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.jist-faq-item__trigger:hover,
.jist-faq-item__trigger[aria-expanded="true"] { color: var(--wp--preset--color--contrast); }

/* ---- The plus / minus marker ------------------------------------------- */
.jist-faq-item__marker {
  position: relative;
  inline-size: 28px;
  block-size: 28px;
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius-sm);
  flex: none;
  transition: border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.jist-faq-item__marker::before,
.jist-faq-item__marker::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  background-color: var(--wp--preset--color--accent-ink);
  transform: translate(-50%, -50%);
  transition:
    transform var(--wp--custom--duration-base) var(--wp--custom--ease-out),
    opacity var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.jist-faq-item__marker::before { inline-size: 12px; block-size: 2px; }
.jist-faq-item__marker::after  { inline-size: 2px; block-size: 12px; }

.jist-faq-item__trigger[aria-expanded="true"] .jist-faq-item__marker {
  border-color: var(--wp--preset--color--accent);
}

.jist-faq-item__trigger[aria-expanded="true"] .jist-faq-item__marker::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* ---- The panel ---------------------------------------------------------- */
.jist-faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}

.jist-faq-item__panel.is-open { grid-template-rows: 1fr; }

.jist-faq-item__panel > div { overflow: hidden; }

.jist-faq-item__answer {
  margin: 0;
  padding-block-end: var(--wp--preset--spacing--60);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading-relaxed);
  max-inline-size: var(--wp--custom--measure);
}

@media (prefers-reduced-motion: reduce) {
  .jist-faq-item__panel { transition: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .jist-faq__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--80);
  }
}