/**
 * FAQs Container V1 — Figma node 2177:7023
 * Tabbed FAQ layout: tabs-v1 nav (left) + accordion list (right).
 * Depends on tabs-v1.css for .tabs-v1__nav / .tabs-v1__tab styles.
 */

.faqs-container-v1 {
  background-color: var(--color-bg-section);
  padding-block: var(--space-2xl);
  padding-inline: var(--space-md);
}

.faqs-container-v1__inner {
  max-width: 80rem; /* 1280px — Figma content width */
  margin-inline: auto;
}

/* ── Layout — side-by-side on desktop (2177:7426) ─────────── */
.faqs-container-v1__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Text-only tabs — no icon column (2177:7427) */
.faqs-container-v1 .tabs-v1__nav {
  gap: var(--space-md);
}

.faqs-container-v1 .tabs-v1__tab {
  justify-content: flex-start;
}

.faqs-container-v1 .tabs-v1__tab:not(.tabs-v1__tab--active) {
  background-color: #f8feff; /* Figma inactive tab card — lighter than section bg */
}

.faqs-container-v1__panels {
  inline-size: 100%;
}

.faqs-container-v1__panel[hidden] {
  display: none;
}

.faqs-container-v1__empty {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--color-text);
}

/* ── Accordion list (2177:7556) ───────────────────────────── */
.faqs-container-v1__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  inline-size: 100%;
}

.faqs-container-v1__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  inline-size: 100%;
}

.faqs-container-v1__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  inline-size: 100%;
  padding: var(--space-sm) var(--space-lg);
  border: 0;
  border-radius: 0.5rem; /* 8px — Figma card radius */
  background-color: #f8feff;
  backdrop-filter: blur(var(--blur-glass));
  cursor: pointer;
  text-align: start;
  transition: opacity var(--transition-base);
}

.faqs-container-v1__trigger:hover {
  opacity: 0.92;
}

.faqs-container-v1__trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.faqs-container-v1__question {
  flex: 1 1 0;
  min-inline-size: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--color-text);
}

.faqs-container-v1__toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  line-height: 0;
}

.faqs-container-v1__icon {
  display: block;
  inline-size: 2.1875rem; /* 35px */
  block-size: 2.1875rem;
}

.faqs-container-v1__icon--minus {
  display: none;
}

.faqs-container-v1__item--open .faqs-container-v1__icon--plus {
  display: none;
}

.faqs-container-v1__item--open .faqs-container-v1__icon--minus {
  display: block;
}

.faqs-container-v1__answer-panel {
  padding-inline: var(--space-lg);
}

.faqs-container-v1__answer-panel[hidden] {
  display: none;
}

.faqs-container-v1__answer {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--color-text);
}

.faqs-container-v1__answer p {
  margin: 0;
}

.faqs-container-v1__answer p + p {
  margin-block-start: var(--space-sm);
}

/* Before cta-v1 — extra bottom room for owl overlap */
@media (max-width: 767px) {
  .faqs-container-v1--before-cta {
    padding-block-end: 8rem; /* 128px — Figma gap above owl transition */
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .faqs-container-v1--before-cta {
    padding-block-end: 10.75rem; /* 172px — matches desktop owl clearance */
  }
}

/* ── Desktop (1024px+) ────────────────────────────────────── */
@media (min-width: 1024px) {
  .faqs-container-v1 {
    padding-block: 5.25rem 10.75rem; /* 84px top, 172px bottom — Figma 2177:7023 */
    padding-inline: 5rem; /* 80px */
  }

  .faqs-container-v1__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-xl); /* 32px — Figma row gap */
  }

  .faqs-container-v1 .tabs-v1__nav {
    flex: 0 0 30.4375rem; /* 487px — Figma tab column */
    max-inline-size: 30.4375rem;
  }

  .faqs-container-v1__panels {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .faqs-container-v1--before-cta {
    padding-block-end: 10.75rem; /* 172px — owl clearance before cta-v1 */
  }
}