/* landing.css - Frosted-glass hero, features, photo dashboard, and split auth.
 * Loaded via {% block extra_css %} on home / login / signup only.
 * Blocks are designed to sit inside <main class="container"> as rounded panels.
 */

/* ── Full-bleed photo landing ─────────────────────────────────
 * One hero photo spans the whole landing; the glass hero card and the
 * feature row both ride on top of it. The section breaks out of
 * <main class="container"> to go edge-to-edge, then re-constrains its
 * inner content back to the container width. */
.landing {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    /* Cancel <main class="container"> padding top and bottom so the full-bleed
     * photo runs edge-to-edge and its dark base meets the footer band flush. */
    margin-top: calc(-1 * var(--hc-space-5));
    margin-bottom: calc(-1 * var(--hc-space-5));
    isolation: isolate;
    overflow: hidden;
}

/* The landing ends in a dark photo band; drop the footer's top breathing-room
 * margin on this page so the two dark bands sit flush (no white gap). */
body:has(.landing) .site-footer {
    margin-top: 0;
}

.landing-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
}

.landing-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to bottom, var(--hc-scrim-strong), transparent 18%),
        linear-gradient(150deg,
            color-mix(in srgb, var(--hc-surface-dark) 78%, transparent),
            color-mix(in srgb, var(--hc-primary-600) 52%, transparent) 60%,
            color-mix(in srgb, var(--hc-surface-dark) 70%, transparent));
}

.landing-content {
    position: relative;
    z-index: 2;
    max-width: var(--hc-container-max);
    margin: 0 auto;
    padding: var(--hc-space-10) var(--hc-space-5) var(--hc-space-16);
}

/* Hero block no longer owns the photo — it's a transparent layout shell
 * for the glass card, sitting on the shared landing photo. */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 360px;
    padding: var(--hc-space-5) 0 var(--hc-space-6);
}

.glass-card {
    max-width: 560px;
    padding: var(--hc-space-10);
    border-radius: var(--hc-radius-xl);
    /* 90% forest tint, not lower: this is the AODA floor. Over the worst-case
     * photo region (pure white) the composited backing still clears WCAG AA —
     * pale-gold eyebrow ~5:1, white body ~6.7:1 — so contrast is guaranteed
     * regardless of which hero photo is swapped in. The 10% bleed + blur keep
     * the frosted-glass character. Don't drop this below ~90%. */
    background: color-mix(in srgb, var(--hc-surface-dark) 90%, transparent);
    backdrop-filter: blur(16px) saturate(1.15);
    border: 1px solid var(--hc-glass-border);
    box-shadow: var(--hc-shadow-lg);
}

.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    font-size: var(--hc-text-sm);
    font-weight: var(--hc-font-semibold);
    color: var(--hc-accent-100);
    margin-bottom: var(--hc-space-4);
}

.hero-title {
    font-family: var(--hc-font-display);
    color: var(--hc-white);
    font-weight: var(--hc-font-semibold);
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: var(--hc-tracking-tight);
    margin-bottom: var(--hc-space-5);
}

.hero-sub {
    color: var(--hc-on-photo);
    font-size: var(--hc-text-lg);
    line-height: 1.55;
    max-width: 46ch;
    margin-bottom: var(--hc-space-8);
}

.hero-cta {
    display: flex;
    gap: var(--hc-space-3);
    flex-wrap: wrap;
    align-items: center;
}

/* ── Features pane (rides on the landing photo) ───────────────
 * One frosted forest-glass pane — a sibling to the hero card — that holds
 * the heading and the four feature items, so the heading is grounded in a
 * pane instead of floating bare on the photo. The low-opacity tint lets the
 * blurred photo read through as real glass. Inner items are plain
 * translucent tiles (no backdrop-filter) to avoid muddy blur-on-blur. */
.features {
    margin: var(--hc-space-6) 0 0;
    padding: var(--hc-space-10);
    border-radius: var(--hc-radius-xl);
    /* Same AODA floor as .glass-card — see note there. 90% guarantees the
     * eyebrow/heading/body clear AA over any photo behind the features pane. */
    background: color-mix(in srgb, var(--hc-surface-dark) 90%, transparent);
    backdrop-filter: blur(16px) saturate(1.15);
    border: 1px solid var(--hc-glass-border);
    box-shadow: var(--hc-shadow-lg);
}

.section-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    font-size: var(--hc-text-sm);
    font-weight: var(--hc-font-semibold);
    color: var(--hc-accent-100);
    margin-bottom: var(--hc-space-3);
}

.features-title {
    font-family: var(--hc-font-display);
    color: var(--hc-white);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    text-wrap: balance;
    margin-bottom: var(--hc-space-8);
}

.feature-grid {
    display: grid;
    gap: var(--hc-space-5);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.feature-card {
    background: var(--hc-glass-fill);
    border: 1px solid var(--hc-glass-hairline);
    border-radius: var(--hc-radius-lg);
    padding: var(--hc-space-6);
}

.feature-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--hc-radius-md);
    background: var(--hc-glass-fill);
    border: 1px solid var(--hc-glass-border);
    color: var(--hc-primary-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--hc-space-4);
}

.feature-icon svg {
    width: 24px;
    height: 24px;
}

.feature-card h3 {
    color: var(--hc-white);
    font-size: var(--hc-text-lg);
    margin-bottom: var(--hc-space-2);
}

.feature-card p {
    color: var(--hc-on-photo-muted);
    font-size: var(--hc-text-sm);
    line-height: var(--hc-leading-relaxed);
    margin: 0;
}

/* ── Photo dashboard header (signed-in home) ──────────────── */
.dash {
    position: relative;
    overflow: hidden;
    border-radius: var(--hc-radius-xl);
    margin: var(--hc-space-5) 0;
    box-shadow: var(--hc-shadow-lg);
    background: var(--hc-surface-dark);
}

.dash-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dash-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, var(--hc-scrim) 0%, var(--hc-scrim-faint) 20%, transparent 44%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--hc-surface-dark) 82%, transparent),
            color-mix(in srgb, var(--hc-primary-600) 64%, transparent));
}

.dash-content {
    position: relative;
    z-index: 1;
    padding: var(--hc-space-8);
}

.dash-head {
    color: var(--hc-white);
    margin-bottom: var(--hc-space-6);
}

.dash-head h1 {
    color: var(--hc-white);
    margin: var(--hc-space-1) 0 var(--hc-space-2);
}

.dash-head p {
    color: var(--hc-on-photo-muted);
    margin: 0;
}

.dash-stats {
    display: flex;
    gap: var(--hc-space-3);
    flex-wrap: wrap;
    margin-top: var(--hc-space-5);
}

.dash-stat {
    background: var(--hc-glass-fill-strong);
    border: 1px solid var(--hc-glass-border);
    backdrop-filter: blur(6px);
    border-radius: var(--hc-radius-md);
    padding: var(--hc-space-2) var(--hc-space-4);
    font-size: var(--hc-text-sm);
    color: var(--hc-white);
}

.dash-stat b {
    font-size: var(--hc-text-lg);
    margin-right: var(--hc-space-1);
    font-weight: var(--hc-font-bold);
}

/* The dashboard is a dark anchor BAND (.dash) followed by the quick-action grid
 * in the light page context below it — the cards are ordinary white .card s on
 * the warm-neutral surface, not glass-on-photo. Per 60/30/10: dark green is the
 * band only; working/body content stays light, never inverted on the photo. */

/* ── Split-screen auth (login / signup) ───────────────────── */
.auth-split {
    padding: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    max-width: 900px;
    margin: var(--hc-space-10) auto;
}

.auth-split-media {
    position: relative;
    min-height: 520px;
}

.auth-split-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-split-tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--hc-surface-dark) 76%, transparent),
        color-mix(in srgb, var(--hc-primary-600) 60%, transparent));
}

.auth-split-quote {
    position: relative;
    z-index: 1;
    height: 100%;
    color: var(--hc-white);
    padding: var(--hc-space-10);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--hc-space-8);
}

.auth-split-quote .brand-word {
    color: var(--hc-white);
}

.auth-split-quote blockquote {
    font-family: var(--hc-font-display);
    font-size: var(--hc-text-2xl);
    line-height: 1.35;
    margin: 0;
}

.auth-split-cap {
    font-size: var(--hc-text-sm);
    color: var(--hc-on-photo-muted);
    letter-spacing: 0.03em;
}

.auth-split-form {
    padding: var(--hc-space-10);
}

.auth-split-form h1 {
    font-size: var(--hc-text-3xl);
    margin-bottom: var(--hc-space-2);
}

@media (max-width: 760px) {
    .landing-content {
        padding: var(--hc-space-6) var(--hc-space-4) var(--hc-space-10);
    }
    .hero {
        min-height: 360px;
        padding: var(--hc-space-4) 0 var(--hc-space-8);
    }
    .glass-card {
        padding: var(--hc-space-6);
    }
    .auth-split {
        grid-template-columns: 1fr;
    }
    .auth-split-media {
        min-height: 200px;
    }
    .auth-split-form {
        padding: var(--hc-space-6);
    }
}