/* ============================================
   Dra. Ana Matumoto — FAQ
   Editorial Q&A · magazine interview register
   Inherits tokens from hero.css
   ============================================ */

.faq {
  position: relative;
  padding: clamp(120px, 16vh, 200px) clamp(20px, 4vw, 64px);
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 90% 12%,
      rgba(203, 163, 107, 0.05) 0%,
      transparent 60%),
    radial-gradient(ellipse 60% 45% at 10% 88%,
      rgba(203, 163, 107, 0.04) 0%,
      transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* chapter marker — IV */
.faq::after {
  content: "IV";
  position: absolute;
  top: clamp(40px, 8vh, 100px);
  right: -0.16em;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(220px, 38vw, 520px);
  line-height: 0.78;
  color: rgba(203, 163, 107, 0.035);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  pointer-events: none;
  user-select: none;
  z-index: -1;
  letter-spacing: -0.05em;
}

.faq-inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
}

/* ============================================
   HEADER
   ============================================ */
.faq-head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto clamp(64px, 9vh, 100px);
}

.faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 9px 18px 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(10, 8, 7, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: clamp(28px, 4vh, 40px);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

.faq-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.faq-eyebrow strong {
  color: var(--ink);
  font-weight: 600;
}

.faq.is-revealed .faq-eyebrow {
  opacity: 1; transform: translateY(0);
  transition-delay: 0.05s;
}

.faq-title {
  font-family: var(--f-display);
  font-weight: 350;
  font-size: clamp(40px, 5.6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.024em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 40;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}

.faq-title em {
  font-style: italic;
  color: var(--accent-2);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

.faq-title .period {
  color: var(--accent);
  margin-left: -0.04em;
}

.faq-title .line-2 {
  display: block;
  font-style: italic;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

.faq.is-revealed .faq-title {
  opacity: 1; transform: translateY(0);
  transition-delay: 0.2s;
}

.faq-lede {
  margin-top: clamp(24px, 3.5vh, 36px);
  font-family: var(--f-sans);
  font-size: clamp(15px, 1.05vw, 17.5px);
  line-height: 1.65;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

.faq-lede em {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--ink);
  font-variation-settings: "opsz" 24, "SOFT" 100;
}

.faq.is-revealed .faq-lede {
  opacity: 1; transform: translateY(0);
  transition-delay: 0.35s;
}

/* ============================================
   FAQ LIST
   ============================================ */
.faq-list {
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.faq-item {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding-left: 0;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out),
    padding-left 0.5s var(--ease);
}

.faq.is-revealed .faq-item { opacity: 1; transform: translateY(0); }
.faq.is-revealed .faq-item:nth-child(1) { transition-delay: 0.46s; }
.faq.is-revealed .faq-item:nth-child(2) { transition-delay: 0.52s; }
.faq.is-revealed .faq-item:nth-child(3) { transition-delay: 0.58s; }
.faq.is-revealed .faq-item:nth-child(4) { transition-delay: 0.64s; }
.faq.is-revealed .faq-item:nth-child(5) { transition-delay: 0.7s; }
.faq.is-revealed .faq-item:nth-child(6) { transition-delay: 0.76s; }
.faq.is-revealed .faq-item:nth-child(7) { transition-delay: 0.82s; }
.faq.is-revealed .faq-item:nth-child(8) { transition-delay: 0.88s; }

.faq-item.is-open {
  padding-left: clamp(14px, 1.6vw, 22px);
}

/* gold marker on the left when open */
.faq-item.is-open::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(22px, 3.2vh, 32px);
  bottom: clamp(22px, 3.2vh, 32px);
  width: 1px;
  background: var(--accent);
  animation: faqLineIn 0.5s var(--ease-out);
}

@keyframes faqLineIn {
  from { transform: scaleY(0); transform-origin: top; }
  to { transform: scaleY(1); transform-origin: top; }
}

/* ---------- Question (button) ---------- */
.faq-question {
  display: grid;
  grid-template-columns: clamp(52px, 5.5vw, 76px) 1fr auto;
  gap: clamp(20px, 3vw, 36px);
  align-items: baseline;
  width: 100%;
  padding: clamp(24px, 3.5vh, 36px) clamp(6px, 1.5vw, 16px);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: padding 0.4s var(--ease);
}

.faq-question:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.q-num {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 30px);
  color: var(--accent);
  line-height: 1;
  font-variation-settings: "opsz" 36, "SOFT" 100;
  letter-spacing: -0.01em;
  text-align: right;
  padding-right: 4px;
  transition: color 0.4s var(--ease);
}

.q-text {
  font-family: var(--f-display);
  font-weight: 350;
  font-style: italic;
  font-size: clamp(19px, 1.9vw, 27px);
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--ink);
  font-variation-settings: "opsz" 72, "SOFT" 100;
  transition: color 0.4s var(--ease);
}

.faq-question:hover .q-text {
  color: var(--accent-2);
}

.faq-item.is-open .q-text {
  color: var(--accent-2);
}

.faq-item.is-open .q-num {
  color: var(--accent-2);
}

/* ---------- Toggle indicator (rotating cross) ---------- */
.q-toggle {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  align-self: center;
}

.q-toggle .bar {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent);
  transform-origin: center;
  transition: transform 0.45s var(--ease), background 0.4s var(--ease);
}

.q-toggle .bar:nth-child(2) {
  transform: rotate(90deg);
}

.faq-item.is-open .q-toggle .bar:nth-child(2) {
  transform: rotate(0);
}

.faq-question:hover .q-toggle .bar {
  background: var(--accent-2);
}

/* ---------- Answer (animated grid-row collapse) ---------- */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-out);
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.answer-inner {
  min-height: 0;
  overflow: hidden;
}

.answer-content {
  display: grid;
  grid-template-columns: clamp(52px, 5.5vw, 76px) 1fr;
  gap: clamp(20px, 3vw, 36px);
  padding: 0 clamp(6px, 1.5vw, 16px) clamp(28px, 4vh, 40px);
}

.answer-body {
  grid-column: 2;
  font-family: var(--f-sans);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.72;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 60ch;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.5s var(--ease) 0.18s,
    transform 0.5s var(--ease) 0.18s;
}

.faq-item.is-open .answer-body {
  opacity: 1;
  transform: translateY(0);
}

.answer-body em {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--ink);
  font-weight: 400;
  font-variation-settings: "opsz" 24, "SOFT" 100;
}

.answer-body strong {
  color: var(--ink);
  font-weight: 500;
}

/* ============================================
   FOOTER (still got a question?)
   ============================================ */
.faq-foot {
  margin-top: clamp(72px, 10vh, 110px);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}

.faq.is-revealed .faq-foot {
  opacity: 1; transform: translateY(0);
  transition-delay: 1s;
}

.faq-foot::before {
  content: "✦";
  display: block;
  font-size: 13px;
  color: var(--accent);
  opacity: 0.65;
  margin-bottom: clamp(24px, 3vh, 36px);
}

.foot-text {
  font-family: var(--f-display);
  font-weight: 350;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.36;
  color: var(--ink-soft);
  margin-bottom: clamp(22px, 3vh, 32px);
  font-variation-settings: "opsz" 96, "SOFT" 60;
}

.foot-text em {
  font-style: italic;
  color: var(--ink);
  font-variation-settings: "opsz" 96, "SOFT" 100;
}

.foot-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--accent);
  transition: gap 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.foot-link svg {
  width: 18px;
  height: 9px;
  transition: transform 0.4s var(--ease);
}

.foot-link:hover {
  color: var(--accent-2);
  gap: 16px;
}

.foot-link:hover svg {
  transform: translateX(3px);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 720px) {
  .faq {
    padding: 80px 18px;
  }

  .faq::after {
    font-size: 200px;
    top: 30px;
  }

  .faq-question {
    grid-template-columns: clamp(40px, 9vw, 56px) 1fr auto;
    gap: 14px;
    padding: 22px 6px;
  }

  .answer-content {
    grid-template-columns: clamp(40px, 9vw, 56px) 1fr;
    gap: 14px;
    padding: 0 6px 24px;
  }

  .q-text {
    font-size: clamp(17px, 4.6vw, 22px);
  }

  .q-num {
    font-size: clamp(18px, 4.5vw, 24px);
  }

  .answer-body {
    font-size: 14.5px;
  }

  .faq-title {
    font-size: clamp(36px, 9.5vw, 56px);
  }

  .foot-text {
    font-size: clamp(18px, 5vw, 22px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq *,
  .faq *::before,
  .faq *::after {
    transition: none !important;
    animation: none !important;
  }
  .faq .faq-eyebrow,
  .faq .faq-title,
  .faq .faq-lede,
  .faq .faq-item,
  .faq .faq-foot {
    opacity: 1 !important;
    transform: none !important;
  }
}