/* Every step between the two reference widths is interpolated the way the type scale is
   (Utopia method): the mobile value holds at 390px, the desktop value at 1728px. */
.focus-topic {
    /* Inner spacing 32 → 45 px, the room over the title 24 → 40 px, under it 12 → 24 px */
    --focus-topic-padding-inline: clamp(2rem, 2rem + (100vw - 24.375rem) * 0.009716, 2.8125rem);
    --focus-topic-gap-title: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.011958, 2.5rem);
    --focus-topic-gap-text: clamp(0.75rem, 0.75rem + (100vw - 24.375rem) * 0.0089686, 1.5rem);
    --focus-topic-gap-button: 1.5rem;

    /* The button is not drawn where a pointer can hover, so nothing holds room over it there. */
    @media (hover: hover) and (pointer: fine) {
        --focus-topic-gap-button: 0rem;
    }

    position: relative;
    display: flex;
    flex-direction: column;

    /* The room over the title, which the picture takes back when there is one — a topic
       whose picture the editorial team has not chosen yet would start flush at the edge. */
    padding-block-start: var(--focus-topic-gap-title);
    padding-block-end: 3rem;
    padding-inline: var(--focus-topic-padding-inline);
    border-radius: var(--sav-radius);
    background-color: var(--sav-color-hellgrau);
    color: var(--sav-color-dunkelblau);

    /* `[hidden]` is a user agent rule and loses to the author `display` above. */
    &[hidden] {
        display: none;
    }

    /* The ring belongs on the topic, since the link covers it whole. */
    &:has(.focus-topic__link:focus-visible) {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }
}

/* The picture reaches the edges the padding keeps the text from, and clips the zoom below. */
.focus-topic__media {
    margin-block: calc(-1 * var(--focus-topic-gap-title)) var(--focus-topic-gap-title);
    margin-inline: calc(-1 * var(--focus-topic-padding-inline));
    border-start-start-radius: var(--sav-radius);
    border-start-end-radius: var(--sav-radius);
    overflow: hidden;
}

/* The design draws the picture in a shape of its own and crops to it, since an upload arrives in
   whatever proportion it was photographed — and two topics beside each other start their text at
   the same height only if both pictures are drawn equally high. */
.focus-topic__image {
    inline-size: 100%;
    aspect-ratio: 15 / 8;
    object-fit: cover;

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

.focus-topic__body {
    display: flex;
    flex-direction: column;

    /* What the picture leaves, so the button can be pushed to the lower edge of the topic. */
    flex-grow: 1;
}

.focus-topic__title,
.focus-topic__text {
    margin: 0;
    color: var(--sav-color-dunkelblau);

    /* The button's `auto` margin eats what is left over, so the smallest gap over it has to come
       from whatever stands before it. */
    &:has(+ .focus-topic__button) {
        margin-block-end: var(--focus-topic-gap-button);
    }
}

.focus-topic__text {
    margin-block-start: var(--focus-topic-gap-text);
}

.focus-topic__link {
    color: inherit;
    text-decoration: none;

    /* Stretched over the topic, so the whole card leads to it with one link in the tab order.
       Its text stops being selectable, which is the price. */
    &::after {
        position: absolute;
        inset: 0;
        content: '';
    }

    &:focus-visible {
        outline: none;
    }
}

/* Two classes deep, since the button brings its own `display` from a stylesheet that is asked
   for after this one and would otherwise keep it on screen. */
.focus-topic .focus-topic__button {
    /* As wide as its label rather than as wide as the topic, and at the lower edge however long
       the text above runs — so the buttons of two topics side by side stand at one height. */
    align-self: flex-start;
    margin-block-start: auto;

    /* The button names the way on for a finger. Where a pointer can hover, the mark that
       follows it does that instead, and the design draws the topic without a button. */
    @media (hover: hover) and (pointer: fine) {
        display: none;
    }
}

/* The stretched link takes the pointer before anything under it sees it, so the topic passes
   its own hover on — to the picture, which the design draws enlarged, and to the button, which
   is no button and has no state of its own. */
.focus-topic:is(:hover, :has(.focus-topic__link:focus-visible)) {
    & .focus-topic__image {
        scale: 1.05;
    }

    & .focus-topic__button {
        background-color: var(--sav-color-dunkelblau-hover);
    }
}