/* ARTIKKELIT · Tuotetietotoimisto.fi
   Ladataan tyylit.css:n JALKEEN. Ei muuta tyylit.css:aa eika sivuston lukittua ulkoasua.
   Kaikki varit tulevat tyylit.css:n muuttujista, joten artikkeli seuraa sivuston ilmetta. */

/* HERO */
.art-hero{background:var(--alt);padding:52px 0 46px}
.art-hero .herogrid{align-items:start}
/* tyylit.css palauttaa herogridin yhteen palstaan alle 900 pikselin, mutta se saanto
   ladataan ennen tata tiedostoa, joten sama on toistettava tassa. */
@media(max-width:900px){
  .art-hero .herogrid{grid-template-columns:1fr;gap:32px}
}
.art-hero .art-lyhyesti{margin-top:0}
.art-kategoria{display:block;font-size:12.5px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--accent3);margin-bottom:14px}
/* Pitka suomalainen yhdyssana ei saa katketa kesken sanan ilman tavuviivaa.
   Otsikon koko skaalautuu palstan leveyden mukaan, jolloin sana mahtuu riville. */
.art-hero h1{font-size:clamp(29px,2.95vw,44px);max-width:21ch;letter-spacing:-1.5px;
  margin-bottom:18px;hyphens:manual;-webkit-hyphens:manual}
.art-hero .lead{font-size:20px;line-height:1.42;max-width:62ch;margin-bottom:26px}
.art-meta{display:flex;flex-wrap:wrap;gap:0;font-size:14.5px;font-weight:500}
.art-meta span{padding:0 15px;position:relative}
.art-meta span:first-child{padding-left:0}
.art-meta span::before{content:'';position:absolute;left:0;top:50%;width:3px;height:3px;
  border-radius:50%;background:var(--viiva);transform:translateY(-50%)}
.art-meta span:first-child::before{display:none}

/* PALSTAT: kiinnittyva sivupalsta ja leveä tekstipalsta.
   Sivu kaytetaan kokonaan, teksti ei kavene yhteen kapeaan sarakkeeseen. */
.art-runko{display:grid;grid-template-columns:290px 1fr;gap:0 60px;align-items:start;
  padding:52px 0 8px}
/* Ruudukon lapset eivat saa kasvaa sisaltonsa min-leveyteen ja tyontaa sivua leveaksi. */
.art-runko > *,.art-sivu > *,.art-luvut > *,.art-kysymykset > *,.art-jalka > *{min-width:0}
.art-taulukkorulla{min-width:0;max-width:100%}
.art-sivu{position:sticky;top:calc(var(--nav) + 22px)}
/* tyylit.css asettaa nav-elementille sivun ylapalkin tyylit. Sisallysluettelo on
   semanttisesti nav, joten ne on nollattava tassa. */
nav.art-sisallys{position:static;top:auto;z-index:auto;background:none;box-shadow:none}
.art-sisallys b{display:block;font-size:12.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--accent3);margin-bottom:12px}
.art-sisallys ol{counter-reset:si;list-style:none;margin:0;padding:0}
.art-sisallys li{counter-increment:si;margin-bottom:2px}
.art-sisallys a{display:block;text-decoration:none;color:var(--ink);font-size:15.5px;
  line-height:1.35;padding:7px 10px 7px 34px;border-radius:3px;position:relative}
.art-sisallys a::before{content:counter(si);position:absolute;left:10px;top:7px;
  font-weight:700;font-size:13px;color:var(--accent3)}
.art-sisallys a:hover{background:var(--alt)}
.art-sisallys a.on{background:var(--alt);box-shadow:inset 2px 0 0 var(--accent);font-weight:600}

.art-lyhyesti{background:var(--accent);color:#fff;border-radius:4px;padding:20px 22px 18px;
  -webkit-font-smoothing:auto}
.art-lyhyesti b{display:block;font-size:12.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:#fff;opacity:.75;margin-bottom:12px}
.art-lyhyesti ul{margin:0;padding:0;list-style:none;font-size:15px;line-height:1.45}
.art-lyhyesti li{padding-left:16px;position:relative}
.art-lyhyesti li + li{margin-top:9px}
.art-lyhyesti li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;
  background:var(--sinireuna)}

/* TEKSTI */
.art-teksti{max-width:none}
.art-teksti > p{font-size:17.5px;line-height:1.68;max-width:72ch;margin:0 0 18px}
.art-teksti h2{font-size:29px;margin:0 0 12px;scroll-margin-top:calc(var(--nav) + 20px)}
.art-teksti section{padding:0;margin-bottom:46px}
.art-teksti section:last-of-type{margin-bottom:30px}
.art-teksti h3{font-size:19.5px;margin:30px 0 8px}
.art-teksti ul,.art-teksti ol{max-width:72ch;font-size:17.5px;line-height:1.62;padding-left:22px}
.art-teksti li + li{margin-top:8px}
.art-johdanto{font-size:19px;line-height:1.5;font-weight:500;max-width:66ch;margin:0 0 24px}

/* AVAINLUKU */
.art-luvut{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;
  margin:26px 0 30px}
.art-luvut > div{background:var(--alt);border-radius:3px;padding:22px 22px 20px;min-width:0}
.art-luku{display:block;font-size:36px;font-weight:700;letter-spacing:-1.4px;line-height:1;
  color:var(--accent);margin-bottom:8px}
.art-luvut span.selite{display:block;font-size:15px;line-height:1.42}

/* TAULUKKO: vuorovarit, ei ohuita erotinviivoja */
.art-taulu{width:100%;border-collapse:collapse;margin:24px 0 28px;font-size:16px}
.art-taulu th{background:var(--accent);color:#fff;text-align:left;padding:13px 16px;
  font-weight:600;font-size:15px;-webkit-font-smoothing:auto;vertical-align:top}
.art-taulu td{padding:14px 16px;vertical-align:top;line-height:1.5}
.art-taulu tbody tr:nth-child(even) td{background:var(--alt)}
.art-taulukkorulla{overflow-x:auto}

/* NOSTOT */
.art-nosto{background:none;padding:4px 0 4px 22px;margin:26px 0;
  box-shadow:inset 4px 0 0 var(--accent)}
.art-nosto p{margin:0;font-size:17.5px;line-height:1.58;max-width:66ch}
.art-nosto p + p{margin-top:12px}
.art-varoitus{background:#fbeceb;border-radius:3px;padding:24px 26px;margin:26px 0;
  box-shadow:inset 4px 0 0 var(--puute)}
.art-varoitus b{display:block;font-size:17.5px;margin-bottom:6px}
.art-varoitus p{margin:0;font-size:16.5px;line-height:1.58;max-width:68ch}

/* KYSYMYS JA VASTAUS */
.art-kysymykset{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.art-kysymykset > div{background:var(--alt);border-radius:3px;padding:22px 24px;min-width:0}
.art-kysymykset b{display:block;font-size:17px;margin-bottom:7px}
.art-kysymykset p{margin:0;font-size:16px;line-height:1.55;max-width:none}

/* LAHTEET. Jokainen artikkeli listaa kaytetyt lahteet numeroituna. */
.art-lahdeosio h2{font-size:21px}
.art-lahdeosio > p{font-size:15.5px;max-width:70ch}
.art-lahteet{counter-reset:l;list-style:none;margin:14px 0 0;padding:0;max-width:78ch;
  font-size:14.5px;line-height:1.5}
.art-lahteet li{counter-increment:l;position:relative;padding:0 0 0 34px;margin-bottom:9px}
.art-lahteet li::before{content:counter(l) ".";position:absolute;left:0;top:0;width:26px;
  text-align:right;white-space:nowrap;font-weight:600;color:var(--ink)}
.art-lahteet .lahde-nimi{font-weight:600}
.art-lahteet .lahde-lisa::after{content:'\00a0\00b7';color:var(--viiva)}
.art-lahteet a{font-weight:600;color:var(--accent);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1.5px;white-space:nowrap}

.art-lahteet a:hover{color:var(--accent2)}

/* TEKIJALOHKO: kasvokuva, nimi ja rajauslause yhtena kokonaisuutena.
   Valkoinen pohja ja tummansininen kehys, ei vaaleansinista pintaa. */
.art-tekija{margin-top:32px;background:#fff;border-radius:3px;padding:24px 28px 22px;
  box-shadow:inset 0 0 0 2px var(--accent)}
.art-rajaus{margin:18px 0 0;font-size:15px;line-height:1.55;max-width:none}

/* KIRJOITTAJA. Sama lohko toimii vieraskynalle: lisaa luokka vieras. */
.art-kirjoittaja{display:flex;align-items:center;gap:20px}
.art-kirjoittaja img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 72px;
  background:var(--alt2);display:block}
.art-kirjoittaja .nimi{display:block;font-size:18px;font-weight:600;letter-spacing:-.2px}
.art-kirjoittaja .rooli{display:block;font-size:15.5px;line-height:1.45;margin-top:3px}
.art-kirjoittaja .vieraskyna{display:block;font-size:12px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--accent3);margin-bottom:5px}

/* JALKA */
.art-jalka{display:flex;flex-wrap:wrap;gap:12px 34px;margin:22px 0 4px}
.art-jalka a{font-size:16px}

@media(max-width:980px){
  .art-runko{grid-template-columns:1fr;gap:0;padding-top:38px}
  .art-sivu{position:static;margin-bottom:34px;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
  .art-sivu > * + *{margin-top:0}
  .art-hero h1{font-size:36px;max-width:none}
  .art-hero .lead{font-size:18.5px}
  .art-hero .art-lyhyesti{margin-top:0}
  .art-kysymykset{grid-template-columns:1fr}
}
/* Kapealla naytolla taulukko latoutuu lohkoiksi, ei vaakavieritykseksi.
   Sarakeotsikko tulee td:n data-otsikko-arvosta, sama periaate kuin hinnastossa. */
@media(max-width:700px){
  .art-taulu{font-size:16.5px}
  .art-taulu thead{display:none}
  .art-taulu,.art-taulu tbody,.art-taulu tr,.art-taulu td{display:block;width:100%}
  .art-taulu tr{margin-bottom:14px;border-radius:3px;overflow:hidden;background:var(--alt)}
  .art-taulu tbody tr:nth-child(even) td,.art-taulu td{background:none}
  .art-taulu td{padding:14px 18px 0}
  .art-taulu tr td:last-child{padding-bottom:16px}
  .art-taulu td[data-otsikko]::before{content:attr(data-otsikko);display:block;font-size:12px;
    font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent3);margin-bottom:4px}
}
@media(max-width:600px){
  .art-hero{padding:38px 0 34px}
  .art-hero h1{font-size:30px;letter-spacing:-1px}
  .art-teksti h2{font-size:24px}
  .art-teksti > p,.art-teksti ul,.art-teksti ol{font-size:17px}
  .art-tekija{padding:20px}
  .art-kirjoittaja{gap:16px;align-items:flex-start}
  .art-kirjoittaja img{width:58px;height:58px;flex:0 0 58px;margin-top:2px}
}