/* ============================================================
   BuddieSpace — Our Story Section
   BEM prefix: .bs-our-story
   Figma node: 32:709 | File: wpkxELWVlzeoRjthUL7RQ4
   ============================================================ */

.bs-our-story {
  background-color: #21254a;
  padding: clamp(48px, 6.94vw, 100px) clamp(24px, 6.67vw, 96px);
}

/* ── Inner container ── */
/* Figma: flex column, gap 56px between heading and content */
.bs-our-story__inner {
  max-width: 1248px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 3.89vw, 56px);
  width: 100%;
}

/* ── Section heading ── */
/* Figma: Inter Bold, 54px, white, center, line-height 1.3 */
.bs-our-story__heading {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 3.75vw, 54px);
  color: #ffffff;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0;
  width: 100%;
  text-transform: uppercase;
}

/* ── Content group (body + quote) ── */
/* Figma: flex column, gap 32px, centered */
.bs-our-story__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.22vw, 32px);
  width: 100%;
}

/* ── Paragraph group ── */
/* Figma: flex column, gap 8px */
.bs-our-story__para-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* ── Body paragraph ── */
/* Figma: Inter Regular, 22px, white, center, line-height 1.55 */
.bs-our-story__body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.53vw, 22px);
  color: #ffffff;
  text-align: center;
  line-height: 1.55;
  letter-spacing: 0;
  margin: 0;
  width: 100%;
}

/* ── Green pill quote ── */
/* Figma: bg #b0f288, border-radius 8px, padding 10px, width 733px, centered */
.bs-our-story__quote-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.bs-our-story__quote-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #b0f288;
  border-radius: 8px;
  padding: 10px clamp(16px, 1.39vw, 20px);
  width: clamp(280px, 50.9vw, 733px);
  max-width: 100%;
  box-sizing: border-box;
}

/* Figma: Inter Regular, 20px, navy #21254a, line-height 1.55 */
.bs-our-story__quote-text {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.39vw, 20px);
  color: #21254a;
  text-align: center;
  line-height: 1.55;
  letter-spacing: 0;
  margin: 0;
}

/* ── Responsive: Tablet (≤1023px) ── */
@media (max-width: 1023px) {
  .bs-our-story {
    padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 48px);
  }

  .bs-our-story__quote-pill {
    width: 100%;
  }

  .bs-our-story__quote-text {
    white-space: normal;
  }
}

/* ── Responsive: Mobile (≤599px) ── */
@media (max-width: 599px) {
  .bs-our-story {
    padding: 40px 24px;
  }

  .bs-our-story__heading {
    font-size: 32px;
  }

  .bs-our-story__body {
    font-size: 16px;
    line-height: 1.6;
  }

  .bs-our-story__quote-pill {
    width: 100%;
    padding: 12px 16px;
  }

  .bs-our-story__quote-text {
    font-size: 15px;
    line-height: 1.5;
  }
}