/*
 * Ulkoasu "kollen" (site.ulkoasu): korvaa main.css:n kokonaan.
 *
 * Jokainen osio on oma ruudullisensa: yksi pääelementti, enintään kaksi
 * sekundaarista ja muu pientä, harmaata dataa. Vertailun pääluku on
 * ensimmäisen vuoden kustannus. Vain tumma teema (Jyri 21.10.2026): vaalea
 * teema poistettiin, koska valikot ja kuvan päälle tulevat elementit eivät
 * näkyneet siinä. Mobiili ensin: taulukot ovat mobiilissa kortteja, eikä
 * mikään vieritä sivuttain.
 *
 * Build korvaa korostusvärin (site.vari) ja fonttipinon
 * (site.fontti), ks. rakenna.js kokoaTyyli. Älä kirjoita muuttujia
 * kommenttiin: korvaus osuu ensimmäiseen esiintymään.
 */

:root {
	--korostus: #c22e45;
	color-scheme: dark;
	--fontti: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;

	/* Väri: pohjoinen metsä ja järvi, korostus sivuston väristä. */
	--bjork: #0f1d1a;
	--yta: #162824;
	--gran: #e7eeeb;
	--mossa: #9db0a9;
	--linje: #263b36;
	--sjo: #132622;
	--lingon: color-mix(in oklab, var(--korostus) 78%, white);
	--natt: #0a1513;
	--natt-text: #e7eeeb;
	--natt-mossa: #93a8a1;
	--natt-yta: #15302a;
	--varjo: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.3);

	/* Typografia */
	--t-data: 0.8125rem;
	--t-pieni: 0.9375rem;
	--t-leipa: 1.0625rem;
	--t-proosa: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--t-toinen: 1.25rem;
	--t-osio: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
	--t-luku: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	--t-paa: clamp(2.125rem, 1.4rem + 4.4vw, 4.5rem);
	--t-hinta: clamp(3rem, 2rem + 5vw, 5.25rem);

	/* Väljyys */
	--reuna: max(20px, env(safe-area-inset-left, 0px));
	--reuna-o: max(20px, env(safe-area-inset-right, 0px));
	--osio-y: clamp(56px, 8vw, 112px);
	--leveys: 1120px;
	--pyorist: 18px;

	/* Nappien nuolet (Lucide arrow-right / arrow-down) */
	--nuoli: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	--nuoli-alas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bjork);
	color: var(--gran);
	font-family: var(--fontti);
	font-size: var(--t-leipa);
	line-height: 1.55;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; font-weight: 700; overflow-wrap: break-word; }
/* Muut otsikot ja teksti saavat tavuttaa; pääotsikko (h1) ei, vaan se sovitetaan. */
h2, h3, .data, .proosa { hyphens: auto; }
body { overflow-wrap: break-word; }

/*
 * Pääotsikko (sivut/kollen.js paaotsikko): build laskee pisimmän sanan
 * leveyden (--sana, em), ja kirjasin pienenee niin, että sana mahtuu otsikon
 * säiliöön. Otsikko ei siksi koskaan valu kuvan alle eikä ruudun yli.
 */
.karki-teksti, .karki--kapea .kaare, .op-karki-teksti { container-type: inline-size; }
h1[style*="--sana"] { font-size: min(var(--h1-koko, var(--t-paa)), calc(100cqi / var(--sana))); hyphens: manual; }
p, ul, ol, figure { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--lingon); outline-offset: 3px; border-radius: 6px; }
[id] { scroll-margin-top: 24px; }

.ohita { position: absolute; left: -9999px; top: 0; }
.ohita:focus { left: 16px; top: 16px; z-index: 10; background: var(--yta); padding: 10px 16px; border-radius: 10px; }

/* Leveyskääre: sivureunus vain tässä, jotta värilliset osiot ulottuvat reunaan. */
.kaare {
	inline-size: 100%;
	max-width: calc(var(--leveys) + var(--reuna) + var(--reuna-o));
	margin-inline: auto;
	padding-left: var(--reuna);
	padding-right: var(--reuna-o);
}
.osio { padding-block: var(--osio-y); }
.osio--sjo { background: var(--sjo); }
.osio--natt { background: var(--natt); color: var(--natt-text); }
.osio-paa { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 48px); }
.osio-otsikko { font-size: var(--t-osio); max-width: 20ch; }
.data { font-size: var(--t-data); color: var(--mossa); line-height: 1.5; }
.osio--natt .data { color: var(--natt-mossa); }
.tyhja { color: var(--mossa); }

/* ---------- Ylä- ja alatunniste ---------- */
.yla { padding-block: 18px; }
.yla-sisa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.3rem; letter-spacing: -0.03em; }
.logo-merkki { width: 30px; height: 30px; flex: none; color: var(--lingon); }
.valikko ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(14px, 3vw, 32px); font-size: var(--t-pieni); }
.valikko a { text-decoration: none; color: var(--mossa); display: inline-block; padding-block: 12px; }
.valikko a:hover { color: var(--gran); }

/*
 * Hampurilaisvalikko alle 1100 px:n näytöllä. Laaja päävalikko (5 ryhmää)
 * vie logon kanssa noin 900 px; raja jättää väljyyttä, eikä valikko koskaan
 * rivity kahdelle riville (mitattu 21.10.2026).
 */
.valikko-pieni { display: none; position: relative; }
.valikko-pieni summary {
	list-style: none; cursor: pointer; display: grid; place-items: center;
	inline-size: 44px; block-size: 44px; margin-right: -10px; border-radius: 12px;
}
.valikko-pieni summary::-webkit-details-marker { display: none; }
.valikko-pieni svg path { transition: transform 200ms ease, opacity 200ms ease; transform-origin: center; }
.valikko-pieni[open] .v1 { transform: translateY(5px) rotate(45deg); }
.valikko-pieni[open] .v2 { opacity: 0; }
.valikko-pieni[open] .v3 { transform: translateY(-5px) rotate(-45deg); }
.valikko-pieni nav {
	position: absolute; right: -10px; top: calc(100% + 8px); z-index: 5; min-inline-size: 220px;
	background: var(--yta); color: var(--gran); border-radius: var(--pyorist); box-shadow: var(--varjo); padding: 8px;
}
.valikko-pieni ul { list-style: none; margin: 0; padding: 0; display: grid; }
.valikko-pieni a { display: block; padding: 14px 16px; border-radius: 12px; text-decoration: none; font-size: var(--t-leipa); font-weight: 600; }
.valikko-pieni a:hover { background: var(--sjo); }
/* Päävalikon ylätaso on valkoinen, jotta se erottuu myös kuvan päällä. */
.valikko > ul > li > a, .valikko .valikko-ryhma > summary { color: #fff; font-weight: 500; }
.valikko > ul > li > a:hover, .valikko .valikko-ryhma > summary:hover { color: #fff; opacity: 0.8; }
.valikko [aria-current="page"] { color: #fff; }

/*
 * Valikon ryhmä (`site.nav`-kohta, jolla on alakohdat): `<details>`. Leveällä
 * näytöllä pudotusvalikko, joka aukeaa klikistä ja hoverista (::details-content);
 * alanuoli kertoo, että se avautuu paikalleen. Hampurilaisvalikossa sama ryhmä
 * avautuu listan sisään. Enintään 7 kohtaa tasolla (asetukset.js).
 */
.valikko-ryhma { position: relative; }
.valikko-ryhma summary {
	list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
	color: var(--mossa); padding-block: 12px; min-height: 44px; font-size: var(--t-pieni);
}
.valikko-ryhma summary::-webkit-details-marker { display: none; }
.valikko-ryhma summary::after {
	content: ""; inline-size: 7px; block-size: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg); transition: transform 180ms ease;
}
.valikko-ryhma[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.valikko .valikko-ryhma ul {
	position: absolute; left: -16px; top: 100%; z-index: 6; display: grid; gap: 0; min-inline-size: 240px;
	padding: 8px; background: var(--yta); border-radius: var(--pyorist); box-shadow: var(--varjo);
}
.valikko li:last-child > .valikko-ryhma ul { left: auto; right: -16px; }
.valikko .valikko-ryhma ul a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--gran); white-space: nowrap; }
.valikko .valikko-ryhma ul a:hover { background: var(--sjo); }
@media (hover: hover) and (min-width: 1100px) {
	.valikko .valikko-ryhma:hover::details-content { content-visibility: visible; }
}
.valikko-pieni .valikko-ryhma summary {
	display: flex; justify-content: space-between; inline-size: 100%; padding: 14px 16px; border-radius: 12px;
	color: var(--gran); font-size: var(--t-leipa); font-weight: 600;
}
.valikko-pieni .valikko-ryhma summary:hover { background: var(--sjo); }
.valikko-pieni .valikko-ryhma ul { padding: 0 0 6px 12px; }
.valikko-pieni .valikko-ryhma ul a { font-weight: 400; padding-block: 11px; }
.valikko-pieni nav { max-block-size: calc(100dvh - 96px); overflow-y: auto; min-inline-size: 280px; }
@media (max-width: 1099px) {
	.valikko { display: none; }
	.valikko-pieni { display: block; }
}

.ala { padding-block: 56px 64px; border-top: 1px solid var(--linje); }
.ala-sisa { display: grid; gap: 28px; }
.ala-sarakkeet { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ala-otsikko { font-size: var(--t-pieni); font-weight: 600; margin-bottom: 10px; }
.ala ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ala li a { font-size: var(--t-data); color: var(--mossa); text-decoration: none; display: inline-block; padding-block: 5px; }
.ala li a:hover { color: var(--gran); text-decoration: underline; }
.ala-merkinta { max-width: 70ch; }

/* ---------- Datan tuoreus ---------- */
/* "Priserna kontrollerade i dag": vihreä piste ja lihavoitu teksti (sekundaarinen). */
.tuoreus { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--t-pieni); font-weight: 600; color: var(--gran); margin: 0; }
.tuoreus-piste { inline-size: 9px; block-size: 9px; border-radius: 50%; background: #3ccf8e; box-shadow: 0 0 0 4px color-mix(in srgb, #3ccf8e 22%, transparent); flex: none; }
.tuoreus a { font-weight: 400; color: var(--mossa); }
.tuoreus--karki { color: #fff; font-size: var(--t-leipa); }
.osio-paa .tuoreus { margin-top: 12px; }

/* ---------- Painikkeet ---------- */
.nappi {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 22px; border-radius: 999px;
	background: var(--lingon); color: #fff; font-weight: 600; font-size: var(--t-pieni);
	text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; font-family: inherit;
	transition: transform 180ms ease, box-shadow 180ms ease;
}
.nappi:hover { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--lingon) 30%, transparent); }
/*
 * Nuoli napin oikeassa reunassa houkuttelee klikkaamaan; teksti on aina
 * vasemmalla. Listaa samalla sivulla avaava nappi (.lisaa) saa alanuolen,
 * koska se ei vie minnekään. Nuoli liikahtaa hoverissa hieman.
 */
.nappi { justify-content: space-between; gap: 12px; text-align: left; }
/*
 * Napin teksti on aina pystysuunnassa keskellä. Familjen Grotesk (ylätila
 * 1,0 em, alatila 0,2 em, isot kirjaimet 0,65 em) jättää flex-keskitetyn
 * tekstin isot kirjaimet noin 0,042 em laatikon keskikohdan alle (mitattu
 * selaimessa 21.10.2026: 0,63 px 15 px:n koossa). Alareunan lisämarginaali
 * 0,085 em nostaa tekstin keskelle; nuolta siirretään takaisin, jotta se
 * pysyy laatikon keskellä. text-box-trim ei koske flex-säiliöitä, joten
 * sitä ei voi käyttää tähän.
 */
.nappi { line-height: 1; padding-bottom: 0.085em; }
.nappi::after { translate: 0 0.042em; }
.nappi::after {
	content: ""; flex: none; inline-size: 16px; block-size: 16px; background: currentColor;
	-webkit-mask: var(--nuoli) center / contain no-repeat; mask: var(--nuoli) center / contain no-repeat;
	transition: transform 180ms ease;
}
.nappi:hover::after { transform: translateX(3px); }
/* Nappi, joka vierittää samalle sivulle (ankkuri) tai avaa sisältöä paikalleen, saa alanuolen. */
.nappi.lisaa::after, .nappi--alas::after { --nuoli: var(--nuoli-alas); }
.nappi.lisaa:hover::after, .nappi--alas:hover::after { transform: translateY(2px); }
.nappi .nappi-nuoli { display: none; }
/* Pitkä linkkinappi (esim. "Alla abonnemang från …") saa rivittyä kapealla. */
.nappi { max-inline-size: 100%; }
.nappi--pieni { min-height: 44px; padding-inline: 18px; }
/* Sisällön sekaan tulevat linkkinapit (esim. operaattorin omat vertailut). */
.napit { display: flex; flex-wrap: wrap; gap: 12px; }
.napit .nappi { white-space: normal; line-height: 1.3; padding-block: 12px calc(12px + 0.085em); }
.nappi--hiljainen { background: transparent; color: var(--gran); box-shadow: inset 0 0 0 1.5px var(--linje); }
.nappi--hiljainen:hover { box-shadow: inset 0 0 0 1.5px var(--gran); }
.osio--natt .nappi--hiljainen { color: var(--natt-text); box-shadow: inset 0 0 0 1.5px var(--natt-mossa); }

/* ---------- Logokehys: sama koko ja sisämarginaali logon muodosta riippumatta ---------- */
.lk {
	flex: none; inline-size: 44px; block-size: 44px; padding: 7px;
	border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--linje);
	display: grid; place-items: center; overflow: hidden;
}
.lk img { inline-size: 100%; block-size: 100%; object-fit: contain; border-radius: 4px; }
.lk-kirjaimet {
	inline-size: 100%; block-size: 100%; display: grid; place-items: center; border-radius: 6px;
	background: hsl(var(--savy) 45% 38%); color: #fff; font-weight: 700; font-size: 0.8rem;
}
.lk--pieni { inline-size: 36px; block-size: 36px; padding: 6px; border-radius: 10px; }
.lk--iso { inline-size: 80px; block-size: 80px; padding: 13px; border-radius: 22px; }


/* ---------- Kärki ---------- */
.karki { padding-block: clamp(24px, 5vw, 72px) var(--osio-y); }
.karki-ruutu { display: grid; gap: clamp(32px, 5vw, 64px); align-items: end; }
@media (min-width: 900px) { .karki-ruutu { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.karki h1 { --h1-koko: var(--t-paa); max-width: 15ch; }
.karki-teksti { display: grid; gap: 28px; justify-items: start; min-width: 0; inline-size: 100%; }
.karki-johdanto { font-size: var(--t-toinen); line-height: 1.45; max-width: 46ch; color: var(--mossa); }
.karki--kapea { padding-block: clamp(24px, 4vw, 56px) clamp(40px, 6vw, 80px); }
.karki--kapea .kaare { display: grid; gap: 22px; justify-items: start; }
.karki--kapea h1 { --h1-koko: clamp(1.875rem, 1.3rem + 3vw, 3.5rem); max-width: 22ch; }

/*
 * Etusivun kärki: leveällä oikealla kolmen luokan halvimmat (seuraava
 * voittajaosio piilotetaan, ettei tieto toistu), kapealla halvin liittymä
 * ostonappeineen vertailunapin tilalla.
 */
.karki--etusivu .karki-ruutu { align-items: center; }
@media (min-width: 900px) { .karki--etusivu .karki-ruutu { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.karki-kolme { background: var(--yta); border-radius: var(--pyorist); box-shadow: var(--varjo); padding: 6px 24px 10px; min-width: 0; color: var(--gran); }
.karki-kolme-otsikko { font-size: var(--t-pieni); font-weight: 600; padding: 16px 0 4px; }
.karki-halvin { inline-size: 100%; background: var(--yta); color: var(--gran); border-radius: var(--pyorist); box-shadow: var(--varjo); padding: 2px 18px; }
/*
 * Tuoreus ("Priserna kontrollerade …") on halvimpien kortin yläpuolella, ei
 * kärjen tekstin jatkona: vasemmalla on vain otsikko ja nappi (enintään kolme
 * erilaista elementtiä päällekkäin).
 */
.karki-oikea, .karki-halvin-ryhma { display: grid; gap: 14px; min-width: 0; inline-size: 100%; }
@media (max-width: 899px) { .karki-oikea, .karki-vertaa { display: none; } }
@media (min-width: 900px) { .karki-halvin-ryhma, .osio--voittajat { display: none; } }

/* Tiivis rivi: kapeana kaksi riviä, leveänä yksi. Napit ryhmän yhteisen levyisiä. */
.pika-kehys { container-type: inline-size; }
.pika {
	display: grid; gap: 10px 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--linje);
	grid-template-columns: 44px minmax(0, 1fr) var(--nappi, auto);
	grid-template-areas: "lk nimi nimi" "hinta hinta nappi";
}
.karki-kolme-otsikko + .pika, .karki-halvin .pika { border-top: 0; }
.pika > .lk { grid-area: lk; }
/* Sama korkeus joka rivillä: luokka yhdellä rivillä, nimelle aina kahden rivin tila. */
.pika-nimi { grid-area: nimi; min-width: 0; min-block-size: calc(1.5 * var(--t-data) + 2.5 * var(--t-leipa)); display: grid; align-content: center; }
.pika-luokka { font-size: var(--t-data); color: var(--mossa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pika h3 { font-size: var(--t-leipa); font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pika h3 a { text-decoration: none; }
.pika h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pika-hinta { grid-area: hinta; display: grid; }
.pika-hinta strong { font-size: 1.5rem; letter-spacing: -0.02em; line-height: 2rem; }
.pika-hinta span { font-size: var(--t-data); color: var(--mossa); }
.pika:first-of-type .pika-hinta strong { color: var(--lingon); font-size: 1.75rem; }
.pika .nappi { grid-area: nappi; inline-size: var(--nappi, auto); max-inline-size: 100%; overflow: hidden; }
/* Kapeimmillaan hinta ja nappi allekkain, jottei hinta jää napin alle. */
@container (max-width: 300px) {
	.pika { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "lk nimi" "hinta hinta" "nappi nappi"; }
	.pika .nappi { inline-size: 100%; }
}
@container (min-width: 680px) {
	.pika { grid-template-columns: 44px minmax(0, 1fr) 7.5rem var(--nappi, auto); grid-template-areas: "lk nimi hinta nappi"; gap: 16px; }
	.pika-hinta { text-align: right; }
}

/* Oppaan kärki: otsikko, nostokortti ja kuva */
.karki--opas .karki-ruutu { align-items: center; }
@media (min-width: 900px) { .karki--opas .karki-ruutu { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.karki--opas h1 { --h1-koko: clamp(1.875rem, 1.3rem + 3vw, 3.5rem); max-width: none; }
.karki-valokuva { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 24px; max-block-size: 540px; }
@media (min-width: 900px) { .karki-valokuva { aspect-ratio: 4 / 5; } }
.vastaus { inline-size: 100%; }

/* ---------- Murupolku ---------- */
.murut ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: var(--t-data); color: var(--mossa); }
.murut li + li::before { content: "/"; margin-right: 8px; opacity: 0.6; }
.murut a { color: inherit; text-decoration: none; }
.murut a:hover { text-decoration: underline; }

/* ---------- Kortit: voittajat, vaihtoehdot ---------- */
.voittajat, .kolmikko { display: grid; gap: 16px; }
@media (min-width: 900px) {
	.voittajat { grid-template-columns: 1.6fr 1fr; }
	.voittajat > .kortti--paa { grid-row: span 2; }
	.kolmikko { grid-template-columns: 1.4fr 1fr 1fr; align-items: stretch; }
}
.kortti {
	background: var(--yta); border-radius: var(--pyorist); padding: 22px;
	display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
	box-shadow: inset 0 0 0 1px var(--linje); min-width: 0;
}
.kortti--paa { box-shadow: var(--varjo); padding: clamp(22px, 3vw, 32px); gap: 18px; }
.kortti-op { display: flex; align-items: center; gap: 14px; min-width: 0; }
.kortti-op h3 { font-size: var(--t-leipa); font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; }
.kortti--paa .kortti-op h3 { font-size: var(--t-toinen); letter-spacing: -0.01em; }
.kortti-op a { text-decoration: none; }
.kortti-op a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kortti-luokka { font-size: var(--t-data); color: var(--mossa); }
.kortti-hinta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kortti-hinta strong { font-size: 2rem; letter-spacing: -0.025em; line-height: 1; }
.kortti-hinta span { color: var(--mossa); font-size: var(--t-pieni); }
.kortti--paa .kortti-hinta strong { font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem); color: var(--lingon); letter-spacing: -0.035em; }
.kortti > .nappi { margin-top: auto; }
.kortti-saasto { font-size: var(--t-pieni); font-weight: 600; color: var(--lingon); }

/* Kortit tummassa osiossa */
.osio--natt .kortti { background: var(--natt-yta); box-shadow: none; }
.osio--natt .kortti-luokka, .osio--natt .kortti-hinta span { color: var(--natt-mossa); }
.osio--natt .kortti--paa .kortti-hinta strong { color: var(--natt-text); font-size: var(--t-hinta); }

/* ---------- Liittymälista: taulukko leveänä, kortit mobiilissa ---------- */
.vertailu { min-width: 0; container-type: inline-size; }
.suodin-rivi { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.suodin { display: flex; flex-wrap: wrap; gap: 8px; }
.suodin button {
	font: inherit; font-size: var(--t-pieni); min-height: 44px; padding: 0 16px 0.085em; border-radius: 999px; cursor: pointer;
	background: transparent; color: var(--gran); border: 0; box-shadow: inset 0 0 0 1.5px var(--linje);
	transition: background 160ms ease, color 160ms ease;
}
.suodin button:hover { box-shadow: inset 0 0 0 1.5px var(--gran); }
.suodin button[aria-pressed="true"] { background: var(--gran); color: var(--bjork); box-shadow: none; }
.kytkin { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-pieni); cursor: pointer; min-height: 44px; }
.kytkin input { inline-size: 20px; block-size: 20px; accent-color: var(--lingon); margin: 0; }

.lista { display: grid; }
.rivi {
	display: grid; gap: 14px 16px; padding: 20px 14px;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "op op" "vuosi nappi" "tieto tieto";
	border-top: 1px solid var(--linje);
	align-items: center;
}
.rivi-op { grid-area: op; display: flex; align-items: center; gap: 12px; min-width: 0; }
.rivi-op h3 {
	font-size: var(--t-leipa); font-weight: 600; letter-spacing: -0.005em; line-height: 1.25;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rivi-op a { text-decoration: none; }
.rivi-op a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rivi-merkki { display: none; font-size: var(--t-data); color: var(--lingon); font-weight: 600; }
.rivi-vuosi { grid-area: vuosi; display: grid; }
.rivi-vuosi strong { font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.05; }
.rivi-vuosi span { font-size: var(--t-data); color: var(--mossa); }
.rivi .nappi { grid-area: nappi; }
/*
 * Tasainen taitto: jokainen rivi on yhtä korkea (tiedoille aina neljän rivin
 * tila, rivit eivät rivity), ja napit ovat ryhmän yhteisen levyisiä (--nappi,
 * build laskee pisimmästä tekstistä). Kiinteät palstat pitävät hinnat ja
 * tiedot samassa tasauskohdassa joka rivillä.
 */
.rivi .nappi, .kortti .nappi--pieni { inline-size: var(--nappi, auto); max-inline-size: 100%; overflow: hidden; }
.rivi-tieto { grid-area: tieto; display: grid; gap: 8px; align-content: start; min-width: 0; }
.rivi .tieto, .kolmikko .kortti .tieto, .voittajat .kortti .tieto { min-block-size: calc(4 * 1.5em + 9px); }
.rivi .tieto li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Liittymän tiedot luettelona: sama järjestys joka rivillä ja kortissa. */
.tieto { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; align-content: start; }
/*
 * Luettelomerkki on pieni pystypylväs: sama muoto kuin logon signaalipylväät. Se ei väitä kohdasta mitään (rasti tarkoittaisi
 * "etu", vaikka kohta on esim. sitoutuminen).
 */
.tieto li { position: relative; padding-left: 13px; }
.tieto li::before { content: ""; position: absolute; left: 2px; top: 0.4em; inline-size: 3px; block-size: 0.7em; border-radius: 2px; background: var(--lingon); opacity: 0.85; }

/* Listan ainoa korostettu rivi */
.rivi--karki {
	background: var(--yta); border-radius: var(--pyorist); border-top-color: transparent;
	padding-block: 22px; box-shadow: var(--varjo); margin-bottom: 8px;
}
.rivi--karki + .rivi { border-top-color: transparent; }
.rivi--karki .rivi-merkki { display: block; }
.rivi--karki .rivi-vuosi strong { font-size: 2.5rem; color: var(--lingon); }
.osio--sjo .rivi { border-top-color: color-mix(in srgb, var(--mossa) 22%, transparent); }

@container (min-width: 820px) {
	.rivi {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 140px var(--nappi, auto);
		grid-template-areas: "op tieto vuosi nappi";
		padding: 18px 24px; gap: 24px;
	}
	.rivi--karki { padding-block: 26px; }
	.rivi-vuosi { text-align: right; }
}
.lista-ala { display: flex; justify-content: center; margin-top: 28px; }
.lahde { margin-top: 20px; }
.lahde a { color: inherit; }

/* ---------- Kampanjan vuosi (tumma osio) ---------- */

/* ---------- Operaattorit verkoittain ---------- */
.verkot { display: grid; gap: 36px; }
@media (min-width: 760px) { .verkot { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 48px 40px; } }
.verkko h3 { font-size: var(--t-pieni); font-weight: 600; color: var(--mossa); letter-spacing: 0; margin-bottom: 14px; }
.verkko ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
@media (min-width: 760px) { .verkko ul { grid-template-columns: 1fr; } }
.verkko a { display: flex; align-items: center; gap: 14px; padding: 8px 0; text-decoration: none; min-width: 0; }
.verkko a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.verkko strong { font-weight: 600; display: block; line-height: 1.2; }

/* ---------- Oppaat ---------- */
.oppaat { display: grid; gap: 28px; }
@media (min-width: 900px) { .oppaat { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.opas { text-decoration: none; display: grid; gap: 14px; }
.opas img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--pyorist); background: var(--sjo); }
.opas h3 { font-size: var(--t-toinen); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.opas--paa img { aspect-ratio: 16 / 11; }
.opas--paa h3 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); }
.opas:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.oppaat-sivu { display: grid; gap: 24px; }
.oppaat-sivu .opas { grid-template-columns: 112px 1fr; align-items: center; gap: 16px; }
.oppaat-sivu .opas img { aspect-ratio: 1; border-radius: 14px; }
/* Ei linkkipilviä sisällön seassa: oppaat ovat päävalikossa, toissijaiset
   vertailut alatunnisteessa, ja sisällön linkit ovat nappeja (.napit). */

/* ---------- Operaattorisivun kärki ---------- */
.op-kansi img { inline-size: 100%; block-size: clamp(170px, 30vw, 320px); object-fit: cover; object-position: center 40%; border-radius: 0; }
.op-karki-sisa { display: grid; gap: 20px; justify-items: start; padding-bottom: clamp(40px, 6vw, 72px); }
.op-karki .op-karki-sisa { margin-top: -40px; position: relative; }
.op-karki--ei-kuvaa .op-karki-sisa { margin-top: 0; padding-top: clamp(24px, 4vw, 56px); }
.op-karki .lk--iso { box-shadow: inset 0 0 0 1px var(--linje), var(--varjo); }
.op-karki h1 { --h1-koko: clamp(2.125rem, 1.4rem + 3.4vw, 4rem); max-width: 18ch; }
.op-karki-sisa { inline-size: 100%; }
.op-karki-teksti { display: grid; gap: 20px; justify-items: start; min-width: 0; inline-size: 100%; }
/* Leveällä: teksti vasemmalla, operaattorin kolme halvinta oikealla (karki-oikea piilossa alle 900 px). */
@media (min-width: 900px) {
	.op-karki-sisa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: end; column-gap: clamp(32px, 5vw, 64px); }
	/* Kansikuvan kanssa sisältö nousee 40 px kuvan päälle (logo); oikea palsta alkaa kuvan alta. */
	.op-karki:not(.op-karki--ei-kuvaa) .karki-oikea { padding-top: 64px; }
}
.op-tiivis { font-size: var(--t-toinen); max-width: 40ch; line-height: 1.45; }
.op-faktat { gap: 4px; }

/*
 * ---------- Mobiili: kuvituskuva taustaksi ----------
 * Kuvituskuva ei koskaan vie mobiilissa omaa pystytilaa: kärjen kuva siirtyy
 * kärjen taustaksi (yläpalkki sen päälle), operaattorin kansikuva samoin, ja
 * opaskorttien kuvat ovat pääkortin taustana tai piilossa.
 */
@media (max-width: 899px) {
	.karki--kuva { position: relative; isolation: isolate; color: #fff; background: #0a1513; }
	.karki--kuva::before {
		content: ""; position: absolute; inset: 0; z-index: -1;
		background: linear-gradient(to top, rgb(8 18 16 / 0.92) 8%, rgb(8 18 16 / 0.5) 55%, rgb(8 18 16 / 0.6)), var(--kuva) center / cover no-repeat;
	}
	.karki--kuva .data, .karki--kuva .murut ol { color: rgb(255 255 255 / 0.8); }
	.karki--kuva .karki-valokuva, .op-kansi { display: none; }
	.karki--kuva .kortti, .karki--kuva .karki-halvin { color: var(--gran); }
	.karki--kuva .kortti .data { color: var(--mossa); }
	body:has(.karki--kuva) .yla { position: absolute; inset-inline: 0; top: 0; z-index: 2; color: #fff; }
	body:has(.karki--kuva) .valikko a { color: rgb(255 255 255 / 0.85); }
	.karki.karki--kuva { padding-top: 104px; }
	.karki--etusivu.karki--kuva { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; }
	.op-karki.karki--kuva .op-karki-sisa { margin-top: 0; padding-top: 104px; }
	.op-karki.karki--kuva .op-tiivis { color: rgb(255 255 255 / 0.92); }

	.opas--paa { position: relative; isolation: isolate; min-height: 230px; padding: 22px; border-radius: var(--pyorist); overflow: hidden; align-content: end; color: #fff; }
	.opas--paa img { position: absolute; inset: 0; z-index: -2; block-size: 100%; aspect-ratio: auto; border-radius: 0; }
	.opas--paa::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(8 18 16 / 0.85), rgb(8 18 16 / 0.1) 75%); }
	.oppaat-sivu .opas { grid-template-columns: 1fr; }
	.oppaat-sivu .opas img { display: none; }
}

/* Etusivun kärki myös leveällä: kuva taustana koko ensimmäisellä ruudulla, yläpalkki sen päällä. */
@media (min-width: 900px) {
	.karki--etusivu.karki--kuva {
		position: relative; isolation: isolate; color: #fff; background: #0a1513;
		min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center;
		padding-block: 120px 72px;
	}
	.karki--etusivu.karki--kuva::before {
		content: ""; position: absolute; inset: 0; z-index: -1;
		background: linear-gradient(to right, rgb(8 18 16 / 0.88), rgb(8 18 16 / 0.55) 45%, rgb(8 18 16 / 0.25)), var(--kuva) center / cover no-repeat;
	}
	.karki--etusivu.karki--kuva .karki-teksti > .data { color: rgb(255 255 255 / 0.8); }
	body:has(.karki--etusivu.karki--kuva) .yla { position: absolute; inset-inline: 0; top: 0; z-index: 2; color: #fff; }
	body:has(.karki--etusivu.karki--kuva) .valikko a { color: rgb(255 255 255 / 0.85); }
	body:has(.karki--etusivu.karki--kuva) .valikko a:hover { color: #fff; }
}

/* ---------- Luvut: pitkä sisältöteksti ---------- */
.luku { padding-block: clamp(40px, 6vw, 80px); }
.luku + .luku, .karki + .luku--johdanto { padding-top: 0; }
.luku + .luku > .kaare { border-top: 1px solid var(--linje); padding-top: clamp(40px, 6vw, 80px); }
.luku-kaare { display: grid; gap: 20px; }
.luku-kaare > h2 { font-size: var(--t-luku); max-width: 18ch; }
@media (min-width: 960px) {
	.luku-kaare { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; }
	.luku-kaare > h2 { position: sticky; top: 28px; }
}
.proosa { font-size: var(--t-proosa); line-height: 1.7; min-width: 0; }
.proosa > * { max-width: 66ch; }
.proosa > * + * { margin-top: 1.1em; }
.proosa > .vertailu, .proosa > .taulukko-kaare { max-width: none; margin-block: 1.6em; }
/* Vain leipätekstin omat elementit (suorat lapset): upotetut listat ja kortit eivät peri näitä. */
.proosa > h3 { font-size: var(--t-toinen); letter-spacing: -0.01em; margin-top: 1.8em; }
.proosa > h4 { font-size: var(--t-leipa); margin-top: 1.6em; }
.proosa > :is(p, ul, ol, aside) a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.proosa > :is(p, ul, ol, aside) a:hover { text-decoration-thickness: 2px; }
.proosa > :is(p, ul, ol, aside) strong { font-weight: 600; }
.proosa > p > strong:only-child { display: block; font-size: var(--t-leipa); letter-spacing: 0; margin-top: 0.6em; }
.proosa > ul, .proosa > ol { padding-left: 0; list-style: none; display: grid; gap: 0.55em; }
.proosa > ul > li { position: relative; padding-left: 1.4em; }
.proosa > ul > li::before { content: ""; position: absolute; left: 0.3em; top: 0.62em; inline-size: 4px; block-size: 0.55em; border-radius: 2px; background: var(--lingon); opacity: 0.85; }
.proosa > ol { counter-reset: kohta; }
.proosa > ol > li { counter-increment: kohta; position: relative; padding-left: 2em; }
.proosa > ol > li::before { content: counter(kohta); position: absolute; left: 0; top: 0.1em; inline-size: 1.5em; block-size: 1.5em; border-radius: 50%; background: var(--sjo); font-size: 0.85em; font-weight: 600; display: grid; place-items: center; }
.proosa > .huomio { background: var(--sjo); border-radius: 14px; padding: 18px 22px; }
.johdanto > p:first-child { font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem); line-height: 1.55; max-width: 52ch; }
.taulukko-kaare { overflow-x: auto; container-type: inline-size; }
.md-taulukko { border-collapse: collapse; inline-size: 100%; font-size: var(--t-pieni); }
.md-taulukko th, .md-taulukko td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linje); vertical-align: top; }
.md-taulukko th { font-weight: 600; }
.md-taulukko td:first-child { font-weight: 600; hyphens: manual; }
/* Kapeassa palstassa (mobiili) jokainen rivi on kortti: ensimmäinen solu on
   kortin otsikko, muut solut nimiö ja arvo samalla rivillä. Ei sivuttaisvieritystä. */
@container (max-width: 559px) {
	.md-taulukko thead { display: none; }
	.md-taulukko, .md-taulukko tbody, .md-taulukko tr { display: block; }
	.md-taulukko tr { padding: 14px 18px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--linje); }
	.md-taulukko tr + tr { margin-top: 10px; }
	.md-taulukko td { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); gap: 12px; padding: 4px 0; border: 0; }
	.md-taulukko td::before { content: attr(data-label); color: var(--mossa); font-size: 0.8125rem; font-weight: 400; padding-top: 0.1em; }
	.md-taulukko td:first-child { display: block; font-size: var(--t-leipa); padding-bottom: 8px; }
	.md-taulukko td:first-child::before { content: none; }
}

/* ---------- UKK ---------- */
.ukk { display: grid; max-width: 760px; }
.ukk details { border-top: 1px solid var(--linje); }
.ukk details:last-child { border-bottom: 1px solid var(--linje); }
.osio--sjo .ukk details { border-color: color-mix(in srgb, var(--mossa) 28%, transparent); }
.ukk summary {
	list-style: none; cursor: pointer; padding: 20px 4px; font-weight: 600; font-size: var(--t-leipa);
	display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 44px;
}
.ukk summary::-webkit-details-marker { display: none; }
.ukk summary::after {
	content: ""; flex: none; inline-size: 10px; block-size: 10px;
	border-right: 2px solid var(--mossa); border-bottom: 2px solid var(--mossa);
	transform: rotate(45deg) translateY(-3px); transition: transform 200ms ease;
}
.ukk details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.ukk details p { padding: 0 4px 22px; color: var(--mossa); max-width: 62ch; }

/* ---------- Hintamuutokset ja hintahistoria ---------- */
.muutokset { list-style: none; margin: 0; padding: 0; display: grid; max-width: 760px; }
.muutokset li { padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--mossa) 22%, transparent); font-size: var(--t-pieni); }
.muutokset .pvm { display: block; font-size: var(--t-data); color: var(--mossa); }
.muutokset s { color: var(--mossa); }
.muutokset .lasku { color: var(--lingon); }
.historia { display: grid; gap: 40px; }
@media (min-width: 760px) { .historia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 56px; } }
.historia-op h3 { display: flex; align-items: center; gap: 12px; font-size: var(--t-toinen); margin-bottom: 12px; }
.historia-op h3 a { text-decoration: none; }
.historia-op ul { list-style: none; margin: 0; padding: 0; display: grid; }
.historia-op li { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 2px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linje); }
.historia-op .data { grid-column: 1 / -1; }
.historia-nimi { font-size: var(--t-pieni); font-weight: 600; }
.kayra { inline-size: 96px; block-size: 24px; }
.kayra path { fill: none; stroke: var(--lingon); stroke-width: 2; vector-effect: non-scaling-stroke; }

@media (max-width: 420px) {
	.valikko ul { gap: 14px; }
	.logo { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Sivuston oma tyyli: tyyli/sivusto.css */
/*
 * Mobilkollen: oma kirjasin ulkoasulle "kollen".
 *
 * Familjen Grotesk (Familjen STHLM, SIL Open Font License 1.1), muuttuva
 * paino 400–700, latin-osajoukko. Tarjoillaan sivuston omasta osoitteesta,
 * jotta kävijän tiedot eivät mene kolmannelle osapuolelle.
 */
@font-face {
	font-family: "Familjen Grotesk";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/fontit/familjen-grotesk-v11-latin.woff2") format("woff2");
}