/* -----------------------------------------------------------------------
   Lisäpalveluiden alasivut

   Kevyempi kuin landeri: ei omaa navigaatiota eikä hero-osiota. Nämä
   sivut luetaan, kun asiakas on jo tilaamassa ja haluaa tietää mitä
   yksi rivi tarkoittaa. Silloin tärkeintä on että sivu latautuu heti ja
   vastaa kysymykseen kolmessa ruudullisessa.

   Sivut käyttävät `.sivu`-pohjaa (sama kuin sopimusehdot ja tilaus),
   joten peruspalsta ja otsikkokoot tulevat sieltä. Täällä on vain se,
   mikä on näille sivuille omaa.
   ----------------------------------------------------------------------- */

.sivu {
  --ps-paneeli: #0C130E;
  --ps-kortti:  #18271B;
  --ps-raja:    #3A4C36;
  --ps-lime:    var(--wp--preset--color--vihrea, #8BD03C);
  --ps-lime-v:  var(--wp--preset--color--vihrea-v, #A3E355);
  --ps-teksti:  var(--wp--preset--color--teksti, #F2F5F0);
  --ps-pehmea:  var(--wp--preset--color--pehmea, #B9C4B7);
  --ps-himmea:  var(--wp--preset--color--himmea, #8E9C8C);
}

/* ---------- murupolku ---------- */

.sivu .murut {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ps-himmea); margin: 0 0 6px;
}
.sivu .murut a { color: var(--ps-himmea); text-underline-offset: 3px; }
.sivu .murut a:hover { color: var(--ps-lime-v); }

/* ---------- kaaviot ---------- */

/*
 * Kuvitus on piirretty SVG:nä eikä valokuvattu. Syy on rehellisyys:
 * nämä palvelut rakennetaan jokaiselle asiakkaalle erikseen, joten
 * "kuvakaappaus" olisi kuva jonkun toisen sivustosta. Kaavio kertoo
 * miten asia toimii ilman että se lupaa tiettyä ulkoasua.
 *
 * SVG on tekstiä, joten se skaalautuu, latautuu heti ja mukautuu
 * teeman väreihin. Yhteensä nämä painavat vähemmän kuin yksi valokuva.
 */
.sivu .kaavio {
  margin: clamp(26px, 3.4vw, 40px) 0 0;
  background: var(--ps-paneeli);
  border: 1px solid var(--ps-raja);
  border-radius: 14px;
  padding: clamp(18px, 2.4vw, 30px);
  max-width: 860px;
}
/*
 * ⚠ KAAVIO VIERII PUHELIMESSA, EI KUTISTU.
 *
 * 390 pikselin ruudulla koko kaavio mahtui leveyteen — ja sen 11 pikselin
 * selitteet kutistuivat viiteen pikseliin, eli lukukelvottomiksi. Kuva
 * näytti hyvältä ja oli täysin hyödytön.
 *
 * Nyt kaaviolla on vähimmäisleveys ja sen oma vaakavieritys. Sivu itse ei
 * vieri sivusuunnassa, vain tämä laatikko.
 */
.sivu .kaavio { overflow-x: auto; }
.sivu .kaavio svg { display: block; width: 100%; min-width: 560px; height: auto; }
.sivu .kaavio figcaption {
  margin: 16px 0 0; font-size: .88rem; line-height: 1.55;
  color: var(--ps-himmea); max-width: 62ch;
}

.k-tausta { fill: var(--ps-kortti); }
.k-laatikko { fill: var(--ps-kortti); stroke: var(--ps-raja); stroke-width: 1.5; }
.k-korostus { fill: var(--ps-kortti); stroke: var(--ps-lime); stroke-width: 2; }
.k-taytto { fill: var(--ps-lime); }
.k-teksti {
  fill: var(--ps-teksti); font-size: 13px; font-weight: 600;
  font-family: var(--wp--preset--font-family--paa, system-ui, sans-serif);
}
.k-pieni {
  fill: var(--ps-himmea); font-size: 11px; font-weight: 400;
  font-family: var(--wp--preset--font-family--mono, monospace);
}
.k-lime { fill: var(--ps-lime-v); }
.k-tumma { fill: #08120A; }
.k-viiva { stroke: var(--ps-himmea); stroke-width: 1.4; fill: none; }
.k-viiva-lime { stroke: var(--ps-lime); stroke-width: 1.8; fill: none; }
.k-katko { stroke-dasharray: 4 4; }

/* ---------- luettelo siitä mitä saa ---------- */

.sivu .saat {
  list-style: none; margin: clamp(18px, 2vw, 26px) 0 0; padding: 0;
  display: grid; gap: 12px; max-width: 760px;
}
/*
 * ⚠ EI FLEXIÄ RIVILLE. Kohta alkaa lihavoidulla <b>-alkusanalla, ja
 * flex-rivissä siitä tulee oma flex-kohteensa: lihavoitu osa jäi
 * kapeaksi sarakkeeksi ja lopputeksti toiseksi. Merkki asemoidaan
 * siksi irralleen tekstivirrasta.
 */
.sivu .saat li {
  position: relative; padding-left: 35px;
  font-size: 1rem; line-height: 1.55; color: var(--ps-pehmea);
}
.sivu .saat li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--ps-lime); color: #08120A;
  border-radius: 6px; font-size: 12px; font-weight: 700;
}
.sivu .saat b { color: var(--ps-teksti); font-weight: 600; }

/* ---------- hintalaatikko ---------- */

.palvelu-hinta {
  margin: clamp(26px, 3.4vw, 40px) 0 0;
  background: var(--ps-paneeli);
  border: 2px solid var(--ps-raja);
  border-radius: 14px;
  padding: clamp(20px, 2.6vw, 30px);
  max-width: 520px;
}
.ph-luvut {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  font-family: var(--wp--preset--font-family--mono, monospace);
}
.ph-alkaen, .ph-yksikko { color: var(--ps-himmea); font-size: .95rem; }
.ph-luku { font-size: clamp(1.9rem, 3.4vw, 2.5rem); color: var(--ps-lime-v); letter-spacing: -.02em; }
.ph-kk { font-size: 1.05rem; color: var(--ps-pehmea); }

.ph-tiedot {
  margin: 18px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--ps-raja);
  display: grid; grid-template-columns: auto 1fr; gap: 7px 18px;
  font-size: .92rem;
}
.ph-tiedot dt {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ps-himmea); align-self: center;
}
.ph-tiedot dd { margin: 0; color: var(--ps-pehmea); }

/*
 * ⚠ NAPPI ASETTAA OMAN TAUSTANSA JA VÄRINSÄ. Teeman linkkisäännöt eivät
 * kata tätä, ja ilman värejä teksti jää lähes näkymättömäksi vaalealle.
 */
.ph-nappi {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 22px 0 0; padding: 13px 24px;
  background: var(--ps-lime); color: #08120A;
  border-radius: 10px; font-weight: 700; font-size: 1rem;
  text-decoration: none;
}
.ph-nappi:hover { background: var(--ps-lime-v); color: #08120A; }
.ph-nappi::after { content: "→"; font-weight: 400; }

.ph-huom {
  margin: 12px 0 0; font-size: .86rem; line-height: 1.55;
  color: var(--ps-himmea); max-width: 46ch;
}

/* ---------- kysyttyä ---------- */

.sivu .kysytty {
  margin: clamp(20px, 2.4vw, 28px) 0 0; max-width: 760px;
  display: grid; gap: 10px;
}
.sivu .kysytty details {
  background: var(--ps-paneeli);
  border: 1px solid var(--ps-raja);
  border-radius: 12px;
  padding: 16px 20px;
}
.sivu .kysytty summary {
  cursor: pointer; font-weight: 600; color: var(--ps-teksti);
  font-size: 1rem; line-height: 1.4;
  list-style: none; display: flex; gap: 12px; align-items: flex-start;
}
.sivu .kysytty summary::-webkit-details-marker { display: none; }
.sivu .kysytty summary::before {
  content: "+"; flex: 0 0 auto; color: var(--ps-lime);
  font-family: var(--wp--preset--font-family--mono, monospace); font-size: 1.1rem;
}
.sivu .kysytty details[open] summary::before { content: "−"; }
.sivu .kysytty details p {
  margin: 12px 0 0 24px; font-size: .95rem; line-height: 1.62;
  color: var(--ps-pehmea); max-width: 62ch;
}

/* ---------- hubin ruudukko ---------- */

.palvelut-ruudukko {
  margin: clamp(24px, 3vw, 34px) 0 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  max-width: 1100px;
}
.pr-kortti {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--ps-paneeli); border: 2px solid var(--ps-raja);
  border-radius: 13px; padding: 20px; text-decoration: none;
  transition: border-color .13s, background .13s;
}
.pr-kortti:hover { border-color: var(--ps-lime); background: var(--ps-kortti); }
.pr-nimi { color: var(--ps-teksti); font-weight: 600; font-size: 1.05rem; }
.pr-kuvaus { color: var(--ps-himmea); font-size: .9rem; line-height: 1.5; flex: 1; }
.pr-hinta {
  margin-top: 8px; color: var(--ps-lime-v);
  font-family: var(--wp--preset--font-family--mono, monospace); font-size: .92rem;
}

/* ---------- paluu tilaukseen ---------- */

.sivu .takaisin-tilaukseen {
  margin: clamp(40px, 5vw, 64px) 0 0; padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--ps-raja);
  font-size: .95rem; color: var(--ps-himmea);
}
.sivu .takaisin-tilaukseen a { color: var(--ps-lime-v); }