/* /index — landing page. Hero (brand mark + tagline + whole-site lede), three
   EQUAL tool rows (full-width cards: product shot one side, copy the other,
   sides alternating), and a demoted "Why local-first?" footnote. Every tool
   gets identical chrome — kicker + name + lead + body + pinned CTA — so none
   reads as lesser. Tokens only. Product shots: /img/landing/*, regenerated by
   tests/e2e/capture-landing.mjs. */

/* The global `main` is capped at 880px (site.css) — too narrow for a product
   landing. Widen it ONLY when it contains the landing (self-gating via :has, so
   it's SPA-safe and never affects /privacy, /settings, /edet, etc.). */
main:has(.landing) { max-width: 1140px; }

.landing {
    /* horizontal + vertical padding come from `main` (responsive); don't double it */
    color: var(--fg);
}

/* ---- Hero ----
   One clean left column: brand mark, then the short tagline as the lead
   message, then the longer whole-site lede as a QUIET sub-note. Hierarchy is
   brand (bright) > tagline (muted) > lede (dim + smaller) so the eye lands on
   the short message, not the explanatory sentence. No divider rule. The mark
   borrows the site header/footer brand treatment (font-brand, lowercase,
   tracked, accent dot) at hero size so / reads as the canonical front door. */
.landing-hero {
    max-width: 760px;
    margin-bottom: 3.5rem;
}
/* One clean left column: wordmark leads, tagline (the short message) beneath it,
   then the longer lede as a quiet dim sub-note. The mascot lives in the header
   on every page, so the hero doesn't repeat it (the pro default: one logo). */
.landing-mark {
    margin: 0 0 1.1rem;
    font-family: var(--font-brand);
    font-size: clamp(1.9rem, 5vw, 2.7rem);
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    line-height: 1.05;
    color: var(--fg);
}
.landing-mark .dot { color: var(--accent); }
.landing-tagline {
    margin: 0 0 1.15rem;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--fg-muted);
}
.landing-lede {
    margin: 0;
    max-width: 600px;
    font-size: 0.86rem;
    line-height: 1.7;
    color: var(--fg-dim);
}

/* ---- Section + heading ---- */
.landing-section { margin-bottom: 3.5rem; }
.landing-section-h {
    margin: 0 0 1.5rem;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--fg);
}

/* ---- Tool rows — three equal full-width cards ---- */
.landing-rows {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.landing-row {
    display: grid;
    grid-template-columns: 1.55fr 1fr;     /* media | copy */
    align-items: center;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: var(--panel-bg);
    overflow: hidden;                       /* clip the full-bleed shot to the radius */
    transition: border-color var(--dur-fast) var(--ease-smooth),
                background var(--dur-fast) var(--ease-smooth);
}
.landing-row:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 4%, var(--panel-bg));
}
/* Alternate the shot to the right for rhythm. */
.landing-row--rev { grid-template-columns: 1fr 1.55fr; }
.landing-row--rev .landing-row-body { order: 1; }
.landing-row--rev .landing-row-media { order: 2; }

.landing-row-media { min-width: 0; line-height: 0; }
/* Full-bleed 16:10 shot (NOT height:100% — that stretches it to the copy column
   and crops the UI to a portrait sliver). object-position keeps the informative
   top-left (sidebars / first cards / tiles) if a crop is ever needed. */
.landing-shot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
    background: var(--bg-elevated);
}
.landing-row-body {
    min-width: 0;
    padding: 1.9rem 2rem;
}

/* ---- Shared tool copy ---- */
.landing-kicker {
    margin: 0 0 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--fg-dim);
}
.landing-tool-name {
    margin: 0 0 0.45rem;
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.02em;
}
.landing-tool-lead {
    margin: 0 0 0.65rem;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--fg);
}
.landing-tool-body {
    margin: 0 0 1.25rem;
    font-size: 0.89rem;
    line-height: 1.7;
    color: var(--fg-muted);
}
/* Bracketed accent CTA — matches the [Add music] pattern from the music
   library empty-state. Mono, accent-tinted bg + border + text, lifts on hover.
   `border-bottom-color` overrides the global anchor dotted-underline. */
.landing-tool-cta {
    display: inline-block;
    padding: 7px 16px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid var(--accent);
    border-radius: 5px;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-smooth),
                color var(--dur-fast) var(--ease-smooth);
}
.landing-tool-cta:hover {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    border-bottom-color: var(--accent);
}
.landing-tool-cta:focus { outline: none; }
.landing-tool-cta:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- "Why local-first?" — a three-up values band that fills the width ----
   No top rule: with the hero divider gone, sections are separated by whitespace
   alone for consistency. The Tools section's margin-bottom carries the gap. */
.landing-why {
    padding-top: 0;
}
.landing-why-h {
    margin: 0 0 1.4rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--fg);
}
.landing-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.landing-why-item h3 {
    margin: 0 0 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--fg);
}
.landing-why-item p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.7;
    color: var(--fg-muted);
}

/* ---- Responsive ----
   Below 900px every row stacks: shot on top (always — even reversed rows),
   copy below. Same shape for all three, top to bottom. */
@media (max-width: 900px) {
    .landing-row,
    .landing-row--rev { grid-template-columns: 1fr; }
    .landing-row-media,
    .landing-row--rev .landing-row-media { order: 1; }
    .landing-row-body,
    .landing-row--rev .landing-row-body { order: 2; padding: 1.5rem 1.6rem 1.7rem; }
}
@media (max-width: 760px) {
    .landing-why-grid { grid-template-columns: 1fr; gap: 1.4rem; }
}
@media (max-width: 600px) {
    /* Wordmark + tagline + lede sizing is fluid (clamp), so the hero needs no fixed
       overrides here — just a tighter bottom margin on the narrowest screens. */
    .landing-hero { margin-bottom: 2.25rem; }
    .landing-section { margin-bottom: 2.5rem; }
    .landing-rows { gap: 1.1rem; }
}