/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    position: relative;

    overflow: hidden;

    border-top:
        var(--border-width-thin)
        solid
        var(--color-border);

    background: var(--color-background);

    color: var(--color-text-primary);
}

.site-footer__container {
    width: min(
        calc(100% - (2 * var(--container-padding-mobile))),
        var(--container-wide-width)
    );

    margin-inline: auto;
    
}


/* =========================================================
   MAIN
   ========================================================= */

.site-footer__main {
    display: grid;

    grid-template-columns:
        minmax(280px, 1fr)
        minmax(500px, 1.2fr);

    gap: var(--space-20);

    padding-block:
        var(--space-20)
        var(--space-16);
}


/* =========================================================
   BRAND
   ========================================================= */

.site-footer__brand {
    max-width: 400px;
}

.site-footer__logo {
    display: inline-block;

    color: var(--color-text-primary);

    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);

    letter-spacing: -0.04em;

    transition: color var(--transition-normal);
}

.site-footer__logo:hover {
    color: var(--color-primary);
}

.site-footer__description {
    margin-top: var(--space-5);

    color: var(--color-text-secondary);

    font-size: var(--font-size-sm);

    line-height: var(--line-height-relaxed);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.site-footer__navigation {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: var(--space-8);
}

.site-footer__column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: var(--space-3);
}

.site-footer__heading {
    margin-bottom: var(--space-2);

    color: var(--color-text-muted);

    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-footer__column a {
    color: var(--color-text-secondary);

    font-size: var(--font-size-sm);

    transition:
        color var(--transition-normal),
        transform var(--transition-normal);
}

.site-footer__column a:hover {
    color: var(--color-primary);

    transform: translateX(3px);
}


/* =========================================================
   TRAJECTORY
   ========================================================= */

.site-footer__trajectory {
    width: 100%;

    height: 100px;
}

.site-footer__trajectory svg {
    display: block;

    width: 100%;
    height: 100%;
}

.site-footer__trajectory-line {
    fill: none;

    stroke: var(--color-line);

    stroke-width: 1.5;

    stroke-dasharray: 7 11;

    vector-effect: non-scaling-stroke;
}

.site-footer__node {
    fill: var(--color-background);

    stroke-width: 2;
}

.site-footer__node--start {
    stroke: var(--color-primary);
}

.site-footer__node--end {
    stroke: var(--color-green);
}


/* =========================================================
   BOTTOM
   ========================================================= */

.site-footer__bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: var(--space-6);

    padding-block:
        var(--space-6);

    border-top:
        var(--border-width-thin)
        solid
        var(--color-border);

    color: var(--color-text-muted);

    font-size: var(--font-size-xs);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) {

    .site-footer__container {
        width: min(
            calc(100% - (2 * var(--container-padding-tablet))),
            var(--container-wide-width)
        );
    }

}


/* =========================================================
   SMALL DESKTOP
   ========================================================= */

@media (max-width: 1023px) {

    .site-footer__main {
        grid-template-columns: 1fr;

        gap: var(--space-12);
    }

    .site-footer__brand {
        max-width: 550px;
    }

}


/* =========================================================
   LARGE SCREENS
   ========================================================= */

@media (min-width: 1280px) {

    .site-footer__container {
        width: min(
            calc(100% - (2 * var(--container-padding-desktop))),
            var(--container-wide-width)
        );
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .site-footer__main {
        padding-block:
            var(--space-16)
            var(--space-12);
    }

    .site-footer__navigation {
        grid-template-columns: 1fr 1fr;

        gap: var(--space-10) var(--space-6);
    }

    .site-footer__column:last-child {
        grid-column: 1 / -1;
    }

    .site-footer__trajectory {
        height: 70px;
    }

    .site-footer__bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: var(--space-2);
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .site-footer__column a,
    .site-footer__logo {
        transition: none;
    }

    .site-footer__trajectory-line {
        stroke-dasharray: none;
    }

}