/*
 * InspireSphere Theme — Who We Are Section
 *
 * Layout: centered single column, max-width 941 px inside .container.
 * Vertical spacing comes from the .section utility class (120 px desktop / 64 px mobile).
 *
 *   1. .who-we-are__badge  — white pill with bordered box, green icon, h2, decorative line
 *   2. .who-we-are__description — 20px centered body text
 *   3. .btn--outline — "Learn More About Us"
 */

/* ── Section wrapper ─────────────────────────────────────────────── */
.section--who-we-are {
    background: var(--color-bg);
    padding-block: 0;
    /* override .section utility — site-main gap handles spacing */
}

/* ── Inner column (centered, capped at 941 px) ───────────────────── */
/* Vertical padding is handled by the outer .section utility class.   */
.who-we-are__inner {
    max-width: 941px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    text-align: center;
}

/* ── Section badge ───────────────────────────────────────────────── */
/* position: relative is required so .who-we-are__decor can escape    */
/* the box bounds with a negative absolute offset.                    */
.who-we-are__badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-white);
    border: 1px solid var(--color-light-grey);
    border-radius: 8px;
    padding: 12px 24px 12px 12px;
}

/* Green square icon holder */
.who-we-are__badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-green);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.who-we-are__badge-icon img {
    width: 24px;
    height: 24px;
    display: block;
}

/* h2 — section title */
.who-we-are__heading {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue);
    line-height: 1;
    white-space: nowrap;
}

/* Decorative abstract line — bleeds outside the badge box */
.who-we-are__decor {
    position: absolute;
    top: -31px;
    left: -25px;
    width: 39px;
    height: 43px;
    display: block;
    pointer-events: none;
}

/* ── Description ─────────────────────────────────────────────────── */
.who-we-are__description {
    font-size: var(--font-size-body-lg);
    color: var(--color-black);
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
}


/* ── Mobile (≤ 768px) ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .who-we-are__inner {
        gap: 32px;
    }

    /* 24px Bold on mobile per Figma (matches --font-size-h3) */
    .who-we-are__heading {
        font-size: var(--font-size-h3);
        font-weight: var(--font-weight-bold);
        white-space: normal;
    }

    .who-we-are__description {
        /* font-size: var(--font-size-body-md); */
    }
}