/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
    padding-block: clamp(var(--space-500), 6vw, var(--space-650)) var(--space-450);

    background-color: var(--footer-background);
    color: var(--color-white);
}

.footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(160px, 0.6fr) minmax(220px, 0.8fr);

    gap: clamp(var(--space-600), 9vw, var(--space-700));
}

.footer__brand {
    max-width: 460px;
}

.footer__logo {
    display: inline-flex;

    margin-bottom: var(--space-300);
}

.footer__logo-image {
    display: block;

    height: 48px;
    width: auto;
}

.footer__description {
    color: var(--color-gray-350);

    font-size: var(--font-size-250);
    line-height: var(--line-height-body);
}

.footer__title {
    margin-bottom: var(--space-200);

    color: var(--color-white);

    font-size: var(--font-size-400);
    font-weight: var(--font-weight-550);
    line-height: var(--line-height-heading);
}

.footer__contacts-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: var(--space-300);
}

.footer__contacts-group > .footer__title {
    margin-bottom: 0;
}

.footer__nav,
.footer__contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: var(--space-100);
}

.footer__contacts {
    font-style: normal;
}

.footer__link,
.footer__contact-link {
    color: var(--color-gray-300);

    font-size: var(--font-size-250);
    line-height: var(--line-height-heading);
    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.footer__link:hover,
.footer__contact-link:hover {
    color: var(--color-white);

    transform: translateY(-1px);
}

.footer__link:focus-visible,
.footer__contact-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

.footer__address {
    margin-top: var(--space-100);

    color: var(--color-gray-300);

    font-size: var(--font-size-250);
    line-height: var(--line-height-body);
}

.footer__bottom {
    margin-top: var(--space-500);
    padding-top: var(--space-300);

    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.footer__socials {
    --social-instagram-size: 20px;
    --social-youtube-size: 22px;
    --social-tiktok-size: 19px;

    display: flex;
    align-items: center;

    gap: var(--space-250);
}

.footer__social-link {
    display: inline-flex;
    align-items: center;

    padding-block: var(--space-100);

    color: var(--color-gray-300);

    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

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

    transform: translateY(-1px);
}

.footer__social-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

.footer__social-icon {
    display: block;

    fill: currentColor;

    flex-shrink: 0;
}

.footer__social-link[aria-label="Instagram"] .footer__social-icon {
    width: var(--social-instagram-size);
    height: var(--social-instagram-size);
}

.footer__social-link[aria-label="YouTube"] .footer__social-icon {
    width: var(--social-youtube-size);
    height: var(--social-youtube-size);
}

.footer__social-link[aria-label="TikTok"] .footer__social-icon {
    width: var(--social-tiktok-size);
    height: var(--social-tiktok-size);
}

@media (prefers-reduced-motion: reduce) {

    .footer__social-link {
        transition: color 0.2s ease;
    }

    .footer__social-link:hover {
        transform: none;
    }

}

.footer__copyright {
    color: var(--color-gray-400);

    font-size: var(--font-size-150);
    line-height: var(--line-height-heading);
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1199px) {

    .footer__inner {
        gap: var(--space-500);
    }

    .footer__description {
        font-size: var(--font-size-200);
    }

    .footer__title {
        font-size: var(--font-size-300);
    }

    .footer__link,
    .footer__contact-link {
        font-size: var(--font-size-200);
    }

    .footer__address {
        font-size: var(--font-size-200);
    }

    .footer__copyright {
        font-size: var(--font-size-100);
    }

}

@media (max-width: 1023px) {

    .footer > .container {
        padding-inline: clamp(var(--space-300), 4vw, var(--space-500));
    }

    .footer__inner {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);

        gap: var(--space-500) var(--space-400);
    }

    .footer__brand {
        grid-column: 1 / -1;

        max-width: 640px;
    }

    .footer__nav,
    .footer__contacts-group,
    .footer__contacts {
        min-width: 0;
    }

    .footer__contact-link {
        overflow-wrap: anywhere;
    }

}

@media (max-width: 399px) {

    .footer > .container {
        padding-inline: var(--space-250);
    }

    .footer__inner {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);

        gap: var(--space-450) var(--space-250);
    }

    .footer__logo {
        margin-bottom: var(--space-250);
    }

    .footer__logo-image {
        height: 42px;
    }

    .footer__bottom {
        margin-top: var(--space-400);
    }

}