/**
 * GF-03 Fusszeile
 *
 * A value the design gives twice interpolates with the viewport:
 * `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. Floor and ceiling are in rem, so the whole curve moves up with the
 * reader's text size.
 *
 * The one breakpoint is left to what really changes state rather than size: the bands turn
 * from a stack into the twelve-column grid, the closing line puts its three parts in one row
 * instead of two, its navigation lies down, and the name of a location swaps the tracking of
 * one text style for the other's. Everything else is a measure and interpolates.
 */

/* The page margin holds the edges free and the bands inside are at most the content width,
   the same two rules `.is-layout-constrained` follows for a block — so the topics start where
   a block on the page above them starts. Above the footer 48px → 80px. */
.footer {
    /* Newsletter-Anmeldung stands before the bands rather than on the page, so it keeps the
       same distance to them that the footer keeps to what stands above it. */
    --footer-lead: clamp(3rem, 3rem + (100vw - 24.375rem) * 0.02392, 5rem);

    /* 92px → 192px between the last thing on the page and the footer. The design draws 160px
       to 284px depending on what closes the page, and 192px is where most of them land. A
       margin, so a closing block that brings more air of its own keeps it by collapsing. */
    margin-block-start: clamp(5.75rem, 5.75rem + (100vw - 24.375rem) * 0.074738, 12rem);
    padding-block: var(--footer-lead) 2rem;
    padding-inline: var(--sav-page-margin);
    background-color: var(--sav-color-weiss);
}

/* Newsletter-Anmeldung opens the footer with its own room, so the footer does not open twice. */
.footer:has(> .newsletter) {
    padding-block-start: 0;
}

.footer__main,
.footer__meta {
    max-width: min(100%, var(--sav-content-width));
    margin-inline: auto;
}

/* From the wide breakpoint on, the eight left columns of the grid carry the topics and the
   logo while the last four carry the locations. The logo sits at the foot of its column,
   which is why the second row takes the remaining height. minmax so a column may fall below
   the width of its longest word instead of pushing the page sideways. */
.footer__main {
    display: flex;
    flex-direction: column;
    gap: 3rem;

    @media (min-width: 64rem) {
        display: grid;
        grid-template-rows: auto 1fr;
        grid-template-columns: repeat(var(--sav-grid-columns), minmax(0, 1fr));
        gap: 3rem var(--sav-grid-gutter);
    }
}

/* Between the topics 16px → 28px. Towards mobile the design sets them further from the logo
   than the other bands are from each other; the extra distance sits on the topics so it goes
   away with them, and it is gone from the wide breakpoint on. */
.footer__topics {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: clamp(1rem, 1rem + (100vw - 24.375rem) * 0.00897, 1.75rem);
    margin: 0 0 5.1875rem;
    padding: 0;
    list-style: none;

    @media (min-width: 64rem) {
        grid-row: 1;
        grid-column: 1 / span 8;
        margin-block-end: 0;
    }
}

/* A topic wears the strong tone of its Themenbereich at rest and the light one beside it on
   hover, the two `[data-color]` pairs up. 18/24 at both widths, which no step of the scale
   holds; the height 48px → 56px.

   Unlike a button the arrow stands there at rest, because it is the only thing marking the
   coloured pill as a link, and it moves rather than appears on hover. */
.footer__topic {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 14.0625rem;
    max-width: 100%;
    padding-block: clamp(0.75rem, 0.75rem + (100vw - 24.375rem) * 0.003, 1rem);
    padding-inline: 1.75rem 2rem;
    border-radius: 6.25rem;
    background-color: var(--sav-topic-strong);
    color: var(--sav-color-dunkelblau);
    font-size: 1.125rem;
    line-height: 1.5rem;
    text-decoration: none;

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

    & .icon {
        flex: none;
        width: 1.25rem;
        height: 1.25rem;

        /* Motion is the enhancement, so it is asked for rather than taken away. */
        @media (prefers-reduced-motion: no-preference) {
            transition: translate 0.2s;
        }
    }

    &:hover {
        background-color: var(--sav-topic-light);
        color: var(--sav-color-dunkelblau-hover);

        & .icon {
            translate: 0.25rem 0;
        }
    }

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

/* 204px → 298px, the height follows the artwork. */
.footer__logo {
    display: block;
    width: clamp(12.75rem, 12.75rem + (100vw - 24.375rem) * 0.07026, 18.625rem);
    height: auto;

    @media (min-width: 64rem) {
        grid-row: 2;
        grid-column: 1 / span 8;
        align-self: end;
    }
}

/* Between two locations 48px → 64px. */
.footer__locations {
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 3rem + (100vw - 24.375rem) * 0.01196, 4rem);

    @media (min-width: 64rem) {
        grid-row: 1 / span 2;
        grid-column: 9 / span 4;
    }
}

/* 22px at both widths, which no single step of the scale holds: the design pairs the mobile
   headline S with the desktop text M, whose sizes happen to be the same, so the size stands
   here, the line-height interpolates 30px → 32px and only the tracking switches from the one
   step to the other. The colour is stated because a heading is Blau by default and the design
   draws this one like the text below it. */
.footer__location-name {
    color: var(--sav-color-dunkelblau);
    font-size: 1.375rem;
    line-height: clamp(1.875rem, 1.875rem + (100vw - 24.375rem) * 0.001495, 2rem);
    letter-spacing: var(--sav-text-headline-s-tracking);

    @media (min-width: 64rem) {
        letter-spacing: var(--sav-text-m-tracking);
    }
}

/* 18/28 → 20/32 in the Light cut: the design takes the size from one step of the scale and
   the line-height from another, so neither text style fits and the pair interpolates here. */
.footer__address {
    font-weight: var(--sav-font-weight-light);
    font-size: clamp(1.125rem, 1.125rem + (100vw - 24.375rem) * 0.001495, 1.25rem);
    font-style: normal;
    line-height: clamp(1.75rem, 1.75rem + (100vw - 24.375rem) * 0.003, 2rem);
    letter-spacing: normal;
}

/* Every link of the footer, the coloured topics aside: dark blue rather than blue, and
   underlined only once it is pointed at. */
.footer__link {
    color: var(--sav-color-dunkelblau);
    text-decoration: none;

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

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

/* Towards mobile the navigation stands above copyright and social icons, from the wide
   breakpoint on the three sit in one row with the navigation between them. The copyright is
   not focusable, so its place in the markup ties the tab order to neither order. Between the
   parts 24px → 32px. */
.footer__meta {
    display: grid;
    grid-template-areas:
        'navigation navigation'
        'copyright social';
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.00598, 2rem);
    margin-block-start: 7.75rem;

    @media (min-width: 64rem) {
        grid-template-areas: 'copyright navigation social';
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
}

.footer__copyright {
    grid-area: copyright;
}

.footer__navigation {
    grid-area: navigation;
}

.footer__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;

    @media (min-width: 64rem) {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem 2.875rem;
    }
}

/* Between the icons 20px → 32px. */
.footer__social {
    display: flex;
    grid-area: social;
    gap: clamp(1.25rem, 1.25rem + (100vw - 24.375rem) * 0.00897, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-color: var(--sav-color-hellgrau);
    color: var(--sav-color-dunkelblau);
    text-decoration: none;

    & .icon {
        width: 1.625rem;
        height: 1.625rem;
    }

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

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