// resources/scss/layouts/_footer.scss
.site-footer {
    background-color: $bg-dark;
    color: white;

    .footer-container {
        max-width: $container-max-width;
        margin: 0 auto;
        padding: 3rem 1rem;

        .footer-content {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;

            @include respond-to(md) {
                grid-template-columns: repeat(3, 1fr);
            }

            .footer-section {
                .logo {
                    img {
                        height: 4rem;
                        margin-bottom: 1rem;
                    }
                }

                .description {
                    color: #d1d5db;
                    font-size: 0.875rem;
                }

                .section-title {
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                    margin-bottom: 1rem;
                    color: white;
                }

                .media-logo {
                    height: 2rem;
                }

                .social-links {
                    display: flex;
                    gap: 1rem;

                    a {
                        color: #d1d5db;
                        font-size: 1.25rem;
                        @include transition-all;

                        &:hover {
                            color: white;
                        }
                    }
                }
            }
        }

        .footer-bottom {
            border-top: 1px solid #374151;
            margin-top: 2rem;
            padding-top: 2rem;

            @include respond-to(md) {
                @include flex-between;
            }

            display: block;
            text-align: center;

            .copyright {
                color: #9ca3af;
                font-size: 0.875rem;
                margin-bottom: 1rem;

                @include respond-to(md) {
                    margin-bottom: 0;
                }
            }

            .footer-links {
                display: flex;
                gap: 1.5rem;
                justify-content: center;

                @include respond-to(md) {
                    justify-content: flex-end;
                }

                a {
                    color: #9ca3af;
                    font-size: 0.875rem;
                    @include transition-all;

                    &:hover {
                        color: white;
                    }
                }
            }
        }
    }
}