/*
 * Luontaistuote.info — vaihtoehtoinen UI v2
 * Toimituksellinen / pohjoismainen / luottamusta korostava ulkoasu.
 *
 * Ylläpidon pääsääntö:
 * 1) muuta värejä, säteitä ja mittoja ensisijaisesti :root-tokeneista
 * 2) älä lisää komponenttikohtaisia irrallisia värejä ilman uutta tokenia
 * 3) säilytä leipätekstin max-leveys ja kontrasti luettavuuden takia
 */

:root {
  --paperi: #fbfaf7;
  --paperi-2: #f5f6f1;
  --valkoinen: #ffffff;
  --muste: #17201b;
  --teksti: #3f4842;
  --haalea: #667069;
  /* Vaimea ja haalea ovat pienen metatekstin värejä. Molemmat pidetään
     vähintään WCAG AA -kontrastissa (4,5:1) jokaista pintaa vasten jolla
     niitä käytetään. Älä vaalenna näitä tarkistamatta kontrastia: vaimeaa
     käytetään 11,5 px koossa, muun muassa alatunnisteen vastuuvapaudessa. */
  --vaimea: #69726c;
  --viiva: #dfe3dc;
  --viiva-vaalea: #eceee9;

  --vihrea-900: #14382c;
  --vihrea-800: #173f31;
  --vihrea-700: #1c513d;
  --vihrea-600: #28634d;
  --vihrea-200: #dbe7df;
  --vihrea-100: #edf3ee;
  --vihrea-050: #f4f7f4;

  --huomio-bg: #fbefec;
  --huomio: #8e3029;
  --hyva-bg: #edf5ef;

  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --kuori: 1180px;
  --teksti-leveys: 720px;
  --radius-xs: 5px;
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --varjo: 0 18px 45px rgba(25, 48, 38, .08);
  --siirtyma: 160ms ease;
}

/* Sivustolla ei ole toistaiseksi tummaa teemaa: ulkoasu v2 toimitettiin
   ilman sitä ja tumma versio tilataan erikseen. color-scheme kerrotaan
   silti selaimelle, jotta se renderöi lomakekentät, vierityspalkit ja muut
   omat kontrollinsa vaaleina myös järjestelmän tummassa tilassa. Ilman
   tätä hakukentät voivat jäädä tummiksi vaalean ulkoasun päälle.
   Kun tumma teema tulee, lisää tähän myös dark ja @media-lohko. */
:root { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paperi);
  color: var(--teksti);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--vihrea-700); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--vihrea-900); }
button, input { font: inherit; }
button { color: inherit; }

:focus-visible {
  outline: 3px solid rgba(40, 99, 77, .38);
  outline-offset: 3px;
  border-radius: 4px;
}

.vain-lukijalle {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ohita-linkki {
  position: fixed; z-index: 9999; top: 10px; left: 10px;
  transform: translateY(-150%);
  background: var(--vihrea-900); color: white;
  padding: 10px 14px; border-radius: var(--radius-xs);
}
.ohita-linkki:focus { transform: none; }

.kuori { width: min(100% - 40px, var(--kuori)); margin-inline: auto; }
.kuori-kapea { max-width: 820px; }

/* Header -------------------------------------------------------------- */
.ylatunniste {
  position: relative;
  z-index: 30;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--viiva-vaalea);
}
.ylatunniste-rivi {
  min-height: 82px;
  display: grid;
  grid-template-columns: auto 1fr minmax(220px, 290px);
  align-items: center;
  gap: 28px;
}
.brandi {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--muste); text-decoration: none;
  min-width: 0;
}
.brandi:hover { color: var(--muste); text-decoration: none; }
.brandi-merkki { color: var(--vihrea-700); display: inline-flex; flex: 0 0 auto; }
.brandi-teksti { display: flex; min-width: 0; flex-direction: column; line-height: 1.05; }
.brandi-nimi {
  font-family: var(--serif); font-size: 24px; font-weight: 700;
  letter-spacing: -.35px; color: var(--vihrea-900); white-space: nowrap;
}
.brandi-nimi span { font-weight: 500; }
.brandi-lupaus {
  margin-top: 5px; max-width: 310px;
  font-size: 8.5px; font-weight: 700; letter-spacing: 1.35px;
  line-height: 1.25; text-transform: uppercase; color: var(--haalea);
}
.paavalikko ul { list-style: none; display: flex; justify-content: center; gap: 28px; margin: 0; padding: 0; }
.paavalikko a { color: var(--muste); text-decoration: none; font-size: 14.5px; font-weight: 600; }
.paavalikko a:hover, .paavalikko a[aria-current="page"] { color: var(--vihrea-700); }
.paavalikko a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }

.ylahaku {
  height: 42px; display: flex; align-items: center; gap: 5px;
  border: 1px solid var(--viiva); border-radius: 999px;
  background: var(--valkoinen); padding: 0 8px 0 14px;
}
.ylahaku:focus-within { border-color: var(--vihrea-600); box-shadow: 0 0 0 3px rgba(40,99,77,.1); }
.ylahaku input { min-width: 0; width: 100%; border: 0; outline: none; background: transparent; color: var(--muste); font-size: 14px; }
.ylahaku input::placeholder { color: var(--vaimea); }
.ylahaku button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--vihrea-900); }

.valikko, .mobiili-haku { display: none; }

/* Trust strip --------------------------------------------------------- */
.luottamuspalkki { background: linear-gradient(90deg, #edf3ee, #f3f5f0); border-bottom: 1px solid var(--viiva); }
.luottamuspalkki-sisalto { min-height: 68px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.luottamuskohta {
  display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 12px;
  color: var(--vihrea-900); padding: 13px 28px;
}
.luottamuskohta + .luottamuskohta { border-left: 1px solid rgba(23,63,49,.12); }
.luottamuskohta svg { align-self: start; margin-top: 2px; }
.luottamuskohta span { display: flex; flex-direction: column; line-height: 1.25; }
.luottamuskohta strong { font-size: 13px; }
.luottamuskohta small { margin-top: 3px; font-size: 11px; color: var(--haalea); }

/* Hero ---------------------------------------------------------------- */
.hero { background: linear-gradient(100deg, #fbfaf7 46%, #f1f4ee 100%); border-bottom: 1px solid var(--viiva-vaalea); }
.hero-ruudukko { min-height: 470px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(380px, 1.05fr); align-items: stretch; }
.hero-sisalto { align-self: center; max-width: 650px; padding: 56px 54px 58px 0; }
.nosto-kategoria, .artikkeli-kategoria, .kortti-kategoria, .listaus-label, .toimituskortti-label {
  display: inline-block; color: var(--vihrea-700); font-size: 11px; line-height: 1.2;
  font-weight: 800; letter-spacing: 1.15px; text-transform: uppercase;
}
.nosto-otsikko {
  max-width: 15ch; margin: 10px 0 16px;
  font-family: var(--serif); font-size: clamp(42px, 4.6vw, 64px); font-weight: 700;
  line-height: 1.01; letter-spacing: -1.6px; color: var(--muste); text-wrap: balance;
}

/* Suomen yhdyssanat ovat pitkiä, eikä rivitys katkaise sanaa ilman
   välilyöntiä. Tavutus annetaan selaimen hoidettavaksi (html lang="fi"),
   jolloin katkoon tulee tavuviiva oikeasta kohdasta.

   overflow-wrap on erikseen kapean näytön säännöissä, ei täällä: se katkaisee
   sanan mistä tahansa ilman tavuviivaa, mikä on rumaa mutta parempi kuin
   vaakavieritys. Leveällä näytöllä sitä ei tarvita, ja siellä se katkoisi
   otsikoita turhaan max-width-rajan kohdalta. */
.nosto-otsikko,
.artikkeli-otsikko,
.listaus-ylatunniste h1,
.aihesivu-hero h1,
.virhesivu h1,
.kortti-otsikko,
.artikkeli-sisalto h2,
.artikkeli-sisalto h3 {
  hyphens: auto;
}
.nosto-otsikko a { color: inherit; text-decoration: none; }
.nosto-ote { max-width: 58ch; margin: 0 0 24px; font-size: 18px; line-height: 1.55; color: var(--haalea); }
.toiminto {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 10px 17px; border: 1px solid var(--viiva);
  border-radius: var(--radius-sm); background: var(--valkoinen); color: var(--muste);
  font-weight: 700; font-size: 14px; text-decoration: none;
}
.toiminto:hover { text-decoration: none; border-color: var(--vihrea-600); }
.toiminto-paatoiminto { background: var(--vihrea-800); color: white; border-color: var(--vihrea-800); box-shadow: 0 8px 22px rgba(23,63,49,.14); }
.toiminto-paatoiminto:hover { background: var(--vihrea-900); color: white; }
.nosto-meta, .artikkeli-meta {
  display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center;
  margin-top: 20px; color: var(--haalea); font-size: 12.5px;
}
.nosto-meta span, .artikkeli-meta span { display: inline-flex; gap: 7px; align-items: center; }
.nosto-meta svg, .artikkeli-meta svg { color: var(--vihrea-700); }
.hero-kuva {
  position: relative; min-height: 100%; overflow: hidden; text-decoration: none;
  background: #e8eee7;
}
.hero-kuva img { width: 100%; height: 100%; object-fit: cover; }
.hero-kuva::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(251,250,247,.14), transparent 28%); pointer-events: none; }
.hero-kuva-placeholder { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 70% 34%, #f9efe1 0 8%, transparent 9%), linear-gradient(145deg, #dce9de, #f4eee4 52%, #cbdccf); }
.hero-kuva-placeholder::before, .hero-kuva-placeholder::after {
  content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(23,63,49,.16);
}
.hero-kuva-placeholder::before { width: 330px; height: 330px; right: 7%; top: 15%; }
.hero-kuva-placeholder::after { width: 460px; height: 460px; right: -13%; bottom: -32%; }
.hero-kasvi { position: absolute; z-index: 2; right: 18%; bottom: 16%; color: rgba(23,63,49,.78); transform: rotate(-8deg); }
.hero-rengas { position: absolute; width: 130px; height: 130px; border-radius: 50%; right: 10%; top: 18%; background: rgba(23,63,49,.12); backdrop-filter: blur(2px); }

/* Etusivu ------------------------------------------------------------- */
.etusivu-paasisalto { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(285px, .85fr); gap: 44px; padding-block: 50px 76px; }
.osion-ylatunniste { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; margin-bottom: 20px; }
.osion-ylatunniste h2 { margin: 0; font-family: var(--serif); font-size: 31px; line-height: 1.15; color: var(--muste); letter-spacing: -.5px; }
.osion-ylatunniste > a, .osion-ylatunniste > span { display: inline-flex; gap: 7px; align-items: center; color: var(--vihrea-700); font-size: 13px; font-weight: 700; white-space: nowrap; }
.osion-ylatunniste-pieni h2 { font-size: 26px; }
.kortti-ruudukko { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kortti { min-width: 0; }
.kortti-linkki { height: 100%; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.kortti-sisalto { display: flex; flex: 1; flex-direction: column; }
.kortti-kuvallinen { overflow: hidden; border: 1px solid var(--viiva); border-radius: var(--radius-sm); background: var(--valkoinen); transition: transform var(--siirtyma), border-color var(--siirtyma), box-shadow var(--siirtyma); }
.kortti-kuvallinen:hover { transform: translateY(-2px); border-color: #cbd5cd; box-shadow: 0 14px 34px rgba(25,48,38,.08); }
.kortti-kuvallinen .kortti-sisalto { padding: 16px 17px 17px; }
.kortti-media { aspect-ratio: 16/9; overflow: hidden; background: var(--vihrea-100); }
.kortti-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms ease; }
.kortti:hover .kortti-media img { transform: scale(1.025); }
.kortti-media-placeholder { display: grid; place-items: center; background: radial-gradient(circle at 28% 26%, #fff 0 11%, transparent 12%), linear-gradient(135deg, #e7eee8, #f4eee3); color: var(--vihrea-700); }
.kortti-media-placeholder span { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid rgba(23,63,49,.14); border-radius: 50%; background: rgba(255,255,255,.46); }
.kortti-kategoria { margin-bottom: 7px; font-size: 9.5px; }
.kortti-otsikko { margin: 0; font-family: var(--serif); color: var(--muste); font-size: 20px; line-height: 1.18; letter-spacing: -.25px; }
.kortti-ote { margin: 8px 0 14px; color: var(--haalea); font-size: 13.5px; line-height: 1.5; }
.kortti-meta { margin-top: auto; display: flex; gap: 7px; color: var(--vaimea); font-size: 11.5px; }
.etusivu-sivu { display: flex; flex-direction: column; gap: 28px; }
.aihemini-ruudukko { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.aihemini {
  min-height: 116px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 14px; border-radius: var(--radius-sm); background: var(--vihrea-050); color: var(--muste); text-decoration: none; border: 1px solid transparent;
}
.aihemini:hover { border-color: var(--vihrea-200); text-decoration: none; }
.aihemini > span { color: var(--vihrea-700); margin-bottom: 6px; }
.aihemini strong { font-family: var(--serif); font-size: 17px; line-height: 1.15; }
.aihemini small { color: var(--haalea); margin-top: 3px; font-size: 11.5px; }
.toimituskortti { position: relative; overflow: hidden; padding: 22px 22px 24px; border-radius: var(--radius-md); background: linear-gradient(145deg, #f2f4ef, #f0f3eb); border: 1px solid var(--viiva); }
.toimituskortti h2 { max-width: 12ch; margin: 6px 0 9px; font-family: var(--serif); font-size: 25px; line-height: 1.05; color: var(--muste); }
.toimituskortti p { position: relative; z-index: 1; max-width: 32ch; margin: 0 0 14px; color: var(--haalea); font-size: 13.5px; line-height: 1.55; }
.toimituskortti a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; }
.toimituskortti-kasvi { position: absolute; right: -9px; bottom: -8px; color: rgba(23,63,49,.18); transform: rotate(-8deg); }

/* Breadcrumbs --------------------------------------------------------- */
.murupolku { padding-top: 22px; font-size: 12px; }
.murupolku ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.murupolku li + li::before { content: '›'; margin-right: 6px; color: var(--vaimea); }
.murupolku a { color: var(--haalea); }
.murupolku span { color: var(--vaimea); }

/* Article ------------------------------------------------------------- */
.artikkeli-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 44px; align-items: end; padding: 34px 0 30px; border-bottom: 1px solid var(--viiva); }
.artikkeli-otsikko { margin: 10px 0 14px; max-width: 17ch; color: var(--muste); font-family: var(--serif); font-size: clamp(38px, 5vw, 58px); line-height: 1.02; letter-spacing: -1.2px; text-wrap: balance; }
.artikkeli-ingressi { max-width: 65ch; margin: 0; font-size: 18px; line-height: 1.55; color: var(--haalea); }
/* Kuvasuhde on kuvalla itsellään, ei figure-elementillä. Niin figureen voi
   lisätä kuvatekstin ilman että overflow: hidden piilottaa sen. */
.artikkeli-kuva { margin: 0; }
.artikkeli-kuva img {
  display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;
  overflow: hidden; border-radius: var(--radius-md); background: var(--vihrea-100);
}
.artikkeli-asettelu { display: grid; grid-template-columns: minmax(0, var(--teksti-leveys)) minmax(270px, 310px); gap: 68px; justify-content: center; align-items: start; padding: 38px 0 82px; }
.artikkeli { min-width: 0; }
.artikkeli-tavallinen { max-width: var(--teksti-leveys); margin: 0 auto; padding: 48px 0 80px; }
.artikkeli-ylatunniste { margin-bottom: 34px; }
.artikkeli-sisalto { color: var(--teksti); font-size: 17px; line-height: 1.76; }
.artikkeli-sisalto > *:first-child { margin-top: 0; }
.artikkeli-sisalto p { margin: 0 0 23px; text-wrap: pretty; }
.artikkeli-sisalto h2 { margin: 48px 0 14px; scroll-margin-top: 24px; color: var(--muste); font-family: var(--serif); font-size: 32px; line-height: 1.13; letter-spacing: -.45px; }
.artikkeli-sisalto h3 { margin: 34px 0 10px; scroll-margin-top: 24px; color: var(--muste); font-family: var(--serif); font-size: 23px; line-height: 1.2; }
.artikkeli-sisalto h4 { margin: 27px 0 8px; color: var(--muste); font-size: 17px; }
.artikkeli-sisalto ul, .artikkeli-sisalto ol { margin: 0 0 24px; padding-left: 24px; }
.artikkeli-sisalto li { margin-bottom: 8px; padding-left: 3px; }
.artikkeli-sisalto strong { color: var(--muste); }
.artikkeli-sisalto hr { border: 0; border-top: 1px solid var(--viiva); margin: 38px 0; }
.artikkeli-sisalto blockquote, .sisaltolaatikko { margin: 28px 0; padding: 20px 22px; border: 1px solid #dbe7dd; border-radius: var(--radius-sm); background: var(--hyva-bg); color: var(--teksti); font-style: normal; }
.artikkeli-sisalto blockquote p:last-child, .sisaltolaatikko p:last-child { margin-bottom: 0; }
.sisaltolaatikko-huomio { background: var(--huomio-bg); border-color: #eed4cf; }
.sisaltolaatikko-huomio strong:first-child { color: var(--huomio); }
.otsikko-ankkuri { margin-left: 8px; color: var(--viiva); text-decoration: none; font-weight: 400; opacity: 0; transition: opacity var(--siirtyma); }
h2:hover .otsikko-ankkuri, h3:hover .otsikko-ankkuri, .otsikko-ankkuri:focus-visible { opacity: 1; }

.taulukko-kuori { max-width: 100%; overflow-x: auto; margin: 0 0 28px; }
.artikkeli-sisalto table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.artikkeli-sisalto th, .artikkeli-sisalto td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--viiva); }
.artikkeli-sisalto th { background: var(--vihrea-050); color: var(--muste); font-size: 12px; text-transform: uppercase; letter-spacing: .45px; }

.artikkeli-sivupalkki { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 18px; }
.sisallysluettelo { padding: 18px; border: 1px solid var(--viiva); border-radius: var(--radius-sm); background: var(--valkoinen); }
.sisallysluettelo h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 19px; color: var(--muste); }
.sisallysluettelo ol { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.sisallysluettelo a { display: grid; grid-template-columns: 25px 1fr; gap: 8px; align-items: start; padding: 7px 8px; border-radius: 7px; color: var(--teksti); font-size: 12.5px; line-height: 1.35; text-decoration: none; }
.sisallysluettelo a:hover, .sisallysluettelo a.on-aktiivinen { background: var(--vihrea-100); color: var(--vihrea-900); }
.sisallysluettelo a > span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--vihrea-050); color: var(--vihrea-700); font-size: 10px; font-weight: 800; }
.sisallysluettelo .sl-taso-3 a { padding-left: 20px; }
.toimituskortti-sivupalkki h2 { font-size: 21px; }

.lahteet { margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--viiva); }
.osion-ylatunniste-artikkeli { margin-bottom: 14px; }
.osion-ylatunniste-artikkeli h2 { font-size: 26px; }
.osion-ylatunniste-artikkeli > span { color: var(--haalea); font-weight: 600; }
.lahteet ol { margin: 0; padding-left: 23px; color: var(--haalea); font-size: 14px; line-height: 1.55; }
.lahteet li { margin-bottom: 9px; padding-left: 4px; }
.vastuuvapaus-laatikko { margin-top: 34px; padding: 18px 20px; border-radius: var(--radius-sm); background: var(--paperi-2); border: 1px solid var(--viiva); }
.vastuuvapaus-laatikko h2 { margin: 0 0 5px; font-size: 12px; text-transform: uppercase; letter-spacing: .9px; color: var(--haalea); }
.vastuuvapaus-laatikko p { margin: 0; color: var(--haalea); font-size: 13px; line-height: 1.55; }
.liittyvat { margin-top: 45px; }
.liittyvat-ruudukko { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.kortti-kompakti .kortti-ote { display: none; }
.kortti-kompakti .kortti-otsikko { font-size: 17px; }
.kortti-kompakti .kortti-meta { margin-top: 10px; }
.tarkistus-huomio { max-width: var(--teksti-leveys); margin: 20px auto 0; padding: 14px 17px; border-left: 4px solid #b57220; background: #fff5e7; color: #6d4d22; font-size: 14px; }

/* Listings ------------------------------------------------------------ */
.listaus-ylatunniste { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding: 48px 0 28px; border-bottom: 1px solid var(--viiva); }
.listaus-ylatunniste h1, .aihesivu-hero h1, .virhesivu h1 { margin: 7px 0 10px; font-family: var(--serif); color: var(--muste); font-size: clamp(42px, 5vw, 58px); line-height: 1; letter-spacing: -1px; }
.listaus-ingressi { max-width: 68ch; margin: 0; color: var(--haalea); font-size: 17px; }
.listaus-maara { margin: 0; color: var(--haalea); font-size: 13px; white-space: nowrap; }
.listaus-ruudukko { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; padding: 28px 0 72px; }

/* Topics -------------------------------------------------------------- */
.aihesivu-hero { min-height: 270px; display: grid; grid-template-columns: 1fr 280px; align-items: center; gap: 50px; padding: 40px 0 28px; border-bottom: 1px solid var(--viiva); }
.aihesivu-hero p { max-width: 68ch; margin: 0; color: var(--haalea); font-size: 18px; line-height: 1.55; }
.aihesivu-kuvitus { height: 180px; display: grid; place-items: center; border-radius: 50% 42% 48% 38%; background: radial-gradient(circle at 37% 35%, #fff 0 9%, transparent 10%), linear-gradient(145deg,#e7efe8,#f3ece3); color: rgba(23,63,49,.74); }
.aihehaku { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; margin: 30px 0 34px; padding: 8px 8px 8px 15px; border: 1px solid var(--viiva); background: var(--valkoinen); border-radius: 999px; }
.aihehaku label { color: var(--muste); font-size: 13px; font-weight: 800; }
.aihehaku input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--muste); }
.aihehaku input::placeholder { color: var(--vaimea); }
.aihehaku-tila { padding-right: 8px; color: var(--haalea); font-size: 12px; }
.aiheruudukko { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.aihekortti { min-height: 154px; display: grid; grid-template-columns: 52px 1fr 20px; gap: 14px; align-items: start; padding: 18px; border: 1px solid var(--viiva); border-radius: var(--radius-sm); background: var(--valkoinen); color: inherit; text-decoration: none; transition: border-color var(--siirtyma), transform var(--siirtyma); }
.aihekortti:hover { transform: translateY(-1px); border-color: #becdc1; text-decoration: none; }
.aihekortti[hidden] { display: none; }
.aihekortti-ikoni { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--vihrea-100); color: var(--vihrea-700); }
.aihekortti-sisalto { display: flex; min-width: 0; flex-direction: column; }
.aihekortti-sisalto strong { font-family: var(--serif); color: var(--muste); font-size: 19px; line-height: 1.1; }
.aihekortti-sisalto > span { margin-top: 6px; color: var(--haalea); font-size: 12.5px; line-height: 1.45; }
.aihekortti-sisalto small { margin-top: 12px; color: var(--vaimea); font-size: 11.5px; }
.aihekortti-nuoli { align-self: end; color: var(--vihrea-700); }
.aihekortti-tulossa { background: transparent; border-style: dashed; opacity: .72; }
.aiheet-periaatteet { display: grid; grid-template-columns: 1.6fr .8fr; gap: 50px; align-items: center; margin: 52px 0 76px; padding: 28px 30px; border-radius: var(--radius-md); background: linear-gradient(90deg,#edf3ee,#f5f6f1); }
.aiheet-periaatteet h2 { margin: 6px 0 8px; font-family: var(--serif); font-size: 28px; color: var(--muste); }
.aiheet-periaatteet p { margin: 0; max-width: 72ch; color: var(--haalea); font-size: 14px; }
.aiheet-periaatteet ul { margin: 0; padding: 0; list-style: none; }
.aiheet-periaatteet li { position: relative; padding: 5px 0 5px 25px; color: var(--vihrea-900); font-size: 13px; }
.aiheet-periaatteet li::before { content: '✓'; position: absolute; left: 0; top: 4px; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid var(--vihrea-600); border-radius: 50%; font-size: 10px; font-weight: 800; }

/* Search -------------------------------------------------------------- */
.hakusivu { padding-bottom: 80px; }
.listaus-ylatunniste-haku { display: block; }
.hakulomake { margin-top: 28px; }
.hakulomake label { display: block; margin-bottom: 7px; color: var(--muste); font-size: 13px; font-weight: 800; }
.hakulomake input { width: 100%; min-height: 54px; padding: 0 17px; border: 1px solid var(--viiva); border-radius: var(--radius-sm); background: var(--valkoinen); color: var(--muste); font-size: 17px; outline: none; }
.hakulomake input:focus { border-color: var(--vihrea-600); box-shadow: 0 0 0 4px rgba(40,99,77,.08); }
.hakutulos-maara { min-height: 24px; margin: 12px 0 0; color: var(--haalea); font-size: 13px; }
.hakutulokset .kortti { border-bottom: 1px solid var(--viiva); }
.hakutulokset .kortti-linkki { padding: 22px 0; }
.hakutulokset .kortti-otsikko { font-size: 23px; }
.hakutulokset mark { background: #e3eadf; color: inherit; padding: 0 .08em; border-radius: 2px; }
.haku-ohje { padding: 24px 0; color: var(--haalea); }

/* Error --------------------------------------------------------------- */
.virhesivu { padding: 90px 0 110px; text-align: center; }
.virhesivu p { max-width: 52ch; margin: 0 auto 26px; color: var(--haalea); }
.virhesivu-toiminnot { display: flex; justify-content: center; gap: 10px; }

/* Footer -------------------------------------------------------------- */
.alatunniste { border-top: 1px solid var(--viiva); background: #f5f5f1; }
.alatunniste-sisalto { display: grid; grid-template-columns: minmax(300px, 1fr) auto; gap: 50px; align-items: start; padding-block: 34px 28px; }
.brandi-footer .brandi-nimi { font-size: 20px; }
.brandi-footer .brandi-lupaus { font-size: 7.5px; }
.alatunniste-brandi > p { max-width: 56ch; margin: 14px 0 0; color: var(--haalea); font-size: 13px; }
.alatunniste-linkit { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 4px 0 0; padding: 0; }
.alatunniste-linkit a { color: var(--teksti); font-size: 13px; text-decoration: none; }
.alatunniste-ala { display: flex; justify-content: space-between; gap: 30px; padding-block: 18px 24px; border-top: 1px solid var(--viiva); }
.vastuuvapaus { max-width: 82ch; margin: 0; color: var(--vaimea); font-size: 11.5px; line-height: 1.5; }
.vastuuvapaus strong { color: var(--haalea); }
.tekijanoikeus { margin: 0; color: var(--vaimea); font-size: 11.5px; white-space: nowrap; }

/* Responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .ylatunniste-rivi { grid-template-columns: auto 1fr 230px; gap: 18px; }
  .paavalikko ul { gap: 18px; }
  .brandi-lupaus { display: none; }
  .kortti-ruudukko, .listaus-ruudukko { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .aiheruudukko { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .artikkeli-asettelu { gap: 42px; grid-template-columns: minmax(0, 690px) minmax(245px, 290px); }
}

@media (max-width: 860px) {
  .kuori { width: min(100% - 32px, var(--kuori)); }
  .ylatunniste-rivi { min-height: 70px; grid-template-columns: 1fr auto auto; }
  .paavalikko-desktop, .ylahaku { display: none; }
  .mobiili-haku { display: inline-grid; place-items: center; color: var(--vihrea-900); text-decoration: none; }
  .valikko { display: block; position: relative; }
  .valikko-nappi { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; background: transparent; cursor: pointer; list-style: none; }
  .valikko-nappi::-webkit-details-marker { display: none; }
  .paavalikko-mobiili { position: absolute; right: 0; top: 48px; min-width: 220px; padding: 10px; border: 1px solid var(--viiva); border-radius: var(--radius-sm); background: var(--valkoinen); box-shadow: var(--varjo); }
  .paavalikko-mobiili ul { flex-direction: column; gap: 0; }
  .paavalikko-mobiili a { display: block; padding: 10px 12px; border-radius: 7px; }
  .paavalikko-mobiili a[aria-current="page"] { text-decoration: none; background: var(--vihrea-100); }
  .luottamuspalkki-sisalto { grid-template-columns: repeat(3,1fr); }
  .luottamuskohta { grid-template-columns: 1fr; gap: 4px; text-align: center; padding: 12px 8px; justify-items: center; }
  .luottamuskohta + .luottamuskohta { border-left: 1px solid rgba(23,63,49,.1); }
  .luottamuskohta small { display: none; }
  .luottamuskohta strong { font-size: 11px; line-height: 1.2; }

  .hero-ruudukko { min-height: 0; grid-template-columns: 1fr; }
  .hero-sisalto { max-width: 720px; padding: 44px 0 34px; }
  .hero-kuva { min-height: 310px; border-radius: var(--radius-md) var(--radius-md) 0 0; order: -1; margin-top: 24px; }
  .nosto-otsikko { font-size: clamp(40px, 8vw, 58px); }
  .etusivu-paasisalto { grid-template-columns: 1fr; gap: 42px; padding-top: 42px; }
  .etusivu-sivu { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .artikkeli-hero { grid-template-columns: 1fr; }
  .artikkeli-kuva { max-height: 390px; }
  .artikkeli-asettelu { grid-template-columns: 1fr; gap: 28px; }
  .artikkeli-sivupalkki { position: static; order: -1; }
  .toimituskortti-sivupalkki { display: none; }
  .sisallysluettelo { background: var(--vihrea-050); }
  .aiheruudukko { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .aihesivu-hero { grid-template-columns: 1fr 190px; gap: 28px; }
}

@media (max-width: 620px) {
  .kuori { width: min(100% - 28px, var(--kuori)); }
  .brandi-nimi { font-size: 21px; }
  .brandi-merkki svg { width: 21px; height: 21px; }
  .luottamuspalkki-sisalto { width: 100%; }
  .luottamuskohta svg { width: 21px; height: 21px; }
  .hero-kuva { min-height: 250px; margin-inline: -14px; border-radius: 0; }
  .hero-sisalto { padding-top: 30px; }
  /* Viimeinen suoja: kapealla näytöllä yksikään otsikko ei saa vuotaa yli
     vaikka selaimelta puuttuisivat suomen tavutussäännöt. */
  .nosto-otsikko, .artikkeli-otsikko, .listaus-ylatunniste h1,
  .aihesivu-hero h1, .virhesivu h1, .kortti-otsikko,
  .artikkeli-sisalto h2, .artikkeli-sisalto h3 { overflow-wrap: break-word; }
  /* Otsikko skaalautuu näytön mukaan ja 15ch:n mittarajoitus puretaan.
     Molemmat tarvitaan: kapealla näytöllä 15ch on kapeampi kuin palsta,
     jolloin pitkä yhdyssana kuten "yhdistelmävalmistetta?" katkesi
     keskeltä vaikka tilaa olisi ollut. Leveällä näytöllä 15ch on
     tarkoituksellinen typografinen mitta ja jää voimaan. */
  .nosto-otsikko {
    max-width: none; margin-top: 8px;
    font-size: clamp(28px, 8.8vw, 42px); letter-spacing: -1px;
  }
  .nosto-ote { font-size: 16.5px; }
  .nosto-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .kortti-ruudukko, .listaus-ruudukko { grid-template-columns: 1fr; }
  .kortti-kuvallinen .kortti-linkki { display: grid; grid-template-columns: 118px 1fr; }
  .kortti-kuvallinen .kortti-media { aspect-ratio: auto; min-height: 100%; }
  .kortti-kuvallinen .kortti-sisalto { padding: 14px; }
  .kortti-otsikko { font-size: 18px; }
  .kortti-ote { display: none; }
  .kortti-meta { margin-top: 11px; }
  .etusivu-sivu { grid-template-columns: 1fr; }
  .aihemini-ruudukko { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .aihemini { min-height: 100px; padding: 11px; }
  .aihemini strong { font-size: 15px; }
  .osion-ylatunniste h2 { font-size: 27px; }
  .osion-ylatunniste > a { font-size: 12px; }

  .murupolku { font-size: 11px; }
  .artikkeli-hero { gap: 25px; padding-top: 28px; }
  .artikkeli-otsikko { font-size: 42px; }
  .artikkeli-ingressi { font-size: 16.5px; }
  .artikkeli-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .artikkeli-asettelu { padding-top: 26px; }
  .artikkeli-sisalto { font-size: 16.5px; line-height: 1.72; }
  .artikkeli-sisalto h2 { font-size: 28px; }
  .liittyvat-ruudukko { grid-template-columns: 1fr; }
  .sisallysluettelo ol { gap: 1px; }
  .sisallysluettelo a { font-size: 12px; }

  .listaus-ylatunniste { display: block; padding-top: 38px; }
  .listaus-ylatunniste h1, .aihesivu-hero h1 { font-size: 44px; }
  .listaus-maara { margin-top: 14px; }
  .aihesivu-hero { grid-template-columns: 1fr; min-height: 0; }
  .aihesivu-kuvitus { display: none; }
  .aihehaku { grid-template-columns: 1fr; border-radius: var(--radius-sm); padding: 12px; }
  .aihehaku label { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--haalea); }
  .aiheruudukko { grid-template-columns: 1fr; }
  .aihekortti { min-height: 0; }
  .aiheet-periaatteet { grid-template-columns: 1fr; gap: 18px; padding: 22px; }

  .alatunniste-sisalto, .alatunniste-ala { grid-template-columns: 1fr; display: grid; gap: 24px; }
  .alatunniste-ala { gap: 12px; }
  .tekijanoikeus { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  .ylatunniste, .luottamuspalkki, .alatunniste, .artikkeli-sivupalkki, .murupolku { display: none !important; }
  body { background: white; color: black; }
  .kuori { width: 100%; max-width: none; }
  .artikkeli-hero { display: block; }
  .artikkeli-asettelu { display: block; padding: 0; }
  .artikkeli-sisalto { font-size: 11pt; }
  a { color: inherit; }
}

/* Artikkelikuva ilman erillistä frontmatter-kuvaa. Tämä ei ole virhetila,
   vaan tarkoituksellinen toimituksellinen kuvitus. */
.artikkeli-kuva-placeholder {
  /* Korvike on div eikä figure, joten kuvasuhde tulee tälle elementille
     — toisin kuin oikealla kuvalla, jolla se on img-elementillä. */
  aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: radial-gradient(circle at 68% 30%, rgba(255,255,255,.95) 0 8%, transparent 9%), linear-gradient(140deg, #e3ece4, #f5eee5 58%, #d4e1d6);
  color: var(--vihrea-700);
}
.artikkeli-kuva-placeholder span {
  display: grid; place-items: center; width: 104px; height: 104px;
  border-radius: 50%; border: 1px solid rgba(23,63,49,.16);
  background: rgba(255,255,255,.42);
}
.artikkeli-kuva-placeholder svg { width: 48px; height: 48px; }