/*
 * article.css — the article reading experience: layout column, figures,
 * heading variants, footer. Linked by every page under /blogs/ and the
 * component gallery. Load order: base.css → components.css → article.css.
 *
 * One-off styling for a single essay belongs in that essay's own
 * <style> block (unlayered, so it wins over everything here) — prefer
 * overriding tokens rather than these rules.
 */

@layer page {
    .article-container {
        margin: auto;
        display: flex;
        justify-content: center;
        padding: 25px 20px 100px 20px;
        width: 100%;
        box-sizing: border-box;
    }

    /* The page-entry curtain (body#top::after) lives in css/base.css —
       the homepage loads base.css but not this file, so keeping the wipe
       here meant it was always cold on the first blog click and skipped.
       See the @layer page block at the end of base.css. */
    .article-body {
        max-width: 700px;
        width: 100%;
        padding: 0 var(--space-md);
        box-sizing: border-box;
    }

    /* Scroll buffer for TOC anchor links */
    .article-body h1[id],
    .article-body h2[id],
    .article-body h3[id],
    .article-body h4[id],
    .article-body h5[id],
    .article-body h6[id] {
        scroll-margin-top: 110px;
    }

    /* Article Elements */
    .article-figure {
        margin: var(--space-2xl) 0;
    }

    .article-figure img {
        max-width: 100%;
        height: auto;
        /* card geometry, same as the home page cards (squircle via atelier.css) */
        border-radius: var(--r-card);
    }

    .article-figure figcaption {
        margin-top: var(--space-sm);
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .component-div {
        margin: var(--space-2xl) 0;
        border: 1px solid var(--card-edge);
        border-radius: 12px;
        padding: var(--space-md);
    }

    .article-video {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: var(--r-card);
        margin: var(--space-2xl) 0;
    }

    /* Article Heading Variants */
    .article-h1{
        font-size: 2rem;
        margin-bottom: var(--space-xl);
        margin-top: var(--space-md);
    }

    /* Spacing modifier for h2 in articles - inherits base h2 styles */
    .article-h2{
        margin-top: var(--space-4xl);
    }

    /* Background Placeholders */
    .grey-background-article {
        background-color: var(--card);
        border: 1px solid var(--card-edge);
        border-radius: var(--r-card);
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 100%;
        min-width: 180px;
        height: 280px;
        position: relative;
        overflow: hidden;
    }

    /* Lists — modest top margin so the list hugs its lead-in line; generous
       bottom gap before the next block. Nested lists stay tight (re-asserted
       here because this page layer overrides base's li ul/li ol rule). */
    ul, ol {
        margin: var(--space-md) 0 var(--space-2xl);
    }

    li ul, li ol {
        margin: var(--space-sm) 0 0;
    }

    /* A paragraph that leads directly into a list hugs it: tighten the gap to
       space-sm. p's margin-bottom and the list's margin-top collapse to the
       larger of the two, so the list's top margin is zeroed here — that makes
       the gap exactly the paragraph's space-sm, not the list's space-md. */
    .article-body p:has(+ ul),
    .article-body p:has(+ ol) {
        margin-bottom: var(--space-lg);
    }

    .article-body p:has(+ ul) + ul,
    .article-body p:has(+ ol) + ol {
        margin-top: 0;
    }

    .project-image {
        max-width: 100%;
        object-fit: contain;
    }

    /* Footer */
    .footer-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--text-secondary);
    }

    /* Responsive: Mobile */
    @media only screen and (max-width: 480px) {
        .grey-background-article {
            height: 200px;
        }
    }

    /* Responsive: Tablet/Mobile */
    @media only screen and (max-width: 768px) {
        .article-container {
            padding: 50px 10px;
        }

        .article-body {
            padding: 0;
        }
    }

    /* Code blocks in list items */
    li pre {
        margin-left: calc(var(--space-lg) * -1);
        margin-right: 0;
        width: calc(100% + var(--space-lg));
    }

    @media only screen and (max-width: 768px) {
        li pre {
            margin-left: calc(var(--space-lg) * -1);
            width: calc(100% + var(--space-lg));
        }
    }
}