/* ============================================================
   Location Hub — Recovery
   File: assets/css/hub/hub-recovery.css
   Scope: .hub-recovery__* classes only
   Figma: "Recovery Block" node 2115:283 — navy bg, single white
   rounded panel containing a 3x2 grid of result stats.
   ============================================================ */

.hub-recovery {
    background: var(--hub-navy);
    color: var(--hub-cream);
    padding: var(--hub-section-pad) 0;
}

.hub-recovery__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}

.hub-recovery__heading {
    font-family: var(--hub-font-serif);
    font-size: 48px;
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1.15;
    color: var(--hub-cream);
    margin: 0 0 16px;
}

.hub-recovery__body {
    font-family: var(--hub-font-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 22.5px;
    color: var(--hub-stat-label);
    margin: 0;
}

.hub-recovery__panel {
    background: var(--hub-white);
    border-radius: 30px;
    width: fit-content;
    max-width: 1340px;
    padding: 56px 64px;
    margin: 0 auto 48px;
}

.hub-recovery__grid {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    row-gap: 50px;
    column-gap: 125px;
}

.hub-recovery__card {
    color: var(--hub-navy);
}

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

.hub-recovery__card-label {
    font-family: var(--hub-font-sans);
    font-size: 16px;
    font-weight: 700;
    color: var(--hub-blue);
    margin-bottom: 4px;
}

.hub-recovery__card-meta {
    font-family: var(--hub-font-sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--hub-navy);
}

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

/* ============================================================
   Credentials variant (Texas) — Figma "Recovery Block" node
   2213:447 -> "Stats" node 2213:452. Compound selectors below
   (.hub-recovery--credentials ...) intentionally out-rank the
   single-class .hub-recovery__panel / .hub-recovery__grid rules
   above so Colorado's results layout is never touched by this
   block, and are not dependent on source order to win.
   ============================================================ */

.hub-recovery--credentials .container {
    /* Figma "Recovery Block" (node 2213:447) is authored at a 1420px
       content width, wider than the shared 1280px .container cap used
       elsewhere. Same responsive shrink formula as the base .container
       rule (style.css), just with a taller desktop ceiling — scoped to
       this Texas-only variant so Colorado's .container is untouched. */
    width: min(100% - 162px, 1420px);
}

.hub-recovery.hub-recovery--credentials {
    /* Figma "Recovery Block" (node 2213:447) uses 50px top/bottom frame
       padding, not the shared --hub-section-pad (100px) that .hub-recovery
       uses for every other hub section. Both classes are compounded here
       so this out-specifies the base .hub-recovery rule regardless of
       source order, and it only ever matches the Texas credentials
       variant — Colorado's plain .hub-recovery is untouched. */
    padding: 50px 0;
}

.hub-recovery--credentials .hub-recovery__header {
    /* Figma's outer frame uses a 50px gap between "Header Text" and
       "Stats" (vs. the shared 48px margin used by the Colorado results
       variant) — 2px is within normal Figma/browser font-metric
       rounding, but matching it exactly keeps this variant pixel-true. */
    margin-bottom: 50px;
}

.hub-recovery--credentials .hub-recovery__panel {
    width: 1420px;
    max-width: 100%;
    padding: 30px;
    /* Figma's frame has no CTA/disclaimer footer below "Stats" for this
       variant (recovery.php omits it for credentials), so the shared
       48px trailing margin-bottom on .hub-recovery__panel would add
       whitespace Figma doesn't have. The section's own bottom padding
       (above) already supplies the correct closing space. */
    margin-bottom: 0;
}

.hub-recovery--credentials .hub-recovery__grid--credentials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 20px;
    width: 100%;
    /* Cred labels can wrap to two lines (e.g. "LICENSED BY THE TEXAS
       DEPT. OF INSURANCE") while sibling creds stay on one line, making
       the row's track height taller than a single-line item. Center
       each .hub-recovery__cred within that track so short items don't
       stick to the top and read as misaligned against the tall one. */
    align-items: center;
}

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

.hub-recovery__cred-label {
    font-family: var(--hub-font-sans);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.0112em;
    text-transform: uppercase;
    color: var(--hub-blue);
    margin: 0 0 7px;
}

.hub-recovery__cred-sub {
    font-family: var(--hub-font-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 22.5px;
    letter-spacing: -0.04em;
    color: var(--hub-navy);
    margin: 0;
}

.hub-recovery__cred-sub a {
    color: var(--hub-blue);
    text-decoration: underline;
}

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

    .hub-recovery__panel {
        width: 100%;
        max-width: none;
        padding: 32px 24px;
    }

    .hub-recovery__grid {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    /* Credentials variant (Texas): same equal-or-higher specificity as
       the desktop .hub-recovery--credentials rules above, so this wins
       at mobile widths and the panel/grid collapse the same way the
       Colorado results variant already does. */
    .hub-recovery--credentials .hub-recovery__panel {
        padding: 32px 24px;
    }

    .hub-recovery--credentials .hub-recovery__grid--credentials {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    /* Mobile-only: each result stacks as its own row with a divider
       instead of relying on row-gap alone, since .hub-recovery__card
       has no background/border of its own to read as a distinct card. */
    .hub-recovery__card,
    .hub-recovery__cred {
        padding-bottom: 28px;
        margin-bottom: 28px;
        border-bottom: 1px solid var(--hub-border);
    }

    .hub-recovery__card:last-child,
    .hub-recovery__cred:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none;
    }

    /* Mobile-only: the 48px desktop amount size (tuned for a
       max-content 3-column layout) is oversized once the panel goes
       full-width single-column; scale it down to match. */
    .hub-recovery__card-amount {
        font-size: 32px;
        margin-bottom: 8px;
    }

    .hub-recovery__card-label {
        font-size: 15px;
    }

    .hub-recovery__card-meta {
        font-size: 14px;
    }

    .hub-recovery__cred-label {
        font-size: 15px;
    }

    .hub-recovery__cred-sub {
        font-size: 14px;
    }
}