/* ============================================================
   CHSS — projects.css
   Styles for the dynamic Projects pages only (/projects and each project page).
   Loaded after style.v6.css and pages.css; uses the same colours, fonts and spacing tokens.
   Everything is scoped to new .pj-* class names, so no existing page is affected.
   ============================================================ */

.pj-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ── Hero + cover picture ─────────────────────────────────── */
.pj-hero h1 { max-width:24ch }
.pj-hero--cover { padding-bottom:calc(clamp(48px,7vw,84px) + clamp(40px,6vw,80px)) }
.pj-cover-wrap { position:relative; z-index:2; margin-top:calc(-1 * clamp(40px,6vw,80px)) }
.pj-cover { margin:0; background:var(--warm-grey); aspect-ratio:16/8; overflow:hidden; box-shadow:0 24px 60px rgba(11,31,58,0.22) }
.pj-cover img { width:100%; height:100%; object-fit:cover }

/* ── Key information + description ────────────────────────── */
.pj-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.1fr); gap:clamp(32px,6vw,88px); align-items:start }
.pj-split--solo { grid-template-columns:minmax(0,1fr) }
.pj-split--solo .pj-prose { max-width:780px }
.pj-facts { position:sticky; top:96px; background:var(--cream); border-top:3px solid var(--red); padding:22px 24px 8px }
.pj-facts .section-label { margin-bottom:6px }
.pj-facts dl { margin:0 }
.pj-fact { padding:14px 0; border-bottom:1px solid var(--warm-grey) }
.pj-fact:last-child { border-bottom:0 }
.pj-fact dt { font-size:0.66rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--red); margin:0 0 5px }
.pj-fact dd { margin:0; font-family:var(--font-d); font-size:1.08rem; line-height:1.35; color:var(--navy) }

.pj-prose { font-size:1rem; line-height:1.85; color:var(--muted); overflow-wrap:anywhere }
.pj-prose > * + * { margin-top:1.1em }
.pj-prose > :first-child { margin-top:0 }
.pj-prose > p:first-child { font-family:var(--font-d); font-size:clamp(1.12rem,1.9vw,1.35rem); line-height:1.6; color:var(--navy) }
.pj-prose h2 { font-family:var(--font-d); font-size:clamp(1.4rem,2.4vw,1.9rem); font-weight:700; line-height:1.2; letter-spacing:-0.01em; color:var(--navy); margin-top:1.9em }
.pj-prose h3 { font-family:var(--font-d); font-size:clamp(1.15rem,1.8vw,1.35rem); font-weight:600; line-height:1.3; color:var(--navy); margin-top:1.6em }
.pj-prose ul, .pj-prose ol { padding-left:1.4em }
.pj-prose ul { list-style:disc }
.pj-prose ol { list-style:decimal }
.pj-prose li + li { margin-top:0.45em }
.pj-prose li::marker { color:var(--red) }
.pj-prose strong { color:var(--navy); font-weight:600 }
.pj-prose a { color:var(--red); text-decoration:underline; text-underline-offset:3px }
.pj-prose a:hover { color:var(--red-dk) }

/* ── Gallery ──────────────────────────────────────────────── */
.pj-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:14px }
.pj-gitem { margin:0 }
.pj-gitem a { display:block; aspect-ratio:4/3; overflow:hidden; background:var(--warm-grey); cursor:zoom-in }
.pj-gitem img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease) }
.pj-gitem a:hover img { transform:scale(1.04) }
.pj-gitem a:focus-visible { outline:2px solid var(--red); outline-offset:2px }
.pj-gitem figcaption { font-size:0.82rem; line-height:1.55; color:var(--muted); padding:10px 2px 0 }

/* ── Outcomes ─────────────────────────────────────────────── */
.pj-results { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:0 32px; margin-top:6px }
.pj-result { padding:24px 0; border-top:1px solid rgba(255,255,255,0.16); color:rgba(255,255,255,0.88); font-family:var(--font-d); font-size:1.12rem; line-height:1.45 }
.pj-result small { display:block; font-family:var(--font-b); font-size:0.66rem; font-weight:700; letter-spacing:0.16em; color:#F5C47B; margin-bottom:12px }

/* ── Project cards (Projects page + related projects) ─────── */
.pj-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:18px }
.pj-card { position:relative; display:flex; flex-direction:column; background:var(--cream); overflow:hidden; border-top:3px solid transparent; transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease) }
.pg-section--cream .pj-card { background:var(--white) }
.pj-card:hover, .pj-card:focus-within { border-top-color:var(--red); box-shadow:0 14px 36px rgba(11,31,58,0.1); transform:translateY(-3px) }
.pj-card-img { aspect-ratio:16/10; background:var(--warm-grey); overflow:hidden; flex-shrink:0 }
.pj-card-img--none { background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%) }
.pj-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease) }
.pj-card:hover .pj-card-img img { transform:scale(1.04) }
.pj-card-body { display:flex; flex-direction:column; flex:1; padding:22px 22px 24px }
.pj-card-status { font-size:0.66rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--red); margin:0 0 8px }
.pj-card h3 { font-family:var(--font-d); font-size:1.3rem; font-weight:700; line-height:1.22; color:var(--navy); margin:0 0 10px }
.pj-card-body > p:not(.pj-card-status) { font-size:0.88rem; line-height:1.7; color:var(--muted); margin:0 0 18px }
.pj-card-link { margin-top:auto; font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy) }
.pj-card-link::before { content:""; position:absolute; inset:0; z-index:1 }          /* the whole card is clickable */
.pj-card-link::after { content:" →" }
.pj-card-link:focus-visible { outline:2px solid var(--red); outline-offset:-2px }

.pj-empty { max-width:620px }
.pj-empty p:not(.section-label) { font-size:0.98rem; line-height:1.8; color:var(--muted); margin-top:16px }

/* ── Draft preview notice (dashboard only) ────────────────── */
.pj-preview { position:fixed; top:66px; left:0; right:0; z-index:880; background:#8A6100; color:#fff; font-size:0.78rem; line-height:1.4; padding:8px var(--px); text-align:center }
.pj-preview b { font-weight:700 }

/* ── Picture viewer ───────────────────────────────────────── */
.pj-lb { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:clamp(16px,4vw,56px); background:rgba(7,18,42,0.94) }
.pj-lb.open { display:flex }
.pj-lb figure { margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:14px }
.pj-lb img { max-width:100%; max-height:78vh; width:auto; height:auto; object-fit:contain }
.pj-lb figcaption { color:rgba(255,255,255,0.82); font-size:0.9rem; line-height:1.55; text-align:center; max-width:70ch }
.pj-lb button { position:absolute; width:46px; height:46px; border:0; border-radius:50%; background:rgba(255,255,255,0.12); color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; transition:background var(--t) var(--ease) }
.pj-lb button:hover { background:rgba(255,255,255,0.24) }
.pj-lb button:focus-visible { outline:2px solid #F5C47B; outline-offset:2px }
.pj-lb-close { top:14px; right:14px }
.pj-lb-prev { left:14px; top:50%; margin-top:-23px }
.pj-lb-next { right:14px; top:50%; margin-top:-23px }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:900px) {
  .pj-split { grid-template-columns:1fr; gap:26px }
  .pj-facts { position:static }
}
@media (max-width:640px) {
  .pj-cover { aspect-ratio:4/3 }
  .pj-hero h1 { max-width:100% }
  .pj-lb-prev, .pj-lb-next { top:auto; bottom:14px; margin-top:0 }
}
@media (prefers-reduced-motion:reduce) {
  .pj-card, .pj-card-img img, .pj-gitem img { transition:none }
}