/*
 * About page opening block (sections/about-intro.php). Carries the page's h1.
 *
 * The page used to be one column of prose, and a single column capped at a
 * readable line length left the whole right half of a wide monitor empty
 * (client report with a screenshot, 02.09.2026). The cap stays - a
 * 150-character line is unreadable - so the width is filled by layout
 * instead: copy on the left, a photograph on the right.
 */

.about-intro {
    padding: 3vw 0;
}

.about-intro__grid {
    --bs-gutter-x: 3.33vw;
    --bs-gutter-y: 2.5vw;
}

.about-intro__title {
    margin: 0 0 1.04vw;
}

.about-intro__lead {
    font-family: var(--font-heading);
    font-size: 1.46vw;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text);
    margin: 0 0 1.46vw;
}

.about-intro__paragraph {
    max-width: 44em;
    color: var(--color-text);
    margin: 0 0 1.04vw;
}

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

.about-intro__photo {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-panel);
}

@media only screen and (max-width: 767.98px) {
    .about-intro {
        padding: 6vw 0;
    }

    .about-intro__grid {
        --bs-gutter-x: 4.27vw;
        --bs-gutter-y: 6.4vw;
    }

    .about-intro__title {
        font-size: 6.93vw;
        margin: 0 0 4.27vw;
    }

    .about-intro__lead {
        font-size: 5.33vw;
        margin: 0 0 5.33vw;
    }

    .about-intro__paragraph {
        max-width: none;
        margin: 0 0 4vw;
    }
}