/* ═══════════════════════════════════════════════════════════
   TUNEX FAQ SCROLLER
   Port of the "habit-faq-scroller" pattern to vanilla CSS/JS.

   Only the demo file was supplied, so the data contract is
   taken from it verbatim — rows carry a `speed` and a
   `direction`, each row holds FAQ items — while the visual
   treatment is built to match the Tunex design system.

   Rows marquee horizontally and pause on hover, on keyboard
   focus, and whenever an answer in that row is open, so a
   moving target never has to be read or clicked.
   ═══════════════════════════════════════════════════════════ */

.faq-scroller {
  overflow: hidden;
}

.faq-sub {
  max-width: 560px;
  margin: 14px auto 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

.faq-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 48px;
}

/* full-bleed: rows run edge to edge regardless of section padding */
.faq-row {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

/* the beam of cards; duplicated in JS so -50% loops seamlessly */
.faq-track {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: max-content;
  padding: 4px 8px;
  animation: faq-marquee var(--faq-speed, 60s) linear infinite;
}

@keyframes faq-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.faq-row[data-dir='right'] .faq-track {
  animation-direction: reverse;
}

/* reading and clicking beat scrolling — stop the row on any interaction */
.faq-row:hover .faq-track,
.faq-row:focus-within .faq-track,
.faq-row.has-open .faq-track {
  animation-play-state: paused;
}

/* soften both ends so cards enter and leave instead of being cut off */
.faq-rows {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 90px,
    #000 calc(100% - 90px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 90px,
    #000 calc(100% - 90px),
    transparent 100%
  );
}

/* ── CARD ──────────────────────────────────────────────── */

.faq-card {
  flex: 0 0 auto;
  width: 380px;
  text-align: left;
  background: var(--w);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition:
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.faq-card:hover {
  border-color: rgba(196, 30, 58, 0.35);
  box-shadow: 0 10px 30px rgba(12, 12, 12, 0.07);
  transform: translateY(-2px);
}

.faq-card:focus-visible {
  outline: 2px solid var(--r);
  outline-offset: 3px;
}

.faq-card.is-open {
  border-color: var(--r);
  box-shadow: 0 12px 34px rgba(196, 30, 58, 0.12);
}

.faq-card-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--b);
}

.faq-card-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rlight);
  color: var(--r);
  font-size: 15px;
  line-height: 1;
  transition: transform 0.3s var(--ease-out), background 0.25s var(--ease);
}
.faq-card.is-open .faq-card-icon {
  transform: rotate(45deg);
  background: var(--r);
  color: #fff;
}

/* display:block is load-bearing — this is a <span>, and max-height/overflow
   are ignored on non-replaced inline elements, so the answer would never
   collapse and every card would render at full height. */
.faq-card-a {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
  transition:
    max-height 0.45s var(--ease-out),
    opacity 0.3s var(--ease),
    margin-top 0.45s var(--ease-out);
}
.faq-card.is-open .faq-card-a {
  max-height: 360px;
  opacity: 1;
  margin-top: 14px;
}

/* ── STATIC FALLBACK ───────────────────────────────────── */

/* On touch there is no hover to pause with, so chasing a moving card is a
   poor deal — below the tablet breakpoint the rows collapse into a plain
   stacked accordion. Same markup, no marquee. */
@media (max-width: 768px) {
  .faq-rows {
    gap: 12px;
    margin-top: 32px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .faq-row {
    width: 100%;
    margin-left: 0;
    transform: none;
  }
  .faq-track {
    animation: none;
    flex-direction: column;
    width: 100%;
    gap: 12px;
    padding: 0;
  }
  .faq-card {
    width: 100%;
  }
  .faq-card[data-clone] {
    display: none;
  }
  .faq-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
  .faq-card[data-clone] {
    display: none;
  }
  .faq-card,
  .faq-card-icon,
  .faq-card-a {
    transition: none;
  }
}