/* src/css/components/footer.css */
.site-footer{
    background:var(--logo-bg);
    color:rgba(255,255,255,.7);
    padding-block:4rem 2.5rem;
    font-family:"Manrope",sans-serif;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:3rem;
    margin-bottom:3rem;
}

.footer-brand{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.footer-brand-name{
    font-family:"Cormorant Garamond",serif;
    font-weight:600;
    font-size:1.5rem;
    color:#FFFFFF;
}

.footer-brand-text{
    font-size:.9rem;
    line-height:1.7;
    max-width:280px;
}

.footer-heading{
    font-family:"Manrope",sans-serif;
    font-weight:700;
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--gold-mid);
    margin-bottom:1.25rem;
}

.footer-links{
    display:flex;
    flex-direction:column;
    gap:.75rem;
}

.footer-link{
    font-size:.9rem;
    color:rgba(255,255,255,.7);
    transition:color var(--speed-fast) ease;
}

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

.footer-contact{
    display:flex;
    flex-direction:column;
    gap:.75rem;
    font-size:.9rem;
}

.footer-contact a{
    color:rgba(255,255,255,.7);
    transition:color var(--speed-fast) ease;
}

.footer-contact a:hover{
    color:var(--gold-light);
}

.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:2rem;
    border-top:1px solid rgba(255,255,255,.08);
    font-size:.8rem;
    color:rgba(255,255,255,.4);
}

.footer-socials{
    display:flex;
    gap:.75rem;
}

.footer-social{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.6);
    font-size:.85rem;
    transition:all var(--speed-fast) ease;
}

.footer-social:hover{
    border-color:var(--gold-mid);
    color:var(--gold-light);
    transform:translateY(-2px);
}

@media (max-width:768px){
    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:2rem;
    }
    .footer-brand{
        grid-column:1 / -1;
    }
}

@media (max-width:480px){
    .footer-grid{
        grid-template-columns:1fr;
    }
    .footer-bottom{
        flex-direction:column;
        gap:1rem;
        text-align:center;
    }
}