/* Site footer: next event band, link columns and the legal bar. */

.site-footer {
    --wave-height: clamp(34px, 5vw, 86px);
    --eyebrow-color: var(--c-cream);
    --line: rgba(244, 233, 220, .22);
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    padding: calc(var(--wave-height) + clamp(36px, 4vw, 64px)) 0 0;
    color: var(--c-cream);
    background:
        radial-gradient(ellipse 60% 50% at 15% 25%, #7A1A2B 0, transparent 70%),
        radial-gradient(ellipse 50% 60% at 90% 70%, var(--c-accent-hover) 0, transparent 70%),
        var(--c-accent);
}

.site-footer :focus-visible { outline-color: var(--c-cream); border-radius: 4px; }

.site-footer__inner {
    position: relative;
    z-index: 3;
    max-width: calc(1240px + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ---------- next event ---------- */

.footer-event {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px 48px;
    padding-bottom: clamp(36px, 4vw, 56px);
    border-bottom: 1px solid var(--line);
}

.footer-event__heading {
    margin: .3em 0 0;
    font-family: var(--font-script);
    font-weight: 400;
    font-size: clamp(2.875rem, 5.8vw, 5.75rem);
    line-height: 1.05;
    font-variant-numeric: lining-nums;
    text-wrap: balance;
}

.footer-event__venue { display: flex; align-items: center; gap: 12px; margin: .9em 0 0; font-size: clamp(1.0625rem, 1.4vw, 1.3125rem); }
.footer-event__venue svg { flex: none; width: 26px; height: 26px; }
.footer-event .btn { gap: 14px; min-width: 250px; }

/* ---------- columns ---------- */

.footer-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr) minmax(0, 1.05fr) minmax(0, 1.25fr);
    gap: 40px clamp(24px, 3vw, 48px);
    padding: clamp(40px, 4.4vw, 64px) 0;
}

.footer-logo { display: inline-flex; }
.footer-logo img { width: clamp(220px, 20vw, 290px); height: auto; }

.footer-tagline {
    max-width: 18em;
    margin: 22px 0 0;
    font-size: 1.0938rem;
    line-height: 1.6;
    color: var(--c-cream-2);
    text-wrap: balance;
}

.footer-col__title { margin-bottom: 26px; }

.footer-col__title::after {
    content: "";
    display: block;
    width: 32px;
    height: 1px;
    margin-top: 14px;
    background: currentColor;
    opacity: .55;
}

.footer-links { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.footer-link {
    font-size: 1.0938rem;
    color: var(--c-cream-2);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    transition: color .2s, text-decoration-color .2s;
}

.footer-link:hover,
.footer-link:focus-visible { color: #fff; text-decoration-color: rgba(255, 255, 255, .6); }

.footer-mail { overflow-wrap: anywhere; }

.footer-address {
    font-size: 1.0938rem;
    font-style: normal;
    line-height: 1.5;
    color: var(--c-cream-2);
}

.footer-social { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }

.footer-social a {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1.3px solid rgba(244, 233, 220, .75);
    border-radius: 50%;
    transition: background .25s, color .25s, border-color .25s;
}

.footer-social a:hover,
.footer-social a:focus-visible { border-color: var(--c-cream); background: var(--c-cream); color: var(--c-accent); }

.footer-social svg { width: 24px; height: 24px; }

/* ---------- bottom bar ---------- */

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    padding: 26px 0 32px;
    border-top: 1px solid var(--line);
    font-size: 0.9375rem;
    color: var(--c-cream-2);
}

.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; }
.footer-copy { margin-right: 22px; padding-right: 22px; border-right: 1px solid var(--line); }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0; padding: 0; list-style: none; }
.footer-legal li + li::before { content: "·"; margin: 0 14px; opacity: .7; }
.footer-legal .footer-link { font-size: 0.9375rem; }

.footer-credit { margin: 0; font-size: 0.875rem; letter-spacing: .02em; color: rgba(244, 233, 220, .7); }

.footer-credit a {
    color: rgba(244, 233, 220, .85);
    text-decoration-color: rgba(244, 233, 220, .45);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color .2s, text-decoration-color .2s;
}

.footer-credit a:hover,
.footer-credit a:focus-visible { color: #fff; text-decoration-color: #fff; }

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
    .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {

    .footer-event { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .footer-event__heading { font-size: clamp(2.5625rem, 12vw, 3.75rem); }
    .footer-event .btn { width: 100%; min-width: 0; }

    .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
    .footer-brand,
    .footer-col--contact { grid-column: 1 / -1; }
    .footer-col__title { font-size: 0.8125rem; letter-spacing: .14em; white-space: nowrap; }
    .footer-link { font-size: 1.0625rem; }

    .footer-bottom { flex-direction: column; justify-content: center; gap: 14px; text-align: center; }
    .footer-legal { flex-direction: column; gap: 10px; }
    .footer-copy { margin: 0; padding: 0; border: 0; }
    .footer-legal ul { justify-content: center; gap: 6px 22px; }
    .footer-legal li + li::before { display: none; }
}

/* touch screens: 44px tall link rows, so fingers do not hit the neighbour */
@media (pointer: coarse) {
    .footer-links { gap: 0; }
    .footer-links .footer-link { display: inline-flex; align-items: center; min-height: 44px; }
    .footer-legal .footer-link,
    .footer-credit a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
    .footer-legal { gap: 0; }
}

/* the padded legal links still fit on one line on a 375px phone */
@media (pointer: coarse) and (max-width: 640px) {
    .footer-legal ul { column-gap: 10px; }
}

@media (max-width: 379px) {
    .footer-cols { grid-template-columns: minmax(0, 1fr); }
}

/* "Ustawienia cookies": a button that looks like the links beside it */
.footer-link--button { padding: 0; border: 0; background: none; font: inherit; font-size: 15px; cursor: pointer; }