/* ==========================================================================
   RentOS — footer
   --------------------------------------------------------------------------
   Desktop 123:6827 (1921x412 at 6125) · mobile 123:9966 (390x931).

   Mobile wraps the content in a white rounded card (355 wide, r50 @ 123:7567);
   desktop drops the card and lays the same content out in three columns over
   the page background, with the accent member bar full-bleed beneath.
   ========================================================================== */

.footer {
    background-color: #edefec;          /* continues the band */
    /* Figma mobile: Download ends 5291, footer starts 5376 -> 85. */
    padding-top: 85px;
}

/* ------------------------------------------------------------------ Mobile */
.footer__card {
    width: calc(100% - 32px);           /* 355 at left 16 @ 123:7567 */
    max-width: 355px;
    margin: 0 auto;
    /* The bottom padding runs the card UNDER the accent bar, as in Figma where
       rect 123:7567 extends past the bar to 931 — that is what hides the card's
       50px bottom radius. The bar is then pulled back up by the same 50. */
    padding: 36.84px 20px 73px;         /* logo top 36.84 */
    background-color: var(--white);
    border-radius: 50px;
}

.footer__inner {
    text-align: center;
}

.footer__logo {
    width: 189.409px;                   /* @ 123:7568 */
    height: auto;
    margin: 0 auto;
}

.footer__tagline {
    margin-top: 10px;                   /* logo ends ~76 -> tagline 85.74 */
    font-family: var(--font-screen-title);
    font-weight: var(--fw-medium);
    font-size: 13.197px;                /* @ 123:7577 */
    line-height: 1;
    color: var(--brand-dark-green);
}

/* Store badges — the same 572x128 sprite the mobile menu uses */
/* Percentage widths, not fixed px: a hard 299 overflowed the card at 320
   (the card's content box is only 248 there) and pushed the whole document
   sideways. The badge ratios are the same at both breakpoints
   (132.739/299 == 151.725/341.767), so these percentages serve both. */
.footer__stores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5.2%;                          /* 15.675 / 299 @ 123:8007 */
    width: min(299px, 100%);
    margin: 33px auto 0;                /* tagline ends 98 -> stores 132 */
}

/* Official Apple and Google vector badges, so these are resolution independent
   and need neither a 2x nor a WebP. Their ratios (2.9916 / 3.3717) sit a
   fraction of a percent off the screenshot crops Figma used, so the two no
   longer compute to identical heights — hence align-items on the row. */
.footer__store {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.footer__store img {
    display: block;
    width: 100%;
    height: auto;
}

.footer__store--ios     { width: 44.4%; }   /* 132.739 / 299 */
.footer__store--android { width: 50.4%; }   /* 150.586 / 299 */

/* Links — Inter 20/36, centred @ 123:8008 */
.footer__links {
    order: 2;
    margin-top: 33px;                   /* stores end 177 -> links 210 */
}

/* Kills the li's own line-box strut, which otherwise stacked ~8px under each
   inline-block anchor and made the list 176 tall against Figma's 144. */
.footer__links li {
    line-height: 0;
}

.footer__links a,
.footer__links button {
    display: inline-block;
    font-family: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 20px;
    line-height: 36px;
    color: var(--brand-dark-green);
    text-decoration: none;
}

.footer__links a:hover,
.footer__links button:hover {
    text-decoration: underline;
}

.footer__address {
    margin-top: 32px;                   /* links end 354 -> address 386 */
    font-size: 14px;                    /* @ 123:7578 */
    line-height: 18px;
    font-style: normal;
    color: var(--primary-text);
}

.footer__address p + p {
    margin-top: 10px;                   /* mb-[10px] between the three blocks */
}

.footer__address a {
    color: inherit;
    text-decoration: none;
}

.footer__address a:hover {
    text-decoration: underline;
}

.footer__copy {
    margin-top: 26px;                   /* address ends 478 -> copy 504 */
    font-family: var(--font-screen-title);
    font-weight: var(--fw-regular);
    font-size: 14px;                    /* @ 123:8009 */
    line-height: 26px;
    color: var(--brand-dark-green);
}

/* The mobile DOM order is brand -> links -> address -> copy, but Figma stacks
   logo, tagline, stores, links, address, copy — so the columns are reordered
   with flex rather than duplicated in the markup. */
.footer__inner {
    display: flex;
    flex-direction: column;
}

.footer__brand   { order: 1; display: contents; }
.footer__links   { order: 2; }
.footer__address { order: 3; }
/* display:contents means the brand's children order individually — without
   this the copyright kept its default 0 and rendered above the links. */
.footer__copy    { order: 4; }

/* Accent bar @ 123:8010 — full-bleed, 130 tall on mobile */
.footer__members {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;                 /* paints over the card it overlaps */
    min-height: 130px;
    margin-top: -50px;                  /* copy ends 530 -> bar at 553 */
    padding: 21px 10px;
    background-color: var(--brand-accent);
}

.footer__members-img {
    width: 358.004px;                   /* @ 123:8012 */
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------------------------------- Desktop */
@media screen and (min-width: 992px) {
    /* Figma: Download ends 6065, footer starts 6125 -> 60. */
    .footer {
        padding-top: 60px;
    }

    .footer__card {
        width: 100%;
        max-width: none;
        padding: 62px 0 0;              /* content starts at 62 @ 123:6862 */
        background: none;
        border-radius: 0;
    }

    /* Three columns: links 242, brand centred, address right @ 123:6827 */
    .footer__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: start;
        width: min(var(--content-width), calc(100% - 80px));
        margin: 0 auto;
        text-align: left;
    }

    .footer__brand {
        display: block;
        grid-column: 2;
        grid-row: 1;
        text-align: center;
    }

    .footer__links {
        grid-column: 1;
        grid-row: 1;
        order: 0;
        margin: 0;
    }

    .footer__address {
        grid-column: 3;
        grid-row: 1;
        order: 0;
        margin: 0;
        font-size: 16px;                /* @ 123:6872 */
        line-height: 26px;
        text-align: right;
    }

    .footer__logo {
        width: 244px;                   /* @ 123:6862 */
    }

    .footer__tagline {
        margin-top: 13px;               /* logo ends 112 -> tagline 125 */
        font-size: 17px;                /* @ 123:6871 */
    }

    /* Fixed here, not min(): the desktop brand column is an `auto` grid track,
       so a percentage would resolve against the track's own content and
       collapse the badges to the logo's width. 341.767 always fits a >=992
       viewport, so there is nothing to guard against. */
    .footer__stores {
        width: 341.767px;               /* @ 123:6874 */
        margin-top: 39px;               /* tagline ends 142 -> stores 181 */
    }

    .footer__copy {
        margin-top: 46px;               /* stores end 232 -> copy 277.93 */
        font-size: 16px;                /* @ 123:6873 */
    }

    .footer__links a {
        font-size: 20px;                /* @ 123:6877 */
        line-height: 36px;
    }

    /* Accent bar is 80 tall and full-bleed @ 123:6829 */
    .footer__members {
        min-height: 80px;
        margin-top: 28px;               /* copy ends 303.93 -> bar at 332 */
        padding: 11px 20px;
    }

    .footer__members-img {
        width: 614.44px;                /* @ 123:6831 */
    }
}