/* ==================================================================
   Project detail pages (/projects/<slug>)

   Loaded on top of styles.css and projects-styles.css, so this file only
   carries what is specific to a single-project page. Squared corners and
   the editorial rhythm of the rest of the site.
================================================================== */

body.project-detail {
    background: var(--cream);
}

/* ------------------------------------------------------------ breadcrumb -- */

/*
 * styles.css styles every <nav> as the fixed site header. The breadcrumb and
 * the project pagination are both correctly <nav> elements, so they inherit
 * `position: fixed` and land on top of the page. Every property that rule sets
 * has to be undone here, not just `position` — leaving `display: flex` alone
 * was what put the pagination's three links in a row across the masthead.
 */
body.project-detail .breadcrumb,
body.project-detail .project-pagination {
    position: static;
    inset: auto;
    z-index: auto;
    display: block;
    padding: 0;
    background: var(--cream);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: none;
    border: none;
    box-shadow: none;
}

body.project-detail .breadcrumb {
    padding: 9rem 0 0;
}

body.project-detail .breadcrumb .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 2rem;
}

body.project-detail .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--stone);
}

body.project-detail .breadcrumb li + li::before {
    content: '/';
    margin-right: 0.5rem;
    color: rgba(var(--gold-rgb), 0.6);
}

body.project-detail .breadcrumb a {
    color: var(--stone);
    text-decoration: none;
    transition: color 0.3s ease;
}

body.project-detail .breadcrumb a:hover {
    color: var(--gold);
}

body.project-detail .breadcrumb [aria-current="page"] {
    color: var(--ink);
}

/* ----------------------------------------------------------------- hero -- */

body.project-detail .project-detail-hero {
    padding: 3rem 0 3.5rem;
}

body.project-detail .project-detail-hero .container,
body.project-detail .project-detail-body,
body.project-detail .project-gallery-section .container,
body.project-detail .project-pagination .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 2rem;
}

body.project-detail .project-detail-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 1.5rem;
}

body.project-detail .project-detail-hero h1 {
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    line-height: 1.05;
    color: var(--ink);
    margin: 0 0 1.5rem;
    max-width: 20ch;
}

body.project-detail .project-detail-lede {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--slate);
    max-width: 62ch;
    margin: 0;
}

/* -------------------------------------------------------- primary figure -- */

body.project-detail .project-detail-figure {
    max-width: 1240px;
    margin: 0 auto 4rem;
    padding: 0 2rem;
}

body.project-detail .project-detail-figure img {
    display: block;
    width: 100%;
    height: auto;
    /* Reserves the space before the image arrives, so the copy below does not
       jump. The ratio matches the landscape crop the CMS produces. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: rgba(var(--gold-rgb), 0.08);
}

/* ----------------------------------------------------------------- body -- */

body.project-detail .project-detail-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
    padding-bottom: 5rem;
}

body.project-detail .project-detail-body > *:only-child {
    grid-column: 1 / -1;
    max-width: 720px;
}

body.project-detail .project-detail-specs h2,
body.project-detail .project-detail-cta h2,
body.project-detail .project-gallery-section h2 {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 1.5rem;
}

body.project-detail .project-detail-specs ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.project-detail .project-detail-specs li {
    position: relative;
    padding: 0.85rem 0 0.85rem 1.75rem;
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.2);
    color: var(--slate);
    line-height: 1.6;
}

body.project-detail .project-detail-specs li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.35rem;
    width: 8px;
    height: 1px;
    background: var(--gold);
}

body.project-detail .project-detail-cta {
    background: var(--ink);
    color: var(--cream);
    padding: 2.5rem;
}

body.project-detail .project-detail-cta h2 {
    color: var(--gold);
}

body.project-detail .project-detail-cta p {
    color: rgba(255, 248, 240, 0.78);
    line-height: 1.7;
    margin: 0 0 2rem;
}

body.project-detail .project-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* -------------------------------------------------------------- gallery -- */

body.project-detail .project-gallery-section {
    background: #fff;
    padding: 5rem 0;
}

body.project-detail .project-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

body.project-detail .project-gallery-grid figure {
    margin: 0;
}

body.project-detail .project-gallery-grid img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: rgba(var(--gold-rgb), 0.08);
}

/* ---------------------------------------------------------- testimonial -- */

body.project-detail .project-detail-testimonial {
    padding: 5rem 2rem;
    background: var(--cream);
}

body.project-detail .project-detail-testimonial .container-narrow {
    max-width: 780px;
    margin: 0 auto;
}

body.project-detail .project-detail-testimonial blockquote {
    margin: 0;
    border-left: 3px solid var(--gold);
    padding-left: 2rem;
}

body.project-detail .project-detail-testimonial p {
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    line-height: 1.6;
    color: var(--ink);
    margin: 0 0 1rem;
}

body.project-detail .project-detail-testimonial cite {
    font-style: normal;
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--stone);
}

/* ----------------------------------------------------------- pagination -- */

body.project-detail .project-pagination {
    border-top: 1px solid rgba(var(--gold-rgb), 0.25);
    padding: 3rem 0;
}

body.project-detail .project-pagination .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

body.project-detail .project-nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-decoration: none;
    max-width: 22rem;
}

body.project-detail .project-nav-link.is-next {
    text-align: right;
    margin-left: auto;
}

body.project-detail .project-nav-link span {
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--stone);
}

body.project-detail .project-nav-link strong {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink);
    transition: color 0.3s ease;
}

body.project-detail .project-nav-link:hover strong {
    color: var(--gold);
}

body.project-detail .project-nav-all {
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--stone);
    text-decoration: none;
    order: 3;
    width: 100%;
    text-align: center;
}

body.project-detail .project-nav-all:hover {
    color: var(--gold);
}

/* ------------------------------------------------- list-page detail link -- */

.project-page-link {
    display: inline-block;
    margin-left: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.project-page-link:hover {
    border-bottom-color: var(--gold);
}

/* --------------------------------------------------------------- narrow -- */

@media (max-width: 900px) {
    body.project-detail .project-detail-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }
}

@media (max-width: 700px) {
    body.project-detail .breadcrumb {
        padding-top: 7rem;
    }

    body.project-detail .breadcrumb .container,
    body.project-detail .project-detail-hero .container,
    body.project-detail .project-detail-body,
    body.project-detail .project-detail-figure,
    body.project-detail .project-gallery-section .container,
    body.project-detail .project-pagination .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    body.project-detail .project-detail-cta {
        padding: 2rem 1.5rem;
    }

    body.project-detail .project-detail-actions .btn {
        width: 100%;
        text-align: center;
    }

    body.project-detail .project-pagination .container {
        flex-direction: column;
        align-items: flex-start;
    }

    body.project-detail .project-nav-link.is-next {
        text-align: left;
        margin-left: 0;
    }

    .project-page-link {
        display: block;
        margin-left: 0;
        margin-top: 1rem;
    }
}

/* ------------------------------------------------------------ site nav -- */

/*
 * The site nav is cream-on-transparent because every other page puts a dark
 * hero photograph behind it. This page opens on the cream ground instead, so
 * the nav has to invert or it is invisible — which is exactly how it rendered
 * the first time.
 */
body.project-detail nav .logo,
body.project-detail nav .logo span,
body.project-detail nav .nav-links a {
    color: var(--ink);
}

/* The wordmark carries a drop shadow tuned for a photograph behind it. */
body.project-detail nav .logo span {
    text-shadow: none;
}

/* logo-96.webp is a light mark for dark heroes. brightness(0) flattens it to
   solid black rather than shipping a second file for one page. */
body.project-detail nav .logo img {
    filter: brightness(0);
}

body.project-detail nav.scrolled .logo img {
    filter: none;
}

body.project-detail nav .nav-links .nav-cta {
    border-color: rgba(13, 17, 23, 0.35);
}

body.project-detail nav .nav-toggle-bar {
    background: var(--ink);
}

body.project-detail nav.scrolled .logo,
body.project-detail nav.scrolled .logo span,
body.project-detail nav.scrolled .nav-links a {
    color: var(--cream);
}

body.project-detail nav.scrolled .nav-links .nav-cta {
    border-color: rgba(255, 248, 240, 0.7);
}

body.project-detail nav.scrolled .nav-toggle-bar {
    background: var(--cream);
}