/* Layout — blog-specific grid and structural positioning.
 * Separated from lissom.css (root styling) to keep concerns clear.
 * Stays classless — uses elements and data attributes only.
 */

article {
    font-family: var(--font-serif);
    font-size: 1.10rem;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    --grid-content: min(var(--content-width), 100%);
    grid-template-columns:
        [full-start] 1fr
        [wide-start] repeat(4, 1fr)
        [content-start] repeat(4, minmax(0, calc(var(--grid-content) / 4))) [content-end]
        repeat(4, 1fr) [wide-end]
        1fr [full-end];
    column-gap: 0.5em;
}

article > * {
    grid-column: content;
}

article > [data-wide] {
    grid-column: wide;
}

article > [data-full] {
    grid-column: full;
}

article > [data-bleed] {
    grid-column: content;
    margin-left: -2em;
    margin-right: -2em;
}

article > [data-split] {
    grid-column: wide;
    display: grid;
    grid-template-columns: subgrid;
}

article aside {
    font-size: 0.85em;
      margin: 0 0 0.5em 0;
    color: var(--secondary);
    align-self: start;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

@media (max-width: 800px) {
    article {
        grid-template-columns: [full-start wide-start content-start] 1fr [content-end wide-end full-end];
        padding: 0 1rem;
    }

    article aside {
        grid-column: content !important;
        border-left: 2px solid var(--accent-ui);
        padding-left: 1em;
        margin: 1em 0;
    }

    article > [data-split] {
        grid-column: content;
        grid-template-columns: 1fr;
    }

    article > [data-full] {
        margin-left: -1rem;
        margin-right: -1rem;
    }

    article > [data-bleed] {
        margin-left: -1rem;
        margin-right: -1rem;
    }
}

main > footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2em 0;
    margin-top: 3em;
    border-top: 1px dashed oklch(from var(--secondary) l c h / 50%);
    font-size: 0.8em;
    color: var(--secondary);
    font-family: var(--font-sans);
}

main > footer a, main > footer a:visited {
    color: var(--secondary);
}

@media (max-width: 600px) {
    main > footer {
        flex-direction: column;
        gap: 0.5em;
        text-align: center;
    }
}