/* GotOne Labs landing page (layout/labsview.py). Matches gotoneapp.com:
   Helvetica Neue, navy #091d50, yellow #ffe000 buttons with navy text.
   Everything is scoped to .labs-page (Dash loads every asset on every page). */


.labs-page {
    --labs-navy: #091d50;
    --labs-navy-2: #0d2563;
    --labs-yellow: #ffe000;
    --labs-ink: #0f1d3d;
    --labs-ink-2: #44506a;
    --labs-bg: #f3f5fa;
    --labs-line: #dfe4ee;
    /* gotone.css locks html/body (overflow: hidden) for the full-screen map
       pages, so this page is its own scroller, exactly the screen's height.
       (Unlocking body with html:has(.labs-page) failed in some browsers: the
       page swaps in after load and :has wasn't re-checked.) */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    display: flex;
    flex-direction: column;
    background: var(--labs-bg);
    color: var(--labs-ink);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.labs-page a { color: inherit; }
.labs-wrap {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Top bar + hero (one navy band, like the marketing site's header) */
.labs-top { background: var(--labs-navy); }
.labs-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding-top: max(0px, env(safe-area-inset-top));
}
.labs-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.labs-brand img { height: 42px; width: auto; display: block; }
.labs-word {
    border-left: 2px solid rgba(255, 255, 255, 0.35);
    padding-left: 12px;
    line-height: 1.1;
    color: var(--labs-yellow);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.labs-toplink {
    color: #ffffff !important;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    opacity: 0.85;
}
.labs-toplink:hover { opacity: 1; text-decoration: underline; }

.labs-hero { background: var(--labs-navy); padding: 28px 0 64px; }
.labs-hero h1 {
    color: var(--labs-yellow);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0 0 14px;
    max-width: 21ch;
}
.labs-hero p {
    color: #ffffff;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    line-height: 1.45;
    margin: 0;
    max-width: 40ch;
}

/* Tiles: pulled up over the navy band */
.labs-main { flex: 1; padding-bottom: 48px; }
.labs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: -36px;
}
.labs-tile {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(9, 29, 80, 0.08), 0 10px 30px rgba(9, 29, 80, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.labs-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(9, 29, 80, 0.10), 0 16px 40px rgba(9, 29, 80, 0.18);
}
.labs-tile:focus-visible { outline: 3px solid var(--labs-yellow); outline-offset: 3px; }
.labs-shot { aspect-ratio: 16 / 9; background: var(--labs-navy); overflow: hidden; }
.labs-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.labs-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px 24px;
    flex: 1;
}
.labs-kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--labs-ink-2);
}
.labs-pill {
    background: var(--labs-yellow);
    color: var(--labs-navy);
    border-radius: 100px;
    padding: 2px 10px;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}
.labs-tile h2 {
    color: var(--labs-navy);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 2px 0 0;
}
.labs-hook {
    color: var(--labs-ink);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}
.labs-text {
    color: var(--labs-ink-2);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    flex: 1;
}
.labs-btn {
    align-self: flex-start;
    margin-top: 10px;
    background: var(--labs-yellow);
    color: var(--labs-navy);
    border-radius: 100px;
    padding: 12px 22px;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.labs-tile:hover .labs-btn { background: #ffe94d; }

.labs-more {
    text-align: center;
    color: var(--labs-ink-2);
    margin: 28px 0 8px;
    font-size: 0.95rem;
}

.labs-about {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    border-top: 1px solid var(--labs-line);
    margin-top: 28px;
    padding-top: 28px;
}
.labs-about h3 {
    color: var(--labs-navy);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 6px;
}
.labs-about p { color: var(--labs-ink-2); font-size: 0.98rem; line-height: 1.55; margin: 0; }
.labs-about a { color: #0b4fd6; font-weight: 600; }

.labs-foot {
    background: var(--labs-navy);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    padding: 18px 0 max(18px, env(safe-area-inset-bottom));
}

@media (max-width: 600px) {
    .labs-topbar { min-height: 60px; }
    .labs-brand img { height: 34px; }
    .labs-word { font-size: 1.35rem; }
    .labs-hero { padding: 18px 0 56px; }
    .labs-grid { gap: 18px; grid-template-columns: 1fr; }
    .labs-body { padding: 18px 18px 22px; }
    .labs-btn { align-self: stretch; text-align: center; padding: 14px 20px; }
}