/* Two roots, one rhythm: the article as a visitor reads it, and the canvas the editor lays
   the same blocks out in, where the block wrapper carries the component's own class.
   `post-type-post` narrows the canvas half to articles — the file reaches every canvas,
   since any block may be inserted anywhere. */
.article,
.post-type-post .is-root-container {
    /* 60px → 92px */
    --article-gap: clamp(3.75rem, 3.75rem + (100vw - 24.375rem) * 0.02392, 5.75rem);

    /* 60px → 124px, the step the Executive Summary already keeps to the block below it */
    --article-gap-wide: clamp(3.75rem, 3.75rem + (100vw - 24.375rem) * 0.04784, 7.75rem);

    /* 92px → 224px */
    --article-gap-section: clamp(5.75rem, 5.75rem + (100vw - 24.375rem) * 0.09865, 14rem);

    /* 60px at both drawn widths, where the hero ends on its byline rather than on a picture. */
    & > .hero {
        margin-block-end: 3.75rem;
    }

    /* 32px → 92px below the hero's picture. The narrow frame closes up tighter than the
       block underneath would leave on its own, so that block gives its own distance up —
       all but the two sections that close the article, which keep their far larger one. */
    & > .hero:has(.hero__figure) {
        margin-block-end: clamp(2rem, 2rem + (100vw - 24.375rem) * 0.04484, 5.75rem);

        & + :not(.contact-person, .article-teaser) {
            margin-block-start: 0;
        }
    }

    /* Running text, headings and charts carry their own distance; these carry none. */
    & > :is(.image, .embed, .download-list, .button) {
        margin-block: var(--article-gap);
    }

    & > :is(.quote, .image-slider, .contents) {
        margin-block: var(--article-gap-wide);
    }

    /* 192px, and the one distance that does not grow with the viewport: the design draws
       192 on the wide frame and 198 on the narrow one. It is measured to the top of the
       picture, which reaches above the band. */
    & > .contact-person {
        margin-block-start: 12rem;
    }

    & > .article-teaser {
        margin-block-start: var(--article-gap-section);
    }
}

/* The two actions sit at neither end of the flow: the design draws them beside the top of
   the running text on a wide screen and above the contact person on a narrow one, while the
   markup places them last, where they belong in the reading order. Anchor positioning is
   what lifts them out — a browser without it leaves the row where it stands, at the foot of
   the article, which still works. */
@supports (anchor-name: --probe) {
    /* Every block that stands in the reading column — the wider bands are named by the
       alignment they carry, the rest is the page's own furniture. */
    .article > :not(.alignwide, .alignfull, .article__back, .article__share, .article__top, .article__source) {
        anchor-name: --article-column;
    }

    /* All but the first give the name up again: the row belongs beside the beginning of the
       running text, and a name held by several elements would resolve to the last of them. */
    .article
        > :not(.alignwide, .alignfull, .article__back, .article__share, .article__top, .article__source)
        ~ :not(.alignwide, .alignfull, .article__back, .article__share, .article__top, .article__source) {
        anchor-name: none;
    }

    .article > .contact-person {
        anchor-name: --article-contact;
    }

    .article__share {
        position: absolute;

        /* Centred, 92px above the picture of the contact person. */
        position-anchor: --article-contact;
        bottom: calc(anchor(top) + 5.75rem);
        justify-self: anchor-center;
    }

    @media (min-width: 64rem) {
        .article__share {
            /* Beside the running text, at its first block and at the right edge of the wide
               band — never beside a block that fills that band, which it would sit on top of. */
            position-anchor: --article-column;
            top: anchor(top);
            right: max(var(--sav-page-margin), calc(50% - var(--sav-content-width) / 2));
            bottom: auto;
            justify-self: auto;
        }
    }
}

/* The page's own edges, which the canvas has no counterpart for. */
.article {
    /* What the two actions are lifted out against. */
    position: relative;

    /* 16px → 46px */
    padding-block-start: clamp(1rem, 1rem + (100vw - 24.375rem) * 0.02242, 2.875rem);

    /* Padding, not a margin: a margin would collapse out of the article and the closing
       section would set the distance to the footer itself. */
    padding-block-end: var(--article-gap-section);
}

/* 60px */
.article__back {
    margin-block-end: 3.75rem;
}

/* On a page the opening block keeps its own distance from the logo; in an article the row with
   the way back stands between the two and sets it, so the block adds none of its own. */
.article__back + .hero {
    padding-block-start: 0;
}

/* Both buttons wear the same pale surface the design gives them; the pill takes its width
   from the label, the print button is the circle its 24px glyph sits in. */
.article__share {
    display: flex;
    align-items: center;

    /* 16px between the two, and centred where they share a row. */
    gap: 1rem;
    flex-direction: row-reverse;
    justify-content: center;
    margin-block-start: var(--article-gap);

    @media (min-width: 64rem) {
        flex-direction: column;

        /* Both start at the same left edge, so the round button sits under the pill's first
           letter rather than under its last. */
        align-items: flex-start;
        margin-block-start: 0;
    }

    &[hidden] {
        display: none;
    }
}

.article__share-link,
.article__share-print {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background-color: var(--sav-color-hellgrau);
    color: var(--sav-color-dunkelblau);
    cursor: pointer;

    @media (prefers-reduced-motion: no-preference) {
        transition:
            background-color 0.2s,
            color 0.2s;
    }

    @media (hover: hover) and (pointer: fine) {
        &:hover {
            background-color: var(--sav-color-dunkelblau);
            color: var(--sav-color-weiss);
        }
    }

    &:focus-visible {
        background-color: var(--sav-color-dunkelblau);
        color: var(--sav-color-weiss);
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }
}

.article__share-link {
    /* 147 × 46 in the design, which the label fills out; the radius is half the height. */
    min-inline-size: 9.1875rem;
    block-size: 2.875rem;
    padding-inline: 1.25rem;
    border-radius: 1.4375rem;
}

.article__share-print {
    inline-size: 2.875rem;
    block-size: 2.875rem;
    flex: none;
    padding: 0;
    border-radius: 50%;

    & .icon {
        inline-size: 1.5rem;
        block-size: 1.5rem;
    }
}

.article__back-link {
    display: inline-flex;
    align-items: center;

    /* 10px, the distance the design leaves between the chevron's box and the word. */
    gap: 0.625rem;
    color: var(--sav-color-dunkelblau);
    text-decoration: none;

    & .icon {
        inline-size: 1rem;
        block-size: 1rem;
    }

    &:hover {
        color: var(--sav-color-dunkelblau-hover);
    }

    /* The design draws no focus state, and a link that only changes colour leaves the
       keyboard without one. */
    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }
}

/* Drawn on the wide frame alone, where the reader has scrolled furthest to get here. */
.article__top {
    display: none;

    @media (min-width: 64rem) {
        display: block;
        margin-block-start: var(--article-gap);
        text-align: end;
    }
}

.article__top-link {
    display: inline-flex;
    align-items: center;

    /* 16px, the distance the design leaves between the word and the arrow's box. */
    gap: 1rem;
    color: var(--sav-color-dunkelblau);
    text-decoration: none;

    & .icon {
        inline-size: 0.9375rem;
        block-size: 0.9375rem;

        /* The one arrow the theme draws, turned upwards — as the button turns it downwards. */
        rotate: -90deg;
    }

    &:hover {
        color: var(--sav-color-dunkelblau-hover);
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }
}

/* The address of the article, which only a printout needs — on screen it is the address bar. */
.article__source {
    display: none;
}

/* What a reader gets on paper: the article and nothing around it, in one column across the
   page. Everything that only works under a pointer — the way back, the two actions, the track
   of a slider, the teasers that follow — is left out, since none of it can be followed on
   paper. The palette stays as it is drawn: whether to spend colour is the printer dialogue's
   question, not this stylesheet's. Scoped to a page carrying an article, so no other printout
   changes with it. */
@media print {
    @page {
        margin: 1.5cm;
    }

    body:has(.article)
        :is(.header, .footer, .skip-link, .article__back, .article__share, .article__top, .article-teaser) {
        display: none;
    }

    .article {
        /* The page's own margin is the only one on paper. */
        padding: 0;

        /* One column across the page: the reading column and the bands around it are a screen's
           answer to a viewport wider than the text wants to be. Paper is not. */
        &,
        & > * {
            max-width: none;
            margin-inline: 0;
        }

        /* The picture reaches above the band by hanging on a transparent border, which a page
           break would tear off it, and at the band's size it takes a sheet of its own. */
        & > .contact-person {
            padding-block-end: 0;
            border-block-start: 0;

            & .contact-person__portrait {
                inline-size: auto;
                max-block-size: 4cm;
                margin-block-start: 0;
            }

            & .contact-person__body {
                padding-inline: 0;
            }
        }
    }

    /* The track cannot be scrolled on paper, so its pictures stand under one another. */
    .slider__viewport {
        overflow: visible;
    }

    .slider__track {
        display: block;
        padding-inline: 0;
    }

    .slider__entry + .slider__entry {
        margin-block-start: 1rem;
    }

    .slider__controls {
        display: none;
    }

    /* A picture inside the text takes a part of a page, not a whole one — on screen it grows
       with the column, which on paper would push the text that belongs to it onto the next
       sheet. The hero's picture opens the article and keeps the full width. */
    .article :is(.image, .slider__entry, .embed) img {
        max-block-size: 9cm;
        inline-size: auto;
    }

    /* A link is worth nothing on paper unless it says where it goes. Outward ones only: an
       anchor within the page would name the page it is already on. */
    .article a[href^='http']::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        word-break: break-all;
    }

    .article__source {
        display: block;
        margin-block-start: 1.5rem;
        font-size: 0.8em;
        word-break: break-all;
    }

    /* What a page break must not tear apart, and what it must not leave alone at the foot. */
    :is(figure, .image, .quote, .summary, .contact-person, .slider__entry, .datawrapper__chart) {
        break-inside: avoid;
    }

    :is(h1, h2, h3, h4, h5, h6, .heading) {
        break-after: avoid;
    }

    p {
        orphans: 3;
        widows: 3;
    }
}