/**
 * KO-08 Klipp und klar
 *
 * A tinted box that lifts the key messages out of the running text: the title
 * beside them on desktop, above them on mobile. The tone comes from the block's
 * background colour, so only the band, the shape, the spacing and the typography
 * live here. Below the messages the design leaves more room than above the title,
 * on both widths.
 *
 * What measures text is in rem and grows with the reader's text size: the room
 * above and below it, the gap to the title, the distance to the next block and
 * the column the title stands in. What stays in px is the space left and right
 * of the text inside the box — grown, it would take from the line the very width
 * the reader enlarged the text for — and the corner radius, which belongs to the
 * shape.
 *
 * A value the design gives twice interpolates with the viewport in between:
 * `clamp(<390px value>, <390px value> + (100vw - 24.375rem) * <rise per px>,
 * <1728px value>)` — 24.375rem is the 390px of the Figma mobile frame, so the
 * added term is zero there and the floor holds exactly; the factor is the
 * difference between the two frames divided by the 1338px between them, rounded
 * up so the ceiling is reached just before 1728px and holds exactly there too.
 * Both design widths therefore land on the drawn value to the pixel, which keeps
 * the rounded corner off a half pixel — a screenshot renders it differently on
 * either side of one. Floor and ceiling are in rem, so the whole curve moves up
 * with the reader's text size, while the growth keeps its share of the viewport.
 */

.summary {
    display: grid;
    /* minmax so the column may fall below the width of its longest word instead
       of pushing the box past the screen once the reader enlarges the text. */
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem; /* 32px */
    /* Above the text 32px → 60px, below it 76px → 92px; 20px to the sides. */
    padding: clamp(2rem, 2rem + (100vw - 24.375rem) * 0.02093, 3.75rem) 20px
        clamp(4.75rem, 4.75rem + (100vw - 24.375rem) * 0.01196, 5.75rem);
    border-radius: var(--sav-radius);
    color: var(--sav-color-dunkelblau);

    /* Set apart from what follows, like the quote is: 60px → 124px. The margin a
       heading brings along collapses into this one, so the distance is the same
       whatever comes next. */
    margin-block-end: clamp(3.75rem, 3.75rem + (100vw - 24.375rem) * 0.04784, 7.75rem);

    /* The one real breakpoint: side by side, the title takes a column of its own
       (255px), the messages stop one column of the content grid short of the
       right edge, and that free column plus its gutter is what widens the
       padding on that side to 115px against 60px on the left. The three belong
       to the same state, so they switch together rather than interpolate.

       The breakpoint itself is in rem, so a reader with a larger text setting
       reaches the two columns later, on a viewport with room to spare for them —
       which is why the widths here may scale with the text without crowding it. */
    @media (min-width: 64rem) {
        grid-template-columns: 15.9375rem minmax(0, 1fr);
        column-gap: var(--sav-grid-gutter);
        padding-inline: 3.75rem 7.1875rem;
    }
}

.summary__title {
    font-size: var(--sav-text-headline-s-size);
    line-height: var(--sav-text-headline-s-line);
    letter-spacing: var(--sav-text-headline-s-tracking);
    text-wrap: balance;
}

.summary__messages {
    /* The messages open and close with the box, so the rhythm the list brings
       along from the running text has nothing to separate here. */
    & > :first-child {
        margin-block-start: 0;
    }

    & > :last-child {
        margin-block-end: 0;
    }
}