/* /Components/Pages/Landing.razor.rz.scp.css */
/* Landing page styling. Scoped so none of it can leak into the app, and written against the theme's
   CSS variables rather than fixed hex so it cannot drift from BrandTheme the way app.css once did. */

/* Hero --------------------------------------------------------------------- */
.lp-hero[b-bfkzheoclp] {
    background: linear-gradient(150deg, #0F172A 0%, #1E3A6E 60%, #2F6FB0 130%);
    color: #FFFFFF;
    padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1rem, 5vw, 4rem);
    overflow: hidden;
}

.lp-hero-inner[b-bfkzheoclp] {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.lp-hero h1[b-bfkzheoclp] {
    font-family: 'Sora', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin: 0 0 1.1rem;
}

.lp-lede[b-bfkzheoclp] {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 1.75rem;
    max-width: 46ch;
}

.lp-cta-row[b-bfkzheoclp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.lp-microcopy[b-bfkzheoclp] {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
}

/* Hero card fan ------------------------------------------------------------ */
.lp-fan[b-bfkzheoclp] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 420px;
}

.lp-fan-card[b-bfkzheoclp] {
    width: clamp(150px, 17vw, 215px);
    height: auto;
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.45), 0 2px 6px rgba(15, 23, 42, 0.3);
    /* Hairline so a dark card edge does not dissolve into the navy behind it. */
    outline: 1px solid rgba(255, 255, 255, 0.14);
    outline-offset: -1px;
    transition: transform 0.25s ease;
}

/* Overlapped rather than in a row: a fan reads as a collection, a row reads as a product grid. */
.lp-fan-1[b-bfkzheoclp] {
    transform: rotate(-9deg) translateX(28%);
    z-index: 1;
}

.lp-fan-2[b-bfkzheoclp] {
    transform: translateY(-14px) scale(1.06);
    z-index: 3;
}

.lp-fan-3[b-bfkzheoclp] {
    transform: rotate(9deg) translateX(-28%);
    z-index: 2;
}

.lp-fan:hover .lp-fan-1[b-bfkzheoclp] {
    transform: rotate(-13deg) translateX(34%);
}

.lp-fan:hover .lp-fan-3[b-bfkzheoclp] {
    transform: rotate(13deg) translateX(-34%);
}

/* The parsed-fields panel -------------------------------------------------- */
.lp-parse[b-bfkzheoclp] {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 1.75rem);
    align-items: center;
}

.lp-parse img[b-bfkzheoclp] {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.22);
}

.lp-fields[b-bfkzheoclp] {
    margin: 0;
    display: grid;
    gap: 0.55rem;
}

.lp-fields > div[b-bfkzheoclp] {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.lp-fields dt[b-bfkzheoclp] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--mud-palette-text-secondary);
}

.lp-fields dd[b-bfkzheoclp] {
    margin: 0;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

@media (prefers-reduced-motion: reduce) {
    .lp-btn:hover[b-bfkzheoclp],
    .lp-fan-card[b-bfkzheoclp],
    .lp-fan:hover .lp-fan-1[b-bfkzheoclp],
    .lp-fan:hover .lp-fan-3[b-bfkzheoclp] {
        transition: none;
    }
}

/* Sections ----------------------------------------------------------------- */
/* Sections alternate white and the page tint. Both were reading as the page background before,
   so the bands ran together and the page had no rhythm below the hero. */
.lp-section[b-bfkzheoclp] {
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 5vw, 4rem);
    background: var(--mud-palette-surface);
}

.lp-section-tint[b-bfkzheoclp] {
    background: var(--mud-palette-background);
}

.lp-section-inner[b-bfkzheoclp] {
    max-width: 1120px;
    margin: 0 auto;
}

.lp-split[b-bfkzheoclp] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}

.lp-split-reverse > :first-child[b-bfkzheoclp] {
    order: 2;
}

.lp-eyebrow[b-bfkzheoclp] {
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 0.78rem;
    font-weight: 700;
    /* The dark gold: the fill tone would be 1.64:1 on this background. */
    color: #7A5C09;
    margin: 0 0 0.5rem;
}

.lp-section h2[b-bfkzheoclp] {
    font-family: 'Sora', 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.2;
    margin: 0 0 0.9rem;
    color: var(--mud-palette-text-primary);
}

.lp-section p[b-bfkzheoclp] {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 0.9rem;
    max-width: 56ch;
}

.lp-centered[b-bfkzheoclp] {
    text-align: center;
    margin-bottom: 2rem !important;
}

/* The generated-description sample ------------------------------------------ */
.lp-generated[b-bfkzheoclp] {
    margin: 0;
    background: #0F172A;
    border-radius: 14px;
    padding: 1.5rem 1.6rem 1.1rem;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.22);
}

.lp-generated pre[b-bfkzheoclp] {
    margin: 0;
    font-family: 'Inter', monospace;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #E2E8F0;
    white-space: pre-wrap;
}

.lp-generated figcaption[b-bfkzheoclp] {
    margin-top: 0.9rem;
    font-size: 0.8rem;
    color: #93B4E3;
}

/* Feature cards ------------------------------------------------------------- */
.lp-cards[b-bfkzheoclp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
}

.lp-card[b-bfkzheoclp] {
    background: var(--mud-palette-surface);
    border-radius: 14px;
    border-top: 4px solid var(--mud-palette-primary);
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.lp-card:nth-child(2)[b-bfkzheoclp] {
    border-top-color: var(--mud-palette-tertiary);
}

.lp-card:nth-child(3)[b-bfkzheoclp] {
    border-top-color: var(--mud-palette-secondary);
}

.lp-card h3[b-bfkzheoclp] {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--mud-palette-text-primary);
}

.lp-card p[b-bfkzheoclp] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--mud-palette-text-secondary);
}

/* Trust list ---------------------------------------------------------------- */
.lp-trust[b-bfkzheoclp] {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 720px;
    display: grid;
    gap: 0.85rem;
}

.lp-trust li[b-bfkzheoclp] {
    position: relative;
    padding-left: 1.9rem;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.lp-trust li[b-bfkzheoclp]::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

/* Closing CTA and footer ---------------------------------------------------- */
.lp-final[b-bfkzheoclp] {
    background: linear-gradient(135deg, #1E3A6E 0%, #2F6FB0 100%);
    color: #FFFFFF;
    text-align: center;
    padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
}

.lp-final h2[b-bfkzheoclp] {
    font-family: 'Sora', 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin: 0 0 1.5rem;
}

/* Mobile -------------------------------------------------------------------- */
@media (max-width: 860px) {
    .lp-hero-inner[b-bfkzheoclp],
    .lp-split[b-bfkzheoclp] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Copy first on a phone, always: the sample is supporting evidence, not the pitch. */
    .lp-split-reverse > :first-child[b-bfkzheoclp] {
        order: 0;
    }

    .lp-nav a:not(.lp-btn)[b-bfkzheoclp] {
        display: none;
    }

    /* The card and its fields stack on a phone rather than squeezing into two columns. */
    .lp-parse[b-bfkzheoclp] {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .lp-parse img[b-bfkzheoclp] {
        max-width: 260px;
    }

    .lp-fields[b-bfkzheoclp] {
        width: 100%;
    }

    .lp-fan[b-bfkzheoclp] {
        min-height: 320px;
    }
}