/* ==========================================================================
   Projects gallery.

   Palette, type and paper are inherited from the blog reading styles so the
   two pages read as one site. The one device specific to this page is the
   monospace meta strip on each card: a kind label and a year, separated by
   space (no punctuation). It says what sort of artifact each project is and
   when it lived.
   ========================================================================== */

:root {
    --paper:  #fbfaf7;
    --card:   #ffffff;
    --ink:    #2b2926;
    --ink-hi: #1a1815;
    --muted:  #7a736a;
    --accent: #b0512c;
    --rule:   #ebe7df;
}

body.projects-page {
    background-color: var(--paper);
}

#projects .resume-section-content {
    max-width: 1000px;
    min-width: 0; /* flex child must be allowed to shrink below content width */
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* The "Projects" heading is a plain <h2 class="mb-5">, styled by the site's
   shared section-title template (Saira Extra Condensed, uppercase, 3.5rem) so
   it matches About / Experience / Music. No page-specific override here. */

/* --- card ---------------------------------------------------------------- */

.project {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.project:hover,
.project:focus-visible {
    text-decoration: none;
    color: inherit;
    border-color: #d8cfc2;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(43, 41, 38, .07);
}

.project:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.project-shot {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
    background: #12131a;
    border-bottom: 1px solid var(--rule);
}

/* Kapre's art is a 3:1 banner — contain it (rather than crop the wordmark in
   half) on the same warm gray as the logo tiles, so its letterbox bars match
   the rest of the grid. The logo tiles fill their frame exactly, so this
   background only shows on Kapre. */
.project-shot--plate {
    object-fit: contain;
    object-position: center;
    background: #4f4a43;
}

/* Body fills the remaining height so the meta strip lands on the same
   baseline across a row, whatever the description length. */
.project-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.15rem 1.3rem 1.35rem;
}

.project-body .project-meta {
    margin-top: auto;
    padding-top: .25rem;
}

.project-name {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--ink-hi);
    text-transform: none !important;
    margin: 0 0 .5rem;
    display: inline-block;
    position: relative;
}

.project-name::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 1px;
    background: var(--accent);
    transition: right .25s ease;
}

.project:hover .project-name::after,
.project:focus-visible .project-name::after {
    right: 0;
}

.project-desc {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink);
    margin: 0 0 .9rem;
}

/* Kind label + year as a lowercase monospace footer row — kind slug at the
   left edge, year at the right, no punctuation between them. Lowercase and
   untracked on purpose, to read like a code slug rather than a tracked-out
   uppercase tag. */
.project-meta {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .8rem;
    letter-spacing: 0;
    text-transform: lowercase;
    color: #7a736a;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.project-meta span:last-child {
    color: #a49c90;
    flex: none;
}

/* --- lead card ----------------------------------------------------------- */

.project--lead {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    margin-bottom: 3rem;
}

.project--lead .project-shot {
    height: 100%;
    aspect-ratio: auto;
    min-height: 300px;
    border-bottom: 0;
    border-right: 1px solid var(--rule);
}

.project--lead .project-body {
    align-self: center;
    padding: 1.75rem 1.9rem;
}

/* The featured card leads the page, so its title is the largest card title —
   the wide layout and this size are the only "featured" signal; no label. */
.project--lead .project-name {
    font-size: 2.5rem;
    line-height: 1.1;
    letter-spacing: -.025em;
    margin-bottom: .65rem;
}

.project--lead .project-desc {
    font-size: 1.05rem;
}

/* --- grid ---------------------------------------------------------------- */

/* Two up. Four projects land as a clean 2x2 instead of 3 + an orphan.
   The min() keeps the 400px floor from overflowing screens narrower than it. */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
    column-gap: 1.75rem;
    row-gap: 3rem;
}

@media (max-width: 767px) {
    .project--lead {
        grid-template-columns: 1fr;
    }
    .project--lead .project-shot {
        aspect-ratio: 16 / 10;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--rule);
    }
    .project--lead .project-body {
        padding: 1.15rem 1.3rem 1.35rem;
    }
    /* Still the largest title on the page, just scaled for the narrow column. */
    .project--lead .project-name {
        font-size: 1.9rem;
    }
    .projects-title {
        font-size: 1.7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project,
    .project-name::after {
        transition: none;
    }
    .project:hover,
    .project:focus-visible {
        transform: none;
    }
}