/*
  projects.css — Public projects listing + detail pages.
  Matches the "Nocturnal Slime" dark aesthetic from homepage.css.
*/

/* ── Tokens ────────────────────────────────────────────────── */
:root {
  --pj-bg:         #F7FDF9;
  --pj-surface:    #EBF8EF;
  --pj-border:     rgba(0,0,0,.09);
  --pj-text:       #1B3A2D;
  --pj-muted:      #5D8A78;
  --pj-dim:        #94A3B8;
  --pj-teal:       #4DB6AC;
  --pj-amber:      #FF8A65;
  --pj-lavender:   #CE93D8;
  --pj-periwinkle: #FF6B6B;
  --pj-cyan:       #26C6DA;
  --pj-magenta:    #F06292;

  --pj-font-display: 'Cormorant Garamond', Georgia, serif;
  --pj-font-mono:    'DM Mono', 'Courier New', monospace;
  --pj-font-alt:     'Bricolage Grotesque', sans-serif;
}

/* ── Page shell ─────────────────────────────────────────────── */
.projects-page {
  background: var(--pj-bg);
  color: var(--pj-text);
}

/* ── Shared back link ───────────────────────────────────────── */
.pj-back {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--pj-font-mono);
  font-size: .68rem;
  color: var(--pj-muted);
  text-decoration: none;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s;
}
.pj-back::before { content: '←'; }
.pj-back:hover { color: var(--pj-teal); }

/* ── Kind badge ─────────────────────────────────────────────── */
.pj-kind-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--pj-font-mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .18rem .55rem;
  border-radius: 2px;
  font-weight: 500;
}
.pj-kind-personal {
  color: var(--pj-teal);
  background: rgba(77,182,172,.1);
  border: 1px solid rgba(77,182,172,.28);
}
.pj-kind-client {
  color: var(--pj-amber);
  background: rgba(255,138,101,.1);
  border: 1px solid rgba(255,138,101,.3);
}

/* List page: row meta row (tags + kind badge) */
.pj-row-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}


/* ════════════════════════════════════════════════════════════
   LIST PAGE
════════════════════════════════════════════════════════════ */

.pj-list-wrap {
}

/* Header */
.pj-list-header {
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
  animation: pj-fade-up .5s both ease-out;
}

.pj-list-eyebrow {
  font-family: var(--pj-font-mono);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pj-teal);
  margin-bottom: .9rem;
}

.pj-list-title {
  font-family: var(--pj-font-display);
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--pj-text);
  margin: 0;
}

.pj-list-count {
  font-family: var(--pj-font-mono);
  font-size: .7rem;
  color: var(--pj-muted);
  margin-top: 1.1rem;
  letter-spacing: .06em;
}

.pj-list-count span {
  color: var(--pj-periwinkle);
}

/* Rows */
.pj-rows {
  position: relative;
}

.pj-row {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem 1fr 1.5rem;
  align-items: center;
  gap: 0 2rem;
  padding: 1.75rem 0 1.75rem .5rem;
  border-top: 1px solid var(--pj-border);
  text-decoration: none;
  color: inherit;
  transition: background .2s;
  overflow: hidden;
  animation: pj-fade-up .4s both ease-out;
}

.pj-row:last-child { border-bottom: 1px solid var(--pj-border); }
a.pj-row:hover,
a.pj-row:hover *,
a.pj-row:focus,
a.pj-row:focus *,
a.pj-row:focus-visible,
a.pj-row:focus-visible * { text-decoration: none; }
a.pj-row:focus        { outline: 2px solid var(--pj-teal); outline-offset: -2px; }
a.pj-row:focus-visible { outline: 2px solid var(--pj-teal); outline-offset: -2px; }

/* Teal left border that scales in on hover */
.pj-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.pj-row:hover::before { transform: scaleY(1); }

/* Cyclic accent colors for the left border */
.pj-row:nth-child(5n+1)::before { background: var(--pj-teal); }
.pj-row:nth-child(5n+2)::before { background: var(--pj-amber); }
.pj-row:nth-child(5n+3)::before { background: var(--pj-lavender); }
.pj-row:nth-child(5n+4)::before { background: var(--pj-periwinkle); }
.pj-row:nth-child(5n+5)::before { background: var(--pj-cyan); }

/* Stagger in */
.pj-row:nth-child(1)  { animation-delay: .05s; }
.pj-row:nth-child(2)  { animation-delay: .10s; }
.pj-row:nth-child(3)  { animation-delay: .15s; }
.pj-row:nth-child(4)  { animation-delay: .20s; }
.pj-row:nth-child(5)  { animation-delay: .25s; }
.pj-row:nth-child(6)  { animation-delay: .30s; }
.pj-row:nth-child(7)  { animation-delay: .35s; }
.pj-row:nth-child(8)  { animation-delay: .40s; }
.pj-row:nth-child(9)  { animation-delay: .45s; }
.pj-row:nth-child(10) { animation-delay: .50s; }

/* Index number */
.pj-row-idx {
  font-family: var(--pj-font-display);
  font-style: italic;
  font-size: 1rem;
  font-weight: 400;
  color: var(--pj-dim);
  font-variant-numeric: tabular-nums;
  transition: color .2s;
  align-self: start;
  padding-top: .25rem;
}

.pj-row:nth-child(5n+1):hover .pj-row-idx { color: var(--pj-teal); }
.pj-row:nth-child(5n+2):hover .pj-row-idx { color: var(--pj-amber); }
.pj-row:nth-child(5n+3):hover .pj-row-idx { color: var(--pj-lavender); }
.pj-row:nth-child(5n+4):hover .pj-row-idx { color: var(--pj-periwinkle); }
.pj-row:nth-child(5n+5):hover .pj-row-idx { color: var(--pj-cyan); }

/* Row body */
.pj-row-body { min-width: 0; }

.pj-row-name {
  font-family: var(--pj-font-display);
  font-size: clamp(1.45rem, 3.2vw, 2.1rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--pj-text);
  margin: 0 0 .4rem;
  transition: color .2s;
}

.pj-row:hover .pj-row-name { color: var(--pj-teal); }

.pj-row-desc {
  font-family: var(--pj-font-mono);
  font-size: .69rem;
  color: var(--pj-muted);
  line-height: 1.65;
  max-width: 60ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: .7rem;
}

.pj-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.pj-row-tag {
  font-family: var(--pj-font-mono);
  font-size: .6rem;
  letter-spacing: .07em;
  text-transform: lowercase;
  color: var(--pj-teal);
  background: rgba(77,182,172,.08);
  border: 1px solid rgba(77,182,172,.25);
  padding: .12rem .45rem;
  border-radius: 2px;
}

/* Arrow */
.pj-row-arrow {
  font-size: .85rem;
  color: var(--pj-dim);
  align-self: center;
  transition: color .2s, transform .2s;
  line-height: 1;
}

.pj-row:hover .pj-row-arrow {
  color: var(--pj-teal);
  transform: translateX(3px);
}

/* Empty */
.pj-empty {
  padding: 5rem 0;
  text-align: center;
  font-family: var(--pj-font-mono);
  font-size: .75rem;
  color: var(--pj-muted);
  letter-spacing: .1em;
}


/* ════════════════════════════════════════════════════════════
   DETAIL PAGE
════════════════════════════════════════════════════════════ */

/* Ambient wash (fixed, behind everything) */
.pj-detail-wash {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 90% 0%,   rgba(22,165,165,.11), transparent 50%),
    radial-gradient(ellipse at -5% 85%,  rgba(192,74,192,.08), transparent 55%),
    radial-gradient(ellipse at 50% 110%, rgba(232,134,31,.06), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Decorative blobs */
.pj-sp {
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

.pj-sp-a {
  width: clamp(130px, 17vw, 230px);
  height: clamp(120px, 15vw, 210px);
  top: 5%;
  right: 3%;
  opacity: .45;
}

.pj-sp-b {
  width: clamp(55px, 7vw, 95px);
  height: clamp(55px, 7vw, 95px);
  bottom: 18%;
  left: 2%;
  opacity: .30;
}

/* Detail inner */
.pj-detail-wrap {
  position: relative;
  min-height: 100vh;
}

.pj-detail-inner {
  position: relative;
  z-index: 1;
}

/* Eyebrow row: back link + id */
.pj-detail-eyebrow {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
  animation: pj-fade-up .4s both .02s ease-out;
}

.pj-detail-id {
  font-family: var(--pj-font-mono);
  font-size: .62rem;
  color: var(--pj-dim);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Project name */
.pj-detail-name {
  font-family: var(--pj-font-display);
  font-size: clamp(2.6rem, 7.5vw, 5.8rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--pj-text);
  margin: 0 0 1.5rem;
  animation: pj-fade-up .5s both .08s ease-out;
}

/* Tags */
.pj-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 2.25rem;
  animation: pj-fade-up .4s both .14s ease-out;
}

.pj-detail-tag {
  font-family: var(--pj-font-mono);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: lowercase;
  color: var(--pj-teal);
  background: rgba(22,165,165,.08);
  border: 1px solid rgba(22,165,165,.22);
  padding: .22rem .6rem;
  border-radius: 2px;
}

/* Divider */
.pj-detail-divider {
  height: 1px;
  background: linear-gradient(to right, var(--pj-teal) 0%, transparent 65%);
  margin-bottom: 3rem;
  opacity: .35;
  animation: pj-fade-up .4s both .18s ease-out;
}

/* Rich text content (CKEditor HTML) */
.pj-detail-content {
  font-family: var(--pj-font-display);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 300;
  line-height: 1.9;
  color: var(--pj-text);
  animation: pj-fade-up .5s both .22s ease-out;
}

.pj-detail-content h1,
.pj-detail-content h2,
.pj-detail-content h3,
.pj-detail-content h4 {
  font-family: var(--pj-font-display);
  font-weight: 400;
  color: var(--pj-text);
  line-height: 1.2;
  margin: 2.5rem 0 1rem;
}

.pj-detail-content h2 { font-size: 1.9em; }
.pj-detail-content h3 { font-size: 1.45em; }
.pj-detail-content h4 { font-size: 1.15em; font-style: italic; color: var(--pj-lavender); }

.pj-detail-content p { margin: 0 0 .65em; }

.pj-detail-content a {
  color: var(--pj-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .15s;
}
.pj-detail-content a:hover { color: var(--pj-text); }

.pj-detail-content strong { font-weight: 600; color: var(--pj-text); }
.pj-detail-content em { font-style: italic; color: var(--pj-lavender); }

/* Inline code */
.pj-detail-content :not(pre) > code {
  font-family: var(--pj-font-mono);
  font-size: .82em;
  color: var(--pj-teal);
  background: rgba(77,182,172,.1);
  border: 1px solid rgba(77,182,172,.25);
  padding: .13em .42em;
  border-radius: 4px;
}

/* Code block — CKEditor outputs <pre><code class="language-*"> */
.pj-detail-content pre {
  position: relative;
  background: #13151f;
  border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid var(--pj-teal);
  border-radius: 8px;
  padding: 1.35rem 1.5rem;
  overflow-x: auto;
  margin: 1.75rem 0;
  /* subtle scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(77,182,172,.3) transparent;
}
.pj-detail-content pre::-webkit-scrollbar { height: 4px; }
.pj-detail-content pre::-webkit-scrollbar-thumb { background: rgba(77,182,172,.35); border-radius: 99px; }

.pj-detail-content pre code {
  display: block;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
  font-size: .82rem;
  line-height: 1.7;
  color: #cdd6f4;
  background: none;
  border: none;
  padding: 0;
  white-space: pre;
}

/* Language label injected by JS as data-language attribute on <pre> */
.pj-detail-content pre[data-language]::before {
  content: attr(data-language);
  display: block;
  font-family: var(--pj-font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pj-teal);
  opacity: .75;
  margin-bottom: .65rem;
}

.pj-detail-content ul,
.pj-detail-content ol {
  padding-left: 1.75rem;
  margin: .25em 0 .65em;
}

.pj-detail-content ul { list-style-type: disc; }
.pj-detail-content ol { list-style-type: decimal; }

.pj-detail-content ul ul { list-style-type: circle; margin: .15em 0; }
.pj-detail-content ul ul ul { list-style-type: square; }

.pj-detail-content li {
  margin-bottom: .3rem;
  padding-left: .2rem;
}

.pj-detail-content li::marker {
  color: var(--pj-teal);
}

.pj-detail-content blockquote {
  border-left: 2px solid var(--pj-amber);
  padding: .5rem 0 .5rem 1.5rem;
  margin: 1.5rem 0;
  color: var(--pj-muted);
  font-style: italic;
}

.pj-detail-content img {
  max-width: 100%;
  border-radius: 4px;
  border: 1px solid var(--pj-border);
  margin: 1rem 0;
}

.pj-detail-content hr {
  border: none;
  height: 1px;
  background: var(--pj-border);
  margin: 2.5rem 0;
}

/* CTA footer: external link + back */
.pj-detail-cta {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--pj-border);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  animation: pj-fade-up .4s both .32s ease-out;
}

.pj-btn-ext {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--pj-font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--pj-teal);
  padding: .68rem 1.4rem;
  border-radius: 2px;
  text-decoration: none;
  transition: background .2s, transform .15s;
}

.pj-btn-ext:hover {
  background: var(--pj-cyan);
  transform: translateY(-1px);
}

.pj-cta-back {
  font-family: var(--pj-font-mono);
  font-size: .68rem;
  color: var(--pj-muted);
  text-decoration: none;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s;
}

.pj-cta-back:hover { color: var(--pj-text); }
.pj-cta-back::before { content: '← '; }


/* ── Cover image ────────────────────────────────────────────── */
.pj-detail-image {
  margin: 2rem 0 2.5rem;
  animation: pj-fade-up .5s both .18s ease-out;
}

.pj-detail-image img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--pj-border);
  display: block;
}

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes pj-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .pj-row {
    grid-template-columns: 2.2rem 1fr;
    gap: 0 1.2rem;
  }
  .pj-row-arrow { display: none; }
  .pj-row-desc { -webkit-line-clamp: 3; }

  .pj-detail-name { font-size: 2.5rem; }
}