/* ==================== ABOUT PAGE ==================== */

.about-page {
    max-width: var(--gj-max-width);
    margin: 0 auto;
    padding: var(--gj-space-3xl) var(--gj-page-px);
}


/* ==================== SECTIONS ==================== */

.about-section {
    margin-bottom: var(--gj-space-3xl);
}

.about-heading {
    font-size: var(--gj-text-3xl);
    font-weight: 800;
    color: var(--gj-text-primary);
    margin-bottom: var(--gj-space-lg);
}

.about-subheading {
    font-size: var(--gj-text-xl);
    font-weight: 700;
    color: var(--gj-text-primary);
    margin-bottom: var(--gj-space-md);
}

.about-content p {
    font-size: var(--gj-text-base);
    color: var(--gj-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--gj-space-md);
}

.about-content p:last-child {
    margin-bottom: 0;
}


/* ==================== FOUNDER CARD ==================== */

.about-founder-card {
    background: var(--gj-white);
    border: 1px solid var(--gj-border);
    border-radius: var(--gj-radius-xl);
    padding: var(--gj-space-2xl);
    /* ensure floats are contained */
    position: relative;
}

.about-founder-card::after {
    content: "";
    display: block;
    clear: both;
}

.about-founder-photo {
    margin-bottom: var(--gj-space-xl);
}

.about-founder-photo img {
    display: block;
    width: 180px;
    max-width: 45%;
    border-radius: var(--gj-radius-lg);
    /* Let text wrap around the image on larger screens */
    float: none;
}

.about-founder-content {
    max-width: 48rem;
}

.about-founder-info {
    margin-bottom: var(--gj-space-lg);
}

.about-founder-name {
    font-size: var(--gj-text-xl);
    font-weight: 700;
    color: var(--gj-text-primary);
}

.about-founder-role {
    font-size: var(--gj-text-sm);
    color: var(--gj-text-muted);
    margin-top: var(--gj-space-2xs);
}

.about-founder-bio p {
    font-size: var(--gj-text-base);
    color: var(--gj-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--gj-space-md);
}

.about-founder-bio p:last-child {
    margin-bottom: 0;
}


/* ==================== RESPONSIVE ==================== */

@media (min-width: 640px) {
    .about-heading {
        font-size: var(--gj-text-3xl);
    }

    .about-founder-photo {
        margin-bottom: 0;
    }

    .about-founder-photo img {
        float: left;
        margin-right: var(--gj-space-2xl);
        margin-bottom: var(--gj-space-xl);
    }
}