/**
 * The tinted band spans whatever width it is given, while picture and text sit on the
 * content grid inside it: from the wide breakpoint on the picture takes five of the twelve
 * columns and the text the last six, with the sixth column empty between them. Below that
 * breakpoint both take the content width whole, the text under the picture.
 *
 * The distances are two fixed states rather than one interpolation: between the mobile and
 * the desktop frame some of them grow and others shrink, and they change at the width the
 * layout does.
 */

.contact-person {
    /* How far the picture reaches above the band. The room for it is a transparent top
       border, not padding and not a margin: padding is painted along with the band, and a
       margin would collapse into the preceding block's and vanish. In px because it answers
       to the height of the picture, which the reader's text size does not change — measured
       in rem the picture would climb out of the band as soon as text is enlarged. */
    --contact-person-overhang: 130px;

    display: grid;
    grid-template-columns: minmax(0, min(100% - 2 * var(--sav-page-margin), var(--sav-content-width)));
    justify-content: center;
    padding-block-end: 3.75rem;
    border-block-start: var(--contact-person-overhang) solid transparent;
    background-clip: padding-box;

    @media (min-width: 64rem) {
        --contact-person-overhang: 48px;
        --contact-person-column: calc(
            (min(100% - 2 * var(--sav-page-margin), var(--sav-content-width)) - 11 * var(--sav-grid-gutter)) / 12
        );

        grid-template-columns:
            minmax(0, calc(5 * var(--contact-person-column) + 4 * var(--sav-grid-gutter)))
            minmax(0, calc(6 * var(--contact-person-column) + 5 * var(--sav-grid-gutter)));
        column-gap: calc(var(--contact-person-column) + 2 * var(--sav-grid-gutter));
        padding-block-end: 6rem;
    }
}

/* No picture: nothing to reach above the band, and no column to leave free for it either —
   the text takes the content width rather than the five columns the picture would have had. */
.contact-person:not(:has(.contact-person__portrait)) {
    --contact-person-overhang: 0px;

    grid-template-columns: minmax(0, min(100% - 2 * var(--sav-page-margin), var(--sav-content-width)));
}

/* The design draws the picture in the same shape at both sizes and crops to it, since a
   portrait arrives in whatever proportion it was photographed. */
.contact-person__portrait {
    width: 100%;
    margin-block-start: calc(-1 * var(--contact-person-overhang));
    border-radius: var(--sav-radius);
    aspect-ratio: 109 / 81;
    object-fit: cover;
}

.contact-person__body {
    display: flex;

    /* The text is as wide as it needs to be rather than as wide as its column, so the button
       keeps its own width instead of stretching across. */
    flex-direction: column;
    align-items: flex-start;

    /* Below the wide breakpoint the picture uses the content width whole while the text is
       drawn a further step inside it. */
    padding-block-start: 2rem;
    padding-inline: 1.25rem;

    @media (min-width: 64rem) {
        padding-block-start: 4.375rem;
        padding-inline: 0;
    }
}

/* The title is a heading, which the document default would colour like a headline. */
.contact-person__title {
    color: inherit;
}

.contact-person__name {
    margin-block-start: 1.5rem;

    @media (min-width: 64rem) {
        margin-block-start: 2rem;
    }
}

.contact-person__position {
    margin-block-start: 0.5rem;

    /* The function steps up to the lead style on wide screens, which no single text style
       spans — on narrow ones it is the light cut of the running text. */
    @media (min-width: 64rem) {
        margin-block-start: 0.375rem;
        font-size: var(--sav-text-l-size);
        line-height: var(--sav-text-l-line);
        letter-spacing: normal;
    }
}

.contact-person__email {
    margin-block-start: 2rem;

    @media (min-width: 64rem) {
        margin-block-start: 1.5rem;
    }
}

.contact-person__address {
    display: none;
}

/* On paper the button is a shape without a target — worse, its label is white on a fill no
   printer lays down, so it would come out blank. The address takes its place. */
@media print {
    /* Named through its box, since the button's own `display` is set on a class of the same
       weight and would otherwise win on source order alone. */
    .contact-person .contact-person__email {
        display: none;
    }

    .contact-person__address {
        display: block;
        margin-block-start: 1rem;
    }
}