/* ========================================
   BLOCK: FOOTER
   ======================================== */

@scope (.block-footer) {
    :scope {
        padding-block: var(--space-lg);
        background: var(--color-bg-alt);
        border-block-start: 1px solid var(--color-border);
    }

    .cms-block-inner {
        max-width: var(--content-width);
        margin-inline: auto;
        padding-inline: var(--space-xs);
    }

    /* Footer Grid */
    .footer-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    @container (min-width: 1024px) {
        .footer-grid {
            grid-template-columns: 2fr 1fr;
        }
    }

    /* Footer Main */
    .footer-main {
        display: grid;
        gap: var(--space-md);
    }

    /* Footer Logo */
    .footer-logo {
        display: block;
        width: 150px;
    }

    .footer-logo figure {
        width: 100%;
    }

    .footer-logo img {
        width: 100%;
        height: auto;
    }

    /* Footer Widgets - Grid */
    .footer-widgets {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    @container (min-width: 768px) {
        .footer-widgets {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    /* Footer Widget */
    .footer-widget h4 {
        font-size: var(--text-small);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-block-end: var(--space-xs);
    }

    .footer-widget ul {
        list-style: none;
        display: grid;
        gap: 10px;
    }

    .footer-widget ul a {
        font-size: var(--text-body);
        color: var(--color-text-secondary);
    }

    .footer-widget ul a:hover {
        color: var(--color-accent);
    }

    /* Contact Info */
    .contact-info {
        display: grid;
        gap: var(--space-xs);
    }

    .info-item {
        display: grid;
        gap: 5px;
    }

    .info-item .label {
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-text-secondary);
    }

    .info-item a,
    .info-item span {
        font-size: var(--text-body);
        color: var(--color-text);
    }

    .info-item a:hover {
        color: var(--color-accent);
    }

    /* Footer Bottom */
    .footer-bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-xs);
        padding-block-start: var(--space-sm);
        border-block-start: 1px solid var(--color-border);
    }

    .footer-bottom p {
        font-size: var(--text-small);
        color: var(--color-text-secondary);
    }

    .footer-nav {
        display: flex;
        gap: 10px;
        font-size: var(--text-small);
    }

    .footer-nav a {
        color: var(--color-text-secondary);
    }

    .footer-nav a:hover {
        color: var(--color-accent);
    }

    .footer-nav span {
        color: var(--color-text-secondary);
    }

    /* Footer CTA */
    .footer-cta {
        background: var(--color-bg-dark);
        color: var(--color-text-inverse);
        padding: var(--space-sm);
        display: grid;
        gap: var(--space-sm);
        align-content: start;
    }

    .footer-cta h2 {
        font-size: var(--text-h2);
        font-weight: 300;
        line-height: 1.1;
    }

    .footer-cta h2 strong {
        font-weight: 900;
        display: block;
    }

    /* Footer Social */
    .footer-social {
        padding-block-start: var(--space-sm);
        border-block-start: 1px solid var(--color-border-dark);
    }

    .footer-social > span {
        display: block;
        font-size: var(--text-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-block-end: 15px;
    }

    .social-links {
        display: flex;
        gap: var(--space-xs);
    }

    .social-links a {
        font-size: var(--text-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-text-inverse);
        opacity: 0.6;
    }

    .social-links a:hover {
        opacity: 1;
        color: var(--color-accent);
    }
}