/* Styles for Footer component */
@layer components {
    .footer {
        padding-block: var(--space-xl) var(--space-l);
        /* The call bar sits on top of the footer on small screens. */
        padding-block-end: calc(var(--space-l) + var(--call-bar-height, 0px));

        & .footer__inner {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: var(--space-l);
            align-items: start;
        }

        & .footer__brand {
            display: flex;
            flex-direction: column;
            gap: var(--space-s);
            align-items: start;
        }

        & .footer__logo {
            --logo-height: 4.5rem;
            color: var(--color-text);
        }

        & .footer__claim {
            font-family: var(--font-display);
            font-size: var(--size-step-1);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            line-height: 1;
        }

        & .footer__title {
            font-size: var(--size-step--1);
            font-family: var(--font-body);
            font-weight: 600;
            letter-spacing: 0.22em;
            color: var(--color-text-muted);
            margin-block-end: var(--space-s);
        }

        & .footer__list {
            display: flex;
            flex-direction: column;
            gap: var(--space-2xs);
            padding: 0;
            list-style: none;
        }

        & .footer__link {
            text-decoration: none;
            transition: color var(--duration-fast) var(--ease-jab);

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

        & .footer__contact {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: var(--space-2xs);
        }

        & .footer__contact .footer__title {
            margin-block-end: calc(var(--space-s) - var(--space-2xs));
        }

        & .footer__legal {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: var(--space-2xs) var(--space-m);
            margin-block-start: var(--space-xl);
            padding-block-start: var(--space-s);
            border-block-start: 1px solid var(--color-border);
            color: var(--color-text-muted);
            font-size: var(--size-step--1);
        }
    }

    @media (width >= 48rem) {
        .footer .footer__inner {
            grid-template-columns: 1.4fr 1fr 1fr;
            gap: var(--space-xl);
        }
    }
}