/*
 * InspireSphere Theme — About Hero Section
 *
 * Two-column flex row: "Our Story" heading (left) + intro paragraph (right).
 * A 1px light-grey divider sits at the very bottom of the inner content area.
 *
 * Desktop: flex row, gap 24px, padding-block 24px.
 * Mobile:  flex column, gap 32px, padding-bottom 32px.
 */

/* ── Section wrapper ─────────────────────────────────────────────── */
.section--about-hero {
  padding-top: 56px;
}

/* ── Two-column inner row ────────────────────────────────────────── */
.about-hero__inner {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 24px;
  position: relative;
}

/* Bottom divider line */
.about-hero__inner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-light-grey);
}

/* ── Heading — left column ───────────────────────────────────────── */
.about-hero__heading {
  font-size: var(--font-size-h1);
  /* 40px */
  font-weight: var(--font-weight-bold);
  /* 700 */
  color: var(--color-dark-navy);
  line-height: 1;
  flex: 0 0 436px;
  flex-shrink: 0;
}

.about-hero__heading-accent {
  color: var(--color-blue);
}

/* ── Description — right column ─────────────────────────────────── */
.about-hero__description {
  font-size: var(--font-size-body-lg);
  /* 20px */
  color: var(--color-dark-navy);
  font-weight: var(--font-weight-regular);
  max-width: 740px;
  line-height: 1.6;
}

/* ── Mobile (≤ 768px) ────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .about-hero__heading {
    flex: 0 0 auto;
    /* 24px */
  }

}

@media (max-width: 768px) {
  .section--about-hero {
    padding-top: 33px;
  }

  .about-hero__inner {
    flex-direction: column;
    gap: 32px;
    padding-block: 0 32px;
  }

  .about-hero__heading {
    font-size: var(--font-size-h2-mobile);
    flex: 0 0 auto;
    /* 24px */
  }

  .about-hero__description {
    font-size: var(--font-size-body-md);
    /* 16px */
    max-width: none;
  }
}