/* ==========================================================================
   FitnessBlackBelt — faq.css
   Sections: Hero + search · Category rail · Accordion groups · Still-asking
   ========================================================================== */

/* ==========================================================================
   1. BREADCRUMBS
   ========================================================================== */
.crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.75rem;
}
.crumbs a { color: var(--brand-300); transition: color var(--dur); }
.crumbs a:hover { color: var(--brand-200); }
.crumbs span[aria-current] { color: var(--text-soft); }

/* ==========================================================================
   2. HERO — FAQ variant
   Hero component lives in base.css. Here: left-aligned breadcrumb, the
   search field sitting in place of the action buttons, and topic jump links.
   ========================================================================== */
.hero .crumbs { justify-content: flex-start; margin-bottom: 1.25rem; }

/* Topic links in the strip behave as links, not plain labels */
.hero__strip-items a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: color var(--dur), border-color var(--dur);
}
.hero__strip-items a:hover { color: #fff; border-bottom-color: var(--brand-400); }

/* --- Search field --- */
.fsearch {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  max-width: 480px;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: .35rem .35rem .35rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(12px);
  transition: border-color var(--dur), box-shadow var(--dur), background-color var(--dur);
}
.fsearch:focus-within {
  border-color: rgba(139,92,246,.55);
  background: rgba(139,92,246,.06);
  box-shadow: 0 0 0 4px rgba(139,92,246,.12), 0 18px 40px -22px rgba(124,58,237,.9);
}
.fsearch > svg { width: 19px; height: 19px; color: var(--dim); flex: none; transition: color var(--dur); }
.fsearch:focus-within > svg { color: var(--brand-300); }

.fsearch input {
  flex: 1;
  min-width: 0;
  padding: .85rem 0;
  border: 0;
  background: none;
  font-size: var(--fs-sm);
  color: var(--text);
  outline: none;
}
.fsearch input::placeholder { color: var(--dim); }
.fsearch input::-webkit-search-cancel-button { display: none; }

.fsearch__clear {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  color: var(--muted);
  background: rgba(255,255,255,.06);
  transition: background-color var(--dur), color var(--dur);
}
.fsearch__clear:hover { background: rgba(139,92,246,.24); color: #fff; }
.fsearch__clear svg { width: 15px; height: 15px; }

/* ==========================================================================
   3. LAYOUT — rail + questions
   ========================================================================== */
.faq__layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 940px) { .faq__layout { grid-template-columns: 260px 1fr; } }

/* --- Category rail --- */
.faq__rail { display: none; }
@media (min-width: 940px) {
  .faq__rail {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}
.faq__rail-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.15rem;
}
.faq__rail-list { display: grid; gap: .3rem; }
.faq__rail-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: all var(--dur) var(--ease-out);
}
.faq__rail-link em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  padding: .12rem .4rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.06);
  color: var(--dim);
}
.faq__rail-link:hover { color: var(--text); background: rgba(255,255,255,.04); }
.faq__rail-link.is-active {
  color: #fff;
  background: rgba(124,58,237,.14);
  border-color: rgba(139,92,246,.32);
}
.faq__rail-link.is-active em { background: rgba(139,92,246,.3); color: var(--brand-200); }

.faq__rail-cta {
  margin-top: 2rem;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(124,58,237,.1), rgba(255,255,255,.01));
}
.faq__rail-cta p { font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: 1rem; }

/* --- Question groups --- */
.faq__main { min-width: 0; }

.faq__group { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); scroll-margin-top: calc(var(--header-h) + 2rem); }
.faq__group:last-of-type { margin-bottom: 0; }
.faq__group.is-hidden { display: none; }

.faq__group-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.faq__group-num {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .1em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(167,139,250,.55);
}
.faq__group-head h2 { font-size: var(--fs-xl); letter-spacing: -0.026em; }

/* Hidden by search */
.acc__item.is-hidden { display: none; }

/* Search match highlight */
.faq__hit {
  border-radius: 3px;
  padding: 0 .12em;
  background: rgba(139,92,246,.34);
  color: #fff;
}

.faq__result {
  font-size: var(--fs-xs);
  color: var(--dim);
  margin-bottom: 1.75rem;
  padding: .75rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.faq__result strong { color: var(--brand-200); }

.faq__empty {
  padding: 3rem 1rem;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--dim);
}
.faq__empty a { color: var(--brand-300); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   4. ACCORDION (page-local copy of the shared pattern)
   ========================================================================== */
.acc { display: grid; gap: .75rem; }

.acc__item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(255,255,255,.026), rgba(255,255,255,.005));
  overflow: hidden;
  transition: border-color var(--dur), background-color var(--dur);
}
.acc__item.is-open {
  border-color: rgba(139,92,246,.34);
  background: linear-gradient(165deg, rgba(124,58,237,.09), rgba(255,255,255,.01));
}

.acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.25rem clamp(1.15rem, 3vw, 1.75rem);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.4;
  color: var(--text-soft);
  transition: color var(--dur);
}
.acc__trigger:hover,
.acc__item.is-open .acc__trigger { color: #fff; }

.acc__icon {
  position: relative;
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: border-color var(--dur), background-color var(--dur), transform var(--dur) var(--ease-out);
}
.acc__icon::before,
.acc__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  color: var(--brand-300);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur);
}
.acc__icon::before { width: 9px; height: 1.5px; }
.acc__icon::after  { width: 1.5px; height: 9px; }
.acc__item.is-open .acc__icon {
  background: rgba(139,92,246,.2);
  border-color: rgba(139,92,246,.5);
  transform: rotate(180deg);
}
.acc__item.is-open .acc__icon::after { transform: scaleY(0); opacity: 0; }

.acc__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 460ms var(--ease-out);
}
.acc__inner {
  padding: 0 clamp(1.15rem, 3vw, 1.75rem) 1.5rem;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--muted);
  max-width: 74ch;
}
.acc__inner p + p { margin-top: .85rem; }
.acc__inner a { color: var(--brand-300); text-decoration: underline; text-underline-offset: 3px; }
.acc__inner a:hover { color: var(--brand-200); }

/* ==========================================================================
   5. STILL HAVE A QUESTION
   ========================================================================== */
.still__panel {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(90% 100% at 0% 0%, rgba(124,58,237,.18), transparent 62%),
    linear-gradient(168deg, rgba(255,255,255,.042), rgba(255,255,255,.008)), var(--surface);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 900px) { .still__panel { grid-template-columns: 1.2fr .8fr; align-items: stretch; } }

.still__copy { padding: clamp(2rem, 4.5vw, 3.5rem); }
.still__copy h2 { font-size: var(--fs-2xl); }

.still__photo { position: relative; min-height: 260px; }
.still__photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 58% 26%;
  filter: contrast(1.05) saturate(.9) brightness(.92);
}
.still__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18,16,28,.95), transparent 42%),
    linear-gradient(180deg, transparent 45%, rgba(8,7,13,.9));
}
.still__photo figcaption {
  position: absolute;
  left: clamp(1.25rem, 3vw, 2rem);
  bottom: clamp(1.25rem, 3vw, 2rem);
  z-index: 1;
  display: grid;
  gap: .1rem;
}
.still__photo strong {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 650;
  color: #fff;
}
.still__photo span { font-size: var(--fs-xs); color: var(--brand-200); }