/* Michal Kašpar — FAQ section
   ──────────────────────────────────────────────────────────
   Lives between the Services reel and the contact reel. Same
   visual vocabulary as services: dark bg, hairline dividers,
   mono kicker. Auto-height (overrides .reel's 100dvh) so the
   list defines the section height.

   Layout: same left/right split as services-intro (1fr 1fr).
   Left column holds only the FAQ kicker. Right column holds the
   entire question list. The section's top border = the first
   question's top line. The section's bottom border = the last
   question's bottom line. No doubled hairlines. */

.reel.faq {
  /* 100dvh — distribute the small content over the full viewport.
     Kicker pins to the top-left, list anchors to the bottom-right,
     empty space fills the gap in between. */
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  /* Horizontal padding is REMOVED so direct children can span the
     full reel width — that's what lets every hairline (the wrap's
     top + bottom borders AND the per-item dividers) reach the page's
     left edge and the navbar's right edge. Content insets live
     inside the wrap on individual rows. */
  padding: calc(var(--nav-h, 72px) + clamp(18px, 2.6vh, 32px)) 0 clamp(28px, 4vh, 56px);
  scroll-snap-stop: normal;
  display: flex;
  flex-direction: column;
}

.faq-wrap {
  /* Stretch to fill the available section height. Spans the full
     reel width — top + bottom borders reach the page edge and
     the navbar. */
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.faq-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: 0.02em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--fg);
  align-self: start;
  /* Padding insets the kicker text from the page edge; the wrap
     itself has no horizontal padding so its borders can reach
     the edges. */
  padding: clamp(20px, 2.6vh, 30px) clamp(24px, 4vw, 80px) 0 var(--edge-x);
}

/* ── List ───────────────────────────────────────────────── */
.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Anchor the list to the bottom of the right column so the empty
     space sits above it, not below. */
  align-self: end;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item:first-child {
  /* Visible-row top divider — spans the right column only,
     matching the inter-card dividers below it. */
  border-top: 1px solid var(--line);
}
.faq-item:last-child {
  /* Wrap's border-bottom IS the last question's bottom line. */
  border-bottom: none;
}

.faq-q {
  width: 100%;
  display: grid;
  /* text | icon — 1fr text column expands to push the icon to the
     right edge. */
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  /* Right padding mirrors the kicker's top padding so the "+" sits
     the same distance from the right edge as "FAQ" sits from the
     top hairline. No left padding because the text column already
     starts at the wrap's midline (= the right grid column). */
  padding: clamp(20px, 2.6vh, 30px) clamp(20px, 2.6vh, 30px) clamp(20px, 2.6vh, 30px) 0;
  text-align: left;
  cursor: pointer;
  color: var(--fg);
  transition: opacity 220ms ease;
}
.faq-q:hover {
  opacity: 0.78;
}
.faq-q:hover .faq-icon {
  color: var(--accent);
}

.faq-text {
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.4;
  color: var(--fg);
  text-wrap: pretty;
}

.faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: color-mix(in srgb, var(--color-text-primary) 70%, transparent);
  transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1), color 220ms ease;
  transform-origin: 50% 50%;
}
.faq-icon svg {
  width: clamp(20px, 1.6vw, 26px);
  height: clamp(20px, 1.6vw, 26px);
  display: block;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  color: var(--accent);
}

/* ── Answer ─────────────────────────────────────────────── */
/* grid-rows transition lets us animate from 0fr → 1fr, which
   the browser can interpolate as a true height auto. The inner
   wrapper has overflow hidden so the content is clipped while
   the row collapses. */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.faq-a-inner {
  overflow: hidden;
  min-height: 0;
}
.faq-a-inner > div {
  display: grid;
  /* Mirror .faq-q's columns (text | icon-space) so the answer
     paragraph aligns under the question text. */
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  /* Equal distance from the hairlines as the question (both pad
     clamp(20–30) from their line). The gap BETWEEN question
     and answer = question's bottom-pad + answer's top-pad =
     2× the normal padding — the "doubled" breathing room the
     open accordion calls for. Right padding mirrors .faq-q. */
  padding: clamp(20px, 2.6vh, 30px) clamp(20px, 2.6vh, 30px) clamp(20px, 2.6vh, 30px) 0;
}
.faq-a-inner p {
  grid-column: 1 / 2;
  max-width: 62ch;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.62;
  color: var(--color-text-soft);
  margin: 0;
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease 60ms, transform 380ms ease 60ms;
}
.faq-item.open .faq-a {
  grid-template-rows: 1fr;
}
.faq-item.open .faq-a-inner p {
  opacity: 1;
  transform: translateY(0);
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  .reel.faq {
    /* Revert to content-height on mobile — 7 questions don't fit 100dvh
       cleanly on a phone, especially with the navbar overlay. */
    height: auto;
    min-height: 100dvh;
    padding: calc(var(--nav-h, 72px) + 24px) 0 32px;
    display: block;
  }
  .faq-wrap {
    display: grid;
    grid-template-columns: 1fr;
    flex: initial;
  }
  .faq-kicker {
    padding: 18px var(--edge-x) clamp(80px, 18vh, 200px);
  }
  .faq-list {
    align-self: auto;
  }
  .faq-item:first-child {
    /* On mobile the wrap's border-top sits right above q01 already
       (single column collapses the kicker above it). Remove the
       extra short divider. */
    border-top: none;
  }
  .faq-q {
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    padding: 18px var(--edge-x);
  }
  .faq-a-inner > div {
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    padding-left: var(--edge-x);
    padding-right: var(--edge-x);
  }
  .faq-text {
    font-size: var(--text-base);
  }
}