/* ─────────────────────────────────────────────────────────────
   Photography archive (archive-photo_album.php) — a scoped copy of
   archive-project.css (same "duplicate, don't share" convention as
   every other page-specific system in this theme). Reuses the same
   featured/equal-row grid, card markup, and magnetic cursor-zoom hover
   as the portfolio archive, fed by photo_album posts instead. Everything
   here is scoped to body.post-type-archive-photo_album (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, 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-photo_album {
    background-color: #07030b;
}

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

body.post-type-archive-photo_album .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-photo_album .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-photo_album .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;
    letter-spacing: -0.2rem;
    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-photo_album .archive-heading-suffix {
    font-size: 3vw;
    /* Explicitly reset — letter-spacing is inherited, so without this the
       suffix would pick up .archive-heading's own -0.2rem letter-spacing
       from its parent <h1> (see the strrpos() split in archive-photo_album.php
       — the suffix is a nested <span>, not a sibling). */
    letter-spacing: normal;
    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-photo_album .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 — deliberately UNIFORM, not the featured/equal
   alternating masonry-style grid archive-project.css/home-alt.css use
   (2026-09-24 user request: "one is wider than the other and it's
   giving more attention to one album over another"). Every card renders
   at the exact same 16:9 size in a plain multi-column grid — no
   "tall"/stacked card variants at all on this page. This is a
   deliberate, permanent divergence from this theme's usual "keep this
   grid structurally identical everywhere" rule for archive-project.php/
   home-alt's WORK section — don't re-introduce the featured/equal
   pattern here to "match" those pages, and don't remove it from them to
   "match" this one. ────────────────────────────────────────────── */

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

body.post-type-archive-photo_album .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-photo_album .ha-photo-grid {
    display: grid;
    /* 2 columns, not 3 (2026-09-24 user correction) — deliberately fewer,
       bigger cards per row than a typical portfolio-style grid. */
    grid-template-columns: repeat(2, 1fr);
    gap: 16.5px;
}

/* 16:9 is the source of truth for card shape on this page — every card
   is this ratio, full stop, regardless of column count or content. */
body.post-type-archive-photo_album .ha-photo-grid .ha-card {
    aspect-ratio: 16 / 9;
}

body.post-type-archive-photo_album .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-photo_album .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-photo_album .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-photo_album .ha-card-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

body.post-type-archive-photo_album .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-photo_album .ha-card-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 3;
}

body.post-type-archive-photo_album .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-photo_album .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-photo_album .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-photo_album .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-photo_album .archive-heading {
        font-size: 38vw;
    }

    body.post-type-archive-photo_album .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-photo_album .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-photo_album .archive-grid-inner {
        padding: 0;
    }

    /* Single column of uniform rectangles — same grid, just one column
       instead of three. Kept at 4:3 here (unchanged from before this
       page's grid was reworked) since a single full-width column reads
       fine at that ratio and nothing about the mobile layout prompted
       this request — only the desktop masonry-style asymmetry did.
       Selector matches .ha-photo-grid .ha-card's own specificity (two
       classes) so this genuinely overrides the desktop 16:9 rule above
       rather than losing to it — a bare .ha-card rule here would NOT
       win against .ha-photo-grid .ha-card regardless of media query,
       since specificity beats source order. */
    body.post-type-archive-photo_album .ha-photo-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.post-type-archive-photo_album .ha-photo-grid .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-photo_album .ha-card-title {
        font-size: 20px;
    }

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