/* ── Public pages: the frame, type and spacing, from phones to big screens ──
   Loaded right after home.css on the public pages only (lib/vite-assets.js PUBLIC_ENTRIES and their
   frontend/entries/); the app pages and the editor don't load it. Phones get a 16 px frame, iPads (641–1,023 px)
   their own grids and the header's links in the bar where they fit, and from 1,024 the frame, type and spacing grow.
   Home's headline sits beside its code box from 1,600. */

/* 1. Tokens. The frame's existing variables are worked out from --st-gutter and --st-container-max, so every
   rule in home.css that reads them follows. Phones: 16 px from the screen's edge to the frame and 16 px inside it
   (home.css has 20 and 20). From 641 to 1,023 they give exactly what home.css gives. */
.marketing-site {
    --st-gutter: 16px;
    --st-container-max: 1120px;
    --st-outline-w: min(var(--st-container-max), calc(100% - 2 * var(--st-gutter)));
    --st-outline-left: max(var(--st-gutter), calc(50% - var(--st-outline-w) / 2));
    --st-inset: 16px;

    /* Type. Each minimum is at least today's phone size for the headings that use it. */
    --st-fs-display: clamp(2.5rem, 1.671rem + 3.536vw, 4.5rem);
    --st-fs-h1: clamp(2.7rem, 1.379rem + 2.652vw, 3.5rem);
    --st-fs-h2: clamp(2rem, 1.409rem + 1.989vw, 3rem);
    --st-fs-h3-lg: clamp(1.75rem, 1.189rem + 1.326vw, 2.25rem);
    --st-fs-h3: 1.125rem;
    --st-fs-lead: 1rem;
    --st-fs-small: 0.875rem;
    --st-fs-ui: 0.75rem;
    --st-fs-eyebrow: 0.75rem;

    /* Spacing */
    --st-space-section: clamp(3.5rem, 2.671rem + 3.536vw, 5.5rem);
    --st-space-section-sm: clamp(2.5rem, 2.086rem + 1.768vw, 3.5rem);
    --st-space-head: clamp(1.75rem, 1.439rem + 1.326vw, 2.5rem);
    --st-gap: clamp(1rem, 0.793rem + 0.884vw, 1.5rem);
}

/* iPads keep home.css's frame: 20 px outside it and 36 px inside. */
@media (min-width: 641px) {
    .marketing-site {
        --st-gutter: 20px;
        --st-inset: 36px;
    }
}

/* Frame: 1,152 from 1,024 (the window less 64 until it fits), 1,296 from 1,440, 1,440 from 1,920 and 1,584 from
   2,560. Each is a whole number of 72 px grid cells. */
@media (min-width: 1024px) {
    .marketing-site {
        --st-gutter: 32px;
        --st-container-max: 1152px;
        --st-inset: 32px;
        --st-fs-ui: 0.8125rem;
    }
}

@media (min-width: 1280px) {
    .marketing-site {
        --st-gutter: 40px;
        --st-inset: 40px;
        --st-fs-h3: 1.25rem;
    }
}

/* From here the headings and section spacing grow again, slowly, from where they stopped at 1,280. */
@media (min-width: 1440px) {
    .marketing-site {
        --st-container-max: 1296px;
        --st-inset: 44px;
        --st-fs-display: clamp(4.5rem, 2.5rem + 2.083vw, 5.5rem);
        --st-fs-h1: clamp(3.5rem, 2rem + 1.667vw, 4rem);
        --st-fs-h2: clamp(3rem, 1.5rem + 1.667vw, 3.5rem);
        --st-fs-h3-lg: clamp(2.25rem, 1.5rem + 0.833vw, 2.5rem);
        --st-fs-lead: 1.0625rem;
        --st-fs-small: 0.9375rem;
        --st-space-section: clamp(5.5rem, 3rem + 2.5vw, 7.5rem);
    }
}

@media (min-width: 1920px) {
    .marketing-site {
        --st-gutter: 48px;
        --st-container-max: 1440px;
        --st-inset: 48px;
        --st-fs-h3: 1.375rem;
        --st-fs-lead: 1.125rem;
        --st-fs-small: 1rem;
        --st-fs-ui: 0.875rem;
        --st-fs-eyebrow: 0.8125rem;
    }
}

@media (min-width: 2560px) {
    .marketing-site {
        --st-container-max: 1584px;
        --st-inset: 56px;
    }
}

/* Phones. The section lines' bolts sit on the frame (home.css puts them 20 px in), and the footer's last line starts
   where its columns do. */
@media (max-width: 640px) {
    .marketing-site .st-divider-bolt--l {
        left: var(--st-outline-left);
    }

    .marketing-site .st-divider-bolt--r {
        right: var(--st-outline-left);
    }

    .marketing-site .st-footer-bottom {
        padding-left: var(--st-inset);
        padding-right: var(--st-inset);
    }
}

/* iPads (641–1,023): grids between the phone's one column and the desktop's three. */
@media (min-width: 641px) and (max-width: 1023px) {
    /* Features: two a row. */
    .marketing-site .st-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Games: two a row and the third centred under them (four tracks, each game across two). */
    .marketing-site .st-update-examples {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .marketing-site .st-update-examples > * {
        grid-column: span 2;
    }

    .marketing-site .st-update-examples > :last-child:nth-child(odd) {
        grid-column: 2 / span 2;
    }

    /* Collab: one column, the words before the demo. */
    .marketing-site .st-collab-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding-left: clamp(24px, 5vw, 40px);
        padding-right: clamp(16px, 4vw, 28px);
    }

    .marketing-site .st-collab-copy {
        justify-self: stretch;
        max-width: none;
    }

    .marketing-site .st-collab-stage {
        min-height: 280px;
        order: 0;
    }

    .marketing-site .st-collab-editor {
        margin: 0;
    }
}

/* Home's starter cards: two and a bit in view, and two and a half from 768 (home.css: 240 or 260 px at any width).
   Their row is the window less the gutters, the stage's arrows and 4 px, and the cards are 12 px apart. */
@media (min-width: 641px) and (max-width: 767px) {
    .marketing-site .st-home .st-stacks-track .st-fwcard {
        flex-basis: 252px;
        width: 252px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .marketing-site .st-home .st-stacks-track .st-fwcard {
        flex-basis: calc((100vw - 2 * var(--st-gutter) - 72px) / 2.5 - 12px);
        width: calc((100vw - 2 * var(--st-gutter) - 72px) / 2.5 - 12px);
    }

    /* Use cases: three a row, with less padding. */
    .marketing-site .st-diff-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .marketing-site .st-diff-card {
        padding: 20px;
    }
}

/* Pygame: its definitions and games three a row from 768 (pygame-online.css stacks them up to 900). */
@media (min-width: 768px) and (max-width: 900px) {
    .marketing-site .pg-definitions,
    .marketing-site .pg-games {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .marketing-site .pg-game {
        display: block;
    }

    .marketing-site .pg-game-art {
        height: 180px;
        min-height: 0;
    }
}

/* Featured (home and Discover): as many 280 px cards as fit, centred, so two projects don't leave half a row
   empty. */
@media (min-width: 641px) {
    .marketing-site .st-catpromo-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 280px));
        justify-content: center;
    }
}

/* The header on iPads. The four links sit in the bar where they fit and the menu stays where they don't, decided on
   the server: languages.js navWide says where each language's links fit, and topnav-marketing.ejs adds st-nav--long
   where they don't at 768, and st-nav--fits-820 as well where they do from 820. No script, so nothing jumps. */

/* Where the menu stays (home.css shows it up to 900) it is a 320 px panel under its button. */
@media (min-width: 641px) and (max-width: 900px) {
    .marketing-site .st-nav .st-nav-links {
        inset-inline-start: auto;
        inset-inline-end: var(--st-inset);
        width: 320px;
    }
}

/* The links in the bar from 768, or from 820 for st-nav--fits-820 (the same rules twice). */
@media (min-width: 768px) and (max-width: 900px) {
    .marketing-site .st-nav:not(.st-nav--long) .st-nav-bar {
        grid-template-columns: auto 1fr auto;
        gap: 20px;
    }

    .marketing-site .st-nav:not(.st-nav--long) .st-nav-menu-btn {
        display: none;
    }

    .marketing-site .st-nav:not(.st-nav--long) .st-nav-actions {
        grid-column: 3;
    }

    .marketing-site .st-nav:not(.st-nav--long) .st-nav-links {
        position: static;
        display: flex;
        grid-column: 2;
        grid-row: 1;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: auto;
        max-height: none;
        overflow: visible;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .marketing-site .st-nav:not(.st-nav--long) .st-nav-link {
        min-height: 0;
        padding: 8px 10px;
    }
}

@media (min-width: 820px) and (max-width: 900px) {
    .marketing-site .st-nav.st-nav--fits-820 .st-nav-bar {
        grid-template-columns: auto 1fr auto;
        gap: 20px;
    }

    .marketing-site .st-nav.st-nav--fits-820 .st-nav-menu-btn {
        display: none;
    }

    .marketing-site .st-nav.st-nav--fits-820 .st-nav-actions {
        grid-column: 3;
    }

    .marketing-site .st-nav.st-nav--fits-820 .st-nav-links {
        position: static;
        display: flex;
        grid-column: 2;
        grid-row: 1;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: auto;
        max-height: none;
        overflow: visible;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .marketing-site .st-nav.st-nav--fits-820 .st-nav-link {
        min-height: 0;
        padding: 8px 10px;
    }
}

/* 901–1,023: the menu stays for the languages whose links fit only from 1,024 (as home.css draws it up to 900). */
@media (min-width: 901px) and (max-width: 1023px) {
    .marketing-site .st-nav--long:not(.st-nav--fits-820) .st-nav-bar {
        grid-template-columns: 1fr auto auto;
        gap: 10px 12px;
        position: relative;
    }

    .marketing-site .st-nav--long:not(.st-nav--fits-820) .st-nav-brand {
        grid-column: 1;
        grid-row: 1;
        min-width: max-content;
    }

    .marketing-site .st-nav--long:not(.st-nav--fits-820) .st-nav-menu-btn {
        display: inline-flex;
        grid-column: 3;
        grid-row: 1;
    }

    .marketing-site .st-nav--long:not(.st-nav--fits-820) .st-nav-actions {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
        min-width: 0;
        position: relative;
        z-index: 620;
    }

    .marketing-site .st-nav--long:not(.st-nav--fits-820) .st-nav-links {
        position: absolute;
        top: calc(100% + 8px);
        inset-inline-start: auto;
        inset-inline-end: var(--st-inset);
        z-index: 510;
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 320px;
        max-height: min(72vh, calc(100dvh - var(--st-nav-h) - 24px));
        overflow-y: auto;
        padding: 8px;
        margin: 0;
        border: 1px solid var(--st-line-strong);
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 18px 48px rgba(18, 18, 18, 0.16);
    }

    .marketing-site .st-nav--long:not(.st-nav--fits-820).is-nav-open .st-nav-links {
        display: flex;
    }

    .marketing-site .st-nav--long:not(.st-nav--fits-820) .st-nav-link {
        justify-content: space-between;
        min-height: 44px;
        padding: 10px 4px;
    }

    .marketing-site .st-nav--long:not(.st-nav--fits-820).is-nav-open {
        background: #ffffff;
        box-shadow: 0 8px 28px rgba(18, 18, 18, 0.1);
    }
}

/* Touch screens: Log in, Sign up and the menu button are a finger tall. */
@media (pointer: coarse) {
    .marketing-site .st-nav-bar .st-nav-btn {
        min-height: 44px;
    }

    .marketing-site .st-nav-bar .st-nav-menu-btn {
        width: 44px;
        height: 44px;
    }
}

@media (min-width: 1024px) {
    /* 2. Type: one main-heading size a width. Home's headline is the display size, every other page's H1 the
       H1 size (pygame's from 1,440, below). */
    .marketing-site .st-hero-title {
        font-size: var(--st-fs-display);
    }

    .marketing-site h1.st-h2,
    .marketing-site .st-h1,
    .marketing-site .st-pr-hero .st-hero-title,
    .marketing-site .st-pr-title,
    .marketing-site .st-discover-title,
    .marketing-site .st-about-title,
    .marketing-site .st-catalog-title,
    .marketing-site .st-gui-show-head .st-update-title {
        font-size: var(--st-fs-h1);
    }

    .marketing-site .st-h2,
    .marketing-site .st-update-title,
    .marketing-site .pg-section h2 {
        font-size: var(--st-fs-h2);
    }

    .marketing-site .st-gui-games-title {
        font-size: var(--st-fs-h3-lg);
    }

    .marketing-site .st-feature-card h3,
    .marketing-site .st-diff-card h3 {
        font-size: var(--st-fs-h3);
    }

    .marketing-site .st-feature-card p,
    .marketing-site .st-diff-card p {
        font-size: var(--st-fs-small);
    }

    .marketing-site .st-lead,
    .marketing-site .st-update-lead {
        font-size: var(--st-fs-lead);
    }

    /* A lead keeps its line length as it grows; the collab column and product pages keep their own width. */
    .marketing-site .st-lead:not(.st-product-lead, .st-collab-copy .st-lead) {
        max-width: 36em;
    }

    .marketing-site .st-nav-link,
    .marketing-site .st-nav-btn,
    .marketing-site .st-btn:not(.st-btn--sm, .st-auth-switch-btn) {
        font-size: var(--st-fs-ui);
    }

    .marketing-site .st-eyebrow:not(.st-blog-card-tag) {
        font-size: var(--st-fs-eyebrow);
    }

    /* 3. Section spacing. /boost's own hero and plans sections (.st-pr-hero-section, .st-pr-plans-section) keep
       theirs. */
    .marketing-site .st-section:not(.st-pr-hero-section, .st-pr-plans-section),
    .marketing-site .st-catpromo:not(.st-discover-gallery),
    .marketing-site .st-collab,
    .marketing-site .st-gui-show,
    .marketing-site .pg-section {
        padding-top: var(--st-space-section);
        padding-bottom: var(--st-space-section);
    }

    .marketing-site .st-section.st-section--tight,
    .marketing-site .st-update {
        padding-top: var(--st-space-section-sm);
        padding-bottom: var(--st-space-section-sm);
    }

    .marketing-site .st-section-head {
        margin-bottom: var(--st-space-head);
    }

    .marketing-site .st-diff-grid,
    .marketing-site .st-update-examples {
        gap: var(--st-gap);
    }

    /* 4. Widths that don't grow with the frame. /boost's plans keep today's 1,048 px (its plans section is named
       by aria-labelledby="plans-title"), and the legal and product pages their reading column. Blog posts and jobs
       set theirs in home.css. */
    .marketing-site section[aria-labelledby="plans-title"] > .st-shell {
        max-width: calc(1048px + 2 * var(--st-inset));
    }

    .marketing-site .st-legal-shell,
    .marketing-site .st-product-shell {
        padding-left: 36px;
        padding-right: 36px;
    }

    /* Home's and Discover's hero columns keep today's width, and widen with their headline once it grows past
       today's size, so it wraps where it does today. */
    .marketing-site .st-hero-inner {
        max-width: calc(max(748px, 10.4 * var(--st-fs-display)) + 2 * var(--st-inset));
    }

    .marketing-site .st-discover-hero-inner {
        max-width: calc(max(688px, 11.3 * var(--st-fs-h1)) + 2 * var(--st-inset));
    }

    /* 5. The footer stays at the bottom of a short page. Sign-in pages have their own full-height layout. */
    body.marketing-site:not(.st-auth-body):has(> .site-footer) {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100svh;
    }

    body.marketing-site:not(.st-auth-body) > .site-footer {
        margin-top: auto;
    }

    /* 6. Decorations. The background grid puts a line on the frame's left edge. A % in background-position counts
       from the box less one cell (so home.css's lines sat half a cell off), and the grid's box reaches 1 px past
       the page on each side. */
    .marketing-site .st-grid-lines {
        background-position: calc(50% + var(--st-grid) / 2 - min(var(--st-container-max), 100% + var(--st-grid) - 2px - 2 * var(--st-gutter)) / 2) 0;
    }

    /* The top corner bolts hang below the sticky header instead of half under it. */
    .marketing-site .st-frame-bolt--tl {
        transform: translate(-50%, 0);
    }

    .marketing-site .st-frame-bolt--tr {
        transform: translate(50%, 0);
    }
}

/* The footer in one row: the brand, then every group (CSS only, for any number of groups). The lines between them
   are on the reading side's end, so a right-to-left page gets them in the right places too. */
@media (min-width: 1280px) {
    .marketing-site .st-footer-grid {
        grid-template-columns: minmax(200px, 1.4fr);
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }

    .marketing-site .st-footer-col {
        display: contents;
    }

    .marketing-site .st-footer-brand-col {
        border-right: 0;
        border-inline-end: 1px solid var(--st-line);
    }

    .marketing-site .st-footer-group {
        padding: 40px 24px 36px;
        border-inline-end: 1px solid var(--st-line);
    }

    .marketing-site .st-footer-col:last-child .st-footer-group:last-child {
        border-inline-end: 0;
    }
}

@media (min-width: 1440px) {
    /* Pygame's long title shares the H1 size from here, where its half of the hero holds it in three lines. */
    .marketing-site .pg-hero h1 {
        font-size: var(--st-fs-h1);
    }

    /* Floating bolts keep the place they have at 1,440 relative to the frame, instead of drifting out to the
       window's edges. */
    .marketing-site .st-lb--1 { left: var(--st-outline-left); }
    .marketing-site .st-lb--2 { right: calc(var(--st-outline-left) + 14px); }
    .marketing-site .st-lb--3 { left: calc(var(--st-outline-left) + 173px); }
    .marketing-site .st-lb--4 { right: calc(var(--st-outline-left) + 216px); }
    .marketing-site .st-lb--6 { right: calc(var(--st-outline-left) - 29px); }
    .marketing-site .st-catpromo-bolt--1 { left: calc(var(--st-outline-left) + 14px); }
    .marketing-site .st-catpromo-bolt--2 { right: calc(var(--st-outline-left) + 43px); }
    .marketing-site .st-catpromo-bolt--3 { left: calc(var(--st-outline-left) + 130px); }
    .marketing-site .st-catpromo-bolt--4 { right: calc(var(--st-outline-left) + 101px); }
    .marketing-site .st-catpromo-bolt--6 { right: calc(var(--st-outline-left) + 331px); }
}

/* Home from 1,600: the headline beside the code box, so the starter row is on the first screen at 1920 x 1080. Each
   of the headline's lines fits its column ("Share runnable code" is about 9.6 of its em), so it stays on two lines;
   the code box grows with the screen's height. */
@media (min-width: 1600px) {
    .marketing-site .st-hero {
        --st-hero-code-h: clamp(260px, calc(100vh - 560px), 420px);
    }

    .marketing-site .st-hero-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        column-gap: clamp(48px, 4vw, 96px);
        align-items: start;
        max-width: none;
        text-align: start;
    }

    .marketing-site .st-hero-inner > .st-banner {
        grid-column: 1;
        justify-self: start;
        margin-top: 24px;
    }

    .marketing-site .st-hero-inner > .st-hero-title {
        grid-column: 1;
        align-items: flex-start;
        container-type: inline-size;
    }

    .marketing-site .st-hero-inner > .st-hero-title .st-hero-line {
        font-size: min(1em, 10.2cqi);
    }

    .marketing-site .st-hero-inner > .st-hero-sub {
        grid-column: 1;
        max-width: 34em;
        margin-inline-start: 0;
    }

    .marketing-site .st-hero-inner > .st-hero-pad {
        grid-column: 2;
        grid-row: 1 / span 3;
        width: 100%;
        margin: 0;
    }
}

/* The hero lightning spans the frame, so it stops thickening with the window (its strokes stay about 10–13 px). */
@media (min-width: 1920px) {
    .marketing-site .st-bolts {
        left: var(--st-outline-left);
        right: auto;
        width: var(--st-outline-w);
    }
}