/* =============================================================================
   Sevart Gallery — footer.css
   Site footer: dark three-column layout + copyright bar.
   ============================================================================= */


/* ─── Footer Shell ──────────────────────────────────────────────────────────── */

.site-footer {
    background: var(--color-dark);
    color: #FAF7F4;
    padding-top: 72px;
}


/* ─── Three-Column Grid ─────────────────────────────────────────────────────── */

.footer__columns {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(250, 247, 244, 0.1);
}


/* ─── Column 1: Brand ───────────────────────────────────────────────────────── */

.footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    margin-bottom: 14px;
}

.footer__logo-wordmark {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 500;
    color: #FAF7F4;
    letter-spacing: 0.04em;
    line-height: 1;
}

.footer__logo-art {
    color: var(--color-gold);
}

.footer__logo-sub {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.28em;
    color: var(--color-text-muted);
    font-weight: 400;
    align-self: flex-end;
    padding-bottom: 2px;
}

.footer__tagline {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0 0 24px;
}

.footer__social {
    display: flex;
    gap: 14px;
}

.footer__social-link {
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    transition: color var(--transition-fast);
    text-decoration: none;
}

.footer__social-link:hover {
    color: var(--color-gold);
}


/* ─── Column 2: Navigation ──────────────────────────────────────────────────── */

.footer__nav-list {
    list-style: none;
    margin: 0;
    padding: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer__nav-list a {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer__nav-list a:hover {
    color: #FAF7F4;
}


/* ─── Column 3: Contact ─────────────────────────────────────────────────────── */

.footer__contact {
    padding-top: 4px;
}

.footer__contact-item {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0 0 10px;
    line-height: 1.6;
}

.footer__contact-item a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer__contact-item a:hover {
    color: #FAF7F4;
}

.footer__contact-item--plain {
    /* no link styling needed */
}


/* ─── Bottom Copyright Bar ──────────────────────────────────────────────────── */

.footer__bottom {
    padding: 24px 0 32px;
}

.footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.footer__copy {
    font-family: var(--font-sans);
    font-size: 12px;
    color: #5C5A56;
    letter-spacing: 0.04em;
}

.footer__bottom-links {
    display: flex;
    gap: 24px;
    flex-shrink: 0;
}

.footer__bottom-link {
    font-family: var(--font-sans);
    font-size: 12px;
    color: #5C5A56;
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color var(--transition-fast);
}

.footer__bottom-link:hover {
    color: var(--color-text-muted);
}


/* ─── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .footer__columns {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    /* Brand spans full width on tablet */
    .footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .footer__columns {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer__brand {
        grid-column: auto;
    }

    .footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}