/**
 * trivia1.com /host — SIGNED-OUT guest landing. A short, factual host pitch +
 * an inline create-account / sign-in card beside the host illustration, on the
 * standard layout (universal header/footer). Solid brand surfaces, ZERO
 * gradients. Reuses the .t1x- patterns from trivia-home.css (join band, band,
 * eyebrow) and the auth-card typography from trivia-auth.css; this file only
 * adds the landing's two-column shell + pitch styling. Guests only — signed-in
 * hosts get the configurator on layouts.account and never load this. Linked via
 * @push('styles'). Built on the app tokens in trivia-app.css.
 */
.t1x-hostland { width: 100%; }

/* Two-column shell: pitch + auth card (left) beside the illustration (right).
   Single column on mobile; the illustration is hidden there so the form owns
   the screen (mirrors .t1x-auth-visual). */
.t1x-hostland-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    align-items: center;
}

.t1x-hostland-lead { min-width: 0; }
.t1x-hostland-h {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    line-height: 1.1;
    font-size: clamp(1.9rem, 4.5vw, 2.9rem);
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0 0 0.8rem;
}
.t1x-hostland-sub {
    margin: 0 0 1.4rem;
    max-width: 48ch;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary, #b0b0cc);
}

.t1x-hostland-points {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: grid;
    gap: 0.7rem;
    max-width: 48ch;
}
.t1x-hostland-points li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--text-primary, #f1f1f1);
}
.t1x-hostland-points i {
    flex: none;
    margin-top: 0.22rem;
    color: #a5b4fc;
}

/* Inline auth card — a solid brand surface housing the shared _register-form.
   Mirrors .t1x-auth-card's surface treatment; .t1x-auth-form (trivia-auth.css)
   styles the form within. */
.t1x-hostland-card {
    background: var(--bg-secondary, #1a1a35);
    border: 1px solid var(--border-color, #2a2a4a);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
    max-width: 30rem;
}
/* The card owns the padding; the auth-form's viewport-scroll behavior (meant
   for the full-screen auth split) isn't wanted in this in-flow card. */
.t1x-hostland-card .t1x-auth-form {
    padding: 1.75rem 1.5rem;
    overflow: visible;
}

/* Illustration — hidden on mobile (the form owns the screen), shown as the
   right column on wide viewports. Mirrors .t1x-auth-visual. */
.t1x-hostland-visual { display: none; }
.t1x-hostland-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 900px) {
    .t1x-hostland-grid { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; }
    .t1x-hostland-visual { display: block; }
}

/* Host landing v2 — centered create-account card + slide image-flip
   (host doesn't load trivia-play.css, so define is-flip here). */
.t1x-hostland-signup { display: flex; justify-content: center; }
.t1x-hostland-card { width: 100%; max-width: 540px; background: var(--bg-secondary, #1a1a35); border: 1px solid var(--border-color, #2a2a4a); border-radius: 18px; overflow: hidden; }
@media (min-width: 900px) {
    .t1x-hslide.is-flip .t1x-hslide-media { order: 2; }
}