/* FAQ — offset accordion on the survey grid; open row takes the accent datum. */

.faq { padding-block: var(--section-gap); }

.faq__inner {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-sm), minmax(0, 1fr));
  gap: var(--grid-gap);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.faq__title { grid-column: 1 / -1; max-width: var(--measure-h2); }

.faq__list { grid-column: 1 / -1; margin-top: var(--space-xl); }

.faq__row {
  border-bottom: var(--border-hairline);
  border-left: var(--border-width-rule) solid transparent;
  transition: background var(--dur-fast) var(--ease-slide),
              border-color var(--dur-fast) var(--ease-slide);
}

/* The wash belongs to the row, so it reaches the datum on the left and the full width
   on the right. Padding moved onto the summary and the answer for the same reason. */
.faq__row:hover { background: var(--accent-wash); }

.faq__row[open] {
  background: var(--accent-wash);
  border-left-color: var(--accent);
}

.faq__row summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md);
  cursor: pointer;
  list-style: none;
}

.faq__row summary::-webkit-details-marker { display: none; }

.faq__row:hover .faq__q { color: var(--text-accent); }

.faq__q {
  font-family: var(--font-display);
  font-stretch: var(--font-stretch-display);
  font-weight: var(--weight-display);
  font-size: var(--text-h4);
}

.faq__sign { color: var(--text-accent); flex: 0 0 auto; }

.faq__row[open] .faq__sign { transform: rotate(45deg); }

.faq__a {
  padding: 0 var(--space-md) var(--space-lg);
  max-width: var(--measure-body);
  color: var(--text-secondary);
}

/* Opening used to be a jump: the element resized in one frame and only the copy moved.
   Chrome can interpolate to auto height through ::details-content, so the row itself
   now opens. Browsers without it keep the previous behaviour, which is correct, just
   less smooth. */
@supports selector(::details-content) {
  .js .faq__row::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--dur-base) var(--ease-slide),
                content-visibility var(--dur-base) allow-discrete;
    interpolate-size: allow-keywords;
  }

  .js .faq__row[open]::details-content { block-size: auto; }
}

/* The height change is a layout property and is never transitioned. What moves is
   the revealed content; closing releases it first, then the row collapses. */
.js .faq__row[open] .faq__a {
  animation: faq-in var(--dur-base) var(--ease-slide) both;
}

.js .faq__row.is-closing .faq__a {
  animation: faq-out var(--dur-fast) var(--ease-exit) both;
}

@keyframes faq-in {
  from { opacity: 0; transform: translateY(calc(-1 * var(--space-xs))); }
  to { opacity: 1; transform: none; }
}

@keyframes faq-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(calc(-1 * var(--space-2xs))); }
}

.faq__sign { transition: transform var(--dur-fast) var(--ease-exit); }

.faq__row[open] .faq__sign { transition: transform var(--dur-tick) var(--ease-slide); }

@media (prefers-reduced-motion: reduce) {
  .js .faq__row[open] .faq__a,
  .js .faq__row.is-closing .faq__a { animation: none; }
}

@media (min-width: 900px) {
  .faq__inner { grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); }

  .faq__title {
    grid-column: 1 / 5;
    position: sticky;
    top: calc(var(--header-h) + var(--space-xl));
    align-self: start;
  }

  .faq__list { grid-column: 5 / -1; margin-top: 0; }
}