/**
 * @license
 * Copyright (c) 2026 Elson Lleshi
 * All Rights Reserved. Unauthorized use prohibited.
 * SPDX-License-Identifier: UNLICENSED
 *
 * One completed job, server-rendered at /our-work/<slug> by
 * backend/modules/projects/pages.py. Loaded on its own (this page does not use
 * our-work.css — there is no card grid or lightbox here).
 *
 * The page links base/styles.css itself, as every other page does, so this file
 * must not @import it — that would fetch the whole manifest a second time.
 */

.project-page {
    padding-block: clamp(28px, 4vw, 44px) var(--section-y);
}

.project-head {
    max-width: 760px;
    margin-block: clamp(20px, 3vw, 32px) clamp(24px, 3vw, 36px);
}
.project-head h1 { margin-block: 6px 0; }

.project-loc {
    margin-top: 12px;
    color: var(--stone-600);
    font-size: 1.0625rem;
}

.project-body {
    max-width: 680px;
    margin-bottom: clamp(32px, 4vw, 48px);
}
.project-body p {
    line-height: 1.8;
    color: var(--ink-soft);
}
.project-body p + p { margin-top: 1em; }

/* ── Photos ───────────────────────────────────────────────────────────────── */
/* One column: these are the evidence the page exists to show, and a job rarely
   has enough photos for a grid to beat simply showing them large. */
.project-photos {
    display: grid;
    gap: clamp(12px, 1.6vw, 20px);
    margin-bottom: clamp(40px, 5vw, 64px);
    max-width: 1000px;
}
.project-photo { margin: 0; }

/* Photos come straight off a phone, so portrait is as likely as landscape. At
   full container width an unconstrained 1333x2000 renders about 1700px tall and
   swallows the page, so the box is capped and the image fitted inside it —
   `contain`, not `cover`, because cropping a photo of finished work defeats the
   point of showing it. The stone backdrop is what the letterboxing shows. */
.project-photo img {
    width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: contain;
    display: block;
    border-radius: var(--radius);
    background: var(--stone-200);
}

/* ── Closing CTA ──────────────────────────────────────────────────────────── */
.project-cta {
    background: var(--slate-900);
    color: #fff;
    border-radius: var(--radius);
    padding: clamp(30px, 4vw, 48px);
    margin-bottom: clamp(40px, 5vw, 64px);
}
.project-cta h2 { color: #fff; margin-bottom: 10px; }
.project-cta p {
    color: rgba(255, 255, 255, 0.72);
    max-width: 52ch;
    margin-bottom: 24px;
}
.project-cta .btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Related jobs ─────────────────────────────────────────────────────────── */
.project-related { margin-bottom: clamp(32px, 4vw, 48px); }
.project-related h2 { font-size: 1.375rem; margin-bottom: 20px; }

.project-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: clamp(16px, 2vw, 24px);
}

.project-related-card {
    display: grid;
    gap: 4px;
    color: var(--ink);
    border: 1px solid var(--stone-200);
    border-radius: var(--radius);
    overflow: hidden;
    padding-bottom: 16px;
    transition: border-color var(--t), transform var(--t);
}
.project-related-card:hover { border-color: var(--brick); transform: translateY(-2px); }
.project-related-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    margin-bottom: 12px;
    background: var(--stone-200);
}
.project-related-card > span { padding-inline: 16px; font-weight: 500; }
.project-related-loc { color: var(--stone-600); font-size: 0.875rem; font-weight: 400; }

.project-back a {
    color: var(--brick-dark);
    font-weight: 500;
}
.project-back a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .project-related-card:hover { transform: none; }
}