/* =====================================================================
   SIVUKAS-SAPLUUNA · KOMPONENTTITYYLIT
   =====================================================================
   Kaikki värit, fontit ja mitat tulevat teematiedostosta (teema.css)
   CSS-muuttujina. Tämä tiedosto on SAMA kaikilla sivustoilla — sivuston
   ilme vaihdetaan teematiedostoa vaihtamalla, ei tätä muokkaamalla.

   Uudet tokenit (--vari-hero, --vari-korostus-2, --vari-reuna,
   --vari-varjo, --vari-teksti-himmea, --vari-hover-pinta, --fontti-otsikko,
   --vari-nappi-teksti)
   on kirjoitettu var(x, fallback) -muodossa, jotta vanhat teemavariantit
   (css/teemat/) toimivat vaikka niistä puuttuisivat uudet arvot.

   --vari-tumma-rgb (lisätty 11.8.2026): --vari-tumma R,G,B pilkulla
   eroteltuna (esim. "22, 70, 60"), koska hex-/nimimuotoinen CSS-muuttuja
   ei sellaisenaan käy rgba()-funktion sisään läpikuultavaan taustaan.
   Käytössä osioissa 9 ja 10 alla. Kaikki neljä valmista teemaa sisältävät
   tämän jo — jos lisäät uuden teeman, muista laskea ja lisätä se myös.

   --vari-nappi-teksti (lisätty 6.8.2026): napin/korostuspallon tekstiväri
   --vari-korostus-taustaa vasten. Fallback on --vari-teksti-tummalla, joka
   riittää useimmille teemoille (korostusväri on tarpeeksi tumma valkoiselle
   tekstille). Aseta oma arvo teemassa VAIN jos --vari-teksti-tummalla
   epäonnistuisi WCAG-kontrastissa juuri --vari-korostus-taustalla — näin
   kävi "Tumma & näyttävä" -teemalle (kultainen nappi + valkoinen teksti =
   2,52:1, alle vaaditun 4,5:1). Älä sekoita --vari-teksti-tummalla:aan,
   joka on kiinteä footerin tekstiväri (--vari-tumma-taustaa vasten, eri pari).

   Sisällys:
     1. Perusasetukset
     2. Yleiset apuluokat (.rajaus, .nappi, .hyppylinkki)
     2b. Yläpalkki
     3. Hero
     4. Korttirivit (.kortit)
     5. Vaihekortit (.vaiheet)
     6. Hinnastotaulukko (.hinnasto)
     7. Footer
     8. Artikkeli (blogi)
     9. Hero-variantti: valokuva + CTA-laatikko (.hero-valokuva)
     10. Tumma tekstuuriosio (.osio-tumma)
     11. Kuvagalleria + lightbox (.galleria, .ennen-jalkeen, .lightbox)
     12. Yhteydenottolomake (.lomake)
   ===================================================================== */

/* --- 1. Perusasetukset --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--fontti);
  font-size: var(--fonttikoko-perus);
  color: var(--vari-teksti);
  background: var(--vari-tausta);
  line-height: var(--riviheitto);
}

h1, h2 {
  font-family: var(--fontti-otsikko, var(--fontti));
  font-weight: var(--otsikko-paino, 400);
}
h1 { font-size: var(--fonttikoko-h1); line-height: 1.06; margin-bottom: 1.25rem; }
h2 { font-size: var(--fonttikoko-h2); line-height: 1.15; margin-bottom: 2.25rem; }
h3 { font-size: var(--fonttikoko-h3); font-weight: 700; margin-bottom: .5rem; }
/* .hero/.hero-laatikko asettavat oman h1-jälkeisen välinsä seuraavan
   kappaleen margin-topilla (esim. "1.35rem 0 2rem") — h1:n oma
   margin-bottom nollataan ettei väli tuplaannu näissä konteksteissa.
   Muualla (artikkelit, toita.html — h1 suoraan .rajaus:ssa ilman heroa)
   yllä oleva margin-bottom antaa tarvittavan ilman otsikon ja leipätekstin
   väliin (löytyi 14.8.2026: h1:llä ei ollut aiemmin mitään väliä alle,
   teksti tarttui kiinni otsikkoon). */
.hero h1, .hero-laatikko h1 { margin-bottom: 0; }

/* Rivitys: otsikot tasapainoisiksi, leipäteksti ilman yksinäisiä loppusanoja.
   Ei koskaan *-valitsimella — sillä on suorituskykyhinta. */
h1, h2, h3 { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }

section { padding: var(--lohkovali) 0; }

/* Peräkkäisten kappaleiden väli (reset nollaa marginit → palautetaan rytmi) */
section p + p { margin-top: .85rem; }

/* Leipätekstin mitta ja sävy lohkoissa */
section > .rajaus > p { max-width: 62ch; color: var(--vari-teksti-himmea, inherit); }

/* Vaalea taustalohko — anna sectionille class="vaalea" */
.vaalea { background: var(--vari-vaalea); }

/* Näppäimistökäyttäjän fokusrengas näkyviin kaikissa interaktiivisissa */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--vari-korostus);
  outline-offset: 2px;
}

/* Leipätekstin linkkiväri. Ilman tätä selain piirtää main-alueen linkit
   omalla oletussinisellään (#0000EE), joka ei kuulu mihinkään teemaan.
   Rajattu main-elementtiin, koska yläpalkilla ja footerilla on jo omat
   värinsä (.ylapalkki nav a, footer a).

   Valitsin on tarkoituksella painoarvoltaan kaikkein kevein mahdollinen
   (0,0,2 — pelkkiä elementtejä): mikä tahansa luokkasääntö voittaa sen
   ilman lähdejärjestystemppuja. Napit (.nappi), korttiotsikot
   (.kortti-otsikko a) ja korttien tekstilinkit (.kortti p a) pitävät siis
   omat värinsä automaattisesti. Tämä on myös syy sijoitukselle heti osion 1
   loppuun: sääntö on perusasetus, ei komponenttia yliajava poikkeus.

   --vari-linkki on valinnainen teematoken. Aseta se teema.css:ssä VAIN jos
   --vari-korostus ei yllä 4,5:1-kontrastiin sekä --vari-tausta- ETTÄ
   --vari-vaalea-taustaa vasten (näin on videosiirtola-fi:llä). Tummat
   kontekstit vaihtavat saman tokenin, jolloin erillistä ".osio-tumma a"
   -sääntöä ei tarvita — sellainen olisi painoarvoltaan sama kuin
   ".kortti-otsikko a" ja alkaisi kilpailla siitä lähdejärjestyksellä.

   Alleviivaus jätetään selaimen oletukseksi: se erottaa linkin leipätekstistä
   silloinkin kun väri ei riitä (hkark-fi:llä linkkiväri = tekstiväri). */
main a { color: var(--vari-linkki, var(--vari-korostus)); }
main a:hover { color: var(--vari-linkki-hover, var(--vari-korostus-hover)); }

/* --- 2. Yleiset apuluokat --- */

/* Sisällön rajaus keskelle */
.rajaus {
  max-width: var(--sisallon-leveys);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Toimintanappi (linkki napin näköisenä) */
.nappi {
  display: inline-block;
  background: var(--vari-korostus);
  color: var(--vari-nappi-teksti, var(--vari-teksti-tummalla));
  padding: .85rem 1.85rem;
  border-radius: var(--pyoristys);
  text-decoration: none;
  font-weight: 700;
}
.nappi:hover { background: var(--vari-korostus-hover); }

/* Hyppylinkki ("Siirry sisältöön"): piilossa kunnes saa näppäimistöfokuksen.
   YHTEINEN-yläpalkin ensimmäinen linkki joka sivulla; kohde <main id="sisalto">. */
.hyppylinkki {
  position: absolute;
  left: 1rem;
  top: .75rem;
  z-index: 10;
  background: var(--vari-tumma);
  color: var(--vari-teksti-tummalla);
  padding: .6rem 1.1rem;
  border-radius: var(--pyoristys);
  text-decoration: none;
  transform: translateY(-250%);
}
.hyppylinkki:focus { transform: none; }

/* Hyppylinkin kohde: ei fokusrengasta koko sisältölohkon ympärille */
main[tabindex="-1"]:focus { outline: none; }

/* Toissijainen nappi (ääriviiva) */
.nappi--toissijainen {
  background: transparent;
  color: inherit;
  border: 2px solid currentColor;
  padding: calc(.85rem - 2px) calc(1.85rem - 2px);
}
.nappi--toissijainen:hover { background: var(--vari-hover-pinta, rgba(0 0 0 / .06)); }

/* Kanavaikoni napin sisällä (esim. WhatsApp-logo): kertoo silmäyksellä
   mihin nappi vie, ilman että vakiintunutta nappitekstiä ("Kuva-arvio
   tunnissa") tarvitsee muuttaa rinnakkaisen formivaihtoehdon takia. */
.nappi .ikoni {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -.2em;
  margin-right: .45rem;
  fill: currentColor;
}

/* --- 2b. Yläpalkki (YHTEINEN navigaatio) --- */
.ylapalkki {
  background: var(--vari-tausta);
  border-bottom: 1px solid var(--vari-reuna, rgba(0 0 0 / .1));
}
.ylapalkki .rajaus {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-top: .9rem; padding-bottom: .9rem;
}
.ylapalkki nav { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.ylapalkki nav a { color: var(--vari-teksti); text-decoration: none; font-size: 1rem; }
.ylapalkki nav a:hover { color: var(--vari-korostus); }
.ylapalkki .nappi { padding: .55rem 1.15rem; font-size: .95rem; border-radius: calc(var(--pyoristys) - 2px); }
/* KONTRASTIKORJAUS (PSI 30.7.2026): ".ylapalkki nav a" voittaa ".nappi"-säännön
   spesifisyydellä (0,1,2 > 0,1,0) → yläpalkin napin teksti peri tumman värin
   vihreällä pohjalla (kontrasti 2,1:1; WCAG AA vaatii 4,5:1). Palautetaan napin
   oma tekstiväri, myös hoverissa (nav a:hover voittaisi muuten samoin). */
.ylapalkki nav a.nappi,
.ylapalkki nav a.nappi:hover { color: var(--vari-nappi-teksti, var(--vari-teksti-tummalla)); }

/* Ankkurilinkkien pehmeä vieritys */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
section[id] { scroll-margin-top: 1rem; }

/* --- 3. Hero (kaksipalstainen: teksti + maskotti; kapealla pinoutuu) --- */
.hero {
  background: var(--vari-hero, var(--vari-vaalea));
  color: var(--vari-teksti);
  padding: var(--lohkovali) 0;
}
.hero .rajaus { display: flex; align-items: center; gap: 3rem; flex-wrap: wrap; }
.hero-teksti { flex: 1 1 26rem; }
.hero-kuva { flex: 0 1 auto; margin-inline: auto; }
.hero-kuva svg { width: clamp(220px, 30vw, 340px); height: auto; display: block; }
.hero h1 em { color: var(--vari-korostus-2-tumma, var(--vari-korostus)); font-style: italic; }
.hero p { margin: 1.35rem 0 2rem; font-size: 1.3125rem; max-width: 42ch; color: var(--vari-teksti-himmea, inherit); }
.hero .napit { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Logo: maskottimerkki (inline-SVG) + tekstiosa vierekkäin.
   SVG:n värit tulevat teemasta var()-arvoina, joten teemanvaihto värittää
   myös maskotin. */
.logo {
  color: var(--vari-teksti);
  font-weight: 700; letter-spacing: .02em;
  font-size: 1.25rem;
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none;
}
.logo svg { width: 48px; height: auto; flex: none; }

/* --- 4. Korttirivit --- */
.kortit {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.kortti {
  background: var(--vari-vaalea);
  border-radius: var(--pyoristys);
  padding: 1.75rem 1.6rem;
  box-shadow: 0 2px 10px var(--vari-varjo, rgba(0 0 0 / .06));
}
/* Kortit vaalealla taustalohkolla tarvitsevat vaalean pohjan */
.vaalea .kortti { background: var(--vari-tausta); }

/* Kortin otsikko oikealla otsikkotasolla (esim. h2 kun sivulla ei ole
   erillistä h2:ta ennen korttilistaa) mutta h3:n ulkoasulla — h2 perisi
   muuten Instrument Serifin ja ison koon. */
.kortti-otsikko { font-size: var(--fonttikoko-h3); font-weight: 700; margin-bottom: .5rem; font-family: var(--fontti); }

/* Ikonin värillinen ympyrä kortin yläreunassa */
.ikoni-tausta {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--vari-korostus-2, var(--vari-korostus));
  display: grid; place-items: center;
  margin-bottom: 1rem;
}
/* Ikonin viiva tummana oranssilla ympyrällä — valkoinen jäisi alle 3:1 (WCAG,
   ei-tekstisisältö). Jos --vari-korostus-2 on tumma, vaihda tämä vaaleaksi. */
.ikoni-tausta .ikoni { width: 23px; height: 23px; color: var(--vari-tumma); }
.kortti p { color: var(--vari-teksti-himmea, inherit); }

/* Linkkikortti (blogilistaus): koko kortti klikattavaksi otsikkolinkin
   ::before-peitolla. Rajattu :has(.kortti-otsikko):lla, jotta muut
   .kortti-käytöt (esim. etusivun ominaisuuskortit) eivät muutu. */
.kortti:has(.kortti-otsikko) {
  position: relative;
  transition: box-shadow .15s ease, transform .15s ease;
}
.kortti:has(.kortti-otsikko):hover {
  box-shadow: 0 4px 16px var(--vari-varjo, rgba(0 0 0 / .12));
  transform: translateY(-2px);
}
/* Kortin linkkien väri periytyy kortin omasta tekstiväristä. Ilman tätä
   selain piirtää ne oletussinisellään (#0000EE), joka ei kuulu mihinkään
   teemaan eikä toimi tummalla kortilla (kontrasti ~2,3:1). Löytyi
   hkark-fi:stä 10.9.2026 — sapluunan demosisällössä ei ollut linkitettyjä
   korttiotsikoita eikä "Lue lisää" -linkkejä, joten puute ei näkynyt.
   `inherit` on tässä oikea valinta värin sijaan: se seuraa automaattisesti
   sekä vaaleaa (.kortti p) että tummaa (.osio-tumma .kortti p) kontekstia,
   joten yksikään teema ei tarvitse omaa sääntöä. Alleviivaus jää paikalleen
   ja merkitsee linkin (korttiotsikossa sen tekee ::after-nuoli + koko
   kortin peittävä ::before-linkkialue). */
.kortti-otsikko a { color: inherit; text-decoration: none; }
.kortti p a { color: inherit; }
.kortti-otsikko a::before { content: ""; position: absolute; inset: 0; }
.kortti-otsikko a::after { content: " →"; display: inline-block; transition: transform .15s ease; }
.kortti:has(.kortti-otsikko):hover .kortti-otsikko a::after { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .kortti:has(.kortti-otsikko) { transition: none; }
  .kortti-otsikko a::after { transition: none; }
}

/* --- 5. Vaihekortit (numeroitu prosessi) --- */
.vaiheet {
  list-style: none; counter-reset: vaihe;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.vaiheet li {
  counter-increment: vaihe;
  background: var(--vari-tausta);
  border-radius: var(--pyoristys);
  padding: 1.75rem 1.6rem;
  box-shadow: 0 2px 10px var(--vari-varjo, rgba(0 0 0 / .06));
}
.vaiheet li::before {
  content: counter(vaihe);
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--vari-korostus);
  color: var(--vari-nappi-teksti, var(--vari-teksti-tummalla));
  font-weight: 700; font-size: 1.1875rem;
  margin-bottom: 1rem;
}
.vaiheet p { color: var(--vari-teksti-himmea, inherit); }
.vaiheet a { color: var(--vari-korostus); font-weight: 700; }

/* --- 6. Hinnastotaulukko --- */
.hinnasto {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.hinnasto .hinta { font-size: 2rem; font-weight: 700; margin: .75rem 0; }
.hinnasto .hinta small { font-size: 1rem; font-weight: 400; }
.hinnasto ul { list-style: none; margin: 1rem 0; }
.hinnasto li { padding-left: 1.5rem; position: relative; margin-bottom: .4rem; }
.hinnasto li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--vari-korostus); font-weight: 700;
}

/* --- 7. Footer --- */
footer {
  background: var(--vari-tumma);
  color: var(--vari-teksti-tummalla);
  padding: 2.25rem 0;
  font-size: .9375rem;
}
footer a { color: var(--vari-linkki-tummalla); }
footer p + p { margin-top: .35rem; color: rgb(255 255 255 / .75); }

/* --- 8. Artikkeli (blogi) --- */
/* Leipätekstin ja seuraavan väliotsikon väliin ilmaa (globaali h2/h3 ei
   varaa margin-topia, koska sama sääntö kattaa myös sectionin ensimmäisen
   otsikon, jolle lisätila ei sopisi). */
article h2 { margin-top: 2.5rem; }
article h3 { margin-top: 1.75rem; }

/* "← Takaisin"-linkki artikkelin/sisältösivun yläpuolella (esim.
   "← Blogi", "← Etusivu") — oma margin-bottom koska se on tavallinen
   <p>, ei osu mihinkään section p + p -sääntöön (se koskee vain
   peräkkäisiä p:itä, ei p:tä ennen otsikkoa). */
.takaisin-linkki { display: block; margin-bottom: 1rem; }

article table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; }
article th, article td {
  padding: .6rem .9rem;
  border: 1px solid var(--vari-reuna, rgba(0 0 0 / .1));
  text-align: left;
}
article th { background: var(--vari-vaalea); }

/* =====================================================================
   9. HERO-VARIANTTI: VALOKUVA + CTA-LAATIKKO
   =====================================================================
   Vaihtoehto osion 3 tavalliselle .hero:lle. Käytä kun asiakkaalla on
   iso oma valokuva eikä maskotti-SVG:tä: full-bleed valokuva taustalla,
   puolikuultava värilaatikko sen päällä. Ei backdrop-filteriä — pidetty
   tarkoituksella yksinkertaisena. Laatikon rgba(var(--vari-tumma-rgb), .75)
   -tausta on tarkistettu WCAG AA:ksi worst-case-oletuksella (laatikko
   puhtaan valkoisen valokuvakohdan päällä — todellinen kuva on lähes aina
   tummempi, joten tämä on alaraja): leipäteksti (--vari-teksti-tummalla)
   5,16–8,56:1 kaikilla neljällä teemalla (vaatii 4,5:1) — läpäisee reilusti.
   Jos muutat alfa-arvon (.75) tai --vari-tumma-rgb:n, laske kontrasti
   uudelleen (ks. myös CLAUDE.md).

   HTML:
   <section class="hero-valokuva" style="background-image:url('images/hero.jpg')">
     <div class="rajaus">
       <div class="hero-laatikko">
         <h1>Otsikko <em>korostus</em></h1>
         <p>Lyhyt teksti.</p>
         <div class="napit">
           <a class="nappi" href="...">Ensisijainen CTA</a>
           <a class="nappi nappi--toissijainen" href="#...">Toissijainen</a>
         </div>
         <p class="hero-badge"><svg aria-hidden="true">...</svg> Pieni luottamuslause</p>
       </div>
     </div>
   </section>
   ===================================================================== */
.hero-valokuva {
  background-color: var(--vari-tumma); /* näkyy hetken ennen kuin kuva latautuu */
  background-size: cover;
  background-position: center;
  min-height: min(88vh, 620px);
  display: flex;
  align-items: center;
}
.hero-valokuva .rajaus { width: 100%; }

.hero-laatikko {
  background: rgba(var(--vari-tumma-rgb), .75);
  color: var(--vari-teksti-tummalla);
  padding: 2.5rem 2.25rem;
  border-radius: 4px; /* tarkoituksella pienempi kuin --pyoristys — laatikko, ei kortti */
  max-width: 32rem;
}
.hero-laatikko h1 { color: inherit; }
/* --vari-linkki-tummalla on isolle tekstille (≥3:1) mitattu tässä laatikossa
   (3,70–4,40:1 kaikilla neljällä teemalla, worst-case-laskelma alla) — käytä
   VAIN h1 em:ssä, ei koskaan pienessä tekstissä hero-laatikon sisällä. */
.hero-laatikko h1 em { color: var(--vari-linkki-tummalla); font-style: italic; }
.hero-laatikko p { margin: 1.1rem 0 1.75rem; font-size: 1.125rem; max-width: 40ch; color: inherit; }
.hero-laatikko .napit { display: grid; gap: .75rem; }
.hero-laatikko .napit .nappi { text-align: center; }
.hero-laatikko .nappi--toissijainen { border-color: currentColor; }
.hero-laatikko .nappi--toissijainen:hover { background: rgb(255 255 255 / .12); }

/* Valokuvan aihe usein toisella puolella kuvaa — siirrä laatikko tyhjälle
   puolelle tällä tai valitse background-position inline-tyylillä sivulla. */
.hero-laatikko--oikea { margin-left: auto; }

/* Pieni luottamusmerkintä laatikon alla (esim. vastausaikalupaus) */
.hero-badge {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  font-size: .9rem;
  color: inherit;
  opacity: .92;
}
.hero-badge svg { width: 18px; height: 18px; flex: none; }

@media (max-width: 640px) {
  .hero-laatikko { padding: 1.85rem 1.5rem; max-width: none; }
}

/* =====================================================================
   10. TUMMA TEKSTUURIOSIO
   =====================================================================
   Täysleveä tumma osio esim. palvelukorteille. Tausta on aina
   var(--vari-tumma) — sama pari kuin footerissa (--vari-teksti-tummalla
   päällä), joten kontrastia ei tarvitse laskea uudelleen. Dekoratiivinen
   tekstuurikuva on INLINE-SVG suoraan HTML:ssä (ei ulkoinen tiedosto),
   koska vain inline-SVG voi lukea teeman var()-värit; tee kuvasta oma/
   lisenssivapaa, ei koskaan kopioitu toiselta sivustolta. Kortit tällä
   pohjalla saavat automaattisesti valkoisen tekstin alla olevilla
   säännöillä — ei tarvitse lisätä luokkia HTML:ään.

   HTML:
   <section class="osio-tumma">
     <svg class="osio-tumma-tausta" aria-hidden="true" viewBox="...">...</svg>
     <div class="rajaus">
       <h2>Otsikko</h2>
       <div class="kortit"> <div class="kortti">...</div> ... </div>
     </div>
   </section>
   ===================================================================== */
.osio-tumma {
  position: relative;
  background: var(--vari-tumma);
  color: var(--vari-teksti-tummalla);
  overflow: clip;
}

/* Linkit tummalla pohjalla: sama vaalea sävy kuin footerissa. Vaihdetaan
   tokenina eikä ".osio-tumma a" -sääntönä, jotta korttien omat linkkisäännöt
   jäävät voimaan — linkitetty korttiotsikko pysyy kortin tekstivärissä.
   Napit eivät käytä tätä tokenia, joten ne säilyttävät oman värityksensä. */
.osio-tumma, .hero-laatikko {
  --vari-linkki: var(--vari-linkki-tummalla);
  --vari-linkki-hover: var(--vari-teksti-tummalla);
}
.osio-tumma h2 { color: inherit; }
.osio-tumma > .rajaus { position: relative; z-index: 1; }
/* Voittaa globaalin "section > .rajaus > p" -säännön (osio 1), joka asettaisi
   tumman vari-teksti-himmea-värin — väärä tummalla pohjalla. */
.osio-tumma > .rajaus > p { color: inherit; }

.osio-tumma-tausta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%; height: auto;
  z-index: 0;
}

.osio-tumma .kortti {
  background: rgb(255 255 255 / .08);
  border: 1px solid rgb(255 255 255 / .14);
  box-shadow: none;
}
.osio-tumma .kortti h3 { color: var(--vari-teksti-tummalla); }
.osio-tumma .kortti p { color: var(--vari-teksti-tummalla); }

/* =====================================================================
   11. KUVAGALLERIA + LIGHTBOX (lisätty 14.8.2026, pihakaato.fi:n
   "Töitämme"-tarpeeseen — yleiskäyttöinen, ei asiakaskohtainen).

   .galleria: ruudukko pikkukuvista, avautuu <dialog>+Invoker Commands
   -lightboxiin ilman JS:ää (command/commandfor-attribuutit — Baseline
   "Newly available" 2025; jos selain ei tue, HTML:n oma
   feature-detect-polyfill-skripti hoitaa sen sivukohtaisesti, ei tässä).

   .ennen-jalkeen: kahden kuvan vierekkäinen vertailupari, ei lightboxin
   takana — nostetaan esiin suoraan sisällössä.
   ===================================================================== */
.galleria {
  display: grid;
  /* auto-fit (ei auto-fill): tyhjät sarakkeet romahtavat kun kuvia on
     vain 2-3 (esim. uuden keikan ensimmäiset kuvat) — auto-fill jättäisi
     ne paikoilleen ja kuvat jäisivät kapeiksi vasemmalle. Löytyi
     tuotannosta 23.8.2026. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
  margin-block: 1.5rem;
}
.galleria-pikkukuva {
  padding: 0; border: none; background: none; cursor: pointer;
  aspect-ratio: 4 / 3; overflow: clip; border-radius: var(--pyoristys);
  display: block; width: 100%;
}
.galleria-pikkukuva img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galleria-pikkukuva:focus-visible { outline: 3px solid var(--vari-korostus); outline-offset: 2px; }

.ennen-jalkeen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-block: 1.5rem;
}
/* aspect-ratio + object-fit: lähdekuvat ovat sekaisin pysty/vaakakuvia
   (puhelimella otettu) — ilman pakotettua suhdetta pari näyttää
   epätasaiselta. 3:4 koska suurin osa keikkakuvista on pystyyn otettuja. */
.ennen-jalkeen img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--pyoristys); display: block; }
.ennen-jalkeen figure { margin: 0; }
.ennen-jalkeen figcaption {
  text-align: center; font-weight: 700; margin-top: .5rem;
  color: var(--vari-teksti-himmea, inherit);
}
@media (max-width: 30rem) {
  .ennen-jalkeen { grid-template-columns: 1fr; }
}

/* <dialog> oletustyylit nollataan; ::backdrop tummentaa taustan. Ei
   backdrop-filteriä (sama "pidä yksinkertaisena" -periaate kuin
   hero-laatikossa, osio 9). */
.lightbox {
  border: none; padding: 0;
  max-width: min(90vw, 1200px); max-height: 90vh;
  background: transparent; border-radius: var(--pyoristys);
}
.lightbox img { width: 100%; height: auto; display: block; border-radius: var(--pyoristys); }
.lightbox::backdrop { background: rgb(0 0 0 / .72); }
.lightbox-sulje {
  position: absolute; top: .6rem; right: .6rem; z-index: 1;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; border: none;
  background: var(--vari-tausta, #fff); color: var(--vari-teksti);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.lightbox-sulje:hover { background: var(--vari-vaalea); }
.lightbox-sulje:focus-visible { outline: 3px solid var(--vari-korostus); outline-offset: 2px; }

/* Video: kehys samaa muotokieltä kuin kuvat, ei koskaan täyttä leveyttä
   isommalla näytöllä (pysyy hallittavan kokoisena). */
.video-kehys {
  max-width: 100%; height: auto;
  border-radius: var(--pyoristys); display: block;
  background: var(--vari-tumma);
}

/* =====================================================================
   12. YHTEYDENOTTOLOMAKE (yleistetty sapluunaan 28.8.2026 —
   ensitoteutus videosiirtola-fi:ssä, laajennettu pihakaato.fi:n
   käyttöönoton yhteydessä :user-valid/:user-invalid-tyyleillä,
   ks. CSS-käytännöt-note).

   HTML-rakenne: <form class="lomake" method="post"
   action="https://n8n.sivukas.fi/webhook/lomake"> jossa piilokentät
   sivusto + hunaja (honeypot: position:absolute;left:-9999px +
   tabindex="-1" + autocomplete="off" + aria-hidden="true" — EI
   display:none, osa boteista tunnistaa sen). n8n vastaa
   303-uudelleenohjauksella sivuston omalle kiitos.html-sivulle.
   Validointi natiivisti (required, type=email/tel) — ei JS:ää.
   ===================================================================== */
/* Kortti-kontti: sama visuaalinen kieli kuin .kortti (tausta, pyöristys,
   varjo) — lomake ei ole irrallisia kenttiä sivun päällä vaan yksi
   rajattu kokonaisuus. Leveys 34rem (~544 px) osuu tutkimusten
   suosittelemaan 480–640 px -haarukkaan yhden palstan lomakkeelle. */
.lomake {
  display: grid; gap: 1.25rem;
  max-width: 34rem; margin-top: 1.5rem;
  background: var(--vari-vaalea);
  border-radius: var(--pyoristys);
  padding: 2rem 1.75rem;
  box-shadow: 0 2px 10px var(--vari-varjo, rgba(0 0 0 / .06));
}
/* Vaalealla taustalohkolla kortti tarvitsee vaalean pohjan — sama
   käännös kuin .vaalea .kortti -säännössä (osio 4). */
.vaalea .lomake { background: var(--vari-tausta); }
.lomake-kentta { display: flex; flex-direction: column; gap: .4rem; }
.lomake-kentta label { font-weight: 700; font-size: .95rem; }
/* Kenttien reunaväri on teksti-himmea (keskiharmaa), EI vaalea reunaviiva
   — kortin pohja ja kentän pohja ovat läheisiä sävyjä, joten kenttä
   erottuu reunasta. Padding .875/1rem → kenttäkorkeus ~48 px
   (mobiilikosketuskohteen minimi). */
.lomake-kentta input, .lomake-kentta textarea {
  font: inherit; line-height: 1.5; color: var(--vari-teksti);
  background: var(--vari-tausta);
  border: 1px solid var(--vari-teksti-himmea, rgba(0 0 0 / .45));
  border-radius: calc(var(--pyoristys) / 2);
  padding: .875rem 1rem;
}
.vaalea .lomake .lomake-kentta input,
.vaalea .lomake .lomake-kentta textarea { background: var(--vari-vaalea); }
.lomake-kentta textarea { resize: vertical; min-height: 6rem; }
.lomake-kentta input:focus-visible, .lomake-kentta textarea:focus-visible {
  outline: 3px solid var(--vari-korostus); outline-offset: 1px;
}
/* Ohjeteksti kentän alla (esim. liitekentän kokoraja) */
.lomake-ohje { font-size: .875rem; color: var(--vari-teksti-himmea, inherit); }
/* Liitekenttä: valitsinnappi sivuston toissijaisen napin näköiseksi */
.lomake-kentta input[type="file"] { padding: .6rem; cursor: pointer; }
.lomake-kentta input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; cursor: pointer;
  color: inherit; background: transparent;
  border: 2px solid currentColor;
  border-radius: calc(var(--pyoristys) / 2);
  padding: .45rem 1rem; margin-right: 1rem;
}
/* :user-valid/:user-invalid — reagoi vasta kun käyttäjä on koskenut
   kenttään (toisin kuin :valid/:invalid jotka värjäisivät pakolliset
   kentät virheellisiksi jo ennen ensimmäistä näppäilyä). Väri EI ole
   ainoa vihje: selain näyttää natiivin virheilmoituksen submitissa. */
.lomake-kentta input:user-invalid, .lomake-kentta textarea:user-invalid {
  border-color: var(--vari-korostus-2-tumma, var(--vari-korostus-2));
  border-width: 2px;
}
/* Lähetysnappi täysleveänä kortin sisällä — yksi selkeä päätoiminto,
   ei pikkunappia vasempaan laitaan. */
.lomake button.nappi {
  justify-self: stretch; text-align: center;
  border: none; cursor: pointer; font: inherit; font-weight: 700;
  margin-top: .25rem;
}

/* Liitekentän JS (js/lomake-liite.js — kopioi asiakassivustolle ja
   lataa <script defer> molemmilla lomakesivuilla): piilottaa natiivin
   file-inputin saavutettavasti ja rakentaa tilalle suomenkielisen
   valitsimen — natiivin "Choose files" -tekstiä ei voi suomentaa
   CSS:llä eikä HTML:llä, se tulee selaimen kielestä.

   ⚠️ EI VALINNAINEN jos lomakkeessa on liitekenttä: sama tiedosto
   sisältää submit-vahdin joka disabloi tyhjän kuvat-kentän ennen
   lähetystä. Ilman sitä selain lähettää tyhjän multipart-osan
   (filename=""), johon n8n:n webhook-jäsennys kaatuu ennen yhtään
   solmua — kuvaton liidi katoaa ilman virheilmoitusta (löydös
   29.8.2026, ks. pihakaato-fi/TOIMEKSIANTO-yhteydenottokanavat.md
   "KRIITTINEN LÖYDÖS"). Lomake ILMAN liitekenttää toimii ilman JS:ää. */
.liite-piilotettu {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: clip;
}
.liite-rivi { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.liite-rivi:focus-within .liite-valitsin {
  outline: 3px solid var(--vari-korostus); outline-offset: 2px;
}
.liite-valitsin {
  display: inline-block; font-weight: 700; cursor: pointer;
  border: 2px solid currentColor;
  border-radius: calc(var(--pyoristys) / 2);
  padding: .45rem 1rem;
}
.liite-valitsin:hover { background: var(--vari-hover-pinta, rgba(0 0 0 / .06)); }
.liite-tila { color: var(--vari-teksti-himmea, inherit); }

/* =====================================================================
   13. UKK-HAITARI (.ukk)

   Natiivi <details>/<summary> — ei JavaScriptiä, ei ulkoisia
   riippuvuuksia. Ennen 3.9.2026 osiolla ei ollut lainkaan
   komponenttityylejä, jolloin selain piirsi kysymykset oletusasetuksilla:
   ei väljyyttä, ei erottimia, ei kunnon osumapintaa. Löytyi
   varilaiska-fi:n tarkistuksessa — sama puute koski kaikkia sapluunasta
   tehtyjä sivustoja. Synkattu sapluunasta tähän repoon 10.9.2026 (ks.
   TOIMEKSIANTO-ukk-haitari.md, 5.9.2026 — puuttui tästä kopiosta
   kokonaan siihen asti).

   Rakenne: <div class="ukk"> ympärille, koska väli laatikoiden välissä
   tehdään gridin gapilla (details-elementtien oma margin romahtaisi
   auki/kiinni -tilan mukaan).

   name-attribuutti <details>-elementeissä tekee haitarista
   yksinkertaisen: auki on aina vain yksi kysymys kerrallaan. Natiivi
   ominaisuus, Baseline widely available — jos selain ei tue, kaikki
   kysymykset voi vain avata yhtä aikaa, mikä ei riko mitään.

   Saavutettavuus: <summary> ei kuulu osion 1 fokusrengassääntöön
   (a, button), joten se saa oman sääntönsä alla. WCAG-kontrastit
   laskettu punamulta-teemalla (heikoin tekstipari 5,80:1, ::marker
   6,64:1 — molemmat AA:n yläpuolella); laatikon reuna on koriste, sillä
   osumapinnan ilmaisee otsikkoteksti ja värillinen kolmiomerkki.
   ===================================================================== */
.ukk { display: grid; gap: .85rem; }

.ukk > details {
  border: 1px solid var(--vari-reuna);
  border-radius: var(--pyoristys);
  background: var(--vari-tausta);
  padding: 1.15rem 1.4rem;
  transition: border-color .15s ease;
}
.ukk > details:hover { border-color: var(--vari-korostus); }
.ukk > details[open] { background: var(--vari-vaalea); border-color: var(--vari-vaalea); }

.ukk > details > summary {
  font-weight: 700;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style-position: outside;
}
.ukk > details > summary::marker { color: var(--vari-korostus); }
.ukk > details > summary:focus-visible {
  outline: 3px solid var(--vari-korostus);
  outline-offset: 2px;
}

/* Vastaus: himmeämpi sävy ja luettava mitta, kuten muissakin lohkoissa. */
.ukk > details > *:not(summary) {
  margin-top: .85rem;
  color: var(--vari-teksti-himmea, inherit);
  max-width: 62ch;
}
.ukk > details > * + *:not(summary) { margin-top: .65rem; }

/* Vaalealla taustalohkolla laatikko tarvitsee käänteisen parin — sama
   ratkaisu kuin .vaalea .lomake -säännössä (osio 12). */
.vaalea .ukk > details { background: var(--vari-vaalea); }
.vaalea .ukk > details[open] { background: var(--vari-tausta); border-color: var(--vari-tausta); }

/* =====================================================================
   14. HERO ILMAN KUVAA (.hero-kirkas)
   Lisätty 10.9.2026, varilaiska-fi:n kirkas-teeman yhteydessä (ks.
   TOIMEKSIANTO-kirkas-teema.md). Yleiskäyttöinen vaihtoehto
   .hero-valokuva:lle kun asiakkaalla ei ole omaa kuvaa käytettävissä:
   valkoinen/vaalea tausta, kapea brändivärinauha ylhäällä, kaksi
   palstaa (teksti + luottamuskortit). Alle 760 px: yksi palsta.

   Käyttö:
   <section class="hero-kirkas">
     <div class="rajaus">
       <div>
         <div class="nauha" aria-hidden="true"></div>
         <h1>…</h1> <p>…</p> <div class="napit">…</div>
         <p class="hero-badge">…</p>
       </div>
       <div class="hero-kirkas-kortit" role="group" aria-label="Luottamusmerkinnät">
         <div class="kortti"><strong>…</strong><span>…</span></div>
         …
       </div>
     </div>
   </section>

   .nauha on tarkoituksella geneerinen (ei sidottu hero-kirkas:iin) —
   sama luokka käy myös muualla sivulla pienenä brändielementtinä.
   Väri tulee aina asiakaskohtaisesta teemasta (esim. teema.css:n oma
   .nauha-sääntö, kuten kirkas.css:ssä), ei tästä tiedostosta — EI
   kovakoodattuja värejä tässä osiossa.
   ===================================================================== */
.hero-kirkas { background: var(--vari-tausta); padding: 4.5rem 0 3.5rem; }
.hero-kirkas .rajaus { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 3rem; align-items: center; }
.hero-kirkas h1 { color: var(--vari-teksti); margin-bottom: 1.25rem; }
.hero-kirkas h1 em { color: var(--vari-korostus); font-style: italic; }
.hero-kirkas .nauha { width: 7rem; margin: 0 0 1.5rem; }
.hero-kirkas p { color: var(--vari-teksti-himmea); max-width: 34rem; }
.hero-kirkas .napit { margin: 1.75rem 0 1.25rem; }
.hero-kirkas .hero-badge { color: var(--vari-teksti-himmea); }
.hero-kirkas .hero-badge svg { color: var(--vari-korostus); }
.hero-kirkas-kortit { display: grid; gap: .75rem; }
.hero-kirkas-kortit .kortti { padding: 1.1rem 1.25rem; border-left: 5px solid var(--vari-korostus-2); background: var(--vari-vaalea); border-radius: var(--pyoristys); }
.hero-kirkas-kortit .kortti strong { display:block; font-size:1.05rem; color: var(--vari-teksti); }
.hero-kirkas-kortit .kortti span { color: var(--vari-teksti-himmea); font-size:.95rem; }
@media (max-width:760px){ .hero-kirkas .rajaus{ grid-template-columns:1fr; gap:2rem } }