/* ─────────────────────────────────────────────────────────────
   Individual portfolio project page (single-project.php) —
   2026-08-10 rebuild onto the site's dark Barlow Condensed system,
   the last template that hadn't been converted yet (header/footer,
   portfolio archive, about page, home-alt were all already done).
   Scoped under body.single-project — WordPress's own body class for
   a singular `project` CPT post — same "separate, body-class-scoped
   copy" convention as archive-project.css/about.css, so this can't
   collide with either even though some values (1280px content
   column, Barlow Condensed headline scale) are deliberately shared
   with the about page by design.

   Out of scope / untouched by this file: the media-row grid system
   further down the page — it wasn't part of the mockup this rebuild
   is matching, so its old styling (in style.css) stays as-is. The
   Live Site CTA (.project-cta*) and the pagination bar
   (.pagination-bar*) were BOTH out of scope originally but moved here
   2026-08-12 once restyled onto this page's dark Barlow Condensed
   system — see below. Note the pagination bar (BACK TO PORTFOLIO) is
   the one that's actually visible on every project page — the Live
   Site CTA only renders when a project has a Live URL set, which as
   of this rebuild is just one live project.
   ───────────────────────────────────────────────────────────── */

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

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

body.single-project .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-project .project-hero {
    position: relative;
    overflow: hidden;
    height: clamp(360px, 42vw, 640px);
    background-size: cover;
    background-position: center center;
    /* 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;
}

body.single-project .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-project.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-project .project-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 48px;
    padding: 0 55px;
    margin-top: 40px;
}

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

body.single-project .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-project .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-project .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-project .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-project .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-project .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). */
body.single-project .project-summary-body {
    column-count: 2;
    column-gap: 4rem;
}

/* Same body-copy treatment as .philosophy-body — the direct width-donor
   pattern this column width was copied from. */
body.single-project .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-project .summary-body p {
    margin: 0 0 1em;
}

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

body.single-project .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-project .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-project .project-hero-frame {
        padding: 12px 10px 0;
    }

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

    body.single-project .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-project .project-title {
        font-size: 20vw;
    }

    body.single-project .project-summary-body {
        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-project .project-cta {
    padding: 0 55px clamp(3rem, 5vw, 5rem);
}

body.single-project .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-project .project-cta-link:hover,
body.single-project .project-cta-link:focus-visible {
    background-color: #e6a533;
    color: #07030b;
}

@media (max-width: 767px) {
    body.single-project .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-project .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-project .pagination-prev {
    text-align: left;
}

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

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

body.single-project .pagination-prev a,
body.single-project .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-project .pagination-prev a:hover,
body.single-project .pagination-next a:hover {
    color: #e6a533;
    text-decoration-color: #e6a533;
}

body.single-project .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-project .pagination-center a:hover {
    transform: translateY(-2px);
}

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

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