/*
 * 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.
 */

/* The wrapper — not .landing itself — is the size container: the narrow-layout
 * query restyles .landing (flex reorder), and an element can't respond to its
 * own container query. Every @container rule below measures .landing-wrap. */
.landing-wrap {
    container-type: inline-size;
}

.landing {
    max-width: 70rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Smooth anchor jumps (hero + sticky-bar CTAs → #landing-auth). The app shell
 * scrolls inside .page-content (body is overflow:hidden), so the behavior must
 * live on the scroller, not on html. landing.css loads only on the landing
 * page, so this stays page-scoped. */
@media (prefers-reduced-motion: no-preference) {
    .page-content {
        scroll-behavior: smooth;
    }
}

/* ── 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) 21rem;
    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.35rem;
    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.
 * 21rem (was 23rem, 2026-08-19): the card is a side column, not the pitch. */
.landing-auth {
    grid-area: auth;
    align-self: start;
    justify-self: center;
    width: 100%;
    max-width: 21rem;
    /* Anchor jumps must clear the sticky top nav (.main-nav, 2.75rem). */
    scroll-margin-top: 3.5rem;
}


/* "Try the live demo →" INSIDE the auth card (auth-widget-lead slot): the
   FIRST CTA in the card, above the tabs — the no-commitment path comes before
   "create an account?". Deliberately a DIFFERENT hue from the gold card: a
   tinted sage panel (the palette's positive/"free" color) with a filled sage
   button, so it reads as an offer, not decoration — while the card's gold
   submit stays the primary action. Bleeds to the card's padding edges
   (.auth-widget: 0.7rem 1rem) to feel like a panel, not a widget. One button
   + ONE short line (landing.cta.demo_note_short) — no "or" divider. */
.auth-widget-lead {
    display: grid;
    gap: 0.3rem;
    margin: -0.7rem -1rem 0.5rem;          /* bleed to .auth-widget's padding */
    padding: 0.7rem 0.6rem 0.55rem;        /* narrow sides: the note needs the width */
    background: rgba(90, 138, 106, 0.12);  /* --success tint */
    border-bottom: 1px solid rgba(90, 138, 106, 0.35);
    border-radius: 0.5rem 0.5rem 0 0;      /* match .auth-widget's radius */
    text-align: center;
    font-family: var(--font-sans);
}
.landing-auth-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border-radius: 0.3rem;
    background: var(--success);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 0.2rem 0.6rem rgba(90, 138, 106, 0.35);
    transition: background-color 0.15s, transform 0.15s;
}
.landing-auth-demo:hover,
.landing-auth-demo:focus-visible {
    background: var(--success-hover);
    transform: translateY(-1px);
}
/* One line at the card's 21rem width (~62 en chars): small by design — it is
   a qualifier under the button, not body copy. Longer languages may wrap. */
.landing-auth-demo-note {
    font-size: 0.68rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #3f6a4d;
}

/* "Start planning" heading above the widget. Hidden on the wide layout (the
 * tabs + hero headline already frame the box there); shown by the narrow-layout
 * block below, where the auth card sits at the end of the page and needs its
 * own frame. */
.landing-auth-heading {
    display: none;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    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: 7rem;
}

@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;
}

/* Hero CTA pair — narrow layout only (see the block at the end of this file).
   On wide screens the auth widget sits right beside the hero copy, so buttons
   pointing at it would be noise. */
.landing-hero-cta {
    display: none;
}

/* Mid-page CTAs — after "How it works" and after the spreadsheet comparison.
   They jump to the auth widget (#landing-auth) and switch it to the
   register tab (login.js binds [data-cta-register]). */
.landing-cta {
    text-align: center;
    margin-top: 2.25rem;
}

.landing-cta-btn {
    display: inline-block;
    padding: 0.75rem 2.2rem;
    background: var(--primary);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: filter 0.15s ease;
}

/* Demo CTA — the SAME sage as the auth-card panel wherever it appears (hero
   on narrow, both mid-page CTA rows): one color = one meaning, "try it free". */
.landing-cta-btn--demo {
    background: var(--success);
    box-shadow: 0 0.2rem 0.6rem rgba(90, 138, 106, 0.35);
}
.landing-cta-btn--demo:hover {
    background: var(--success-hover);
    filter: none;
}

.landing-cta-btn:hover {
    filter: brightness(1.08);
}

/* Touch interaction: no 300ms double-tap-zoom delay, no gray tap flash, and a
 * clear pressed state (hover is meaningless on touch). Applies to every
 * landing tappable; desktop hover behavior is unchanged. */
.landing-cta-btn,
.landing-bar-btn,
.landing-faq-link a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.landing-cta-btn:active,
.landing-bar-btn:active {
    filter: brightness(0.92);
}

.landing-cta-note {
    margin: 0.55rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
}

/* Secondary link under the spreadsheet CTA — deliberately quiet. */
.landing-faq-link {
    text-align: center;
    margin: 1rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.85rem;
}

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

.landing-faq-link a:hover {
    color: var(--primary);
    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 layout (phones / narrow windows) ──────────────────
 * Mobile visitors get the SALES PITCH first and the auth card LAST — the
 * opposite of the wide layout, where the form sits beside the copy. Order:
 *   brand → hero copy (+ its own CTA pair) → all marketing sections → auth.
 * Mechanics: .landing becomes a flex column, the hero grid dissolves
 * (display: contents) so brand/copy/auth become direct flex items, and the
 * auth aside is pushed to the end with `order`. The sticky bottom bar
 * (below) keeps signup one tap away the whole way down.
 * Uses @container (against .landing-wrap) rather than @media — no viewport
 * breakpoint. Trade-off: DOM/tab order still has the auth form early; visual
 * order diverges only on narrow screens, where CTAs anchor to it anyway. */
@container (max-width: 48rem) {
    .landing {
        display: flex;
        flex-direction: column;
        /* .page-content already provides the 1.25rem side gutters — .landing's
         * own horizontal padding would double them to 2.5rem per side on a
         * phone. Bottom padding reserves room for the fixed sticky bar. */
        padding: 0 0 5.5rem;
    }

    .landing-hero {
        display: contents;
    }

    .landing-hero > .splash-brand {
        margin-top: 1.25rem;
    }

    .landing-hero-copy {
        max-width: none;
        padding: 0.75rem 0 1.75rem;
    }

    /* Bigger, calmer hero type — the phone headline IS the first impression. */
    .landing-hero-headline {
        font-size: 2.15rem;
        line-height: 1.12;
    }

    .landing-hero-subhead {
        font-size: 1.06rem;
        line-height: 1.55;
        margin-bottom: 1.1rem;
    }

    /* Benefits: tight stack — three short problem statements, not three cards.
     * Smaller icon disc and a compact gap so the whole list + CTAs stay
     * within one phone screen of the headline. */
    .landing-benefits {
        gap: 0.6rem;
    }

    .landing-benefit {
        gap: 0.65rem;
    }

    .landing-benefit-icon {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 1.15rem;
    }

    .landing-benefit-text strong {
        font-size: 0.95rem;
        line-height: 1.3;
    }

    .landing-benefit-text span {
        font-size: 0.86rem;
        line-height: 1.4;
    }

    .landing-hero-cta {
        display: grid;
        gap: 0.55rem;
        margin-top: 1.1rem;
    }

    .landing-hero-cta .landing-cta-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 3rem;
        padding: 0.5rem 1.5rem;
        font-size: 1.05rem;
        border-radius: 0.7rem;
    }

    .landing-cta-btn--ghost {
        background: var(--content-bg);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
        box-shadow: none;
    }

    .landing-hero-cta .landing-cta-note {
        text-align: center;
        margin-top: 0.15rem;
    }

    /* Auth card last; keep its width cap and center it in the flex column. */
    .landing-auth {
        order: 1;
        align-self: center;
        margin: 0 0 0.75rem;
    }

    .landing-auth-heading {
        display: block;
    }

    /* Tighter section rhythm on small screens. */
    .landing-section {
        padding: 2.25rem 0;
    }

    .landing-section-heading {
        font-size: 1.6rem;
        margin-bottom: 1.4rem;
    }

    .landing-section-intro {
        margin-top: -0.6rem;
    }

    /* Screenshots are DESKTOP captures — full-width on a phone they are
     * unreadable. Center-crop them (~56% of the frame) so the content is
     * legible; replace with true mobile captures when available. */
    .landing-shot {
        overflow: hidden;
    }

    .landing-shot-img {
        width: 178%;
        max-width: none;
        margin-left: -39%;
    }

    /* "One wedding, many moving parts" — compact 2×2 tile grid. */
    .landing-layers .landing-feature-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.7rem;
    }

    .landing-layers .landing-feature {
        padding: 0.9rem;
    }

    .landing-layers .landing-feature-icon {
        font-size: 1.4rem;
        margin-bottom: 0.35rem;
    }

    .landing-layers .landing-feature-title {
        font-size: 1.05rem;
    }

    .landing-layers .landing-feature-text {
        font-size: 0.85rem;
    }
}

/* ── Sticky bottom CTA bar ────────────────────────────────────
 * Fixed to the viewport, so this one IS viewport-media-gated (a container
 * query can't size a position:fixed overlay). Shown only while the auth card
 * is off-screen — login.js drives data-visible; scrolling to the card (or past
 * the threshold back up) hides it. z-index below the splash modals (40) and
 * the sticky nav (200). */
.landing-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    max-width: 30rem;
    margin: 0 auto;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: var(--page-bg); /* fallback where color-mix is unsupported */
    background: color-mix(in srgb, var(--page-bg) 94%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color);
}

@media (max-width: 48rem) {
    .landing-bar[data-visible="true"] {
        display: flex;
    }
}

.landing-bar-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

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

.landing-bar-text span {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--text-muted);
}

.landing-bar-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0 1.4rem;
    background: var(--primary);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    border-radius: 0.7rem;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}