/* =========================================================================
   /referenssit: REFERENSSISIVU PALVELUSIVUJEN LINJALLA (10.11.2026)
   haara claude/oef-referenssit. Lähde: Rasmuksen referenssilista 2.11.2026.
   -------------------------------------------------------------------------
   Pohja on sama järjestelmä kuin css/oef-e-lukulaskelma.css (paneeli per
   aihe, h2:n oranssi nollakohta, yksi vasen linja), juuritettu
   body.sivu--referenssit-luokkaan, joten mikään ei vuoda muille sivuille.

   SIGNATURE (makuportti §0.3): määräleima. Jokainen lohko alkaa koneen
   laskemalla lukumäärällä mono-kirjasimella (8 taloyhtiötä, 3 organisaatiota,
   26 taloyhtiötä), ja heron isoin luku on sama rekisteri suurena. Tekniset
   luvut (MW, MWh, kWp, porakaivot) ovat mono, nimet ja palvelut sans.
   Kortti vain projektinjohtohankkeille, joilla on teknistä dataa. Muut ovat
   rivejä ja listaa (common region vasta kun läheisyys ei riitä).
   Ei 50 %- eikä 9999px-kulmia (taysikulma-testi).
   ========================================================================= */

body.sivu--referenssit {
  --elu-mitta: 1160px;
  --elu-sisa: var(--v16);
  --elu-valo: rgba(255, 92, 0, 0.07);
  --elu-yla: rgba(255, 92, 0, 0.28);
  background-color: var(--oef-bg);
}
@media (max-width: 820px) { body.sivu--referenssit { --elu-sisa: var(--v8); } }
@media (max-width: 480px) { body.sivu--referenssit { --elu-sisa: var(--v5); } }

body.sivu--referenssit .elu {
  padding: 128px var(--v6) var(--v24);
}
@media (max-width: 480px) { body.sivu--referenssit .elu { padding-inline: var(--v4); } }

body.sivu--referenssit .elu > * {
  box-sizing: border-box;
  max-width: var(--elu-mitta);
  margin-inline: auto;
}

/* -- Murupolku ------------------------------------------------------------ */
body.sivu--referenssit .elu-polku {
  font-size: var(--t-1);
  color: var(--teksti-3);
  margin-bottom: var(--v8);
}
body.sivu--referenssit .elu-polku ol { display: flex; flex-wrap: wrap; gap: var(--v2); list-style: none; margin: 0; padding: 0; }
body.sivu--referenssit .elu-polku li + li::before { content: "/"; margin-right: var(--v2); opacity: 0.55; }
body.sivu--referenssit .elu-polku a { color: var(--teksti-3); text-decoration: none; }
body.sivu--referenssit .elu-polku a:hover { color: var(--teksti-1); }
body.sivu--referenssit .elu-polku [aria-current] { color: var(--teksti-2); }

/* -- Hero: ei paneelia, sama vasen linja --------------------------------- */
body.sivu--referenssit .elu-hero { padding: var(--v8) 0 var(--v16); }
body.sivu--referenssit .elu-hero h1 {
  font-family: var(--f-naytto);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #E2E8F0;
  max-width: 18ch;
  margin: 0 0 var(--v6);
}
body.sivu--referenssit .elu-ingressi {
  font-size: var(--t-3);
  line-height: 1.5;
  color: var(--teksti-2);
  max-width: 62ch;
  margin: 0 0 var(--v8);
}
body.sivu--referenssit .elu-toiminnot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--v4) var(--v8);
}
body.sivu--referenssit .elu-toissijainen {
  color: var(--toiminta-linkki);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
body.sivu--referenssit .elu-toissijainen:hover { color: var(--teksti-1); }
body.sivu--referenssit .elu-luotto {
  margin: var(--v8) 0 0;
  padding-top: var(--v4);
  border-top: 1px solid var(--oef-viiva-heikko);
  max-width: 62ch;
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teksti-3);
}

/* -- Paneeli per aihe ---------------------------------------------------- */
body.sivu--referenssit .elu-paneeli {
  padding: var(--elu-sisa);
  background-color: var(--oef-pinta-1);
  background-image: radial-gradient(70% 60% at 0% 0%, var(--elu-valo), transparent 70%);
  border: 1px solid var(--oef-viiva-heikko);
  border-top-color: var(--elu-yla);
  border-radius: var(--r-kortti);
  scroll-margin-top: 112px;
}
body.sivu--referenssit .elu-paneeli + .elu-paneeli { margin-top: var(--v12); }

body.sivu--referenssit .elu-paneeli h2 {
  font-family: var(--f-naytto);
  font-size: var(--t-4);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--teksti-1);
  max-width: 24ch;
  margin: 0 0 var(--v6);
}
body.sivu--referenssit .elu-paneeli h2::before {
  content: "";
  display: block;
  width: var(--v6);
  height: 2px;
  margin-bottom: var(--v5);
  background-color: var(--toiminta);
}
body.sivu--referenssit .elu-paneeli p,
body.sivu--referenssit .elu-paneeli li {
  font-size: var(--t-2);
  line-height: 1.65;
  color: var(--teksti-2);
}
body.sivu--referenssit .elu-paneeli p { max-width: 68ch; margin: 0 0 var(--v4); }
body.sivu--referenssit .elu-paneeli p:last-child { margin-bottom: 0; }
body.sivu--referenssit .elu-paneeli strong { color: var(--teksti-1); font-weight: 600; }
body.sivu--referenssit .elu-paneeli a:not(.btn-primary) {
  color: var(--toiminta-linkki);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
body.sivu--referenssit .elu-paneeli a:not(.btn-primary):hover { color: var(--teksti-1); }

/* -- CTA-paneeli ---------------------------------------------------------- */
body.sivu--referenssit .elu-cta .elu-toiminnot { margin-top: var(--v8); }
body.sivu--referenssit .elu-takaisin {
  display: inline-block;
  margin-top: var(--v8);
  font-size: var(--t-1);
}
body.sivu--referenssit .elu-paneeli a.elu-takaisin { color: var(--teksti-3); text-decoration: none; }
body.sivu--referenssit .elu-paneeli a.elu-takaisin:hover { color: var(--teksti-1); }

/* Mobiilin alapalkki peittää sivun lopun: tilaa sen alle. */
@media (max-width: 1023px) { body.sivu--referenssit .elu { padding-bottom: 160px; } }

/* -- Heron nosto: suurin luku koko sivulla -------------------------------- */
body.sivu--referenssit .ref-nosto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--v2) var(--v4);
  margin: var(--v8) 0 0;
  padding-top: var(--v6);
  border-top: 1px solid var(--oef-viiva-heikko);
  max-width: 62ch;
}
body.sivu--referenssit .ref-nosto__luku {
  font-family: var(--f-kone);
  font-size: var(--t-5);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--teksti-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.sivu--referenssit .ref-nosto__teksti {
  font-size: var(--t-3);
  line-height: 1.35;
  color: var(--teksti-2);
}

/* -- Määräleima otsikon alla (signature) --------------------------------- */
body.sivu--referenssit .elu-paneeli h2:has(+ .ref-maara) { margin-bottom: var(--v2); }
body.sivu--referenssit .elu-paneeli p.ref-maara {
  font-family: var(--f-kone);
  font-size: var(--t-1);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--teksti-3);
  margin: 0 0 var(--v6);
  font-variant-numeric: tabular-nums;
}

body.sivu--referenssit .ref-yhtio { color: var(--teksti-3); font-weight: 500; }

/* -- Projektinjohtohankkeet: kaksi suurinta kärkeen, muut kolmeen palstaan -- */
body.sivu--referenssit .ref-hankkeet {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--v4);
  list-style: none;
  margin: var(--v8) 0 0;
  padding: 0;
}
body.sivu--referenssit .ref-hanke {
  grid-column: span 2;
  padding: var(--v6);
  background-color: var(--oef-pinta-1);
  border: 1px solid var(--oef-viiva);
  border-radius: var(--r-kortti);
}
body.sivu--referenssit .ref-hanke--suuri { grid-column: span 3; padding: var(--v8); }
body.sivu--referenssit .ref-hanke h3 {
  font-family: var(--f-naytto);
  font-size: var(--t-3);
  font-weight: 700;
  line-height: 1.25;
  color: var(--teksti-1);
  margin: 0 0 var(--v2);
}
body.sivu--referenssit .ref-hanke--suuri h3 { font-size: var(--t-4); }
body.sivu--referenssit .elu-paneeli .ref-hanke p.ref-hanke__ratkaisu { margin: 0; color: var(--teksti-2); }
body.sivu--referenssit .ref-luvut {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v5) var(--v6);
  margin: var(--v6) 0 0;
  padding-top: var(--v5);
  border-top: 1px solid var(--oef-viiva);
}
body.sivu--referenssit .ref-luvut > div { display: flex; flex-direction: column-reverse; gap: var(--v1); }
body.sivu--referenssit .ref-luvut dt { font-size: var(--t-1); line-height: 1.4; color: var(--teksti-3); }
body.sivu--referenssit .ref-luvut dd {
  margin: 0;
  font-family: var(--f-kone);
  font-size: var(--t-3);
  font-weight: 600;
  line-height: 1.1;
  color: var(--teksti-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.sivu--referenssit .ref-hanke--suuri .ref-luvut dd { font-size: var(--t-4); }
body.sivu--referenssit .ref-hanke:not(.ref-hanke--suuri) .ref-luvut { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) {
  body.sivu--referenssit .ref-hankkeet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.sivu--referenssit .ref-hanke { grid-column: span 1; }
  body.sivu--referenssit .ref-hanke--suuri { grid-column: span 2; }
}
@media (max-width: 560px) {
  body.sivu--referenssit .ref-hankkeet { grid-template-columns: minmax(0, 1fr); }
  body.sivu--referenssit .ref-hanke,
  body.sivu--referenssit .ref-hanke--suuri { grid-column: auto; padding: var(--v6); }
}

/* -- Organisaatiot: rivit hiusviivoin, nimi vasemmalla, palvelut oikealla -- */
body.sivu--referenssit .ref-orgit {
  list-style: none;
  margin: var(--v6) 0 0;
  padding: 0;
  border-bottom: 1px solid var(--oef-viiva);
}
body.sivu--referenssit .elu-paneeli .ref-org {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  max-width: none;
  gap: var(--v3) var(--v8);
  padding: var(--v6) 0;
  border-top: 1px solid var(--oef-viiva);
}
body.sivu--referenssit .ref-org h3 {
  font-family: var(--f-naytto);
  font-size: var(--t-3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--teksti-1);
  margin: 0;
}
body.sivu--referenssit .ref-org__palvelut { list-style: none; margin: 0; padding: 0; }
body.sivu--referenssit .elu-paneeli .ref-org__palvelut li { position: relative; padding-left: var(--v5); }
body.sivu--referenssit .ref-org__palvelut li + li { margin-top: var(--v2); }
body.sivu--referenssit .ref-org__palvelut li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: var(--v2);
  height: 1px;
  background-color: var(--teksti-3);
}
@media (max-width: 720px) {
  body.sivu--referenssit .elu-paneeli .ref-org { grid-template-columns: minmax(0, 1fr); }
}

/* -- Energiaselvitykset: tiivis palstalista, ei kortteja ----------------- */
body.sivu--referenssit .ref-nimet {
  columns: 3;
  column-gap: var(--v8);
  list-style: none;
  margin: var(--v6) 0 0;
  padding: var(--v4) 0 0;
  border-top: 1px solid var(--oef-viiva);
}
body.sivu--referenssit .elu-paneeli .ref-nimet li {
  break-inside: avoid;
  padding: var(--v2) 0;
  border-bottom: 1px solid var(--oef-viiva-heikko);
  color: var(--teksti-1);
  line-height: 1.5;
}
@media (max-width: 960px) { body.sivu--referenssit .ref-nimet { columns: 2; } }
@media (max-width: 520px) { body.sivu--referenssit .ref-nimet { columns: 1; } }