/**
 * css/pages/about.css
 * ====================
 * About page layout. Loaded only by pages/about.html.
 */

.about-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;   /* 40px -- tighter than --space-xl (64px) for image+text pairing */
    align-items: start;
    padding: var(--space-xl, 4rem) 0;
}

@media (max-width: 768px) {
    .about-content-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg, 2.5rem);
    }
}

.about-content-text {
    padding: var(--space-lg, 2.5rem);
}

.about-heading {
    font-family: var(--theme-font-display);
    color: var(--theme-text);
    margin-bottom: var(--space-md, 1.5rem);
    font-size: 2.5rem;
    line-height: 1.2;
}

.about-lead {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--theme-text-muted);
    margin-bottom: var(--space-md, 1.5rem);
}

.about-body {
    font-size: 1.0625rem;
    line-height: 1.9;
    color: var(--theme-text-muted);
    margin-bottom: var(--space-md, 1.5rem);
}

.about-image {
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    border: 3px solid var(--theme-primary);
}

.about-image img {
    width: 100%;
    display: block;
    object-fit: cover;
}