/* ==========================================================================
   Nova — Lives Remembered
   Page-specific styles for /nova/index.html.

   This file is loaded AFTER ../css/styles.css. It handles only the
   Nova page's "light surface mode" (cream page, white cards, dark text)
   and the memorial card grid. The shared site header, dropdown, and
   mobile nav all live in ../css/styles.css and inherit the dark tokens
   defined there — we keep those tokens intact by scoping our local
   overrides to <main> and <footer> only, never :root.
   ========================================================================== */


/* ==========================================================================
   Page shell — body.no-hero (in index.html): solid fixed header + scroll padding
   on the body (see ../css/styles.css). The page now opens directly into an
   editorial intro instead of a large visual hero.
   ========================================================================== */


/* ==========================================================================
   Light surface mode — scoped to <main> and the page footer.
   The shared <header> (a sibling of <main>) keeps the central dark
   tokens, so the dropdown, nav links, donate button, and hamburger all
   continue to read against the solid header bar (#2C2C2C).
   ========================================================================== */
main,
.page-footer {
    --color-bg: var(--color-warm-light);
    --color-bg-alt: var(--color-warm-light);
    --color-surface: var(--color-warm-light);
    --color-text: var(--color-primary-dark);
    --color-text-muted: rgba(44, 44, 44, 0.72);
    --color-text-dim: var(--color-text-dim-on-light);
    --color-border: rgba(44, 44, 44, 0.1);
    --color-primary: var(--color-accent);
    --color-highlight: var(--color-accent);

    /* Soft, layered shadows — never heavy. */
    --shadow-rest: 0 1px 3px rgba(44, 44, 44, 0.06),
                   0 10px 24px rgba(44, 44, 44, 0.08);
    --shadow-hover: 0 4px 8px rgba(44, 44, 44, 0.07),
                    0 22px 40px rgba(44, 44, 44, 0.12);

    --tracking-eyebrow: 0.28em;
    --radius-card: 8px;
    --grid-gap: clamp(1.25rem, 2.4vw, 2rem);

    /* Intro + preamble — editorial reading width (not the 1780px grid). */
    --nova-reading-max: min(44rem, 100%);
    --nova-preamble-max: min(67rem, 100%);

    /* Slightly slower motion than the site default to feel calm. */
    --dur-slow: 0.8s;
}

@media (min-width: 768px) {
    main,
    .page-footer {
        --nova-reading-max: min(50rem, 100%);
        --nova-preamble-max: min(68rem, 100%);
    }
}

@media (min-width: 1024px) {
    main,
    .page-footer {
        --nova-reading-max: min(56rem, 100%);
        --nova-preamble-max: min(72rem, 100%);
    }
}

@media (min-width: 1280px) {
    main,
    .page-footer {
        --nova-reading-max: min(58rem, 100%);
        --nova-preamble-max: min(76rem, 100%);
    }
}

body {
    background-color: var(--color-surface-light);
    color: var(--color-text-on-light);
}


/* ==========================================================================
   Intro
   ========================================================================== */
.nova-intro {
    position: relative;
    text-align: center;
    padding: clamp(4.5rem, 10vw, 7rem) 0 clamp(2rem, 5vw, 3.4rem);
    background:
        radial-gradient(circle at 50% 0%, rgba(189, 173, 123, 0.18), transparent 19rem),
        linear-gradient(180deg, var(--color-warm-light) 0%, #F4F0E3 100%);
}

.nova-intro .container {
    max-width: var(--nova-reading-max);
}

.nova-intro .eyebrow {
    display: block;
    margin: 0 auto;
    max-width: 28rem;
    font-size: clamp(0.6875rem, 0.2vw + 0.65rem, 0.75rem);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-accent-on-light);
    margin-bottom: clamp(0.55rem, 1.1vw, 0.75rem);
    line-height: 1.35;
}

.nova-intro__title {
    font-size: clamp(2.85rem, 5.2vw + 0.75rem, 4.35rem);
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.06;
    margin: 0 0 clamp(0.85rem, 2.2vw, 1.35rem);
    color: var(--color-text);
    text-wrap: balance;
    text-rendering: optimizeLegibility;
}

/* Wide canvas for the grid + footer only — faces read much larger than the
   default site container (matches the generous memorial wall). */
.nova-grid-section .container,
.page-footer .container {
    max-width: min(94vw, 1780px);
}

.nova-preamble .container {
    max-width: var(--nova-preamble-max);
}


/* ==========================================================================
   Preamble — quiet introduction before the memorial grid
   ========================================================================== */
.nova-preamble {
    min-height: calc(100vh - clamp(11.5rem, 22vw, 15.5rem));
    min-height: calc(100svh - clamp(11.5rem, 22vw, 15.5rem));
    display: flex;
    align-items: center;
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(4.5rem, 9vw, 7rem);
    background: #F4F0E3;
}

.nova-preamble .container {
    width: 100%;
}

.nova-preamble__inner {
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr);
    gap: clamp(2.25rem, 7vw, 7rem);
    align-items: center;
}

.nova-preamble__inner p {
    margin: 0;
    font-size: clamp(1rem, 0.38vw + 0.92rem, 1.125rem);
    font-weight: 400;
    line-height: 1.76;
    color: var(--color-text-muted);
    letter-spacing: 0.011em;
    text-wrap: pretty;
    text-rendering: optimizeLegibility;
}

.nova-preamble__content {
    max-width: 45rem;
}

.nova-preamble__kicker {
    max-width: 34rem;
    margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
    color: #2C2C2C;
    font-size: clamp(0.72rem, 0.2vw + 0.68rem, 0.82rem);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.68;
}

.nova-preamble__title {
    margin: 0 0 clamp(1rem, 2vw, 1.45rem);
    font-family: "Figtree", var(--font-heading), sans-serif;
    font-size: clamp(2.7rem, 5vw + 0.7rem, 5.7rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.055em;
    color: #2C2C2C;
    text-wrap: balance;
}

.nova-preamble__body {
    max-width: 37rem;
    font-size: clamp(1.05rem, 0.55vw + 0.96rem, 1.22rem);
    line-height: 1.72;
    color: rgba(44, 44, 44, 0.7);
}

.nova-preamble__quote {
    position: relative;
    max-width: 31rem;
    margin: 0;
    padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.25rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.15rem);
    color: #2C2C2C;
}

.nova-preamble__quote::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    border-radius: 999px;
    background: var(--color-accent-on-light);
}

.nova-preamble__quote p {
    font-size: clamp(1.35rem, 1.45vw + 1rem, 2.15rem);
    font-weight: 400;
    line-height: 1.36;
    letter-spacing: -0.035em;
    color: #2C2C2C;
    text-wrap: balance;
}

/* Optional scroll fade-in (see bottom of nova/index.html) */
.nova-preamble--enhanced {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity  0.95s var(--ease),
                transform 0.95s var(--ease);
}

.nova-preamble--enhanced.nova-preamble--inview {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .nova-preamble--enhanced {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .nova-preamble {
        min-height: calc(100vh - clamp(10.5rem, 18vw, 14rem));
        min-height: calc(100svh - clamp(10.5rem, 18vw, 14rem));
        padding: clamp(3rem, 7vw, 4.75rem) 0 clamp(4.5rem, 9vw, 6.5rem);
    }
}

@media (max-width: 768px) {
    .nova-preamble {
        min-height: calc(100vh - clamp(8.75rem, 28vw, 12rem));
        min-height: calc(100svh - clamp(8.75rem, 28vw, 12rem));
        padding: clamp(2.75rem, 11vw, 4.25rem) 0 clamp(4rem, 14vw, 5.75rem);
    }

    .nova-preamble__inner {
        grid-template-columns: 1fr;
        gap: clamp(1.8rem, 8vw, 2.6rem);
    }

    .nova-preamble__quote {
        max-width: 100%;
    }
}


/* ==========================================================================
   Card Grid
   Responsive breakpoints:
     • default (narrow / mobile)   2 columns
     • ≥ 768px tablet              4 columns
     • ≥ 1200px desktop            6 columns
   ========================================================================== */
.nova-grid-section {
    padding-block: 0 clamp(2.25rem, 5vw, 4rem);
}

@media (min-width: 1200px) {
    .nova-grid-section {
        /* Room between portraits on large screens — calm, not cramped */
        --grid-gap: clamp(1.4rem, 1.85vw, 2.15rem);
    }
}

/* Memorial grid + cards — shared Lives Remembered system (see ../css/category-pages.css) */

/* ==========================================================================
   Page Footer (light surface)
   ========================================================================== */
.page-footer {
    border-top: 1px solid var(--color-border);
    padding: 2.25rem 0;
    text-align: center;
    background-color: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.page-footer a {
    color: var(--color-text-muted);
}

.page-footer a:hover,
.page-footer a:focus-visible {
    color: var(--color-accent-on-light);
}