/* ============================================================
   SANO | FAQ — CSS panel
   ============================================================ */

.sano-faq {
  container-type: inline-size;
  container-name: sano-faq;

  /* ---- MOTION TOKENS — shared across every Sano module ---- */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-out:  cubic-bezier(0.23, 1, 0.32, 1);
  --dur-reveal: 1000ms;
  --dur-open: 380ms;
  --reveal-step: 120ms;

  /* ---- TYPOGRAPHY — replace "inherit" with the theme font ---- */
  --faq-font: inherit;

  /* ---- FALLBACKS — the live values are printed by the HTML panel ---- */
  --faq-max: 1140px;
  --faq-h-max: 36px;
  --faq-h-min: 32px;
  --faq-h-weight: 500;
  --faq-left: 300px;
  --faq-gap: 64px;
  --faq-heading-color: #0B1B2B;
  --faq-q-color: #0B1B2B;
  --faq-a-color: #5A6472;
  --faq-rule: rgba(11, 27, 43, .12);

  font-family: var(--faq-font);

  /* NO padding here. Vertical and horizontal spacing belongs to
     the dnd section, so this lines up with every other module
     at the same max width. */
}

.sano-faq__inner {
  display: grid;
  grid-template-columns: var(--faq-left, 300px) minmax(0, 1fr);
  gap: var(--faq-gap, 64px);
  align-items: start;
  max-width: var(--faq-max, 1140px);
  margin-inline: auto;
}

/* Section heading: the one clamp in the module, matching every
   other h2 on the site — 36 desktop, 32 mobile, two-step on
   purpose. Everything below it is flat px. */
.sano-faq__heading {
  margin: 0;
  color: var(--faq-heading-color);
  font-size: clamp(var(--faq-h-min, 32px), 4.2cqi, var(--faq-h-max, 36px));
  font-weight: var(--faq-h-weight, 500);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---- LIST --------------------------------------------------- */
.sano-faq__list { min-width: 0; }

.sano-faq__item {
  border-top: 1px solid var(--faq-rule);
}

.sano-faq__item:last-child { border-bottom: 1px solid var(--faq-rule); }

/* ---- QUESTION ROW -------------------------------------------- */
.sano-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: transparent;
  color: var(--faq-q-color);
  font-family: var(--faq-font);
  text-align: left;
  cursor: pointer;
}

.sano-faq__q-text {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  text-wrap: balance;
}

.sano-faq__q:focus-visible {
  outline: 2px solid var(--faq-q-color);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- ICON — a plus that morphs into a minus ------------------
   Two bars, both currentColor, so the icon always matches the
   question text without a separate colour field.
----------------------------------------------------------- */
.sano-faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.sano-faq__icon::before,
.sano-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-open) var(--ease-out);
}

.sano-faq__icon::before { width: 16px; height: 2px; }
.sano-faq__icon::after  { width: 2px; height: 16px; }

.sano-faq__item.is-open .sano-faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }

/* ---- PANEL — height animates via grid-template-rows, no JS
   measuring involved. min-height:0 on the grid row is required
   or the row refuses to collapse below its content's height.
----------------------------------------------------------- */
.sano-faq__wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-open) var(--ease-soft);
}

.sano-faq__item.is-open .sano-faq__wrap { grid-template-rows: 1fr; }

.sano-faq__panel {
  overflow: hidden;
  min-height: 0;
}

.sano-faq__answer {
  margin: 0 0 20px;
  max-width: 62ch;
  color: var(--faq-a-color);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

.sano-faq__note {
  margin: -8px 0 20px;
  max-width: 62ch;
  color: var(--faq-a-color);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  text-wrap: pretty;
}

.sano-faq__answer:last-child,
.sano-faq__note:last-child { margin-bottom: 20px; }

/* ---- HOVER — gated so a tap never leaves a state stuck ------- */
@media (hover: hover) and (pointer: fine) {
  .sano-faq__q:hover .sano-faq__q-text { opacity: .7; }
}

/* ---- NARROW SCREENS — stack, left column becomes a header ---- */
@container sano-faq (max-width: 700px) {
  .sano-faq__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---- SCROLL REVEAL -------------------------------------------
   Hidden state carries no transition, or adding .is-ready fades
   the section out for a second first. The delay lives on
   .is-visible, the state each part transitions INTO — that is
   what staggers them.
----------------------------------------------------------- */
.sano-faq.is-ready .sano-faq__heading,
.sano-faq.is-ready .sano-faq__item {
  opacity: 0;
  transform: translateY(24px);
}

.sano-faq.is-ready .sano-faq__heading.is-visible,
.sano-faq.is-ready .sano-faq__item.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-reveal) var(--ease-soft),
              transform var(--dur-reveal) var(--ease-soft);
  transition-delay: calc(var(--i, 0) * var(--reveal-step));
}

/* ---- REDUCED MOTION --------------------------------------------
   Zero the tokens, then force the resting state, so the section
   is never left hidden for someone who asked for less movement.
----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sano-faq { --dur-reveal: 1ms; --dur-open: 1ms; --reveal-step: 0ms; }

  .sano-faq.is-ready .sano-faq__heading,
  .sano-faq.is-ready .sano-faq__item {
    opacity: 1;
    transform: none;
  }
}

/* ---- Fallback for browsers without container queries --------- */
@supports not (container-type: inline-size) {
  @media (max-width: 760px) {
    .sano-faq__inner { grid-template-columns: 1fr; gap: 28px; }
  }
}