/*
All specificities to do with Chunk Lists are a disaster.

Hopefully, I will attempt to clean up this steaming pile of shit so that I don't have to deal with conflicts (.main_body .body vs. .chunk .body in particular), but we'll see.
*/

.chunk_list {
    display: grid;

    width: 100%;

    .chunk + .chunk {
        margin-top: var(--spacing-horizontal);
    }

    .chunk {
        width: inherit;

        > .header {
            display: grid;
            grid-auto-flow: row;
            grid-template-columns: 1fr min-content;

            column-gap: calc(var(--spacing-horizontal) * 2);

            background-color: var(--background-3);
            border-radius: var(--border-radius-leaf);

            padding: var(--spacing-horizontal);

            text-align: start;

            width: inherit;

            .name,
            .subtitle,
            .status {
                margin: inherit;
            }

            .subtitle {
                display: inline-block;

                font-size: 0.85rem;
                font-weight: normal;
                font-style: italic;
                font-family: var(--font-family-generic);
            }

            .status {
                align-self: center;
                white-space: nowrap;

                text-decoration: none;
                font-size: 1.17rem;
                font-weight: bold;
            }
        }

        > .body {
            padding: 0 calc(var(--spacing-horizontal) * 2);

            ul {
                font-family: var(--font-family-generic);

                li + li {
                    margin-top: 0.5em;
                }
            }
        }
    }
}

@media only screen and (max-width: 500px) {
    .chunk_list .chunk {
        > .header {
            column-gap: var(--spacing-horizontal);
        }

        > .body {
            /* Collapse the L/R padding to maximize usable space */
            padding: 0;
        }
    }
}