/* Voxit Tapauskirjasto
 * Värit tulevat Neve-teeman asetuksista (--nv-*), joten lisäosa seuraa sivuston ilmettä.
 * Fontit periytyvät teemasta.
 */
.vt-kirjasto,
.vt-tapaus,
.vt-tapausartikkeli {
	--vt-accent: var(--nv-primary-accent, #1f5f8b);
	--vt-text: var(--nv-text-color, #1d2731);
	--vt-muted: color-mix(in srgb, var(--vt-text) 62%, transparent);
	--vt-line: color-mix(in srgb, var(--vt-text) 14%, transparent);
	--vt-surface: var(--nv-site-bg, #fff);
	--vt-soft: color-mix(in srgb, var(--vt-accent) 7%, var(--vt-surface));
	--vt-radius: 10px;
	/* Voxit-logomerkin muoto (vaihtoehto 7): yläreuna nousee keskelle pyöristettyyn kärkeen kuten logossa,
	   litistettynä 26 px korkeaksi; oikea alakulma viistetty 30 asteeseen (nousu 44 px). Kulmien pyöristys
	   32 px, viisteen alakulma 24 px. Kärki pysyy aina keskellä kortin leveydestä riippumatta. */
	--vt-logomuoto: polygon(0 53.71px, 0.66px 47.23px, 2.62px 41.02px, 5.80px 35.33px, 10.07px 30.41px, 15.24px 26.45px, 21.11px 23.62px, 27.43px 22.04px, calc(50% - 86.40px) 12.48px, calc(50% - 64.90px) 9.77px, calc(50% - 43.31px) 7.83px, calc(50% - 21.67px) 6.66px, 50% 6.27px, calc(50% + 21.67px) 6.66px, calc(50% + 43.31px) 7.83px, calc(50% + 64.90px) 9.77px, calc(50% + 86.40px) 12.48px, calc(100% - 27.43px) 22.04px, calc(100% - 21.11px) 23.62px, calc(100% - 15.24px) 26.45px, calc(100% - 10.07px) 30.41px, calc(100% - 5.80px) 35.33px, calc(100% - 2.62px) 41.02px, calc(100% - 0.66px) 47.23px, 100% 53.71px, 100% calc(100% - 62.48px), calc(100% - 0.49px) calc(100% - 56.92px), calc(100% - 1.93px) calc(100% - 51.53px), calc(100% - 4.29px) calc(100% - 46.48px), calc(100% - 7.49px) calc(100% - 41.91px), calc(100% - 11.43px) calc(100% - 37.96px), calc(100% - 16.00px) calc(100% - 34.76px), calc(100% - 70.64px) calc(100% - 3.22px), calc(100% - 74.43px) calc(100% - 1.45px), calc(100% - 78.47px) calc(100% - 0.36px), calc(100% - 82.64px) 100%, 32.00px 100%, 25.76px calc(100% - 0.61px), 19.75px calc(100% - 2.44px), 14.22px calc(100% - 5.39px), 9.37px calc(100% - 9.37px), 5.39px calc(100% - 14.22px), 2.44px calc(100% - 19.75px), 0.61px calc(100% - 25.76px), 0 calc(100% - 32.00px));
	color: var(--vt-text);
	font-family: var(--bodyfontfamily, inherit);
	font-size: var(--bodyfontsize, 1rem);
	line-height: var(--bodylineheight, 1.6);
	font-weight: var(--bodyfontweight, 400);
}

/* ---------- Tapaussivu ---------- */
.vt-tapaussivu-kehys { padding-top: 2rem; padding-bottom: 2rem; }
.vt-tapausartikkeli { max-width: 52rem; margin: 0 auto; }
.vt-murupolku { font-size: .9em; margin: 0 0 1rem; }
.vt-tapausotsikko { margin-bottom: 1.5rem; }
.vt-tapausotsikko h1 { margin: .25rem 0 0; }
.vt-ylaotsake { margin: 0; font-weight: 600; }
.vt-ylaotsake a { color: var(--vt-accent); text-decoration: none; }
.vt-ylaotsake a:hover { text-decoration: underline; }

.vt-tapaussivu .nv-meta-list,
.vt-tapaussivu .entry-footer .posted-on,
.vt-tapaussivu .entry-footer .byline { display: none; }

.vt-tapaus { display: flex; flex-direction: column; gap: 1.75rem; margin-bottom: 2rem; }
.vt-tapaus__ylaosa { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--vt-line); }
.vt-teemat { display: flex; flex-wrap: wrap; gap: .5rem 1rem; list-style: none; margin: 0; padding: 0; }
.vt-teema { display: inline-flex; align-items: center; gap: .5rem; font-size: .9em; font-weight: 600; color: var(--vt-accent); }
.vt-teema img { width: 28px; height: 28px; object-fit: contain; }
.vt-perustiedot { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem 2rem; margin: 0; }
.vt-perustiedot > div { min-width: 0; }
.vt-tapaus .vt-perustiedot dt { font-size: .85em; font-weight: 600; color: var(--vt-muted); margin: 0 0 .15rem; }
.vt-tapaus .vt-perustiedot dd { margin: 0; padding: 0; overflow-wrap: anywhere; }
.vt-hiljainen { color: var(--vt-muted); font-weight: 400; }
.vt-pitka-nimi { margin: 0; color: var(--vt-muted); font-style: italic; }
.vt-ingressi { margin: 0; font-size: 1.15em; line-height: 1.55; max-width: 42rem; }

.vt-luvut { display: flex; flex-wrap: wrap; gap: 1px; list-style: none; margin: 0; padding: 0; background: var(--vt-line); border: 1px solid var(--vt-line); border-radius: 0; overflow: hidden; }
.vt-luvut li { flex: 1 1 9rem; display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; background: var(--vt-surface); }
.vt-luvut strong { font-size: 1.6em; font-weight: var(--h2fontweight, 600); line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--vt-accent); }
.vt-luvut span { font-size: .85em; line-height: 1.3; color: var(--vt-muted); }

/* Väliotsikot noudattavat teeman h2-asetuksia. */
.vt-tapaus .vt-osio h2, .vt-tapaus .vt-oppi h2 { font-size: var(--h2fontsize, 1.6em); font-weight: var(--h2fontweight, 600); line-height: var(--h2lineheight, 1.3); letter-spacing: var(--h2letterspacing, normal); text-transform: var(--h2texttransform, none); margin: 0 0 .5rem; }
.vt-osio p, .vt-oppi p { margin: 0 0 .75rem; max-width: 44rem; }
.vt-osio p:last-child, .vt-oppi p:last-child { margin-bottom: 0; }
.vt-oppi { background: var(--vt-soft); border-radius: 0; padding: 1.25rem 1.4rem; }
.vt-linkit { margin: 0; padding-left: 1.2rem; }
.vt-linkit li { margin: .25rem 0; }
.vt-linkit a { overflow-wrap: anywhere; }

.vt-tagit { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.vt-tagit li { font-size: .85em; padding: .25rem .65rem; border: 1px solid var(--vt-line); border-radius: 0; color: var(--vt-muted); }
.vt-paluu { margin: 0; }
.vt-paluu a { font-weight: 600; text-decoration: none; color: var(--vt-accent); }
.vt-paluu a:hover { text-decoration: underline; }

/* ---------- Listaus ---------- */

.vt-kirjasto { display: flex; flex-direction: column; gap: 1rem; }
.vt-tyokalut { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; }
.vt-haku { flex: 1 1 18rem; min-width: 0; }
.vt-lajittelu { flex: 0 1 14rem; }
.vt-haku label, .vt-lajittelu label { display: block; font-size: .85em; font-weight: 600; margin-bottom: .3rem; color: var(--vt-muted); }
.vt-kirjasto input[type="search"], .vt-kirjasto select {
	width: 100%; box-sizing: border-box; min-height: 2.75rem; padding: .55rem .8rem; font: inherit;
	color: var(--vt-text); background: var(--vt-surface); border: 1px solid color-mix(in srgb, var(--vt-text) 28%, transparent); border-radius: var(--formfieldborderradius, 0);
}
.vt-kirjasto input[type="search"]:focus-visible, .vt-kirjasto select:focus-visible { outline: 2px solid var(--vt-accent); outline-offset: 1px; }

.vt-suodattimet { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.vt-suodatin { position: relative; }
.vt-suodatin__nappi {
	list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.4rem; padding: .35rem .85rem;
	border: 1px solid color-mix(in srgb, var(--vt-text) 22%, transparent); border-radius: 0; background: var(--vt-surface); font-size: .92em; font-weight: 600; user-select: none;
}
.vt-suodatin__nappi::-webkit-details-marker { display: none; }
.vt-suodatin__nappi::after { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }
.vt-suodatin[open] .vt-suodatin__nappi::after { transform: rotate(-135deg) translateY(-1px); }
.vt-suodatin__nappi:hover { border-color: color-mix(in srgb, var(--vt-text) 35%, transparent); }
.vt-suodatin__nappi:focus-visible { outline: 2px solid var(--vt-accent); outline-offset: 2px; }
.vt-suodatin.vt-aktiivinen .vt-suodatin__nappi { border-color: var(--vt-accent); background: var(--vt-soft); color: var(--vt-accent); }
.vt-suodatin__luku:empty { display: none; }
.vt-suodatin__luku { min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; border-radius: 0; background: var(--vt-accent); color: var(--vt-surface); font-size: .8em; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.vt-suodatin__paneeli {
	position: absolute; z-index: 20; top: calc(100% + .35rem); left: 0; min-width: 15rem; max-width: min(22rem, 90vw); max-height: 20rem; overflow: auto;
	padding: .4rem; background: var(--vt-surface); border: 1px solid var(--vt-line); border-radius: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.vt-suodatin__lista { list-style: none; margin: 0; padding: 0; }
.vt-suodatin__lista li { display: flex; align-items: center; gap: .5rem; padding: .1rem .4rem; border-radius: 0; }
.vt-suodatin__lista li:hover { background: var(--vt-soft); }
.vt-suodatin__lista input { margin: 0; accent-color: var(--vt-accent); width: 1rem; height: 1rem; flex: none; }
.vt-kirjasto .vt-suodatin__lista label { flex: 1; padding-left: 0; margin: 0; display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; cursor: pointer; font-size: .92em; }
.vt-suodatin__maara { color: var(--vt-muted); font-variant-numeric: tabular-nums; }
.vt-tyhja-valinta { opacity: .45; }

.vt-tila { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; min-height: 2rem; }
.vt-maara { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.vt-valitut { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
/* Teemat (Neve, Twenty Twenty-One) tyylittelevät kaikki napit; nollataan ne ensin. */
.vt-kirjasto button.vt-merkki,
.vt-kirjasto button.vt-linkkinappi { all: unset !important; box-sizing: border-box !important; cursor: pointer !important; font-family: inherit !important; }
.vt-kirjasto button.vt-merkki { display: inline-flex !important; align-items: center !important; gap: .4rem !important; padding: .25rem .4rem .25rem .7rem !important; border-radius: 0 !important; background: var(--vt-soft) !important; color: var(--vt-accent) !important; font-size: .85em !important; line-height: 1.4 !important; }
.vt-kirjasto button.vt-merkki span:last-child { font-size: 1.2em !important; line-height: 1 !important; padding: 0 .2rem !important; }
.vt-kirjasto button.vt-merkki:hover { background: color-mix(in srgb, var(--vt-accent) 15%, var(--vt-surface)) !important; }
.vt-kirjasto button.vt-linkkinappi { padding: .25rem !important; font-size: .85em !important; color: var(--vt-accent) !important; text-decoration: underline !important; }
.vt-kirjasto button.vt-merkki:focus-visible, .vt-kirjasto button.vt-linkkinappi:focus-visible { outline: 2px solid var(--vt-accent) !important; outline-offset: 2px !important; }

.vt-kortit { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; list-style: none; margin: .5rem 0 0; padding: 0; }
.vt-kortti { min-width: 0; display: flex; filter: drop-shadow(0 0 1px color-mix(in srgb, var(--vt-text) 45%, transparent)) drop-shadow(0 0 .5px color-mix(in srgb, var(--vt-text) 45%, transparent)); transition: filter .15s ease, transform .15s ease; }
.vt-kortti:hover { filter: drop-shadow(0 0 1px var(--vt-accent)) drop-shadow(0 6px 14px rgba(0, 0, 0, .08)); transform: translateY(-2px); }
.vt-kortti:focus-within { filter: drop-shadow(0 0 0 var(--vt-accent)) drop-shadow(0 0 2px var(--vt-accent)) drop-shadow(0 0 1px var(--vt-accent)); }
.vt-kortti__linkki {
	flex: 1; display: flex; flex-direction: column; gap: .55rem; padding: calc(1.1rem + 20px) 1.2rem 1rem; min-width: 0;
	color: inherit; text-decoration: none; background: var(--vt-surface); border: 0; border-radius: 0; clip-path: var(--vt-logomuoto);
	
}
/* Joka toinen kortti hennon harmaalla, kuten nykyisessä tapauskirjastossa (#f8f8f8). */
.vt-kortti:nth-child(even) .vt-kortti__linkki { background: var(--vt-tasa, #f8f8f8); }
.vt-kortti__linkki:focus-visible { outline: none; background: var(--vt-soft); }
.vt-kortti__teemat { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.vt-kortti__teema { display: inline-flex; align-items: center; gap: .4rem; font-size: .85em; font-weight: 600; color: var(--vt-accent); }
.vt-kortti__teema img { width: 22px; height: 22px; object-fit: contain; }
/* Kortin otsikko noudattaa teeman h3-asetuksia. */
.vt-kirjasto .vt-kortti__otsikko { margin: 0; font-size: var(--h3fontsize, 1.25em); font-weight: var(--h3fontweight, 600); line-height: var(--h3lineheight, 1.3); letter-spacing: var(--h3letterspacing, normal); text-transform: var(--h3texttransform, none); text-wrap: balance; }
.vt-kortti__linkki:hover .vt-kortti__otsikko { color: var(--vt-accent); }
.vt-kortti__meta { margin: 0; display: flex; flex-wrap: wrap; gap: .15rem .5rem; font-size: .9em; color: var(--vt-muted); }
.vt-kortti__meta span + span::before { content: "·"; margin-right: .5rem; }
.vt-kortti__ote { margin: 0; font-size: .95em; line-height: var(--bodylineheight, 1.55); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vt-kortti__ala { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--vt-line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem .75rem; }
.vt-kortti__luvut { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .88em; color: var(--vt-muted); }
.vt-kortti__luvut strong { color: var(--vt-text); font-variant-numeric: tabular-nums; }
.vt-tyhja { grid-column: 1 / -1; padding: 2rem 1rem; text-align: center; color: var(--vt-muted); }
.vt-tyhja p { margin: 0 0 .5rem; }

@media (prefers-reduced-motion: reduce) {
	.vt-kortti { transition: none; }
	.vt-kortti:hover { transform: none; }
}
@media (max-width: 600px) {
	.vt-lajittelu { flex: 1 1 100%; }
	.vt-suodatin__paneeli { position: fixed; left: 1rem; right: 1rem; top: auto; bottom: 1rem; max-width: none; max-height: 60vh; }
}