/*
 * Page-level styling: the home page, item pages and listings (5.4), guides (5.5), prompts (5.6), reels (5.7), then the
 * remaining pages (5.8): topics and AI tools, authors, learning paths, sign-in and the error pages.
 */

@layer pages {
    /*
     * Home (content.md §7.4, K11). Phones: one column. Desktops: the news block beside a
     * side column (New guides, Try this prompt). The news block runs from a large lead to
     * three stories with pictures to text only, hairlines between the tiers.
     */
    .home-top,
    .home-start-here,
    .home-row,
    .home-topics {
        margin-bottom: var(--space-7);
    }

    .home-top {
        display: grid;
        gap: var(--space-7);
    }

    .home-side {
        display: grid;
        align-content: start;
        gap: var(--space-7);
    }

    @media (min-width: 64rem) {
        .home-top {
            grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
            gap: var(--space-7) var(--space-8);
        }
    }

    /* The lead: picture, tag, lead headline, wisecrack, summary, byline. */
    .card-story-lead {
        & .card-image {
            margin-bottom: var(--space-4);
        }

        & .card-title {
            font-size: var(--text-lead-size);
            line-height: var(--text-lead-leading);
        }

        & .wisecrack {
            margin-top: var(--space-3);
        }

        & .card-summary {
            font-size: var(--text-body-size);
        }

        & .meta {
            margin-top: var(--space-3);
        }
    }

    /* Second tier: thumbnail rows on phones, three across from tablets. */
    .news-pictures {
        display: grid;
        gap: var(--space-4);
        margin-top: var(--space-6);
        padding-top: var(--space-5);
        border-top: 2px solid var(--color-ink);
    }

    .card-story-picture {
        display: grid;
        grid-template-columns: 8rem minmax(0, 1fr);
        grid-template-areas: "image kicker" "image body";
        grid-template-rows: auto 1fr;
        align-content: start;
        gap: 0 var(--space-4);

        & .card-image {
            grid-area: image;
        }

        & .kicker {
            grid-area: kicker;
        }

        & .card-body {
            grid-area: body;
        }

        & .wisecrack {
            font-size: var(--text-body-size);
        }
    }

    @media (min-width: 48rem) {
        .news-pictures {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: var(--space-5);
        }

        .card-story-picture {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas: "image" "kicker" "body";
            grid-template-rows: none;

            & .card-image {
                margin-bottom: var(--space-3);
            }
        }
    }

    /* Third tier: text only, the category in its own column from tablets. */
    .news-text {
        margin-top: var(--space-6);
        border-top: 2px solid var(--color-ink);
    }

    .card-story-text {
        padding-block: var(--space-4);

        & + & {
            border-top: var(--rule-hairline);
        }

        & .wisecrack {
            font-size: var(--text-body-size);
        }
    }

    @media (min-width: 48rem) {
        .card-story-text {
            display: grid;
            grid-template-columns: 11rem minmax(0, 1fr);
            gap: var(--space-5);

            & .kicker {
                padding-top: 0.3em;
            }
        }
    }

    /* Side column: guides as thumbnail rows between hairlines. */
    .card-guide-compact {
        display: grid;
        grid-template-columns: 6rem minmax(0, 1fr);
        gap: var(--space-4);
        align-items: start;
        padding-block: var(--space-4);

        & + & {
            border-top: var(--rule-hairline);
        }

        &:first-of-type {
            padding-top: 0;
        }

        & .card-title {
            font-size: 21px;
        }
    }

    .home-try-prompt {
        & .card-title {
            margin-bottom: var(--space-3);
        }
    }

    /* Start here: the path, with room to read its intro. */
    .home-start-here {
        & > :not(.section-title) {
            max-width: var(--measure);
        }

        & .card-title {
            font-size: var(--text-title-size);
            margin-bottom: var(--space-2);
        }

        & p {
            margin-bottom: var(--space-2);
        }
    }

    /* The rows below: reels as a strip of tall thumbnails that play in place (content.md §7.4); prompts and paths in columns. */
    .home-row-items {
        display: grid;
        gap: var(--space-5);
    }

    .home-reels .home-row-items {
        grid-auto-flow: column;
        grid-auto-columns: 9rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        margin: calc(-1 * var(--focus-room)) calc(-1 * var(--focus-room)) 0;
        padding: var(--focus-room) var(--focus-room) var(--space-2);
        scroll-padding-inline: var(--focus-room);
        scroll-snap-type: x mandatory;

        & .card {
            scroll-snap-align: start;
        }

        & .card-image,
        & .video-player {
            margin: 0 0 var(--space-2);
        }

        & .video-frame {
            width: 100%;
        }

        & .card-title {
            font-size: var(--text-body-size);
        }
    }

    @media (min-width: 48rem) {
        .home-prompts .home-row-items,
        .home-paths .home-row-items {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .home-reels .home-row-items {
            grid-auto-columns: 11rem;
        }
    }

    @media (min-width: 64rem) {
        .home-prompts .home-row-items {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .home-paths .home-row-items {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    .home-topics ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-3);
        margin: 0;
        padding: 0;
        list-style: none;

        & li {
            margin: 0;
        }

        & a {
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            padding: var(--space-1) var(--space-4);
            border: 2px solid var(--color-ink);
            border-radius: var(--radius-pill);
            color: var(--color-ink);
            font-family: var(--font-display);
            font-size: 18px;
            font-weight: 700;
            text-decoration: none;
            text-transform: uppercase;
        }

        & a:hover {
            background: var(--color-lavender);
        }
    }
    /*
     * Item pages (content.md §4), in the reading column: kicker, a lead-size headline, the
     * wisecrack, the summary as a standfirst, the byline; the hero; then the body text.
     */
    .item-header {
        margin-bottom: var(--space-5);

        & h1 {
            margin-bottom: var(--space-3);
            font-size: var(--text-lead-size);
            line-height: var(--text-lead-leading);
        }

        & .kicker {
            margin-bottom: var(--space-2);
        }

        & .wisecrack {
            margin: 0 0 var(--space-3);
        }

        & .byline {
            margin-top: var(--space-3);
        }
    }

    .standfirst {
        margin: 0;
        color: var(--color-ink-muted);
        font-size: var(--text-wisecrack-size);
        line-height: 1.4;
    }

    .interviewees {
        margin: var(--space-3) 0 0;
        padding: 0;
        list-style: none;
        font-size: var(--text-small-size);
        font-weight: 600;
    }

    .item-hero {
        display: block;
        width: 100%;
        margin-bottom: var(--space-5);
        border-radius: var(--radius-image);
        background: var(--color-image-ground);
    }

    /* "Why it matters" on a lavender panel, its label like a tag. */
    .story-why {
        margin: 0 0 var(--space-5);
        padding: var(--space-4);
        border-radius: var(--radius-panel);
        background: var(--color-lavender);

        & h2 {
            margin: 0 0 var(--space-1);
            font-size: var(--text-tag-size);
            letter-spacing: var(--text-tag-tracking);
            text-transform: uppercase;
        }

        & p {
            margin: 0;
            font-size: var(--text-wisecrack-size);
            line-height: 1.4;
        }
    }

    /*
     * The body as the editor stores it: paragraphs, headings, lists, quotes, pictures; in a
     * guide also inside its sections, steps and callouts.
     */
    .item {
        & > h2,
        & .guide-section > h2 {
            margin-top: var(--space-6);
            font-size: var(--text-title-size);
        }

        & > h3,
        & .guide-section > h3 {
            margin-top: var(--space-5);
            margin-bottom: var(--space-2);
        }

        & blockquote {
            margin-inline: 0;
            padding-left: var(--space-5);
            border-left: 4px solid var(--color-purple);
            font-size: var(--text-wisecrack-size);
            line-height: 1.4;

            & p:last-child {
                margin-bottom: 0;
            }
        }

        & figure {
            margin-inline: 0;
        }

        & figure img,
        & p img {
            display: block;
            border-radius: var(--radius-image);
            background: var(--color-image-ground);
        }

        & figcaption {
            margin-top: var(--space-2);
            color: var(--color-ink-muted);
            font-size: var(--text-small-size);
        }
    }

    /* Listings (content.md §7.5): the heading as a large section title, then hairline rows. */
    .listing-title {
        margin-bottom: var(--space-5);
        padding-top: var(--space-2);
        border-top: var(--rule-heavy);
        font-size: var(--text-lead-size);
        font-weight: 800;
        letter-spacing: var(--text-section-tracking);
        line-height: 1;
        text-transform: uppercase;
    }

    .listing-title + :is(p, ul, ol) {
        max-width: var(--measure);
    }

    /*
     * Listing rows, whatever their types (an author's "Everything", topic and tool rows): a
     * hairline between any two. The reel feed is a grid instead.
     */
    .listing-items:not(.listing-items-reels) > .card {
        padding-block: var(--space-5);

        & + .card {
            border-top: var(--rule-hairline);
        }

        &:first-child {
            padding-top: 0;
        }
    }

    /* A reel or a path among other rows: a small tall thumbnail beside the title; a path is text only. */
    .listing-items:not(.listing-items-reels) {
        & > .card-reel {
            display: grid;
            grid-template-columns: 5rem minmax(0, var(--measure));
            align-items: start;
            gap: 0 var(--space-4);

            & .card-title {
                margin-bottom: var(--space-1);
            }

            &:not(:has(.card-image)) {
                grid-template-columns: minmax(0, var(--measure));
            }
        }

        & > .path-card {
            max-width: var(--measure);
        }
    }

    /* A story in a listing: thumbnail to the left, text beside it, never wider than the reading measure. */
    .card-story-list {
        display: grid;
        grid-template-columns: 7rem minmax(0, 1fr);
        grid-template-areas: "image kicker" "image body";
        grid-template-rows: auto 1fr;
        align-content: start;
        gap: 0 var(--space-4);

        & .card-image {
            grid-area: image;
        }

        & .kicker {
            grid-area: kicker;
        }

        & .card-body {
            grid-area: body;
        }

        & .wisecrack {
            font-size: var(--text-body-size);
        }

        /* Without a picture the text takes the whole row. */
        &:not(:has(.card-image)) {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas: "kicker" "body";
        }
    }

    @media (min-width: 48rem) {
        .card-story-list {
            grid-template-columns: 14rem minmax(0, var(--measure));
            gap: 0 var(--space-5);

            &:not(:has(.card-image)) {
                grid-template-columns: minmax(0, var(--measure));
            }
        }
    }

    @media (min-width: 64rem) {
        .card-story-list {
            grid-template-columns: 18rem minmax(0, var(--measure));
            gap: 0 var(--space-6);
        }
    }

    /*
     * Guides (content.md §4.2, 5.5): level, time and cost over the headline (K13); "What you
     * need" as a hairline list; the steps with large condensed numbers in the margin.
     */
    .item-facts {
        margin: 0 0 var(--space-2);
        color: var(--color-ink-muted);
        font-family: var(--font-display);
        font-size: var(--text-tag-size);
        font-weight: 700;
        letter-spacing: var(--text-tag-tracking);
        text-transform: uppercase;
    }

    .requirement-cost {
        color: var(--color-ink-muted);
    }

    .guide-steps > h2 {
        margin-bottom: var(--space-5);
    }

    .steps {
        --step-indent: 2.75rem;

        margin: 0;
        padding: 0;
        list-style: none;

        & > li {
            position: relative;
            margin: 0;
            padding: 0 0 var(--space-6) var(--step-indent);
            scroll-margin-top: var(--space-5);
        }

        & > li + li {
            padding-top: var(--space-5);
            border-top: var(--rule-hairline);
        }

        /* The number is only shown: the list already tells screen readers which step it is. */
        & > li::before {
            content: counter(list-item) / "";
            position: absolute;
            left: 0;
            color: var(--color-purple);
            font-family: var(--font-display);
            font-size: var(--text-section-size);
            font-weight: 800;
            line-height: 1;
        }

        & > li > h3 {
            margin-bottom: var(--space-3);
            font-family: var(--font-display);
            font-size: var(--text-list-size);
            font-weight: 700;
        }

        & > li > :last-child {
            margin-bottom: 0;
        }
    }

    /* Phones: a narrower margin, and pictures, prompts and callouts take the whole width. */
    @media (max-width: 47.99rem) {
        .steps {
            --step-indent: 2rem;

            & > li::before {
                font-size: 30px;
            }

            & > li > :is(figure, .prompt-card, .callout) {
                margin-left: calc(-1 * var(--step-indent));
            }
        }
    }

    @media (min-width: 48rem) {
        .steps {
            --step-indent: 4rem;

            & > li::before {
                font-size: 48px;
                line-height: 0.9;
            }
        }
    }

    /* A step's tool links: outlined pills, like the paging buttons but smaller. */
    .tool-links {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        padding: 0;
        list-style: none;

        & li {
            margin: 0;
        }

        & a {
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            padding: var(--space-1) var(--space-4);
            border: 2px solid var(--color-ink);
            border-radius: var(--radius-pill);
            color: var(--color-ink);
            font-family: var(--font-display);
            font-size: 18px;
            font-weight: 700;
            text-decoration: none;
            text-transform: uppercase;
        }

        & a:hover {
            background: var(--color-lavender);
        }
    }

    /* A guide in a listing: thumbnail to the left, as the story rows. */
    .card-guide-list {
        display: grid;
        grid-template-columns: 7rem minmax(0, 1fr);
        align-items: start;
        gap: 0 var(--space-4);

        &:not(:has(.card-image)) {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @media (min-width: 48rem) {
        .card-guide-list {
            grid-template-columns: 14rem minmax(0, var(--measure));
            gap: 0 var(--space-5);

            &:not(:has(.card-image)) {
                grid-template-columns: minmax(0, var(--measure));
            }
        }
    }

    @media (min-width: 64rem) {
        .card-guide-list {
            grid-template-columns: 18rem minmax(0, var(--measure));
            gap: 0 var(--space-6);
        }
    }

    /*
     * Prompts (content.md §4.3, 5.6): the prompt card (hint, tool tabs, the prompt on deep
     * purple and its Copy button), then the version's notes, Tested line and sample result.
     */
    .prompt-versions {
        margin-top: var(--space-6);

        & .tested-on {
            margin-top: var(--space-3);
        }
    }

    .prompt-notes {
        margin: var(--space-4) 0 0;
    }

    .sample-result {
        margin-top: var(--space-6);

        & > h3 {
            margin-bottom: var(--space-3);
            padding-top: var(--space-2);
            border-top: 2px solid var(--color-ink);
            font-family: var(--font-display);
            font-size: var(--text-list-size);
            font-weight: 800;
            letter-spacing: var(--text-section-tracking);
            text-transform: uppercase;
        }
    }

    /* A prompt in a guide step: a hairline box, its title over the tool and the prompt. */
    .prompt-card {
        margin: var(--space-5) 0;
        padding: var(--space-4);
        border: var(--rule-hairline);
        border-radius: var(--radius-panel);

        & h4 {
            margin: 0 0 var(--space-3);
            font-size: var(--text-list-size);
        }

        & .prompt-more {
            margin: var(--space-3) 0 0;
            font-size: var(--text-small-size);
        }
    }

    /* A prompt in a listing: text only, never wider than the reading measure. */
    .listing-items > .card-prompt {
        max-width: var(--measure);
    }

    /*
     * Reels (content.md §4.4, 5.7): the player centred on the reel's page; the feed as a
     * grid of tall thumbnails that play in place (K18), 2, 3 then 4 across.
     */
    .item-video {
        margin-block: var(--space-5) var(--space-6);

        & .video-frame {
            margin-inline: auto;
        }

        & .video-link {
            text-align: center;
        }
    }

    .then-read {
        margin-top: var(--space-5);
        font-weight: 600;
    }

    .listing-items-reels {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6) var(--space-4);

        & .video-player {
            margin: 0 0 var(--space-3);
        }

        & .video-frame {
            width: 100%;
        }

        & .card-title {
            margin-bottom: var(--space-1);
            font-size: var(--text-body-size);
        }

        & .meta {
            margin: 0;
        }
    }

    @media (min-width: 48rem) {
        .listing-items-reels {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: var(--space-7) var(--space-5);
        }
    }

    @media (min-width: 64rem) {
        .listing-items-reels {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    /*
     * Topics and AI tools (content.md §7.5, 5.8): /topics as cards in columns; a hub's intro
     * at the reading measure, then a row per kind under section titles; /tools as hairline
     * lists in columns.
     */
    .topic-cards {
        display: grid;
        gap: var(--space-6) var(--space-6);
    }

    .card-topic {
        padding-top: var(--space-4);
        border-top: 2px solid var(--color-ink);

        & .card-summary > :last-child {
            margin-bottom: 0;
        }

        & .card-summary img {
            display: none;
        }
    }

    @media (min-width: 48rem) {
        .topic-cards {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 64rem) {
        .topic-cards {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    .term-intro,
    .tool-facts {
        max-width: var(--measure);
    }

    .term-intro {
        margin-bottom: var(--space-6);
        font-size: var(--text-wisecrack-size);
        line-height: 1.45;

        & img {
            display: block;
            border-radius: var(--radius-image);
            background: var(--color-image-ground);
        }
    }

    .tool-facts {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        margin-bottom: var(--space-5);

        & .meta {
            margin: 0;
        }
    }

    .tool-logo {
        flex: none;
        width: 4rem;
        height: 4rem;
        object-fit: contain;
    }

    .term-row {
        margin-top: var(--space-7);
    }

    .empty-state + .term-row,
    .term-intro + .term-row,
    .tool-facts + .term-row {
        margin-top: var(--space-6);
    }

    .tool-groups {
        display: grid;
        gap: var(--space-7);
    }

    .tool-name {
        font-family: var(--font-display);
        font-size: var(--text-list-size);
        font-weight: 700;
        color: var(--color-ink);
        text-decoration: none;

        &:hover {
            text-decoration-line: underline;
            text-decoration-color: var(--color-acid);
            text-decoration-thickness: 3px;
        }
    }

    .tool-maker {
        color: var(--color-ink-muted);
    }

    @media (min-width: 48rem) {
        .tool-groups {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--space-7) var(--space-6);
        }
    }

    @media (min-width: 64rem) {
        .tool-groups {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    /* An author's page: the photo beside the short bio, then the tabs. */
    .author-intro {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        max-width: var(--measure);
        margin-bottom: var(--space-6);

        & p {
            margin: 0;
            font-size: var(--text-wisecrack-size);
            line-height: 1.45;
        }
    }

    .author-photo {
        flex: none;
        width: 6rem;
        height: 6rem;
        border-radius: var(--radius-pill);
        background: var(--color-image-ground);
        object-fit: cover;
    }

    /*
     * A learning path's page: its facts under the byline, then the items numbered as a
     * guide's steps are, each bridge note in italic above its item.
     */
    .item-header .byline + .item-facts {
        margin: var(--space-3) 0 0;
    }

    .path-items {
        margin: var(--space-6) 0 0;
        padding: 0;
        list-style: none;

        & > li {
            position: relative;
            margin: 0;
            padding: var(--space-5) 0 var(--space-5) 2.75rem;
            border-top: var(--rule-hairline);
        }

        & > li:last-child {
            border-bottom: var(--rule-hairline);
        }

        /* The number is only shown: the list already tells screen readers where each item is. */
        & > li::before {
            content: counter(list-item) / "";
            position: absolute;
            left: 0;
            color: var(--color-purple);
            font-family: var(--font-display);
            font-size: var(--text-section-size);
            font-weight: 800;
            line-height: 1;
        }

        & .kicker {
            color: var(--color-ink-muted);
            font-family: var(--font-display);
            font-size: var(--text-tag-size);
            font-weight: 700;
            letter-spacing: var(--text-tag-tracking);
            text-transform: uppercase;
        }
    }

    .path-bridge {
        margin: 0 0 var(--space-3);
        font-style: italic;
        font-weight: 500;
    }

    @media (max-width: 47.99rem) {
        .path-items > li {
            padding-left: 2rem;

            &::before {
                font-size: 30px;
            }
        }
    }

    /* Sign-in: the form in the reading column, no wider than a phone. */
    .sign-in {
        max-width: 26rem;

        & h1 {
            margin-bottom: var(--space-5);
            font-size: var(--text-lead-size);
            line-height: var(--text-lead-leading);
        }
    }

    /* The error pages: a lead-size headline, the explanation as a standfirst, the way back. */
    .error-page {
        padding-block: var(--space-6);

        & h1 {
            margin-bottom: var(--space-4);
            font-size: var(--text-lead-size);
            line-height: var(--text-lead-leading);
        }

        & .standfirst {
            margin-bottom: var(--space-5);
        }
    }

    .error-links {
        font-weight: 600;
    }

    /* The public placeholder (K3): the wordmark and tagline centred above the footer line. */
    body:has(> .placeholder) {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        border-top: var(--rule-heavy);
    }

    .placeholder {
        flex: 1;
        display: flex;
        align-items: center;
        padding-block: var(--space-8);
        text-align: center;

        & + .site-footer-bare {
            margin-top: 0;
            text-align: center;
        }
    }

    .placeholder-inner {
        width: 100%;
    }

    .placeholder-logo {
        margin: 0 0 var(--space-5);
        color: var(--color-purple);
        line-height: 0;

        & .wordmark {
            width: min(100%, 22rem);
            height: auto;
        }
    }

    .placeholder-tagline {
        margin: 0 0 var(--space-5);
        font-size: var(--text-wisecrack-size);
        line-height: 1.4;
    }

    .placeholder-soon {
        display: inline-block;
        margin: 0;
        padding: 3px var(--space-3);
        border-radius: var(--radius-pill);
        background: var(--color-acid);
        color: var(--color-ink);
        font-family: var(--font-display);
        font-size: var(--text-tag-size);
        font-weight: 700;
        letter-spacing: var(--text-tag-tracking);
        line-height: 1.3;
        text-transform: uppercase;
    }
}