/* ============================================================
   PricingFaq — Component Styles
   Accordion item styles live in src/components/Accordion/Accordion.css.
   Design tokens are defined in src/tokens.css.
   ============================================================ */

/* ---- Outer section ---- */
.pricing-faq {
  background-color: var(--background);
  box-sizing:       border-box;
  display:          flex;
  flex-direction:   column;
  font-family:      var(--font-family-default);
  gap:            4rem;       /* 64px */
  padding:        6rem 0;     /* 96px */
  width:          100%;
}


/* ============================================================
   Title group
   ============================================================ */

.pricing-faq__title-group {
  margin-bottom: 4rem;
  width:          100%;
}

.pricing-faq__title {
  color:       var(--foreground);
  font-size:   2.25rem;       /* 36px */
  font-weight: var(--font-weight-bold);
  line-height: 2.5rem;        /* 40px */
  margin:      0;
}


/* ============================================================
   Body: two-column layout (accordions + illustration)
   ============================================================ */

.pricing-faq__body {
  align-items: flex-start;
  display:     flex;
  gap:         2rem;          /* 32px */
  width:       100%;
}

.pricing-faq__accordions {
  display:        flex;
  flex:           1 0 0;
  flex-direction: column;
  gap:            0.625rem;   /* 10px */
  min-width:      0;
}


/* ============================================================
   Illustration panel
   ============================================================ */

.faq-illustration {
  flex:      1 0 0;
  min-width: 0;
}

.faq-illustration picture,
.faq-illustration__img {
  display: block;
  height:  auto;
  width:   100%;
}


/* ============================================================
   Mobile — Webflow landscape breakpoint (≤767px)
   ============================================================ */

@media (max-width: 767px) {
  .pricing-faq {
    gap:     2.25rem; /* 36px */
    padding: 4rem 0;
  }

  .pricing-faq__title {
    font-size:   1.875rem;  /* 30px */
    line-height: 2.25rem;   /* 36px */
  }

  /* Remove the decorative rule below title on mobile */
  .pricing-faq__title-group {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* Stack illustration above accordions instead of side-by-side */
  .pricing-faq__body {
    flex-direction: column;
  }

  /* Move illustration before accordions via order (DOM: accordions first) */
  .faq-illustration {
    order: -1;
    flex:  0 0 auto;
    width: 100%;
  }
}

/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  width:     1024px;
  max-width: calc(100% - 160px); /* 80px × 2 — desktop */
  margin:    0 auto;
}

/* Tablet + landscape mobile (≤991px): 60px × 2 = 120px */
@media (max-width: 991px) {
  .container {
    max-width: calc(100% - 120px);
  }
}

/* Portrait mobile (≤479px): 24px × 2 = 48px */
@media (max-width: 479px) {
  .container {
    max-width: calc(100% - 48px);
  }
}