/* Blogin tyylit: perii sivuston :root-tokenit (--c-primary, --c-heading, --font-display…).
   Fallbackit, jos pohjassa ei ole tokenia. Vain blogi/ -sivut lataavat tämän. */
.blogi-lista { padding-block: clamp(40px, 7vw, 80px) clamp(56px, 9vw, 96px); }
.blogi-head { max-width: 62ch; margin-bottom: clamp(30px, 5vw, 48px); }
.blogi-head h1 { font-family: var(--font-display, inherit); font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.1; letter-spacing: -.02em; color: var(--c-heading, #111); margin: 8px 0 12px; }
.blogi-head p { font-size: 1.1rem; color: var(--c-muted, #555); margin: 0; }

.blogi-kortit { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.blogi-kortti { display: flex; flex-direction: column; background: var(--c-surface, #fff); border: 1px solid var(--c-border, #e5e7eb); border-radius: var(--r-lg, 18px); overflow: hidden; color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
@media (hover: hover) { .blogi-kortti:hover { transform: translateY(-3px); border-color: var(--c-primary, #333); box-shadow: var(--shadow, 0 12px 32px rgba(0,0,0,.08)); } }
.blogi-kortti-kuva { aspect-ratio: 16 / 10; background: var(--c-surface-2, #f3f4f6); }
.blogi-kortti-kuva img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blogi-kortti-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blogi-kortti h2 { font-family: var(--font-display, inherit); font-size: 1.25rem; line-height: 1.25; letter-spacing: -.01em; color: var(--c-heading, #111); margin: 0; }
.blogi-kortti p { color: var(--c-muted, #555); font-size: .97rem; line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blogi-meta { margin-top: auto; font-size: .84rem; color: var(--c-muted, #666); }
.blogi-tyhja { border: 1px dashed var(--c-border, #ddd); border-radius: var(--r-lg, 18px); padding: 40px 24px; text-align: center; color: var(--c-muted, #555); }
.blogi-tyhja b { color: var(--c-heading, #111); display: block; margin-bottom: 4px; }

/* --- artikkeli --- */
.wrap--kapea { max-width: 760px; }
.artikkeli { padding-block: clamp(36px, 6vw, 72px) clamp(56px, 9vw, 96px); }
.artikkeli-polku { font-size: .88rem; color: var(--c-muted, #666); margin-bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.artikkeli-polku a { color: inherit; text-decoration: none; }
.artikkeli-polku a:hover { color: var(--c-primary, #333); text-decoration: underline; }
.artikkeli-head h1 { font-family: var(--font-display, inherit); font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.12; letter-spacing: -.02em; color: var(--c-heading, #111); margin: 0 0 14px; }
.artikkeli-meta { color: var(--c-muted, #666); font-size: .95rem; margin: 0 0 clamp(24px, 4vw, 40px); }
.artikkeli-banneri { margin-bottom: clamp(28px, 5vw, 48px); }
.artikkeli-banneri img { width: 100%; height: auto; aspect-ratio: 1200 / 640; object-fit: cover; border-radius: var(--r-lg, 18px); display: block; }

.artikkeli-runko { font-size: 1.08rem; line-height: 1.72; color: var(--c-text, #222); }
.artikkeli-runko > * + * { margin-top: 1.1em; }
.artikkeli-runko h2, .artikkeli-runko h3, .artikkeli-runko h4 { font-family: var(--font-display, inherit); color: var(--c-heading, #111); line-height: 1.22; letter-spacing: -.01em; margin-top: 1.8em; margin-bottom: -.3em; scroll-margin-top: 90px; }
.artikkeli-runko h2 { font-size: 1.65rem; } .artikkeli-runko h3 { font-size: 1.32rem; } .artikkeli-runko h4 { font-size: 1.12rem; }
.artikkeli-runko p { margin-bottom: 0; }
.artikkeli-runko a { color: var(--c-primary, #1a4fd6); text-decoration: underline; text-underline-offset: 2px; }
.artikkeli-runko ul, .artikkeli-runko ol { padding-left: 1.4em; }
.artikkeli-runko li { margin-bottom: .4em; }
.artikkeli-runko li > ul, .artikkeli-runko li > ol { margin-top: .4em; }
.artikkeli-runko ul.lista-valinta { list-style: none; padding-left: 0; }
.artikkeli-runko .valinta { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--c-border, #ccc); border-radius: 5px; vertical-align: -3px; margin-right: 10px; }
.artikkeli-runko .valinta--ok { background: var(--c-primary, #333); border-color: var(--c-primary, #333); position: relative; }
.artikkeli-runko .valinta--ok::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.artikkeli-runko blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--c-primary, #333); font-size: 1.15rem; color: var(--c-heading, #111); }
.artikkeli-runko blockquote p { margin: 0; }
.artikkeli-runko blockquote cite { display: block; margin-top: 8px; font-style: normal; font-size: .9rem; color: var(--c-muted, #666); }
.artikkeli-runko hr { border: 0; height: 1px; background: var(--c-border, #e5e7eb); margin: 2.2em 0; }
.artikkeli-runko .tasaus-keskelle { text-align: center; }
.artikkeli-runko .tasaus-oikealle { text-align: right; }
.artikkeli-runko .tasaus-tasattu { text-align: justify; }
.artikkeli-runko img { max-width: 100%; height: auto; border-radius: var(--r, 12px); display: inline-block; vertical-align: middle; }
.artikkeli-runko p > img:only-child { display: block; }
.artikkeli-runko u { text-underline-offset: 2px; }
.artikkeli-runko figure { margin: 1.8em 0; }
.artikkeli-runko figure img { width: 100%; height: auto; border-radius: var(--r, 12px); display: block; }
.artikkeli-runko figcaption { font-size: .88rem; color: var(--c-muted, #666); margin-top: 8px; text-align: center; }
.artikkeli-runko code, .artikkeli-runko mark { padding: .1em .35em; border-radius: 4px; }
.artikkeli-runko code { background: var(--c-surface-2, #f3f4f6); font-size: .92em; }
.artikkeli-runko mark { background: color-mix(in srgb, var(--c-primary, #ffe066) 22%, #fff); }
.artikkeli-loppu { margin-top: clamp(36px, 6vw, 56px); padding-top: 22px; border-top: 1px solid var(--c-border, #e5e7eb); }
.artikkeli-takaisin { color: var(--c-primary, #333); font-weight: 600; text-decoration: none; }
.artikkeli-takaisin:hover { text-decoration: underline; }
.blogi-esikatselu-palkki { background: #FFF4DC; color: #6b4600; border-bottom: 1px solid #f1d9a1; text-align: center; padding: 10px 16px; font-size: .92rem; }
.blogi-esikatselu-palkki a { color: inherit; font-weight: 700; margin-left: 6px; }

@media (max-width: 640px) {
  .artikkeli-runko { font-size: 1.02rem; }
  .blogi-kortti-body { padding: 18px 18px 20px; }
}