/* ==========================================================================
   S P Alectricals — Projects index + project detail pages
   Requires css/sp-core.css.

   THIRD frame on the site, and it had to differ from both of the others:

     homepage    centred headings, uniform card grid, mint bands
     about       left-aligned prose, hairline rules, one timeline spine
     projects    a capacity-scaled ledger — every plant is drawn to the same
                 kWp scale, and the rows alternate side so the page reads as
                 a record of work rather than a catalogue of tiles

   The capacity bar is the device that carries it. With plants from 10 kWp to
   400 kWp the scale is genuinely legible, so the page shows the shape of the
   portfolio rather than just listing it.
   ========================================================================== */

/* ========================================================= PAGE OPENING */
/* A projects index should open on the work. The background is a band of four
   real project photographs rather than one stock shot: each is 1000px native
   rendered at roughly 360px, so nothing upscales, and the hero shows the
   portfolio instead of describing it. It is the only full-cover photo hero on
   the site — home opens on product art, About on a portrait. */
.pj-top{position:relative;overflow:hidden;background:#082514;color:#fff;
  padding:clamp(30px,3.6vw,48px) 0 clamp(34px,4vw,52px)}
.pj-top-bg{position:absolute;inset:0;z-index:0;display:grid;
  grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.pj-top-bg{grid-template-columns:repeat(4,1fr)}}
.pj-top-bg img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.72) contrast(1.05)}
@media(max-width:899px){ .pj-top-bg img:nth-child(n+3){display:none} }
/* the overlay carries the text: near-solid on the left, clearing to the right
   so the photographs still read as photographs */
.pj-top::before{content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(760px 420px at 88% 4%, rgba(60,180,72,.20), transparent 62%),
    linear-gradient(92deg,
      rgba(8,37,20,.975) 0%,
      rgba(9,42,24,.95) 38%,
      rgba(11,50,30,.86) 60%,
      rgba(13,58,36,.66) 80%,
      rgba(15,63,41,.52) 100%),
    linear-gradient(180deg, rgba(8,37,20,.55) 0%, transparent 30%, rgba(8,37,20,.6) 100%)}
/* On a narrow viewport the 92deg overlay runs its clear end under text that
   now spans the full width — the lede measured 2.66:1 there. Vertical instead,
   strong throughout, since everything is stacked anyway. */
@media(max-width:899px){
  .pj-top::before{background:
    radial-gradient(420px 300px at 86% 6%, rgba(60,180,72,.16), transparent 64%),
    linear-gradient(180deg, rgba(8,37,20,.96) 0%, rgba(8,37,20,.94) 62%, rgba(9,42,24,.90) 100%)}
}
.pj-top > .hp-wrap{position:relative;z-index:2}

.pj-crumb-l{display:flex;gap:9px;align-items:center;font-size:13px;color:#A9C6B2;
  margin-bottom:clamp(22px,2.8vw,34px);flex-wrap:wrap}
.pj-crumb-l a{color:#A9C6B2}
.pj-crumb-l a:hover{color:#8FE39A}
.pj-crumb-l span{opacity:.5}
.pj-crumb-l em{font-style:normal;color:#fff;font-weight:600}

/* Single column, held to the left half. The overlay deliberately clears to the
   right so the photographs read, which measured 3.70:1 for the lede and 2.77:1
   for the chart label when they sat over there. Keeping every piece of text in
   the strongly-covered left column fixes it without muddying the photos. */
.pj-top-grid{display:grid;gap:14px;max-width:620px}
.pj-top h1{font-family:var(--h);font-weight:300;color:#fff;
  font-size:clamp(30px,4.2vw,50px);line-height:1.1;letter-spacing:-.026em;margin:0;
  max-width:16ch;text-wrap:balance;text-shadow:0 2px 22px rgba(4,14,8,.5)}
.pj-top h1 em{font-style:normal;font-weight:500;color:#8FE39A}
.pj-top p{font-size:clamp(15.5px,1.5vw,17.5px);color:#C9DECF;max-width:48ch;line-height:1.65;
  text-shadow:0 1px 14px rgba(4,14,8,.5)}

/* ------------------------------------------------- capacity distribution --
   One stacked bar showing how the total splits across facility types. No
   other page on the site carries a chart, which is exactly the point. */
.pj-dist{margin-top:clamp(26px,3.2vw,40px);max-width:820px}
/* the label moves next to the figure rather than sitting far right, for the
   same reason */
.pj-dist-head{display:flex;align-items:baseline;
  gap:8px 18px;flex-wrap:wrap;margin-bottom:12px}
.pj-dist-head b{font-family:var(--h);font-size:clamp(24px,3vw,34px);font-weight:300;
  color:#fff;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.pj-dist-head b i{font-style:normal;font-size:.52em;font-weight:500;color:#C9DECF;
  margin-left:8px;letter-spacing:0}
.pj-dist-head span{font-size:12.5px;color:#C9DECF}
.pj-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26)}
.pj-bar i{display:block;height:100%}
.pj-bar i + i{border-left:1px solid rgba(8,37,20,.45)}
.pj-key{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:14px}
.pj-key div{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#C9DECF}
.pj-key em{width:10px;height:10px;border-radius:3px;flex:none;font-style:normal}
.pj-key b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}

/* =============================================================== FILTER */
/* The only interactive control on the site. Buttons, not links — nothing
   navigates, the list filters in place. */
.pj-filter{display:flex;gap:9px;flex-wrap:wrap;
  padding:clamp(22px,2.6vw,32px) 0 0}
.pj-filter button{font-family:var(--b);font-size:13.5px;font-weight:600;cursor:pointer;
  padding:9px 17px;border-radius:999px;background:#fff;color:var(--ink);
  border:1px solid var(--m-line-ui);
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease)}
.pj-filter button:hover{border-color:var(--green-dk);color:var(--green-dk)}
.pj-filter button[aria-pressed="true"]{background:var(--green-dk);border-color:var(--green-dk);
  color:#fff}
.pj-filter button:focus-visible{outline:3px solid var(--green-dk);outline-offset:3px}
.pj-count{font-size:13px;color:var(--m-muted);margin-top:14px}

/* ============================================================ LEDGER ROWS */
.pj-rows{display:grid;gap:clamp(30px,3.6vw,52px)}
.pj-row{display:grid;gap:clamp(20px,2.6vw,40px);align-items:center}
@media(min-width:820px){
  .pj-row{grid-template-columns:1.05fr .95fr}
  /* alternating sides — the zig-zag is what stops this reading as a grid */
  .pj-row:nth-child(even) .pj-row-media{order:2}
}
.pj-row[hidden]{display:none}

.pj-row-media{position:relative;display:block;border-radius:18px;overflow:hidden;
  background:var(--m-card);box-shadow:0 1px 2px rgba(17,24,39,.05)}
/* photographs are 1000x500; at ~600px the render stays well inside native */
.pj-row-media img{width:100%;aspect-ratio:2/1;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.pj-row:hover .pj-row-media img{transform:scale(1.04)}
.pj-shots-n{position:absolute;right:12px;bottom:12px;z-index:2;
  background:rgba(8,37,20,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 12px;
  font-family:var(--b);font-size:11.5px;font-weight:600;color:#fff}

.pj-row-body{min-width:0}
.pj-type{display:inline-block;font-family:var(--b);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green-dk);
  background:var(--m-card);border-radius:999px;padding:5px 13px}
.pj-row h3{font-family:var(--h);font-weight:500;color:var(--ink);
  font-size:clamp(20px,2.4vw,27px);line-height:1.22;letter-spacing:-.022em;
  margin:14px 0 5px;max-width:20ch}
.pj-row-loc{display:block;font-size:14px;color:var(--m-muted)}

/* the capacity figure and its bar, drawn to a scale shared by every row */
.pj-cap{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.pj-cap-n{display:flex;align-items:baseline;gap:9px}
.pj-cap-n b{font-family:var(--h);font-size:clamp(26px,3vw,34px);font-weight:300;
  color:var(--ink);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.pj-cap-n span{font-size:12.5px;color:var(--m-muted)}
.pj-scale{margin-top:12px;height:8px;border-radius:999px;background:var(--m-card-2);
  overflow:hidden}
.pj-scale i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--green-dk),var(--green))}
.pj-scale-note{display:block;margin-top:8px;font-size:11.5px;color:var(--m-muted)}

.pj-row .hp-pill{margin-top:22px}

/* an unconfirmed entry is labelled, never presented as verified */
.pj-row--flag .pj-cap{border-top-style:dashed}
.pj-flag{display:inline-block;background:#FFF9EC;border:1px solid #F0DFB4;color:#7A5B14;
  font-family:var(--b);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px}

/* ========================================================= DETAIL HEADER */

/* forest green, matching the footer and the homepage enquiry panel — this was
   the last navy surface left on the site */
.pj-dhero{position:relative;overflow:hidden;background:#082514;color:#fff;
  padding:clamp(46px,6vw,78px) 0 clamp(40px,5vw,62px)}
.pj-dhero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.pj-dhero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;
  filter:saturate(.8) contrast(1.03)}
.pj-dhero::before{content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(700px 400px at 92% 0%, rgba(60,180,72,.20), transparent 60%),
    linear-gradient(90deg,
      rgba(8,37,20,.975) 0%,
      rgba(10,45,26,.95) 40%,
      rgba(12,53,32,.84) 62%,
      rgba(15,63,41,.52) 82%,
      rgba(17,71,48,.34) 100%),
    linear-gradient(180deg, rgba(8,37,20,.5) 0%, transparent 26%, rgba(8,37,20,.7) 100%)}
.pj-dhero > .hp-wrap{position:relative;z-index:2}
.pj-crumb{display:flex;gap:9px;align-items:center;font-size:13.5px;color:#A9C6B2;
  margin-bottom:18px;flex-wrap:wrap}
.pj-crumb a:hover{color:#8FE39A}
.pj-crumb span{opacity:.5}
.pj-crumb em{font-style:normal;color:#fff;opacity:1}
.pj-dhero h1{font-family:var(--h);font-weight:800;color:#fff;
  font-size:clamp(27px,4vw,44px);line-height:1.08;letter-spacing:-.03em;
  margin:0 0 12px;max-width:20ch;text-wrap:balance;text-shadow:0 2px 22px rgba(4,8,20,.5)}
.pj-dhero .pj-kw{background:var(--green-dk);margin-bottom:14px}
.pj-dloc{font-size:16px;color:#C9DECF;text-shadow:0 1px 12px rgba(4,8,20,.5)}

/* spec strip */
.pj-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:var(--sh-sm)}
@media(min-width:760px){.pj-specs{grid-template-columns:repeat(4,1fr)}}
.pj-specs div{padding:22px 22px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
@media(min-width:760px){.pj-specs div{border-bottom:none} .pj-specs div:last-child{border-right:none}}
.pj-specs div:nth-child(2n){border-right:none}
@media(min-width:760px){.pj-specs div:nth-child(2n){border-right:1px solid var(--border)}}
.pj-specs dt{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 7px}
.pj-specs dd{margin:0;font-family:var(--h);font-size:17px;font-weight:750;color:var(--ink);
  letter-spacing:-.015em}

/* ============================================================ PHOTO GRID */
.pj-shots{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:700px){.pj-shots{grid-template-columns:repeat(2,1fr)}}
.pj-shot{position:relative;margin:0;border-radius:15px;overflow:hidden;background:var(--surface);
  border:1px solid var(--border);cursor:zoom-in;aspect-ratio:2/1}
.pj-shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pj-shot:hover img{transform:scale(1.04)}
.pj-shot figcaption{position:absolute;left:10px;bottom:10px;z-index:2;
  background:rgba(8,37,20,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);border-radius:9px;padding:6px 12px;
  font-size:11.5px;font-weight:600;color:#fff;font-family:var(--b)}

/* lightbox */
.pj-lb{position:fixed;inset:0;z-index:1100;background:rgba(4,8,20,.95);
  display:none;align-items:center;justify-content:center;padding:24px}
.pj-lb.on{display:flex}
.pj-lb img{max-width:min(1000px,94vw);max-height:86vh;width:auto;border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pj-lb button{position:absolute;background:rgba(255,255,255,.12);border:none;color:#fff;
  width:48px;height:48px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  transition:background .18s ease}
.pj-lb button:hover{background:rgba(255,255,255,.26)}
.pj-lb button:focus-visible{outline:3px solid var(--green-lt);outline-offset:2px}
.pj-lb svg{width:22px;height:22px}
.pj-lb .x{top:22px;right:22px}
.pj-lb .pv{left:22px;top:50%;transform:translateY(-50%)}
.pj-lb .nx{right:22px;top:50%;transform:translateY(-50%)}
.pj-lb .cnt{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#B7BCDE;font-size:14px}

/* prev / next */
.pj-nav{display:grid;gap:14px;grid-template-columns:1fr;margin-top:clamp(34px,4vw,52px)}
@media(min-width:700px){.pj-nav{grid-template-columns:1fr auto 1fr;align-items:center}}
.pj-nav-l{display:flex;gap:12px;align-items:center;padding:18px 22px;border:1px solid var(--border);
  border-radius:14px;background:#fff;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.pj-nav-l:hover{border-color:var(--navy);transform:translateY(-2px)}
.pj-nav-l svg{width:18px;height:18px;color:var(--muted);flex:none}
.pj-nav-l small{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.pj-nav-l b{display:block;font-family:var(--h);font-size:15px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em}
.pj-nav-l--next{text-align:right;flex-direction:row-reverse}

/* note shown on the one unverified entry */
.pj-note{display:flex;gap:12px;align-items:flex-start;padding:18px 22px;border-radius:14px;
  background:#FFF9EC;border:1px solid #F0DFB4;margin-top:26px}
.pj-note svg{width:19px;height:19px;color:#B4740A;flex:none;margin-top:2px}
.pj-note p{font-size:14px;color:#7A5B14}
.pj-note b{color:#5E460F}