/* ==========================================================================
   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);
}

.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 layout — see ../css/category-pages.css (shared Lives Remembered system) */

/* ==========================================================================
   Memorial Card
   The entire card is a single <a> — one focusable click target.

   The name sits on the *bottom of the portrait* with a permanent scrim
   so each face and label are unmistakably one unit — critical in a
   dense grid with hundreds of cards.

   A soft ground shadow stays on the desk while only the portrait lifts
   on hover; the caption moves with the photo.
   ========================================================================== */
.memorial-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: transparent;
    border: none;
    overflow: visible;
    outline: none;
}

.memorial-card:focus-visible {
    outline: 2px solid var(--color-accent-on-light);
    outline-offset: 6px;
    border-radius: var(--radius-card);
}

/* ---------- Stage: holds ground shadow + portrait in one column ---------- */
.memorial-card__stage {
    position: relative;
    width: 100%;
    overflow: visible;
    /* Space so the blurred ground ellipse isn’t clipped by grid cells */
    padding-bottom: 0.35rem;
}

/* Ambient shadow — stays “on the desk” while the photo translates up */
.memorial-card__ground {
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: 2%;
    width: 78%;
    height: 16%;
    transform: translateX(-50%);
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        rgba(44, 44, 44, 0.34) 0%,
        rgba(44, 44, 44, 0.14) 42%,
        transparent 70%);
    filter: blur(16px);
    opacity: 0.88;
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                filter var(--dur) var(--ease);
}

.memorial-card:hover .memorial-card__ground,
.memorial-card:focus-visible .memorial-card__ground {
    opacity: 0.48;
    transform: translateX(-50%) scale(0.9);
    filter: blur(22px);
}

/* ---------- Portrait — lifts; carries the card’s structural shadow ---------- */
.memorial-card__media {
    position: relative;
    z-index: 1;
    /* Taller than 4:5 so each card reads a bit longer / more stately
       in the grid; matches common print portrait proportions (2:3). */
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-rest);
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
    will-change: transform;
}

.memorial-card:hover .memorial-card__media,
.memorial-card:focus-visible .memorial-card__media {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.memorial-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    transition: transform var(--dur-slow) var(--ease);
}

.memorial-card:hover .memorial-card__image,
.memorial-card:focus-visible .memorial-card__image {
    transform: scale(1.05);
}

@media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
    .memorial-card:hover .memorial-card__media,
    .memorial-card:focus-visible .memorial-card__media {
        transform: translateY(-6px);
    }

    .memorial-card:hover .memorial-card__image,
    .memorial-card:focus-visible .memorial-card__image {
        transform: scale(1.06);
    }
}

.memorial-card__overlay {
    position: absolute;
    z-index: 2;
    inset: 0 0 0 0;
    background: linear-gradient(to bottom,
                                transparent 0%,
                                transparent 35%,
                                rgba(44, 44, 44, 0.12) 100%);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
    pointer-events: none;
}

.memorial-card:hover .memorial-card__overlay,
.memorial-card:focus-visible .memorial-card__overlay {
    opacity: 1;
}

/* ---------- Name — always on this portrait (ties face + label together) ---------- */
.memorial-card__caption {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.1rem 0.55rem 0.85rem;
    text-align: center;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(44, 44, 44, 0.88) 0%,
        rgba(44, 44, 44, 0.55) 42%,
        rgba(44, 44, 44, 0) 100%
    );
}

.memorial-card__name {
    margin: 0;
    font-size: clamp(0.8125rem, 0.95vw + 0.55rem, 1.0625rem);
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.28;
    color: var(--color-warm-light);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45),
                 0 0 1px rgba(0, 0, 0, 0.6);
    transition: color var(--dur) var(--ease);
}

.memorial-card:hover .memorial-card__name,
.memorial-card:focus-visible .memorial-card__name {
    color: var(--color-highlight);
}


/* ==========================================================================
   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);
}


/* ==========================================================================
   Reduced motion — strip transforms, keep colour/opacity transitions only.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .memorial-card:hover .memorial-card__media,
    .memorial-card:focus-visible .memorial-card__media {
        transform: none;
        box-shadow: var(--shadow-rest);
    }

    .memorial-card:hover .memorial-card__image,
    .memorial-card:focus-visible .memorial-card__image {
        transform: none;
    }

    .memorial-card:hover .memorial-card__ground,
    .memorial-card:focus-visible .memorial-card__ground {
        opacity: 0.88;
        transform: translateX(-50%);
        filter: blur(16px);
    }
}