/* ============================================================================
   /projects/ - page-specific rules ONLY.   (/css/projects.css)

   Everything shared with the other sub-pages (theme tokens, header, nav,
   cards, item lists, tags, buttons, footer, focus styles, small-screen rules)
   lives in /css/site-pages.css, which each page links FIRST:

       <link rel="stylesheet" href="/css/site-pages.css">
       <link rel="stylesheet" href="/css/projects.css">   <- this file

   Do not re-declare shared rules or redefine colour tokens here; that is how
   the old events/ and projects/ sheets drifted apart in the first place. Use
   the tokens (var(--border), var(--surface), ...) so dark mode keeps working.
   ============================================================================ */

/* Two columns once there is room for them; the shared .item-list grid stays
   single-column on narrow screens, so nothing overflows at 400px. */
@media (min-width: 46rem) {
    .project-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

/* Definition list of project metadata, laid out as label / value pairs. */
.project .item-meta {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.15em 0.7em;
    margin-top: 0.7em;
    padding-top: 0.7em;
    border-top: 1px solid var(--border);
}

.project .item-meta dt { margin: 0; }
.project .item-meta dd { margin: 0; }

/* On very narrow screens stack the label above its value rather than
   squeezing the value into a sliver of a column. */
@media (max-width: 26rem) {
    .project .item-meta {
        grid-template-columns: minmax(0, 1fr);
        gap: 0 0;
    }
    .project .item-meta dd { margin-bottom: 0.5em; }
}