/* =============================================================================
   Module: footer  (modules/footer.php)
   -----------------------------------------------------------------------------
   The footer is solid --color-primary when the page loads and fades into a blue
   gradient the first time it scrolls into view, then keeps it.

   A gradient cannot be transitioned, so it lives on its own ::before layer and
   only that layer's opacity animates. assets/js/modules/footer.js adds
   .is-revealed once. Without JavaScript the footer simply stays solid blue,
   which is a legitimate state, not a broken one.

   Layout: brand + one column per sitemap group. One column on phones, two from
   480px, three from 768px, and the designed single row from 1024px.
   ============================================================================= */

.site-footer {
    position: relative;
    /* Without a stacking context of its own the -1 layer below would slip
       behind the footer's own background colour. */
    isolation: isolate;
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    padding-block: var(--space-xl) var(--space-3xl);
    margin-block-start: var(--space-2xl);
}

.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(
        to bottom,
        rgba(var(--rgb-blue-light), 0) 10%,
        rgba(var(--rgb-blue-light), 0.62) 100%
    );
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.site-footer.is-revealed::before {
    opacity: 1;
}

/* --- Grid --------------------------------------------------------------------
   The rule sits on the inner element, not on the .container, so it starts and
   ends exactly where the content does instead of running into the gutters.
   -------------------------------------------------------------------------- */
.site-footer__inner {
    display: grid;
    gap: var(--space-xl) var(--space-lg);
    padding-block-start: var(--space-2xl);
    border-block-start: var(--border-width) solid var(--color-line-invert);
}

/* --- Brand ----------------------------------------------------------------- */
.site-footer__logo {
    display: inline-block;
    text-decoration: none;
}

.site-footer__logo img {
    width: 110px;
    height: auto;
}

/* --- Columns --------------------------------------------------------------- */
.site-footer__heading {
    margin-block-end: var(--space-lg);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

/* The link's own padding is the row rhythm: 44px rows for touch, and the
   tighter rows of the design once there is a pointer. So the list needs no
   gap of its own. */
.site-footer__link {
    --link-underline-inset: var(--space-xs);
    padding-block: var(--space-xs);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

/* The colour stays put on hover - the animated rule is the whole feedback. */
.site-footer__link:hover,
.site-footer__link:focus-visible {
    color: var(--color-text-inverse);
}

.site-footer__link[aria-current='page'] {
    color: var(--color-accent);
}

/* The consent trigger is a <button> but has to read as one of the links. */
.site-footer__link--button {
    padding-inline: 0;
    text-align: start;
}

/* --- Breakpoints ----------------------------------------------------------- */

@media (min-width: 480px) {

    /* Two columns, with the brand across the top. */
    .site-footer__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (min-width: 768px) {

    .site-footer__inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {

    /* Brand and all three columns on one row, weighted like the design:
       the mark gets the widest cell, Leistungen the widest list. */
    .site-footer__inner {
        grid-template-columns:
            minmax(0, 1.4fr)
            minmax(0, 1.2fr)
            repeat(2, minmax(0, 0.9fr));
        gap: var(--space-lg);
    }

    .site-footer__brand {
        grid-column: auto;
    }

    /* Pointer devices do not need the 44px rows. */
    .site-footer__link {
        --link-underline-inset: var(--space-3xs);
        padding-block: var(--space-3xs);
    }
}