/* ============================================
    LF — EXTRA PAGES (theme addition)
    About, Contact and the Legal Page template. Not in lf-newui, so
    these are built from the design's existing pieces (tokens, eyebrow,
    page header, lf-rich, the blog contents list, the claim card) and add
    only the layout they need.
    abbr: lf-pg-hero, lf-legal, lf-help-card, lf-contact, lf-about
============================================ */

/* ---- Page hero band ------------------------------------------------- */
.lf-pg-hero {
    padding-block: 2.5rem;
    background-color: var(--lf-bg);
}

.lf-pg-hero-title {
    margin-bottom: 0;
}

.lf-pg-hero-lead {
    max-width: 46rem;
    margin: 0.75rem 0 0;
}

.lf-pg-hero-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
    color: var(--lf-grey);
    font-size: var(--lf-fs-sm);
}

.lf-pg-hero-meta i {
    color: var(--lf-purple);
}

/* ---- Legal page ----------------------------------------------------- */
.lf-legal-body > :first-child {
    margin-top: 0;
}

/* The design's contents list, plus a help card under it. The whole
   column sticks here, so the list itself stays put inside it. */
.lf-legal-aside {
    display: grid;
    gap: 1.5rem;
}

.lf-legal-aside .lf-sblg-toc {
    position: static;
}

@media (min-width: 992px) {
    .lf-pg-hero {
        padding-block: 3.5rem;
    }

    .lf-legal-aside {
        position: sticky;
        top: 1.5rem;
    }
}

.lf-help-card {
    padding: 1.5rem;
    border-radius: var(--lf-radius-lg);
    background: var(--lf-grad-card-deep);
    color: var(--lf-white);
}

.lf-help-card-icon {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--lf-amber);
    font-size: 1.75rem;
}

.lf-help-card-title {
    margin-bottom: 0.5rem;
    color: var(--lf-white);
    font-size: 1.25rem;
}

.lf-help-card-text {
    margin-bottom: 1.25rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--lf-fs-sm);
}

/* ---- Contact -------------------------------------------------------- */
.lf-contact-intro {
    margin-top: 1rem;
}

.lf-contact-list {
    display: grid;
    gap: 1rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.lf-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    border-radius: var(--lf-radius-lg);
    background-color: var(--lf-surface);
}

/* Round icon tile, shared with the About value cards */
.lf-contact-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--lf-radius-pill);
    background-color: var(--lf-purple);
    color: var(--lf-white);
    font-size: 1.125rem;
}

.lf-contact-label {
    display: block;
    margin-bottom: 0.125rem;
    color: var(--lf-grey);
    font-size: var(--lf-fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lf-contact-value {
    display: block;
    margin: 0;
    color: var(--lf-ink);
    font-size: var(--lf-fs-normal);
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

a.lf-contact-value:hover {
    color: var(--lf-purple);
}

.lf-contact-card .lf-sec-header {
    margin-bottom: 1.25rem;
}

.lf-contact-message {
    min-height: 9rem;
    resize: vertical;
}

/* ---- About ---------------------------------------------------------- */
.lf-about-figures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lf-about-figure {
    padding: 1.5rem 1.25rem;
    border-radius: var(--lf-radius-lg);
    background-color: var(--lf-surface);
    text-align: center;
}

.lf-about-figure:nth-child(1),
.lf-about-figure:nth-child(4) {
    background: var(--lf-grad-card-deep);
}

.lf-about-figure-val {
    display: block;
    color: var(--lf-purple);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.lf-about-figure-label {
    display: block;
    margin-top: 0.375rem;
    color: var(--lf-grey);
    font-size: var(--lf-fs-sm);
}

.lf-about-figure:nth-child(1) .lf-about-figure-val,
.lf-about-figure:nth-child(4) .lf-about-figure-val {
    color: var(--lf-amber);
}

.lf-about-figure:nth-child(1) .lf-about-figure-label,
.lf-about-figure:nth-child(4) .lf-about-figure-label {
    color: rgba(255, 255, 255, 0.85);
}

.lf-about-values {
    margin-top: 2.5rem;
}

.lf-about-value {
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--lf-bg);
    border-radius: var(--lf-radius-lg);
    background: var(--lf-grad-card);
}

.lf-about-value-title {
    margin: 1rem 0 0.5rem;
    color: var(--lf-ink);
    font-size: var(--lf-fs-card-title);
}

.lf-about-value-text {
    margin: 0;
    color: var(--lf-grey);
    font-size: var(--lf-fs-sm);
    line-height: 1.6;
}

.lf-about-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 2.5rem;
    padding: 1.75rem;
    border-radius: var(--lf-radius-xl);
    background-color: var(--lf-bg);
}

.lf-about-cta-title {
    margin-bottom: 0.25rem;
    color: var(--lf-ink);
    font-size: 1.5rem;
}

.lf-about-cta-text {
    margin: 0;
    color: var(--lf-grey);
}

.lf-about-cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (min-width: 992px) {
    .lf-about-values,
    .lf-about-cta {
        margin-top: 3.5rem;
    }

    .lf-about-cta {
        padding: 2.25rem 2.5rem;
    }
}