/* ============================================================
   Site footer
   Figma: desktop 935:5634 (1440), tablet 1140:58139 (744),
   mobile 961:18025 (393). One set of blocks, placed per
   breakpoint with grid areas (see footer.php).
   ============================================================ */

.site-footer {
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
    background: var(--color-secondary);
    color: var(--color-text-inverse);
}

/* Desktop: cards across the top (40px down, 20 + 10 + 20 above the
   company row), company | links, the legal text 32px under the links,
   and the bottom row 32 + 32 below with 40 under it. */
.footer__inner {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(0, 791px);
    grid-template-areas:
        "cards   cards"
        "company links"
        "company legal"
        "bottom  bottom";
    grid-template-rows: auto auto 1fr auto;   /* the taller company block stretches the legal row, not the links row */
    column-gap: 40px;
    padding-top: 40px;
}

/* ── Quick-link cards (900:33013) ─────────────────────────── */
.footer__cards {
    grid-area: cards;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.footer-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    background: var(--color-surface-shade);
    color: var(--color-text-inverse);
    font-family: var(--font-heading);
    text-align: left;
    cursor: pointer;
}
.footer-card:focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: 2px;
}

.footer-card__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.footer-card__title {
    font-weight: var(--weight-medium);
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
}
.footer-card__subtitle {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

.footer-card__arrow {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform var(--transition-base);
}
.footer-card:hover .footer-card__arrow,
.footer-card:focus-visible .footer-card__arrow { transform: translate(2px, -2px); }

/* ── Company (900:33049) ──────────────────────────────────── */
.footer__company {
    grid-area: company;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.footer__logo { height: 68px; width: auto; }

.footer__phone {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
}

.footer__address {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

.footer__social {
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    color: var(--color-text-inverse);
    transition: opacity var(--transition-base);
}
.footer__social svg { width: 25px; height: 25px; }
.footer__social a:hover { opacity: 0.75; }

.footer__social--bottom { display: none; }

/* ── Link columns (900:33073) ─────────────────────────────── */
/* The Figma's link block is 795 wide from x531, so it overhangs the
   content edge by 4px; the legal text below does the same. */
.footer__links {
    grid-area: links;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-right: -4px;
}
.footer__col-pair { display: contents; }

.footer__col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.footer__heading {
    font-family: var(--font-action);
    font-weight: var(--weight-heavy);
    font-size: var(--text-action);
    line-height: var(--leading-action);
    letter-spacing: var(--tracking-action);
    text-transform: uppercase;
}

.footer__col-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer__col-group { display: flex; gap: 30px; }   /* the sub-columns sit at x0 and x126 */
.footer__col-group > .footer__col-links:first-of-type { min-width: 96px; }  /* Figma sub-column widths */
.footer__col-group > .footer__col-links:last-of-type  { min-width: 112px; }
.footer__group-rule { display: none; }

.footer__col a,
.footer__terms a,
.footer__copyright,
.footer__powered {
    font-family: var(--font-action);
    font-weight: var(--weight-heavy);
    font-size: var(--text-action);
    line-height: var(--leading-action);
    letter-spacing: var(--tracking-action);
}

.footer__col a:hover,
.footer__terms a:hover,
.footer__phone:hover { color: var(--color-accent); }

.footer__col a:focus-visible,
.footer__terms a:focus-visible,
.footer__phone:focus-visible,
.footer__social a:focus-visible,
.footer__powered a:focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: 2px;
}

/* The legal links sit in the bottom row on desktop */
.footer__col--legal { display: none; }

/* ── Legal text (900:33107): 14 Futura Medium, 1%, not a text style ── */
.footer__legal {
    grid-area: legal;
    margin-top: 56px;   /* 58 below the link columns in the frame, less our 2px of divider lines */
    font-family: var(--font-body);   /* Futura PT in this frame */
    font-weight: var(--weight-medium);
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.14px;
    color: var(--color-text-inverse-muted);
    text-align: justify;
    margin-right: -4px;
}

/* ── Bottom row (900:33110) ───────────────────────────────── */
/* The legal links are centred on the whole row, with © and "Powered by"
   at the ends (900:33110) */
.footer__bottom {
    grid-area: bottom;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 64px 0 40px;
}
.footer__bottom .footer__powered { justify-self: end; }

.footer__terms { display: flex; gap: 30px; }

.footer__copyright { margin: 0; }

.footer__powered {
    display: flex;
    align-items: center;
    gap: 8px;
}
.footer__powered a {
    display: flex;
    align-items: center;
    transition: opacity var(--transition-base);
}
.footer__powered a:hover { opacity: 0.75; }
.footer__powered img { height: 13px; width: auto; }

/* ── Tablet (1140:58139) ──────────────────────────────────────
   Company beside the cards, 82px apart across the full width; the links
   with Legal as a fourth column; the bottom row loses the legal links.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* The pair spans the content width: company at the left gutter, the cards
       taking the rest (Alex, 2 Nov; the frame centres them at 393 wide) */
    .footer__inner {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "company cards"
            "links   links"
            "legal   legal"
            "bottom  bottom";
        column-gap: 0;
    }

    .footer__cards {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 0;
        margin-left: 82px;   /* the frame's gap between company and cards */
    }
    .footer-card {
        align-items: flex-end;
        padding: 12px 16px;
    }
    .footer-card__title {
        font-size: var(--text-mobile-h4);
        line-height: var(--leading-mobile-h4);
    }

    .footer__company { align-self: center; }
    .footer__logo { height: 62px; }
    .footer__address {
        font-family: var(--font-action);
        font-weight: var(--weight-heavy);
        font-size: var(--text-action);
        line-height: var(--leading-action);
        letter-spacing: var(--tracking-action);
    }

    .footer__links {
        margin-top: 32px;
        gap: 40px;
    }
    .footer__col-pair {
        display: flex;
        gap: 30px;
    }
    .footer__col--legal { display: flex; }
    .footer__col-group { flex-direction: column; }

    .footer__heading {
        font-family: var(--font-heading);   /* Mobile/Action is set in Futura */
        font-weight: var(--weight-medium);
        font-size: var(--text-mobile-action);
        line-height: var(--leading-mobile-action);
    }

    /* Mobile/Information, 32px under the links (the tablet and mobile frames' gap) */
    .footer__legal {
        margin-top: 32px;
        font-family: var(--font-info);
        font-weight: var(--weight-bold);
        font-size: var(--text-mobile-info);
        line-height: var(--leading-mobile-info);
        letter-spacing: 0;
    }

    .footer__bottom {
        display: flex;
        justify-content: space-between;
        padding: 24px 0;
    }
    .footer__terms { display: none; }
}

/* ── Mobile (961:18025) ───────────────────────────────────────
   One column: cards, company, the links in two columns (Services over
   Legal, Solutions over Company), the legal text, then the socials,
   © and "Powered by" stacked and centred.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .footer__inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "cards"
            "company"
            "links"
            "legal"
            "bottom";
        grid-template-rows: none;
        padding-top: 48px;
    }
    .footer__cards { margin-left: 0; }

    .footer-card {
        align-items: center;
        padding: 12px 24px;
    }
    .footer-card__title {
        font-size: var(--text-h4);
        line-height: var(--leading-h4);
    }

    .footer__company {
        align-self: auto;
        margin-top: 24px;
    }
    .footer__logo { height: 60px; }
    .footer__social--company { display: none; }

    .footer__links {
        display: grid;
        grid-template-columns: minmax(0, 143px) minmax(0, 143px);
        justify-content: space-between;
        row-gap: 40px;
        column-gap: 24px;
    }
    .footer__col-pair { display: contents; }
    .footer__col--1     { grid-column: 1; grid-row: 1; }
    .footer__col--2     { grid-column: 2; grid-row: 1; }
    .footer__col--3     { grid-column: 2; grid-row: 2; }
    .footer__col--legal { grid-column: 1; grid-row: 2; }

    .footer__col-group { gap: 12px; }
    .footer__col-group > .footer__col-links { min-width: 0; }
    .footer__group-rule { display: block; }

    .footer__col a {
        font-family: var(--font-heading);   /* Mobile/Action is set in Futura */
        font-weight: var(--weight-medium);
        font-size: var(--text-mobile-action);
        line-height: var(--leading-mobile-action);
        letter-spacing: var(--tracking-action);
    }

    .footer__bottom {
        flex-direction: column;
        gap: 16px;
        padding-bottom: 48px;   /* Caleb, 2 Nov (was 24px, from tablet) */
    }
    .footer__social--bottom {
        display: flex;
        gap: 8px;
    }
    .footer__social--bottom a {
        width: 32px;
        height: 32px;
        border-radius: 4px;
    }
    .footer__social--bottom svg { width: 24px; height: 24px; }
}