/* ─────────────────────────────────────────────────────────────
   Portfolio archive (archive-project.php) — 2026-08-09 redesign.
   Reuses the home-alt work section's visual system (card markup,
   grid pattern, hover interactivity) for every visible project,
   not just the ones flagged for the home-alt page. Everything here
   is scoped to body.post-type-archive-project (WP's own body class
   for this CPT archive) so it can't leak onto other pages that
   happen to reuse the same class names in the future, mirroring
   how home-alt.css scopes everything to body.page-template-home-alt.
   Deliberately its own always-dark system (not toggled by the
   site's light-mode setting) to match home-alt.
   ───────────────────────────────────────────────────────────── */

body.post-type-archive-project {
    background-color: #07030b;
}

/* ── Hero: heading left, deck paragraph right ─────────────────── */

body.post-type-archive-project .archive-hero {
    /* Top cut to 0 (2026-08-10 user request, "lose the site-wide hero
       padding") — paired with .site-header's own height cut in style.css
       to close up the clear space above the headline. Previously cut to
       15px (2026-08-09, down from 30px) before this final trim to 0. */
    padding: 0 0 20px;
}

body.post-type-archive-project .archive-hero-inner {
    display: flex;
    /* flex-end aligned the two boxes' bottom edges, not their actual text
       baselines — the heading's tight 0.85 line-height sits close to its
       own box edge, but the paragraph's looser 1.6 line-height leaves a
       chunk of empty line-box space below its last line's glyphs, so the
       paragraph's visible text read as floating above the heading's
       baseline even though the boxes themselves were flush (2026-08-09
       user correction). last baseline aligns the heading's baseline with
       the paragraph's own LAST line's baseline directly, using the
       browser's real text metrics instead of a guessed pixel offset —
       exactly what's needed since the paragraph can wrap to multiple
       lines. flex-end kept first as a fallback for the rare browser
       without last-baseline support (invalid value = declaration ignored,
       so this one stands instead). */
    align-items: flex-end;
    align-items: last baseline;
    justify-content: space-between;
    gap: 60px;
    flex-wrap: wrap;
    /* Full-bleed 55px inset, matching the header's own logo/hamburger
       edges (2026-08-09 user correction) — not the site's centered
       --container-width column. */
    padding: 0 55px;
}

body.post-type-archive-project .archive-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    /* Matches .ha-work-label's own scale on the home-alt page exactly
       (2026-08-09 user correction — "almost twice as big... as big as
       what it was on the home page"), uncapped like that rule, not the
       clamp() this used before. */
    font-size: 15vw;
    line-height: 0.85;
    color: #e6a533;
    text-transform: uppercase;
    margin: 0;
}

/* The "+ Play" portion of the heading (see the strrpos() split in
   archive-project.php) — small and white/cream, sitting at the big
   word's own baseline, not scaled up to match it (2026-08-09 user
   correction: this was rendering as part of the same huge amber block). */
body.post-type-archive-project .archive-heading-suffix {
    font-size: 3vw;
    color: #f9f5ed;
    text-transform: uppercase;
    vertical-align: bottom;
    /* vertical-align: bottom sits it slightly below "WORK"'s own baseline
       (2026-08-10 user correction, same fix applied to the About page's
       .about-heading-suffix). */
    position: relative;
    top: -5px;
}

body.post-type-archive-project .archive-deck {
    font-family: var(--font-body);
    /* 2026-08-09 user correction — was 18px. */
    font-size: 20px;
    font-weight: 300;
    line-height: 1.6;
    color: #f9f5ed;
    /* Matches the width of the featured row's right-hand column below
       (the 2-card stack) — not the full grid (2026-08-09 correction: an
       earlier pass wrongly went edge-to-edge). That column is 2fr of a
       3fr/2fr grid with a 16.5px gap, so this tracks it as a fluid
       fraction of the same 55px-inset container rather than a fixed px
       cap. Stays right-aligned next to the heading, same position as
       before. */
    width: calc((100% - 16.5px) * 2 / 5);
    text-align: right;
    margin: 0;
}

/* ── Grid section — same featured/equal alternating-row grid as
   .ha-work-section ────────────────────────────────────────────── */

body.post-type-archive-project .archive-grid-section {
    background: #07030b;
    /* Tightened to match the hero above (2026-08-09 user correction). */
    padding: 20px 0 100px;
}

body.post-type-archive-project .archive-grid-inner {
    /* Same full-bleed 55px inset as .archive-hero-inner and the header —
       this used to ride on the site's centered .container class, which
       is why the grid didn't actually reach the logo/hamburger edges. */
    padding: 0 55px;
}

body.post-type-archive-project .ha-work-grid {
    display: flex;
    flex-direction: column;
    gap: 16.5px;
}

body.post-type-archive-project .ha-grid-row--featured {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 16.5px;
    height: 500px;
}

body.post-type-archive-project .ha-grid-row--featured.ha-grid-row--reverse {
    grid-template-columns: 2fr 3fr;
}

body.post-type-archive-project .ha-card-stack {
    display: flex;
    flex-direction: column;
    gap: 16.5px;
    height: 100%;
}

body.post-type-archive-project .ha-card-stack .ha-card {
    flex: 1;
}

body.post-type-archive-project .ha-grid-row--equal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16.5px;
    height: 250px;
}

body.post-type-archive-project .ha-card {
    position: relative;
    display: block;
    background-color: #07030b;
    text-decoration: none;
    overflow: hidden;
    border-radius: 5px;
}

/* Background image lives on its own layer so it can scale/pan independently
   of the gradient/text sitting above it — same as .ha-card-bg in home-alt. */
body.post-type-archive-project .ha-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    transform: scale(1) translate(var(--pan-x, 0px), var(--pan-y, 0px));
    transition: transform 0.4s ease;
}

body.post-type-archive-project .ha-card:hover .ha-card-bg {
    transform: scale(1.08) translate(var(--pan-x, 0px), var(--pan-y, 0px));
}

/* Video variant of .ha-card-bg (2026-08-10) — "Homepage Card Type: Video"
   wired up in jacefolio_ha_render_card(). Shares the .ha-card-bg class
   for all positioning/scale/hover-pan/transition rules above; this just
   adds what a <video> needs that a background-image div doesn't. */
body.post-type-archive-project .ha-card-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

body.post-type-archive-project .ha-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

body.post-type-archive-project .ha-card-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 3;
}

body.post-type-archive-project .ha-card-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 32px;
    color: #f9f5ed;
    text-transform: uppercase;
    line-height: 1.1;
}

body.post-type-archive-project .ha-card-subtitle {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #e6a533;
    margin-top: 3.2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.post-type-archive-project .no-projects {
    color: #f9f5ed;
    opacity: 0.6;
    font-family: var(--font-body);
}

@media (max-width: 767px) {
    /* Run content as close to the viewport edges as possible on mobile
       to give the work itself more room (2026-08-12 user request) — cut
       from the desktop 55px full-bleed inset. Hero text keeps a little
       breathing room; the grid below goes fully edge-to-edge (see
       .archive-grid-inner). */
    /* flex-direction:column + a real gap value (2026-08-12 fix) — this
       previously only added align-items:flex-start and relied on
       flex-wrap to stack the heading/deck, which left the desktop
       gap:60px (meant for the two side-by-side items' horizontal
       spacing) applying as the wrapped rows' vertical gap too, reading
       as a big awkward space between the headline and paragraph. Matches
       .about-hero-inner's own explicit column+gap:20px pattern, which
       the user confirmed already looks right. */
    body.post-type-archive-project .archive-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 0 12px;
    }

    /* Headline + suffix, up substantially ("200% bigger", 2026-08-12
       user request) from their unaltered desktop sizes (15vw/3vw) —
       this page never had a mobile size bump at all before, unlike
       .about-heading's own 15vw->20vw mobile step. A literal 3x (45vw)
       measured out to "WORK" rendering ~400px wide against only ~353px
       of available width at that point (confirmed live via computed
       styles) — re-triggering the same WebKit shrink-to-fit viewport
       bug fixed elsewhere on this page. 38vw is the largest that
       actually fits "WORK" within the padding above, confirmed the
       same way. */
    body.post-type-archive-project .archive-heading {
        font-size: 38vw;
    }

    body.post-type-archive-project .archive-heading-suffix {
        font-size: 8vw;
        /* Small safety gap so "+ Play" never reads as glued to the huge
           amber word it follows (2026-08-12 mobile bug fix). */
        margin-left: 4px;
    }

    /* .archive-deck's width tracked the featured row's 2-column stack
       (calc((100% - 16.5px) * 2/5), ~40% of the container) by design on
       desktop — on a phone that's ~150px, wrapping the paragraph one
       word per line. Full width once the hero stops being a two-column
       row (see flex-direction: column above, which already lets the
       heading/deck stack instead of sharing a row). */
    body.post-type-archive-project .archive-deck {
        width: 100%;
        text-align: left;
    }

    /* Grid full-bleed (2026-08-12 user request, "the portfolio grid
       should take up the whole width of the viewport on mobile") —
       same reasoning as home-alt's own work grid. */
    body.post-type-archive-project .archive-grid-inner {
        padding: 0;
    }

    /* Grid shape — same 2026-08-12 user request as home-alt.css's own
       work grid: drop the featured/equal alternating masonry pattern
       (3fr/2fr rows + a 2-card stack, tuned for a two-column desktop
       layout) for a single column of full-width rectangles. Every row
       still has 1-3 .ha-card children in its markup already (a lone
       featured card, a 2-card stack, or an equal pair) — collapsing
       each row to one column just stacks whichever cards it already
       has, no markup change needed. aspect-ratio replaces the fixed
       500px/250px row heights (tuned for a card sharing row width with
       a sibling, which no longer applies at one column wide). */
    body.post-type-archive-project .ha-work-grid {
        gap: 12px;
    }

    body.post-type-archive-project .ha-grid-row--featured,
    body.post-type-archive-project .ha-grid-row--featured.ha-grid-row--reverse,
    body.post-type-archive-project .ha-grid-row--equal {
        grid-template-columns: 1fr;
        height: auto;
        gap: 12px;
    }

    body.post-type-archive-project .ha-card-stack {
        height: auto;
        gap: 12px;
    }

    body.post-type-archive-project .ha-card-stack .ha-card {
        flex: none;
    }

    body.post-type-archive-project .ha-card {
        aspect-ratio: 4 / 3;
    }

    /* Same 2026-08-12 fix as home-alt.css's own .ha-card-title/
       .ha-card-subtitle mobile override — shared card markup via
       jacefolio_ha_render_card(), duplicated per this file's own
       "separate scoped copy per page" convention. */
    body.post-type-archive-project .ha-card-title {
        font-size: 20px;
    }

    body.post-type-archive-project .ha-card-subtitle {
        font-size: 13px;
    }
}