@import "./design-tokens.css";

/* ========== Quick Edit ========== */
/* Footer spacing, QR sizing, link density, and CTA styling are grouped in this file. */

/* ========== Base Layout ========== */
.lg-footer {
    margin-top: 64px;
    background: rgb(225, 232, 237);
    color: #172436;
    border-top: 1px solid #dfe9e2;
}

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

.lg-footer img {
    display: block;
    max-width: 100%;
}

.lg-footer-inner {
    width: var(--space-content-width);
    margin-inline: auto;
    padding: 54px 0 30px;
}

.lg-footer-main {
    display: grid;
    grid-template-columns: minmax(250px, 1.05fr) minmax(360px, 1.45fr) minmax(220px, 0.8fr);
    gap: 44px;
    align-items: start;
}

.lg-footer-brand {
    display: grid;
    gap: 18px;
}

.lg-footer-logo {
    width: 170px;
    height: auto;
}

.lg-footer-kicker,
.lg-footer-title {
    margin: 0;
}

.lg-footer-kicker {
    color: #516173;
    font-size: 15px;
    font-weight: 800;
}

.lg-footer-phone {
    color: #172436;
    font-size: clamp(30px, 4vw, 38px);
    font-weight: 500;
    line-height: 1.12;
}

.lg-footer-contact {
    display: grid;
    gap: 10px;
    margin: 4px 0 0;
    padding: 0;
    color: #425064;
    font-size: 15px;
}

.lg-footer-contact div {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.lg-footer-contact dt {
    color: var(--accent-dark);
    font-weight: 800;
}

.lg-footer-contact dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.lg-footer-contact b {
    color: #172436;
}

.lg-footer-qr {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lg-footer-qr figure {
    margin: 0;
    text-align: center;
}

.lg-footer-qr img {
    width: 104px;
    height: 104px;
    border: 1px solid #dfe9e2;
    border-radius: var(--radius-card);
    background: #fff;
    object-fit: cover;
}

.lg-footer-qr figcaption {
    margin-top: 8px;
    color: #425064;
    font-size: 14px;
    font-weight: 800;
}

.lg-footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 34px;
}

.lg-footer-group h2 {
    margin: 0 0 13px;
    font-size: 17px;
    line-height: 1.25;
}

.lg-footer-group ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lg-footer-group a {
    color: #516173;
    font-size: 14px;
}

.lg-footer-group a:hover,
.lg-footer-legal a:hover,
.lg-footer-contact a:hover {
    color: var(--accent-dark);
}

.lg-footer-action {
    display: grid;
    gap: 14px;
    padding: 22px;
    border: 1px solid #dfe9e2;
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.72);
}

.lg-footer-action h2,
.lg-footer-action p {
    margin: 0;
}

.lg-footer-action h2 {
    font-size: 19px;
}

.lg-footer-action p {
    color: #516173;
    font-size: 14px;
}

.lg-footer-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: var(--radius-card);
    background: #8fc31f;
    color: #fff;
    font-weight: 800;
}

.lg-footer-button:hover {
    background: #759f19;
    color: #fff;
}

.lg-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 42px;
    padding-top: 20px;
    border-top: 1px solid #dfe9e2;
    color: #516173;
    font-size: 14px;
}

.lg-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
}

/* ========== Responsive ========== */
@media (max-width: 1080px) {
    .lg-footer-main {
        grid-template-columns: 1fr 1.3fr;
    }

    .lg-footer-action {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .lg-footer-inner {
        padding-top: 38px;
    }

    .lg-footer-main,
    .lg-footer-links {
        grid-template-columns: 1fr;
    }

    .lg-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}