/* #faq (P6) — CALL-E P10 "Hanging-tile FAQ": heading + hanging yellow tile left, sand accordion right.
   Ported from webuiexample index.html #faq (inline styles) + site.css L590-638, L1743-1760. Accordion item styles live in
   base.css (.faq details/summary/.ans). Only semantic variables here, so dark mode is a variable swap. */

/* two columns, stacks below ~1000px (CALL-E: auto-fit minmax 380) */
#faq .faq-grid {
  display: grid; align-items: start;
  gap: 40px clamp(32px, 6vw, 96px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
#faq .faq-l { display: grid; gap: 16px; justify-items: start; }
#faq .faq-l .mk { white-space: nowrap; }

/* cord comes in from the left edge and ends at a nail just past the column; the tile hangs from one peg */
/* --nr = nail offset: CALL-E's -60px, but never closer than 12px to the accordion when the column gap shrinks (~1000px) */
#faq .faq-row { --nr: max(-60px, calc(12px - clamp(32px, 6vw, 96px))); width: 100%; margin-top: 12px; }
#faq .faq-row > .faq-cord { left: -100vw; right: calc(var(--nr) + 12px); }
#faq .faq-nail { right: var(--nr); }
#faq .faq-hg { --r: 4deg; }
#faq .faq-tile {
  display: grid; place-items: center; width: 250px; height: 250px;
  border-radius: 28px; background: var(--paper-yel); box-shadow: var(--sh-tile);
}
/* Tool seal (blue icon on a white badge) read as ink-on-white: grayscale + contrast pushes the icon to near-ink,
   the white badge stays white */
#faq .faq-tile img { display: block; width: 176px; height: auto; filter: grayscale(1) contrast(2) var(--sh-drop); }

/* no one-word last lines in questions ("AI?", "own?") */
#faq .faq summary { text-wrap: pretty; }

@media (width <= 767px) {
  /* CALL-E mobile: tile centred, gentler tilt, no nail, cord runs full width; tile kept small (blueprint 3.10) */
  #faq .faq-row { justify-content: center; }
  #faq .faq-row > .faq-cord { right: -100vw; }
  #faq .faq-nail { display: none; }
  #faq .faq-hg { --r: 1.5deg; }
  #faq .faq-tile { width: 184px; height: 184px; border-radius: 22px; }
  #faq .faq-tile img { width: 128px; }
}