/* ==========================================
UndefinedVerseOfficial
Footer System
========================================== */

.site-footer {
position: relative;
width: 100%;
margin-top: auto;
padding-block: var(--space-12) var(--space-6);
background: #0B0D10;
border-top: 1px solid var(--color-border);
}

.footer-inner {
width: min(
calc(100% - 2 * var(--container-padding)),
var(--container-width)
);
margin-inline: auto;
}

.footer-main {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: var(--space-12);
padding-bottom: var(--space-10);
}

.footer-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}

.footer-description {
max-width: 340px;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}

.footer-heading {
margin-bottom: var(--space-4);
color: var(--color-text);
font-family: var(--font-heading);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.04em;
}

.footer-links {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}

.footer-link {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
transition: color var(--duration-fast) var(--ease-standard);
}

.footer-link:hover {
color: var(--color-chrome);
}

.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-4);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border);
}

.footer-copyright {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
}

.footer-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-4);
}

/* Tablet */

@media (max-width: 760px) {
.footer-main {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-8);
}

.footer-brand {
grid-column: 1 / -1;
}
}

/* Mobile */

@media (max-width: 480px) {
.site-footer {
padding-top: var(--space-10);
}

.footer-main {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-8) var(--space-4);
}

.footer-bottom {
align-items: flex-start;
flex-direction: column;
}

.footer-meta {
gap: var(--space-3);
}
}