@import url("./colorpalette.css");

.site-footer {
    padding: 90px max(4vw, 24px) 24px;
    position: relative;
    color: var(--white-color);
    background: color-mix(in srgb, var(--primary-color) 48%, var(--black-color));
    overflow: hidden;

    &::before { position: absolute; content: ""; width: 520px; height: 520px; left: -350px; bottom: -350px; border: 1px solid color-mix(in srgb, var(--white-color) 10%, transparent); border-radius: 50%; box-shadow: 0 0 0 75px color-mix(in srgb, var(--white-color) 3%, transparent), 0 0 0 150px color-mix(in srgb, var(--white-color) 2%, transparent); }
    .site-footer__glow { position: absolute; width: 350px; height: 350px; right: 5%; top: -310px; border-radius: 50%; background: var(--fifth-color); box-shadow: 0 0 130px 80px color-mix(in srgb, var(--fifth-color) 22%, transparent); }

    .site-footer__main { width: min(1240px, 100%); margin: 0 auto 65px; position: relative; z-index: 2; display: grid; grid-template-columns: 1.4fr .7fr .8fr 1fr; gap: clamp(32px, 5vw, 75px); }
    .site-footer__brand > p { max-width: 390px; color: color-mix(in srgb, var(--white-color) 64%, transparent); line-height: 1.75; }

    .footer-brand { padding: 4px; display: inline-flex; align-items: center; gap: 14px; color: var(--white-color); text-decoration: none; .footer-brand__mark { width: 64px; height: 64px; padding: 7px; box-sizing: border-box; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--white-color) 75%, transparent); border-radius: 19px; color: var(--primary-color); background: linear-gradient(145deg,var(--white-color),color-mix(in srgb,var(--fifth-color) 14%,var(--white-color))); box-shadow: 0 12px 28px color-mix(in srgb, var(--black-color) 30%, transparent),inset 0 0 0 2px color-mix(in srgb,var(--primary-color) 5%,transparent); overflow: hidden; img { width: 100%; height: 100%; display: block; border-radius: 10px; object-fit: contain; object-position: center; } } > span:last-child { display: grid; line-height: .95; strong { font: 1.25rem "Archivo Black", sans-serif; } small { margin-top: 8px; color: var(--fifth-color); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } } }
    .footer-socials { margin-top: 27px; display: flex; gap: 9px; a { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--white-color) 20%, transparent); border-radius: 13px; color: var(--white-color); text-decoration: none; transition: transform 200ms ease, color 200ms ease, background 200ms ease; svg { width: 22px; height: 22px; fill: currentColor; stroke: none; } &.social-instagram svg { fill: none; stroke: currentColor; stroke-width: 1.8; .social-dot { fill: currentColor; stroke: none; } } &.social-youtube .social-play { fill: color-mix(in srgb,var(--primary-color) 65%,var(--black-color)); } &:hover { color: var(--black-color); background: var(--fifth-color); transform: translateY(-4px) scale(1.05); } } }

    .site-footer__column { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; h2 { margin: 6px 0 13px; color: var(--fifth-color); font: .75rem "DM Sans", sans-serif; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; } a, span { color: color-mix(in srgb, var(--white-color) 67%, transparent); font-size: .92rem; text-decoration: none; transition: color 180ms ease, transform 180ms ease; } a:hover { color: var(--white-color); transform: translateX(4px); } }
    .site-footer__invitation { padding: 28px; border: 1px solid color-mix(in srgb, var(--white-color) 13%, transparent); border-radius: 22px; background: color-mix(in srgb, var(--white-color) 6%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white-color) 10%, transparent); > span { color: var(--secondary-color); font-size: .65rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } h2 { margin: 14px 0 10px; font: 1.35rem "Archivo Black", sans-serif; } p { color: color-mix(in srgb, var(--white-color) 60%, transparent); font-size: .88rem; line-height: 1.6; } a { margin-top: 12px; display: inline-flex; gap: 10px; color: var(--fifth-color); font-weight: 800; text-decoration: none; } }
    .site-footer__bottom { width: min(1240px, 100%); margin: 0 auto; padding-top: 24px; position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid color-mix(in srgb, var(--white-color) 12%, transparent); color: color-mix(in srgb, var(--white-color) 45%, transparent); font-size: .74rem; p { margin: 0; } strong { color: var(--fifth-color); } }
}

@media (max-width: 950px) { .site-footer .site-footer__main { grid-template-columns: 1.3fr .7fr .8fr; .site-footer__invitation { grid-column: 1 / -1; } } }
@media (max-width: 650px) { .site-footer { padding: 70px 22px 24px; .site-footer__main { grid-template-columns: 1fr 1fr; .site-footer__brand, .site-footer__invitation { grid-column: 1 / -1; } } .site-footer__bottom { flex-direction: column; } } }