/* ============================================================================
   The anonymous landing page at /.

   Token-only (docs/DESIGN_PRINCIPLES.md section 2), so both themes are covered without a
   single one-theme patch. Deliberately NOT in lufulus.css: / is no longer a Lufulus surface, and
   the rules it replaces there hard-coded a game photograph as the page background with body copy
   laid over it - a one-theme fix wearing a token's clothes, since it only cleared contrast because
   that particular image happens to be dark.

   Body copy is left-aligned and capped near 65ch throughout; centred body text is an explicit
   anti-pattern in the doctrine (section 6) and the old hero centred everything.
   ============================================================================ */

.public-launch-page {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md) var(--space-2xl);
    /* The shell's <main> is a flex column; a flex item's default min-width:auto lets any wide
       descendant (a long <code> path in the agent panel) push the whole page past the viewport. */
    min-width: 0;
}

.gh-home-section + .gh-home-section {
    margin-top: var(--space-2xl);
}

.gh-home-section h2 {
    margin: 0 0 var(--space-md);
    color: var(--text-primary);
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: var(--lh-tight);
}

/* ---- Masthead ----------------------------------------------------------- */

.gh-home-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: center;
}

.gh-home-lockup {
    margin: 0 0 var(--space-md);
}

.gh-home-lockup .brand-lockup {
    display: block;
}

/* .brand-logo-new sets height:100%, which collapses inside a block heading that has no height of
   its own. Size from the width here and let the aspect ratio do the rest. */
.gh-home-lockup .brand-logo-new {
    width: min(100%, 18rem);
    height: auto;
}

.gh-home-lede {
    max-width: 60ch;
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-lg);
    line-height: var(--lh-base);
}

.gh-home-facts {
    margin: var(--space-sm) 0 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.gh-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-lg);
}

.gh-home-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
}

/* The site's own brand art, bounded and beside the copy - never behind it. */
.gh-home-hero-media {
    display: none;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-media-bg);
}

.gh-home-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Games -------------------------------------------------------------- */

.gh-home-games {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.gh-home-game {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-lg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    transition: border-color var(--dur-base) var(--ease-standard);
}

.gh-home-game:hover {
    border-color: var(--accent);
}

.gh-home-game-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs);
}

.gh-home-game h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: var(--lh-tight);
}

.gh-home-game-status {
    padding: 0 var(--space-xs);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    background: var(--bg-hover);
    font-size: var(--fs-xs);
    line-height: 1.8;
}

.gh-home-game-status.is-early {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 14%, transparent);
}

.gh-home-game p {
    max-width: 58ch;
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--lh-base);
}

.gh-home-game-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-2xs);
}

.gh-home-game-links a {
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
}

.gh-home-game-links a:hover,
.gh-home-game-links a:focus-visible {
    text-decoration: underline;
}

.gh-home-note {
    max-width: 65ch;
    margin: var(--space-md) 0 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

/* ---- The humans / agents switch ----------------------------------------- */

.gh-home-about-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-bottom: var(--space-xs);
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.gh-home-about-head h2 {
    margin: 0;
}

.gh-audience-switch {
    display: inline-flex;
    padding: var(--space-2xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-input);
}

.gh-audience-switch a {
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-standard),
                background-color var(--dur-fast) var(--ease-standard);
}

.gh-audience-switch a:hover {
    color: var(--text-primary);
}

/* The active pill is a raised SURFACE with accent text, not an accent fill with white text.
   --text-on-accent over --accent measures 2.60:1 in the dark theme, well under the AA floor for
   text this size; --accent over --bg-card measures 6.6:1 and 6.5:1 in dark and light. (The site's
   own .btn-primary has the same 2.60:1 problem in dark, which is a token-level fix for a separate
   pass - but there is no reason to author a second instance of it here.) */
.gh-audience-switch a[aria-current="true"] {
    color: var(--accent);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

/* Both panels are always in the HTML and both are reachable at real URLs (/?view=human and
   /?view=agent); only the server-rendered attribute below decides which one is shown. With
   scripting off the links still work, because the server honours ?view=. */
.gh-audience-panel p,
.gh-audience-panel li {
    max-width: 68ch;
    color: var(--text-secondary);
    line-height: var(--lh-base);
}

.gh-audience-panel p {
    margin: 0 0 var(--space-sm);
}

.gh-audience-panel ul {
    margin: 0;
    padding-left: var(--space-lg);
}

.gh-audience-panel li + li {
    margin-top: var(--space-2xs);
}

.gh-audience-panel code {
    /* Long paths must wrap rather than widen the page: the layout audit fails a whole route on
       horizontal page scroll at 375. */
    overflow-wrap: anywhere;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}

[data-audience="human"] .gh-audience-panel[data-audience-panel="agent"],
[data-audience="agent"] .gh-audience-panel[data-audience-panel="human"] {
    display: none;
}

/* ---- Account line ------------------------------------------------------- */

.gh-home-account {
    max-width: 65ch;
    margin: var(--space-2xl) 0 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
    color: var(--text-secondary);
    line-height: var(--lh-base);
}

.gh-home-account a {
    color: var(--accent);
    font-weight: 500;
}

/* ---- Responsive: canonical breakpoints only ----------------------------- */

@media (min-width: 768px) {
    .gh-home-games {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .gh-home-hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    }

    .gh-home-hero-media {
        display: block;
        aspect-ratio: 4 / 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gh-home-game,
    .gh-audience-switch a {
        transition: none;
    }
}