/*
 * Page header. Text on the left, a photo on the right from 1100px (below
 * the text before that). The photo is rounded all round and sits inside
 * the band, never taller than the screen.
 */

.page-header {
    padding-block: var(--space-xl);
    background: var(--color-stone);

    @media (min-width: 1100px) { padding-block: var(--space-2xl); }
}

.page-header__inner {
    display: grid;
    gap: var(--space-xl);
}

.page-header.has-media .page-header__inner {
    @media (min-width: 1100px) {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: var(--space-2xl);
        align-items: center;
    }
}

.page-header__text {
    display: grid;
    gap: var(--space-md);
    align-content: center;
    max-width: 860px;
}

.page-header__eyebrow { margin: 0; }

.page-header__title {
    margin: 0;
    font: var(--text-48gm);
    color: var(--color-graphite);
    text-wrap: balance;

    @media (min-width: 1100px) { font: var(--text-64gm); letter-spacing: -0.01em; }

    & em {
        font-style: italic;
        font-weight: 500;
        color: var(--color-cedar);
    }
}

.page-header__intro {
    max-width: 640px;

    & p {
        margin: 0;
        font: var(--text-20ar);
        color: var(--color-charcoal);
        text-wrap: pretty;
    }

    & p + p { margin-block-start: var(--space-md); }

    & a {
        color: var(--color-cedar);
        text-decoration-thickness: 1.5px;
        text-underline-offset: 3px;
    }
}

.page-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.page-header .contact-buttons { margin-block-start: var(--space-sm); }

.page-header__media { margin: 0; }

/* A before-and-after slider in the photo's place – the same height as a
   photo, and against the right-hand edge like one. */
.page-header__media--block .before-after {
    --max-height: clamp(420px, 64vh, 600px);

    @media (min-width: 1100px) {
        & .before-after__frame { margin-inline-end: 0; }
    }
}

figure.page-header__media {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-putty);

    /* Phones and tablets: the photo's own shape, up to most of the screen. */
    & img {
        width: 100%;
        max-height: 70vh;
        object-fit: cover;
    }

    @media (min-width: 1100px) {
        & img {
            height: clamp(420px, 64vh, 600px);
            max-height: none;
        }
    }

    & a {
        display: block;
        cursor: zoom-in;
    }
}

/* Breadcrumbs – Yoast's markup: links and the current page in spans. */
.breadcrumbs {
    font: var(--text-14ar);
    color: var(--color-slate);

    & a {
        color: var(--color-slate);
        text-decoration: underline;
        text-decoration-color: var(--color-putty);
        text-underline-offset: 3px;

        &:hover { color: var(--color-cedar); }
    }

    & .breadcrumb_last { color: var(--color-charcoal); }
}