/*
 * Wedding Budget
 * Copyright (c) 2026 Amar Micro Inc.
 * Author: Jacques Amar
 *
 * All rights reserved. Proprietary software — see LICENSE for terms.
 *
 * Version: 1.0.0
 *
 * Public marketing landing page (Phase 6). Layout only — the auth widget keeps
 * its own styling from css/base/login.css. Uses the :root design tokens from
 * app.css (warm palette, --font-serif / --font-sans). Page-specific styles only.
 */

.landing {
    max-width: 70rem;
    margin: 0 auto;
    padding: 0 1.25rem;
    container-type: inline-size; /* hero reorders via @container, not @media */
}

/* ── Split hero ─────────────────────────────────────────────
 * Grid with named areas so the three pieces (brand / marketing copy / auth)
 * can be reordered between desktop and mobile:
 *   desktop → brand top-left, copy under it, auth spanning the right column
 *   mobile  → brand, then AUTH (tabs above the fold), then copy
 * The mobile reorder is the whole reason brand/copy/auth are separate grid
 * items rather than one stacked column. */
.landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 23rem;
    grid-template-areas:
        "brand auth"
        "copy  auth";
    align-content: start;
    align-items: start;
    column-gap: 2.5rem;
    row-gap: 1.25rem;
    padding: 1.5rem 0 2.75rem;
}

.landing-hero-copy {
    grid-area: copy;
    max-width: 36rem;
}

/* Brand: logo on the SAME line as name + slogan (logo spans both text rows),
 * left-aligned and compact. Overrides the centered/stacked .splash-brand base
 * from login.css. */
.landing-hero > .splash-brand {
    grid-area: brand;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "logo name"
        "logo tag";
    column-gap: 0.8rem;
    align-items: center;
    text-align: left;
    margin: 0;
}

.landing-hero > .splash-brand img {
    grid-area: logo;
    align-self: center;
    margin: 0;
    max-width: 4.4rem;
    height: auto;
}

.landing-hero > .splash-brand h1 {
    grid-area: name;
    align-self: end;
    font-family: var(--font-serif);
    font-size: 1.55rem;
    line-height: 1.05;
}

.landing-hero > .splash-brand p {
    grid-area: tag;
    align-self: start;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.2;
    color: var(--text-secondary);
}

/* Eyebrow kicker — states the product category plainly above the headline so a
 * first-time visitor instantly knows what this is. Small uppercase, gold accent. */
.landing-hero-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 0.55rem;
}

.landing-hero-headline {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3.2vw, 2.1rem);
    line-height: 1.18;
    color: var(--text-primary);
    margin: 0 0 0.8rem;
    font-weight: 500;
    /* Wrap naturally (fill each line, break at clause boundaries) while still
     * avoiding a lone "widow" word on the last line. Unlike `balance`, this does
     * NOT equalize line lengths, so it won't break mid-phrase ("what you / owe").
     * Language-agnostic; older browsers fall back to normal wrapping (harmless). */
    text-wrap: pretty;
}

.landing-hero-subhead {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 1.75rem;
    max-width: 32rem;
}

.landing-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.landing-benefit {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.landing-benefit-icon {
    flex: 0 0 auto;
    font-size: 1.4rem;
    line-height: 1.4;
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--row-active-bg);
}

.landing-benefit-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.landing-benefit-text strong {
    font-family: var(--font-sans);
    font-size: 0.98rem;
    color: var(--text-primary);
    font-weight: 600;
}

.landing-benefit-text span {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* ── Auth column ────────────────────────────────────────── */
/* Capped width so the box never goes full-bleed (the source of the "it expands
 * when the screen shrinks" feel). Centered within its grid area on every size. */
.landing-auth {
    grid-area: auth;
    align-self: start;
    justify-self: center;
    width: 100%;
    max-width: 23rem;
}

/* Small, muted reassurance line BELOW the auth box (was the top subhead). */
.landing-auth-note {
    margin: 0.7rem 0 0;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* Retained (unused) for the optional "Start planning" heading — see the restore
 * note in landing.php. If you re-add <h2 class="landing-auth-heading">…</h2>
 * above the widget, it'll be styled by this. */
.landing-auth-heading {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    text-align: center;
    font-weight: 600;
}

/* The shared .auth-widget brings its own card chrome (border, shadow, padding)
 * from login.css. On the landing we keep it visually QUIET at rest (light shadow)
 * so it doesn't out-shout the marketing column, then bring it to life on
 * interaction via :focus-within — a stronger shadow + a gold ring.
 *
 * DO NOT add `transform` (or filter/perspective/will-change) here: the
 * forgot-password & contact modals live INSIDE .auth-widget (the [data-splash]
 * root), and a transform on this element makes it the containing block for
 * their position:fixed — trapping the modal inside the box until focus leaves.
 * Emphasis is shadow/ring/border only (none of which create a containing block). */
.landing-auth .auth-widget {
    box-shadow: var(--shadow-sm);
    transition: box-shadow 160ms ease, border-color 160ms ease;
}

.landing-auth .auth-widget:focus-within {
    border-color: var(--field-border-focus);
    box-shadow: var(--shadow-md), 0 0 0 3px var(--field-focus-ring);
}

/* Modest floor so the box never reads as flimsy and minor tab swaps
 * (login ↔ confirm) don't jump. Register is taller by design and may exceed it. */
.landing-auth .splash-panel[data-active="true"] {
    min-height: 9rem;
}

@media (prefers-reduced-motion: reduce) {
    .landing-auth .auth-widget {
        transition: none;
    }
}

/* ── Below-fold sections ────────────────────────────────── */
.landing-section {
    padding: 3rem 0;
    border-top: 1px solid var(--border-color);
}

.landing-section-heading {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    color: var(--text-primary);
    text-align: center;
    margin: 0 0 2rem;
    font-weight: 600;
}

.landing-section-intro {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 38rem;
    margin: -1rem auto 2rem;
    text-align: center;
}

/* What it is — feature grid */
.landing-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem;
}

.landing-feature {
    background: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.landing-feature-icon {
    font-size: 2rem;
    margin-bottom: 0.6rem;
}

.landing-feature-title {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    font-weight: 600;
}

.landing-feature-text {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* How it works — numbered steps with screenshots */
.landing-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.landing-step {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "num body"
        "shot shot";
    gap: 0.5rem 1rem;
    align-items: start;
}

.landing-step-num {
    grid-area: num;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.landing-step-body { grid-area: body; }

.landing-step-title {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
    font-weight: 600;
}

.landing-step-text {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.landing-step .landing-shot {
    grid-area: shot;
    margin-top: 0.75rem;
}

/* Why not a spreadsheet — checklist */
.landing-checklist {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 34rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.landing-checklist li {
    position: relative;
    padding-left: 1.9rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.landing-checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary);
    font-weight: 700;
}

.landing-faq-link {
    text-align: center;
    margin: 2rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.95rem;
}

.landing-faq-link a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.landing-faq-link a:hover {
    text-decoration: underline;
}

/* Showcase */
.landing-showcase {
    text-align: center;
}

.landing-showcase-text {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 38rem;
    margin: -1rem auto 2rem;
}

/* ── Screenshot frame / placeholder ─────────────────────── */
.landing-shot {
    border-radius: 0.6rem;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    background: var(--content-bg);
}

.landing-shot-img {
    display: block;
    width: 100%;
    height: auto;
}

.landing-shot--placeholder {
    display: flex;
    flex-direction: column;
}

.landing-shot-chrome {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.8rem;
    background: var(--table-header-bg);
    border-bottom: 1px solid var(--border-color);
}

.landing-shot-chrome span {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--border-color);
}

.landing-shot-body {
    flex: 1;
    min-height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--text-muted);
    background:
        linear-gradient(135deg, var(--page-bg) 0%, var(--table-stripe-bg) 100%);
}

.landing-showcase .landing-shot {
    max-width: 56rem;
    margin: 0 auto;
}

/* ── Narrow container ─────────────────────────────────────────
 * Single column, reordered so the login/register tabs sit near the top
 * (above the fold) instead of below all the marketing copy:
 *   brand → auth (tabs) → marketing copy.
 * Uses @container (against .landing) rather than @media — no viewport breakpoint. */
@container (max-width: 48rem) {
    .landing-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "brand"
            "auth"
            "copy";
        column-gap: 0;
        row-gap: 1.25rem;
        padding-top: 1rem;
    }
    /* .landing-auth keeps its 23rem cap + centering from the base rule, so the
     * box never goes full-bleed even on phones (it just fills the column when
     * the viewport is narrower than the cap). */
}