/* ============================================================
   Location Hub — Hero
   File: assets/css/hub/hub-hero.css
   Scope: .hub-hero__* classes only
   Figma: "Hero Block" node 2109:459 — cream bg, navy centered heading;
   only the Stats block (child) is a navy rounded card, not the section.
   ============================================================ */

.hub-hero {
    background: var(--hub-cream);
    color: var(--hub-navy);
    padding: 50px 0;
}

.hub-hero__header {
    text-align: center;
    max-width: 825px;
    margin: 0 auto;
}

.hub-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 50px;
}

.hub-hero__h1 {
    font-family: var(--hub-font-serif);
    font-size: 70px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: var(--hub-navy);
    margin: 0;
}

.hub-hero__h3 {
    font-family: var(--hub-font-serif);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.04em;
    color: var(--hub-navy);
    margin: 0;
}

.hub-hero__body {
    font-family: var(--hub-font-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 22.5px;
    letter-spacing: -0.01em;
    color: var(--hub-navy);
    max-width: 700px;
    margin: 0 auto;
}

.hub-hero__rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 50px;
}

.hub-hero__stars {
    width: 150px;
    height: auto;
}

.hub-hero__rating-text {
    font-family: var(--hub-font-sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--hub-grey);
}

.hub-hero__cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.hub-hero__stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--hub-gap-cards);
    background: var(--hub-navy);
    border-radius: var(--hub-radius-pill);
    padding: 50px 100px;
    margin: 0 auto 50px;
}

.hub-hero__stat {
    text-align: center;
}

.hub-hero__stat-value {
    font-family: var(--hub-font-serif);
    font-size: 48px;
    font-weight: 400;
    letter-spacing: -0.04em;
    color: var(--hub-cream);
    margin-bottom: 16px;
}

.hub-hero__stat-label {
    font-family: var(--hub-font-sans);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--hub-stat-label);
    line-height: 1.3;
}

.hub-hero__quote {
    max-width: 825px;
    margin: 0 auto;
    text-align: center;
}

.hub-hero__quote p {
    font-family: var(--hub-font-serif);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.04em;
    color: var(--hub-navy);
    margin: 0;
}


/* ============================
   RESPONSIVE — HERO
   ============================ */

@media (max-width: 992px) {
    .hub-hero__stats {
        justify-content: center;
        gap: 32px 48px;
    }

    .hub-hero__stat {
        flex: 0 0 calc(50% - 24px);
    }
}

@media (max-width: 768px) {
    .hub-hero__h1 {
        font-size: 42px;
    }

    .hub-hero__h3 {
        font-size: 22px;
    }

    .hub-hero__quote p {
        font-size: 19px;
    }

    /* Mobile-only: swap the desktop flex-wrap layout for an explicit
       2-column grid. flex-wrap sizes each .hub-hero__stat off its own
       content, so stat labels that wrap to a different number of
       lines (e.g. "Higher settlements than initial offer" vs.
       "Zero upfront cost") can pull the two columns out of alignment.
       Grid keeps both columns locked to equal widths and top-aligned. */
    .hub-hero__stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: initial;
        align-items: start;
        column-gap: 24px;
        row-gap: 32px;
        padding: 32px 24px;
    }

    .hub-hero__stat {
        flex: none;
        min-width: 0;
    }

    .hub-hero__stat-value {
        font-size: 34px;
        margin-bottom: 8px;
    }

    .hub-hero__cta-group {
        flex-direction: column;
        width: 100%;
    }

    .hub-hero__cta-group .hub-btn {
        width: 100%;
    }
}