/* ─────────────────────────────────────────────────────────────
   Individual photo album page (single-photo_album.php) — a scoped
   copy of single-project.css (same "duplicate, don't share"
   convention as every other page-specific system in this theme),
   reusing the exact same hero/meta-row/title/summary/media-row/
   pagination layout as an individual project page.
   Scoped under body.single-photo_album — WordPress's own body class
   for a singular `photo_album` CPT post — so this can't collide with
   single-project.css even though the two share class names.

   Out of scope / untouched by this file: the media-row grid system
   further down the page, styled sitewide in style.css. The pagination
   bar (.pagination-bar*, BACK TO PHOTOGRAPHY on this page) is the one
   that's actually visible on every album page — the Live Site CTA
   (.project-cta*) never renders here at all (that field is hidden for
   albums, see jacefolio_render_content_box() in functions.php), but
   its rules are harmlessly still present below since they were copied
   wholesale from single-project.css.
   ───────────────────────────────────────────────────────────── */

body.single-photo_album {
    background-color: #07030b;
}

/* ── Hero: inset, rounded-corner cover image ──────────────────── */

body.single-photo_album .project-hero-frame {
    /* 55px side inset matches the header's own logo/hamburger edges and
       every other full-bleed section on this site (archive-hero-inner,
       about-hero-inner). Top gap is intentionally small — #main-content's
       own 111px padding-top already clears the fixed header. */
    padding: 24px 55px 0;
}

body.single-photo_album .project-hero {
    position: relative;
    overflow: hidden;
    height: clamp(360px, 42vw, 640px);
    /* No existing radius token fits a full hero image (every other
       border-radius on this site is the small 5px card-tile radius) —
       this is a new, larger value chosen to match the mockup's visibly
       rounded corners. Approximated from a flattened screenshot; treat
       as a first pass pending a live-tuning look. */
    border-radius: 24px;
}

/* No cursor pan on this hero (removed 2026-09-24 per direct user
   request — "I don't want that to occur anymore" on hero images
   specifically; the grid card thumbnails keep their own separate
   cursor-tracking zoom, see .ha-card-bg in archive-photo-album.css).
   This page briefly had a scale(1.15)+translate() pan-toward-cursor
   effect here (single-photo-album.js, .hero-media--pannable/
   .hero-pan-ready) — all removed outright, not just disabled, per this
   theme's "delete dead code" convention. */
body.single-photo_album .hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dot-grain texture overlay — 2026-08-11: made toggleable per-project
   (was unconditional) and de-duplicated into a single shared rule in
   style.css (.has-texture-overlay, shared with .media-item) since
   .project-hero already has overflow:hidden + border-radius, so the
   overlay clips to the hero's own rounded shape for free either way.
   single-photo_album.php adds/omits the class based on the "Hero Texture
   Overlay" checkbox in the Project Page Hero admin box. */

/* ── Meta row: visual parity with the about page's connection-row
   (.about-connection-row/.connection-bar/.connection-text in about.css)
   — same row height, bar height/color/radius, and text font/size/color.
   Centered + uppercase + a bar on both sides is what's different here.
   About's single bar needs JS (updateConnectionRow() in
   about-constellation.js) to regrow on every hover, specifically to
   avoid a documented flicker bug from animating a flex sibling's width.
   This row's content is static (set once at page load from "The
   Project — Keywords"), so there's no hover-driven remeasuring to
   replicate — plain flexbox reproduces the same "bar fills whatever
   space the text doesn't need" look without porting JS that solves a
   problem this page doesn't have. Text wraps instead of truncating,
   for the same reason (no remeasure loop to make ellipsis worth it). */

body.single-photo_album .project-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 48px;
    padding: 0 55px;
    margin-top: 40px;
}

body.single-photo_album .project-meta-rule {
    flex: 1 1 auto;
    height: 18px;
    background: #e6a533;
    border-radius: 999px;
}

body.single-photo_album .project-meta-text {
    flex: 0 1 auto;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    font-size: 32px;
    line-height: 1.5;
    color: #f9f5ed;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    margin: 0;
}

/* ── Title block: project name + client, both centered ────────── */

body.single-photo_album .project-title-block {
    text-align: center;
    padding: 20px 55px 0;
}

/* Same 15vw/800-weight Barlow Condensed scale as .archive-heading
   (archive-project.css) and .about-heading (about.css) — explicit user
   requirement that this match those two exactly. Unlike those two, the
   project title has no "+" to split into an amber/white pair, so it's
   set fully in the site's cream/white, not amber. */
body.single-photo_album .project-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 15vw;
    line-height: 0.85;
    color: #f9f5ed;
    text-transform: uppercase;
    margin: 0;
}

body.single-photo_album .project-client {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    font-size: clamp(16px, 1.8vw, 28px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #e6a533;
    margin: 12px 0 0;
}

/* ── Summary — one shared narrative, flowing across two columns ── */

body.single-photo_album .project-summary {
    padding: 60px 0 80px;
}

/* Same centered content-column width as .philosophy-inner on the about
   page (about.css) — the literal "inherit the width" the user asked
   for, not a fixed value invented for this page. */
body.single-photo_album .project-summary-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* "The Project" and "My Role" merged into one narrative field — this is
   ONE continuous passage of text broken across two columns like a
   newspaper column, not two independent topics in separate grid cells
   (that was the old two-div .project-summary-grid layout, now gone).
   column-count/column-fill:balance (the default) is a HEIGHT estimate,
   not a line-count balancer — with only a couple of paragraphs it can
   badly misjudge (e.g. 7 lines vs 2), which is what this was reported
   doing live. single-photo-album.js measures the real rendered line
   breaks and physically splits the content into two exact-line-count
   halves, swapping this element to the .summary-columns-js layout
   below — column-count here stays as the graceful no-JS/unsupported-
   browser fallback (still imperfect, but never worse than before). */
body.single-photo_album .project-summary-body {
    column-count: 2;
    column-gap: 4rem;
}

/* Applied by single-photo-album.js once it's split the content into two
   real child divs at an exact line boundary — flex replaces columns
   entirely so each half just renders as its own single-column block. */
body.single-photo_album .project-summary-body.summary-columns-js {
    display: flex;
    column-count: initial;
    gap: 4rem;
}

body.single-photo_album .project-summary-body.summary-columns-js > .summary-body-col {
    flex: 1 1 0;
    min-width: 0;
}

/* Same body-copy treatment as .philosophy-body — the direct width-donor
   pattern this column width was copied from. */
body.single-photo_album .summary-body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(249, 245, 237, 0.85);
}

body.single-photo_album .summary-body p {
    margin: 0 0 1em;
}

body.single-photo_album .summary-body p:last-child {
    margin-bottom: 0;
}

body.single-photo_album .summary-body a {
    color: #f9f5ed;
    text-decoration-color: #e6a533;
    text-underline-offset: 3px;
    transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

body.single-photo_album .summary-body a:hover {
    color: #e6a533;
}

@media (max-width: 767px) {
    /* Run as close to the viewport edges as possible on mobile to give
       the actual work (the hero image) more room (2026-08-12 user
       request) — cut further than the desktop-derived 24px this
       started at. Text rows (meta/title) keep a smaller inset for
       readability; the media-row grid further down is untouched (its
       .container wrap is a deliberate per-row admin choice, not a
       page-level inset — see the file header note). */
    body.single-photo_album .project-hero-frame {
        padding: 12px 10px 0;
    }

    body.single-photo_album .project-meta-row {
        padding: 0 16px;
        gap: 12px;
    }

    body.single-photo_album .project-title-block {
        padding: 16px 16px 0;
    }

    /* Same vw bump as .about-heading's own 767px override (about.css) —
       vw scales down with viewport width, so the percentage itself has
       to go up to keep reading as a big headline on a small screen. */
    body.single-photo_album .project-title {
        font-size: 20vw;
    }

    body.single-photo_album .project-summary-body {
        column-count: 1;
    }

    /* Safety net — single-photo-album.js's own resize listener already
       reverts the JS split back to plain content below this breakpoint,
       but that's debounced; this guarantees the flex layout can never
       render broken on a phone even in the brief window before that
       listener fires. */
    body.single-photo_album .project-summary-body.summary-columns-js {
        display: block;
        column-count: 1;
    }
}

/* ── Live Site CTA — 2026-08-12 restyle onto this page's dark Barlow
   Condensed system (moved here from style.css, where it still carried
   the old Inter/brown-accent look). Pill radius matches the meta-row's
   own rule bars just above it — the one rounded-pill motif already
   established on this page — and the border/fill hover-invert keeps
   the previous version's interaction, just re-skinned to the site's
   amber accent instead of the old brown one. ───────────────────── */

body.single-photo_album .project-cta {
    padding: 0 55px clamp(3rem, 5vw, 5rem);
}

body.single-photo_album .project-cta-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1.25rem 2rem;
    border: 2px solid #e6a533;
    border-radius: 999px;
    box-sizing: border-box;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #e6a533;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}

body.single-photo_album .project-cta-link:hover,
body.single-photo_album .project-cta-link:focus-visible {
    background-color: #e6a533;
    color: #07030b;
}

@media (max-width: 767px) {
    body.single-photo_album .project-cta {
        padding: 0 24px clamp(3rem, 5vw, 5rem);
    }
}

/* ── Pagination bar (BACK TO PORTFOLIO + prev/next) — 2026-08-12
   restyle onto this page's dark Barlow Condensed system (moved here
   from style.css, where it still carried the old Inter/brown-accent
   look). This is the button that's actually visible on every project
   page — the amber solid-fill pill is the one established "button"
   look for this page, paired with the Live Site CTA's outline pill
   above as its secondary/lower-emphasis counterpart. ─────────────── */

body.single-photo_album .pagination-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    padding: clamp(2rem, 4vw, 3.5rem) 55px;
    font-size: 18px;
}

body.single-photo_album .pagination-prev {
    text-align: left;
}

body.single-photo_album .pagination-center {
    text-align: center;
}

body.single-photo_album .pagination-next {
    text-align: right;
}

body.single-photo_album .pagination-prev a,
body.single-photo_album .pagination-next a {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    color: #f9f5ed;
    text-decoration: underline;
    text-decoration-color: #f9f5ed;
    text-underline-offset: 3px;
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

body.single-photo_album .pagination-prev a:hover,
body.single-photo_album .pagination-next a:hover {
    color: #e6a533;
    text-decoration-color: #e6a533;
}

body.single-photo_album .pagination-center a {
    display: inline-block;
    background-color: #e6a533;
    color: #07030b;
    padding: 0.6rem 2rem;
    border-radius: 999px;
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 14px;
    transition: transform 0.3s ease;
}

body.single-photo_album .pagination-center a:hover {
    transform: translateY(-2px);
}

@media (max-width: 767px) {
    body.single-photo_album .pagination-bar {
        grid-template-columns: 1fr;
        text-align: center;
        padding: clamp(2rem, 4vw, 3.5rem) 24px;
    }

    body.single-photo_album .pagination-prev,
    body.single-photo_album .pagination-center,
    body.single-photo_album .pagination-next {
        text-align: center;
    }
}