/* ============================================================================
   Talent Trek Finland — main.css

   Kaikki värit, fontit ja välistykset tulevat theme.json:sta preset-muuttujina
   (--wp--preset--*) ja custom-tokeneina (--wp--custom--*). Tässä tiedostossa ei
   ole yhtään kovakoodattua brändiväriä eikä fonttinimeä: jos asiakas vaihtaa
   värin Yleisistä asetuksista, muutos menee läpi tänne asti.

   Mitat on luettu Figman komponenteista API:n kautta (absoluteBoundingBox,
   padding, itemSpacing, cornerRadius) — ei silmämääräisesti.
   Referenssikehykset: 1440 / 768 / 390.

   Katkaisukohdat:
     < 768     mobiili   (Figma 390, sisältö 342)
     768-1023  tabletti  (Figma 768, sisältö 688)
     >= 1024   desktop   (Figma 1440, sisältö 1080)
   ========================================================================== */

/* 1. Perusta ------------------------------------------------------------- */

/* Reunamarginaali kasvaa portaittain. Desktopilla 48px riittää: sisältö
   rajautuu joka tapauksessa wideSize-arvoon 1080px, jolloin 1440px:n
   näytöllä syntyy Figman 180px reunus itsestään ((1440-1080)/2).
   Jos padding olisi 180px, 1200px leveä näyttö kutistuisi 840px:iin.
   html body nostaa spesifisyyden coren global styles -säännön (body) yli. */
html body {
	--wp--style--root--padding-left: var(--wp--custom--margin-mobile);
	--wp--style--root--padding-right: var(--wp--custom--margin-mobile);
}

@media (min-width: 768px) {
	html body {
		--wp--style--root--padding-left: var(--wp--custom--margin-tablet);
		--wp--style--root--padding-right: var(--wp--custom--margin-tablet);
	}
}

@media (min-width: 1024px) {
	html body {
		--wp--style--root--padding-left: var(--wp--custom--margin-wide);
		--wp--style--root--padding-right: var(--wp--custom--margin-wide);
	}
}

/* Core lisää :where()-säännöllä 24px raon jokaisen ylätason lohkon väliin,
   myös headerin ja footerin ympärille. Spesifisyys on 0,0,0 joten tämä voittaa. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Täysleveä sektio: tausta ulottuu reunasta reunaan, mutta sisältö tarvitsee
   saman reunamarginaalin kuin muu sivu. 1440 px:llä 48 px reunus + constrained
   1080 px antaa Figman 180 px:n reunuksen ((1440-1080)/2) itsestään; kapealla
   näytöllä marginaali kutistuu portaittain root-paddingin mukana.
   Coren .has-global-padding-sääntö ei ulotu tänne, koska .entry-content on
   sisäkkäinen global-padding-säiliö ja sen oma pehmuste on nollattu.

   Toinen valitsin: arkisto-, artikkeli-, haku- ja 404-pohjissa sektiot ovat
   suoraan <main>-ryhmän lapsia eikä .entry-contentia ole lainkaan (sivupohjissa
   sisältö tulee post-contentista, näissä ei). Ilman tätä riviä juuri ne pohjat
   menettäisivät reunamarginaalinsa. <main> pysyy tyhjänä virtausryhmänä —
   sille EI saa antaa omaa layoutia (CLAUDE.md kohta 10.1). */
.entry-content > .wp-block-group.alignfull,
main.wp-block-group > .wp-block-group.alignfull {
	padding-inline-start: var(--wp--style--root--padding-left);
	padding-inline-end: var(--wp--style--root--padding-right);
}

/* Ruudukkolohkot ovat merkkauksessa <ul>/<ol>, joten selaimen oma
   `ul { margin-block: 1em; padding-inline-start: 40px }` on nollattava. Nollaus
   on TÄSSÄ eikä lohkon omassa säännössä, ja nimenomaan `:where()`-kuoressa.

   Syy: core antaa lohkoväleistä globaalin säännön

     :root :where(.is-layout-constrained) > * { margin-block-start: <blockGap> }

   jonka spesifisyys on 0,1,0 (`:root` = 0,1,0, `:where()` ja `*` = 0). Tavallinen
   yhden luokan nollaus `.ttf-logo-wall { margin: 0 }` on YHTÄ spesifi ja voittaa
   pelkästään siksi, että main.css ladataan corea myöhemmin — jolloin ruudukko
   liimautuu kiinni yläpuoliseen tekstiin. Juuri tämä liimasi etusivun logorivin
   ingressiin. `:where()` pudottaa nollauksen spesifisyyden nollaan, jolloin core
   voittaa marginaalin. Selaimen oletusta se ei silti häviä: tekijän tyyli voittaa
   selaimen oletuksen spesifisyydestä riippumatta.

   Vaakavälit tulevat lohkojen omista `gap`-arvoista, joten `margin-inline` ja
   `padding` nollataan tässä ehdoitta. */
:where(.ttf-card-grid, .ttf-logo-wall) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* theme.json antaa rivivälin OTSIKKOELEMENTEILLE (styles.elements.h1…h4), ei
   kokoluokille. Kun otsikkokokoa käytetään kappaleessa — avainluvut, sitaatin
   nostot, hinnat — teksti perii leipätekstin rivivälin 1.67, jolloin 24 px:n
   luku vie 40 px Figman 28:n sijaan. Neljä avainlukua kasvatti näin
   perustiedot-kaistaa 26 px. Kokoluokka kantaa siis oman rivivälinsä.
   Otsikkoelementille sääntö on harmiton: arvo on sama kuin theme.jsonissa. */
.has-h-1-font-size { line-height: 1.14; }
.has-h-2-font-size { line-height: 1.17; }
.has-h-3-font-size { line-height: 1.21; }
.has-h-4-font-size { line-height: 1.17; }

/* Sama korjaus alaspäin: theme.jsonin globaali riviväli 1.67 pätee vain 18 px:n
   leipätekstiin. Figmassa pienemmillä koilla on oma tiiviimpi rivivälinsä, ja
   ero kertautuu jokaisella rivillä — kolmerivinen 14 px:n alaviite venyi 40 →
   47 px. Suhteet on laskettu kaikkien sivujen tekstinoodeista, joten ne ovat
   Figman vallitseva arvo eivätkä yksittäisen noodin poikkeus:
     14 px → 20 px (1.43) 186 noodissa 187:stä
     16 px → 26 px (1.62) 163 noodissa 209:stä */
.has-meta-font-size { line-height: 1.43; }
.has-small-font-size { line-height: 1.62; }

/* Sitaatin lähde (cite). theme.jsonin core/quote antaa koko lohkolle
   otsikkofontin, 28 px ja painon 500 — myös cite-elementille, joka on
   blockquoten lapsi. Figmassa (Yritykset > Section / Sitaatti) lähde on
   kuitenkin Inter 16 / 26 / 400 #595F6B, eli sama kuin muut 16 px:n metatiedot.
   Ilman tätä sääntöä lähderivi piirtyisi 28 px:n otsikkona ja selaimen omalla
   kursiivilla — Figmassa se ei ole kursiivi.

   HUOM. theme.jsonissa ei voi olla kommentteja, joten sitaatin koon perustelu on
   tässä: Figman typografia-arkin (Perusta / Typografia) "Sitaatti"-rivi antaa
   quote-slugille 32/40, mutta se rivi kuvaa Sitaattinostoa (Artikkeli — Tarina >
   Sitaattinosto, 32/40 #0033A0 palkin kanssa), joka on luovutusdokumentin mukaan
   "core/quote + tyylivariaatio". Perusmuotoinen core/quote vastaa sivuilla
   piirrettyä Section / Sitaattia = 28/34, siis h-3. quote-preset jää varatuksi
   tyylivariaatiolle, kun se rakennetaan. */
.wp-block-quote cite,
blockquote cite {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 400;
	line-height: 1.62;
	color: var(--wp--preset--color--text-muted);
}

/* Kaikki mitat ovat Figmassa reunalaatikoita: 620 px korkea värikenttä
   sisältää pehmusteensa. Ilman tätä min-block-size koskisi sisältölaatikkoa ja
   pehmuste tulisi päälle (hero venyi 620 → 822 px). Core asettaa border-boxin
   vain omille lohkoilleen, joten teeman oma HTML tarvitsee tämän. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Kuva ei koskaan levitä säiliötään. */
img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* 2. Saavutettavuus ------------------------------------------------------ */

/* Figma §6: näkyvä fokus 2px, offset 3px. outline: none on kielletty —
   näppäimistökäyttäjä menettäisi sijaintinsa kokonaan. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--focus-dark);
	outline-offset: var(--wp--custom--focus--offset);
	border-radius: var(--wp--custom--radius--xs);
}

/* Tummalla pinnalla fokusrengas kääntyy valkoiseksi. */
.has-brand-blue-background-color :focus-visible,
.ttf-on-dark :focus-visible {
	outline-color: var(--wp--preset--color--focus-light);
}

/* Kosketuskohteiden vähimmäiskoot Figman komponenteista. */
.wp-block-button__link,
.wp-element-button,
button,
input[type="submit"] {
	min-height: var(--wp--custom--target--button);
}

.ttf-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--wp--custom--target--social);
	block-size: var(--wp--custom--target--social);
}

/* Vain ruudunlukijalle. Ei display:none — se poistaisi tekstin myös
   ruudunlukijalta. Fokusoituessaan (ohituslinkki) elementti palautuu näkyviin. */
.screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static;
	inline-size: auto;
	block-size: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

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

/* 3. Rivileveydet -------------------------------------------------------- */

/* Pitkä rivi on luettavuusongelma vaikka layout olisi oikea.
   Rajat vain leipätekstille — otsikot ja gridit eivät kapene. */
.ttf-measure { max-width: var(--wp--custom--measure--body); }
.ttf-measure--large { max-width: var(--wp--custom--measure--body-large); }
.ttf-measure--small { max-width: var(--wp--custom--measure--small); }

/* 4. Painikkeet ja linkit ------------------------------------------------ */

/* Perusnäkymä tulee theme.json:sta (elements.button). Tässä vain variantit,
   jotka Figmassa ovat Button-komponenttisetin Variant-arvoja. */
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2-xs);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wp-block-button.is-style-secondary .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--brand-blue);
	box-shadow: inset 0 0 0 1px currentColor;
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--surface-blue-hover);
}

.wp-block-button.is-style-white .wp-block-button__link {
	background-color: var(--wp--preset--color--surface-white);
	color: var(--wp--preset--color--brand-blue);
}

.wp-block-button.is-style-white .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--surface-blue-hover);
}

/* Nuolilinkki (Figma: Link / Variant=Arrow). Nuoli on osa samaa linkkiä,
   ei erillinen fokusoitava elementti. */
.ttf-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2-xs);
	font-size: var(--wp--preset--font-size--link);
	font-weight: 600;
	line-height: 1.5;
	padding-block: 4px;
}

/* Nuoli ei liiku hoverissa. Liike oli aiemmin translateX(3px), mutta se
   huojutti kolmen kohderyhmälaatikon rivin: nuoli on inline-flexin viimeinen
   kohta, joten sen siirtyminen näkyy koko laatikon sisällä värähdyksenä.
   Hover-vihje tulee alleviivauksesta ja taustan varjosta — molemmat ovat
   maalausvaiheen ominaisuuksia eivätkä vaikuta asetteluun. */
.ttf-link-arrow .ttf-icon {
	inline-size: 20px;
	block-size: 14px;
	flex: 0 0 auto;
}

/* 5. Ikonit ja koristemuodot --------------------------------------------- */

/* Kaikki ikonit tulevat spritestä (assets/svg/sprite.svg) ja perivät värinsä
   currentColor-arvosta. Koristeet ovat aria-hidden jo PHP:ssä. */
.ttf-icon {
	display: inline-block;
	inline-size: 1em;
	block-size: 1em;
	vertical-align: middle;
	fill: none;
}

.ttf-icon--icon-nuoli { inline-size: 26px; block-size: 18px; }
.ttf-icon--icon-haku { inline-size: 18px; block-size: 18px; }
.ttf-icon--icon-hamburger { inline-size: 24px; block-size: 16px; }
.ttf-icon--icon-close { inline-size: 24px; block-size: 24px; }
.ttf-icon--icon-rasti { inline-size: 15px; block-size: 12px; }
.ttf-icon--some-linkedin,
.ttf-icon--some-facebook,
.ttf-icon--some-instagram { inline-size: 28px; block-size: 28px; }

/* Ikonikäärespanit ovat kiinteän kokoisia lohkolaatikoita (18x18, 20x20,
   24x16). Niiden sisällä svg on oletuksena inline-block, jolloin se istuu
   perusviivalla ja rivilaatikon korkeus — ei kääreen — ratkaisee sen
   pystypaikan. Ylätunnisteessa rivikorkeus on 25 px ja alatunnisteessa 30 px,
   joten hakuikoni valui 4,9 px ja 7,1 px alas hakutekstin tasosta. Lohkoksi
   pakotettuna svg täyttää kääreensä eikä rivilaatikkoa synny lainkaan.
   Flex-lapsina olevat ikonit eivät kärsi tästä (flex blokkaa lapsensa), joten
   sääntö rajataan näihin viiteen kääreeseen. */
.ttf-header__search-icon > .ttf-icon,
.ttf-header__search-close-icon > .ttf-icon,
.ttf-header__toggle-icon > .ttf-icon,
.ttf-menu__close-icon > .ttf-icon,
.ttf-search__icon > .ttf-icon {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* Brändimuodot ovat kuva-alueen koristeita: valkoisia värillistä pintaa
   vasten, osittain rajauksen ulkopuolella kuten Figmassa. */
.ttf-shape {
	position: absolute;
	inline-size: auto;
	block-size: auto;
	color: var(--wp--preset--color--surface-white);
	pointer-events: none;
}

/* Muotoleikattu kuvapaikka (Figma: "Kuvapaikka / muotoleikattu").
   Valokuva rajataan brändimuodolla neliön sisään.

   Tämä on patternien käyttöön tarkoitettu apuluokka core/image-lohkolle:
   muoto valitaan luokalla, joten maskin osoite voi olla suoraan CSS:ssä.
   `url()` ratkeaa tämän tiedoston sijainnista, joten se seuraa teemaa.
   ttf/page-hero tekee saman `--ttf-hero-mask`-muuttujalla, koska siellä
   muoto tulee lohkon attribuutista eikä luokasta.

   Maski on img-elementissä eikä figuressa: silloin figure ei tarvitse omaa
   kokoa eikä maskin alta paista taustaa. */
/* Kaksi tapaa saada sama maski:

   .ttf-shape-image--vino   teeman oma luokka, käytössä patterneissa
   .is-style-vino-pyoristys Gutenbergin tyylivariantti, jonka
                            talenttrek_register_block_styles() rekisteröi
                            core/imagelle nimellä "Vino leikkaus
                            pyöristyksellä"

   Molemmat tuottavat saman lopputuloksen, koska sisällönsyöttäjä valitsee
   tyylin editorin tyylivalikosta eikä pääse kirjoittamaan luokkaa käsin.
   Variantti EI ole oletus: maski leikkaa kuvan neliöksi, mikä on väärin
   esimerkiksi logolle tai kuvakaappaukselle. */
.ttf-shape-image,
.wp-block-image.is-style-timantti,
.wp-block-image.is-style-nelio,
.wp-block-image.is-style-vino-pyoristys,
.wp-block-image.is-style-pyorea {
	margin: 0;
}

.ttf-shape-image img,
.wp-block-image.is-style-timantti img,
.wp-block-image.is-style-nelio img,
.wp-block-image.is-style-vino-pyoristys img,
.wp-block-image.is-style-pyorea img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1;
	object-fit: cover;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.ttf-shape-image--timantti img,
.wp-block-image.is-style-timantti img {
	-webkit-mask-image: url("../svg/muoto-1-timantti.svg");
	mask-image: url("../svg/muoto-1-timantti.svg");
}

.ttf-shape-image--nelio img,
.wp-block-image.is-style-nelio img {
	-webkit-mask-image: url("../svg/muoto-2-nelio.svg");
	mask-image: url("../svg/muoto-2-nelio.svg");
}

.ttf-shape-image--vino img,
.wp-block-image.is-style-vino-pyoristys img {
	-webkit-mask-image: url("../svg/muoto-3-vino.svg");
	mask-image: url("../svg/muoto-3-vino.svg");
}

.ttf-shape-image--pyorea img,
.wp-block-image.is-style-pyorea img {
	-webkit-mask-image: url("../svg/muoto-4-pyorea.svg");
	mask-image: url("../svg/muoto-4-pyorea.svg");
}

/* 6. Rivittyvä grid ------------------------------------------------------ */

/* Figman gridit rivittyvät, ne eivät skaalaudu: kortti säilyttää mittansa ja
   siirtyy seuraavalle riville kun tila loppuu. auto-fill + minmax(max(...))
   tekee tämän ilman yhtäkään media queryä:

     max( MIN , (100% - (N-1) * GAP) / N )

   Leveällä sisältöalueella jälkimmäinen termi voittaa ja sarakkeita on
   täsmälleen N. Kapeammalla MIN voittaa ja rivittyminen alkaa. */
.ttf-card-grid {
	--ttf-grid-cols: 3;
	--ttf-grid-min: 300px;
	--ttf-grid-gap: var(--wp--preset--spacing--lg);

	display: grid;
	gap: var(--ttf-grid-gap);
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			max(
				var(--ttf-grid-min),
				(100% - (var(--ttf-grid-cols) - 1) * var(--ttf-grid-gap)) / var(--ttf-grid-cols)
			),
			1fr
		)
	);
	padding: 0;
	list-style: none;
}

/* Gridin automaattinen vähimmäiskoko on min-content: ilman tätä pitkä sana
   tai kiinteäleveyksinen kuva lukitsee sarakkeen ja synnyttää vaakascrollin. */
.ttf-card-grid > * {
	min-width: 0;
}

/* 7. Kortit -------------------------------------------------------------- */

/* 7.1 Badge (Figma: Badge / Category, r=6, pad 4/8) --------------------- */

/* Väri tulee kahdesta muuttujasta, ei suorista arvoista. Näin sama sääntö
   palvelee kolmea lähdettä: kategorian korostusväri-asetus (luokka
   .ttf-badge--<preset> tai inline-tyyli omalle värille), slug-pohjainen
   varajärjestelmä alla, ja lopuksi sininen oletus. */
.ttf-badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 4px 8px;
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	line-height: 1.43;
	background-color: var(--ttf-badge-bg, var(--wp--preset--color--surface-blue-hover));
	color: var(--ttf-badge-fg, var(--wp--preset--color--brand-blue));
}

.ttf-badge--blue {
	--ttf-badge-bg: var(--wp--preset--color--surface-blue-hover);
	--ttf-badge-fg: var(--wp--preset--color--brand-blue);
}

.ttf-badge--purple {
	--ttf-badge-bg: var(--wp--preset--color--surface-purple-light);
	--ttf-badge-fg: var(--wp--preset--color--brand-purple);
}

.ttf-badge--green {
	--ttf-badge-bg: var(--wp--preset--color--surface-green-light);
	--ttf-badge-fg: var(--wp--preset--color--brand-green-dark);
}

.ttf-badge--neutral {
	--ttf-badge-bg: var(--wp--preset--color--surface-light);
	--ttf-badge-fg: var(--wp--preset--color--text-black);
}

/* Slug-pohjainen varajärjestelmä niille kategorioille, joille korostusväriä
   ei ole valittu (asetus "Automaattinen"). Uusi kategoria putoaa siniseen
   oletukseen — ei rikkoudu. Nämä ovat samat parit kuin siemennetyt arvot
   inc/content-model.php:ssä, joten kumpikaan ei ole toisen kanssa eri mieltä.
   Spesifisyys on tarkoituksella matalampi kuin .ttf-badge--*, jotta
   nimenomainen valinta voittaa slugin. */
:where(.ttf-card-news--cat-tapahtuma, .ttf-card-news--cat-tarina) .ttf-badge {
	--ttf-badge-bg: var(--wp--preset--color--surface-purple-light);
	--ttf-badge-fg: var(--wp--preset--color--brand-purple);
}

:where(.ttf-card-news--cat-tuotos) .ttf-badge {
	--ttf-badge-bg: var(--wp--preset--color--surface-green-light);
	--ttf-badge-fg: var(--wp--preset--color--brand-green-dark);
}

/* 7.2 Uutiskortti (Figma: Card / News 298:752) -------------------------- */

.ttf-card-news {
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--surface-white);
	transition: box-shadow 0.15s ease;
}

.ttf-card-news__media {
	position: relative;
	overflow: hidden;
	block-size: 160px;
	background-color: var(--wp--preset--color--surface-blue-90);
	color: var(--wp--preset--color--surface-white);
}

@media (min-width: 768px) {
	.ttf-card-news__media { block-size: 180px; }
}

/* Kuva-alueen pohjaväri kiertää sininen - lila - vihreä, kuten Figman
   Card / News -varianteissa. Koskee vain muotoversiota; valokuva peittää
   pohjan joka tapauksessa. */
.ttf-card-news--shapes:nth-child(3n + 2) .ttf-card-news__media {
	background-color: var(--wp--preset--color--brand-purple);
}

.ttf-card-news--shapes:nth-child(3n + 3) .ttf-card-news__media {
	background-color: var(--wp--preset--color--brand-green);
}

/* Kuvan rajaus on säädettävä, koska sama 344x180 -paikka saa mitä tahansa
   artikkelikuvia: pystykuvan keskeltä leikkautuvat sekä pää että jalat, ja
   ryhmäkuvassa oleellinen on usein ylälaidassa. Arvot tulevat ttf/news-feed
   -lohkon asetuksista muuttujina; oletus on Figman mukainen cover + keskitys.
   Nosto (feature) ei kuuntele muuttujia — sen 620x450 kuva on niin iso, ettei
   rajaus ole ongelma, ja Figmassa se on aina cover. */
.ttf-card-news__image {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: var(--ttf-card-image-fit, cover);
	object-position: var(--ttf-card-image-position, center center);
}

.ttf-card-news--feature .ttf-card-news__image {
	object-fit: cover;
	object-position: center center;
}

/* Kaksi muotoa päällekkäin, iso 207px ja pieni 130px — Figman mitat.
   Molemmat menevät osin kehyksen ulkopuolelle, siksi overflow: hidden. */
.ttf-card-news__media .ttf-shape:nth-of-type(1) {
	inline-size: 207px;
	block-size: 207px;
	inset-block-start: -40px;
	inset-inline-end: -50px;
	opacity: 0.35;
}

.ttf-card-news__media .ttf-shape:nth-of-type(2) {
	inline-size: 130px;
	block-size: 130px;
	inset-block-start: 40px;
	inset-inline-start: -30px;
	opacity: 0.55;
}

/* Tyyppitunniste on Figmassa kuva-alueen VASEMMASSA YLÄKULMASSA, ei alalaidassa:
   mitattu arkistoleiskasta (340:7736), jossa Kuvapaikka alkaa y=1348 ja badge
   y=1368 x=940 kun kuva-alue alkaa x=916 — eli 20 ylhäältä, 24 vasemmalta. */
.ttf-card-news__media .ttf-badge {
	position: absolute;
	inset-block-start: 20px;
	inset-inline-start: 24px;
	z-index: 1;
}

/* Tapahtuman päivämäärämerkki (Figma: Kuvapaikka / Date / Event).
   Vaakasijainti on mitattu: teksti keskittyy 52px päähän kuva-alueen oikeasta
   reunasta, mikä 56px leveällä laatikolla tarkoittaa 24px sisennystä — sama
   kuin badgen vasen sisennys. Laatikon pehmuste ja kulmapyöristys on JOHDETTU
   tekstien väleistä (viennissä on vain tekstien sijainnit, ei laatikon
   geometriaa), ei mitattu. */
.ttf-card-news__date {
	position: absolute;
	inset-block-start: 20px;
	inset-inline-end: 24px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-inline-size: 56px;
	padding: 4px 8px;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface-white);
	color: var(--wp--preset--color--brand-blue);
	font-family: var(--wp--preset--font-family--body);
	text-align: center;
}

.ttf-card-news__date-day {
	font-size: 1.375rem; /* 22px, Figma 22/600 */
	font-weight: 600;
	line-height: 1.27;
}

.ttf-card-news__date-month {
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	line-height: 1.43;
	letter-spacing: 0.02em;
}

.ttf-card-news__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2-xs);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md) var(--wp--preset--spacing--md);
	flex: 1 1 auto;
}

@media (min-width: 768px) {
	.ttf-card-news__body {
		padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg);
	}
}

.ttf-card-news__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-4);
	/* Figman 24 px:n otsikoista 91 on painoa 400 ja 4 painoa 500 — ja ne neljä
	   ovat yhteystiedot-sivun henkilönimiä. Korttiotsikot ovat siis 400.
	   Painoa ei jätetä perittäväksi, koska theme.jsonin heading-oletus koskee
	   vain core-otsikkoelementtejä, ei lohkon omaa luokkaa. */
	font-weight: 400;
	line-height: 1.17;
	color: var(--wp--preset--color--text-black);

	/* Figman ruudukkokortin otsikko on enintään kolme riviä (84 px). Rajaus on
	   tässä eikä sisällössä: ruudukon rivin korkeus on rivin korkeimman kortin
	   korkeus, joten yksi nelirivinen otsikko kasvattaisi kaikki kolme korttia.
	   Nostossa (feature) rajaa ei ole — siellä kortti on rivin ainoa. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* Koko kortti on klikattava, mutta tab-järjestyksessä on vain yksi kohde ja
   sen saavutettava nimi on otsikko — ei "lue lisää". */
.ttf-card-news__link {
	color: inherit;
	text-decoration: none;
}

.ttf-card-news__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ttf-card-news__link:hover {
	text-decoration: underline;
}

.ttf-card-news:has(.ttf-card-news__link:hover) {
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.10);
}

/* Fokusrengas piirretään kortin ympärille, koska linkki itse on peitteenä. */
.ttf-card-news:has(.ttf-card-news__link:focus-visible) {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--focus-dark);
	outline-offset: var(--wp--custom--focus--offset);
}

.ttf-card-news__link:focus-visible {
	outline: none;
}

.ttf-card-news__meta {
	margin: 0;
	order: -1;
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	line-height: 1.43;
	color: var(--wp--preset--color--text-muted);
}

/* Nuolikehote kortin alalaidassa (Figma: "Linkki / Lue tarina" jne.). Se ei ole
   oma linkki vaan visuaalinen kehote — koko kortti on jo klikattava, ks.
   inc/news-card.php. margin-block-start: auto pitää sen kortin pohjassa
   riippumatta siitä montako riviä otsikko vie. */
.ttf-card-news__more {
	margin-block-start: auto;
	padding-block-end: 0;
	color: var(--wp--preset--color--brand-blue);
}

/* 7.2.2 Korttivariantit (Figma: Row / Nosto + kaksi, Etusivu 340:7618) --- */

/*
 * Figman mitat, jotka nämä säännöt toteuttavat:
 *
 *   Nosto / Tarina    620x738 — kuva-alue 620x450, sisältö pad 24 gap 12,
 *                     metarivi 14/20, otsikko 28/34, ingressi 16/26, linkki.
 *   Kortti / pieni    436x230 — kuva 150 vasemmalla, sisältö 286 pad 20 gap 8.
 *
 * Korkeutta ei lyödä lukkoon nostolle: se venyy oikean palstan mittaan
 * (3 x 230 + 2 x 24 = 738) grid-ruudukon stretch-oletuksella. Näin Figman
 * 738 syntyy laskennasta eikä maagisesta luvusta, joka hajoaisi heti kun
 * korttien määrä muuttuu.
 */
.ttf-card-news--feature .ttf-card-news__media {
	block-size: 200px;
}

@media (min-width: 1024px) {
	.ttf-card-news--feature .ttf-card-news__media { block-size: 450px; }
}

/* Nostossa tyyppitunniste on 16/16 kuva-alueen kulmasta, ei 20/24 kuten
   ruudukkokortissa: mitattu Figmasta (Kuva-alue x=117 y=110, badge x=133
   y=126). Ilmoitettu pehmuste on 20, mutta frame on FIXED-korkuinen eikä piirrä
   sitä — piirtynyt jälki on totuus. */
.ttf-card-news--feature .ttf-card-news__media .ttf-badge {
	inset-block-start: 16px;
	inset-inline-start: 16px;
}

.ttf-card-news--feature .ttf-card-news__body {
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--lg);
}

.ttf-card-news--feature .ttf-card-news__title {
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.214;

	/* Nosto on rivinsä ainoa kortti, joten pitkä otsikko ei kasvata mitään
	   sisarusta. Rajaus puretaan kokonaan — pelkkä line-clamp: none jättäisi
	   otsikon -webkit-box-tilaan turhaan. */
	display: block;
	overflow: visible;
}

.ttf-card-news__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.625;
	/* Figmassa 16 / 26 / #595F6B sekä ruudukkokortissa (Kortti / TAPAHTUMA)
	   että nostossa (Nosto / Tarina). Ingressi on siis ainoa korttiteksti
	   otsikon lisäksi, joka EI ole mustaa — sama harmaa kuin metarivillä,
	   jotta otsikko jää kortin ainoaksi täysvahvaksi elementiksi. */
	color: var(--wp--preset--color--text-muted);

	/* Figman ingressi on ruudukossa 1–2 riviä (26 tai 52 px) ja nostossa kolme
	   (78 px). Ote lyhennetään jo PHP:ssä, mutta sanamäärä ei ole rivimäärä:
	   pitkä sana tai kapea palsta veisi yhdelle riville lisää ja kasvattaisi
	   koko ruudukon riviä. Rajaus tässä on se, joka pitää mitan. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.ttf-card-news--feature .ttf-card-news__excerpt {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* Matala vaakakortti. Kuva on kiinteä 150 px palsta, sisältö saa loput —
   150 + 286 = 436. */
.ttf-card-news--compact {
	flex-direction: row;
}

.ttf-card-news--compact .ttf-card-news__media {
	flex: 0 0 110px;
	block-size: auto;
}

.ttf-card-news--compact .ttf-card-news__body {
	gap: var(--wp--preset--spacing--2-xs);
	padding: var(--wp--preset--spacing--md);
	min-inline-size: 0;
}

/* Tyyppitunniste on tässä variantissa sisällössä eikä kuvan päällä (150 px
   leveä kuva jäisi tunnisteen alle). Se on merkkauksessa ennen otsikkoa, mutta
   metarivin order: -1 nostaisi päivämäärän sen yli — siksi -2. */
.ttf-card-news--compact .ttf-card-news__body > .ttf-badge {
	order: -2;
	align-self: flex-start;
}

/*
 * Figman "Kortti / pieni" on kiinteä 230 px korkea ja sen otsikko kahdella
 * rivillä. Figman luonnosotsikot ovat lyhyempiä kuin oikeat artikkeliotsikot,
 * joten korkeus pidetään rivirajauksella eikä toivomalla: ilman sitä kolmen
 * kortin palsta venyi 783 px:iin (Figma 738) ja koko osio 43 px yli.
 * Koko otsikko on silti luettavissa — kortti on kokonaan linkki artikkeliin.
 */
.ttf-card-news--compact .ttf-card-news__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

@media (min-width: 768px) {
	.ttf-card-news--compact { block-size: 230px; }
	.ttf-card-news--compact .ttf-card-news__media { flex-basis: 150px; }
}

/*
 * Leveä nosto — arkistosivun ensimmäinen juttu (Figma: Nosto / Tarina,
 * arkisto-ajankohtaista 340:7736). 1080 x 400 vaakasuunnassa: kuva-alue
 * 620 x 400 vasemmalla, väli 40, sisältö 420 oikealla ja pystysuunnassa
 * keskitettynä (mitattu 53 px ylä- ja alapuolella).
 *
 * Ero --featureen: se on PYSTY nosto etusivun kahden palstan rivissä
 * (620 leveä, kuva 620 x 450 päällä). Sama komponenttinimi Figmassa, eri
 * asettelu — siksi variantti eikä uusi lohko (CLAUDE.md kohta 10.4).
 *
 * Sisältö ei ole kortin sisällä vaan sen vierellä: pehmuste nollataan
 * työpöydällä, jotta teksti alkaa tasan 660 px:n kohdalta (620 + 40).
 */
.ttf-card-news--wide .ttf-card-news__media {
	block-size: 220px;
}

.ttf-card-news--wide .ttf-card-news__media .ttf-badge {
	inset-block-start: 16px;
	inset-inline-start: 16px;
}

.ttf-card-news--wide .ttf-card-news__body {
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--lg);
}

.ttf-card-news--wide .ttf-card-news__title {
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.214;

	/* Kuten nostossa: rivinsä ainoa kortti, joten pitkä otsikko ei kasvata
	   sisaruksia eikä sitä tarvitse rajata. */
	display: block;
	overflow: visible;
}

.ttf-card-news--wide .ttf-card-news__excerpt {
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

@media (min-width: 1024px) {
	.ttf-card-news--wide {
		flex-direction: row;
		gap: var(--wp--preset--spacing--2-xl);
		block-size: 400px;
	}

	.ttf-card-news--wide .ttf-card-news__media {
		flex: 0 0 620px;
		block-size: auto;
	}

	.ttf-card-news--wide .ttf-card-news__body {
		flex: 0 0 420px;
		justify-content: center;
		padding: 0;
	}

	/*
	 * Nuolikehotteen `margin-block-start: auto` (kohta 7.2 yllä) pitää nuolen
	 * kortin pohjassa pystykorteissa, ja se on niissä oikein: Figmassa noston
	 * ja pienen kortin sisältö täyttää kortin, jolloin nuoli on juuri
	 * alapehmusteen päällä.
	 *
	 * Leveässä nostossa Figma näyttää liikkumavaran eksplisiittisesti: sisältö
	 * on 294 px 400 px:n kortissa, 53 px sekä ylä- että alapuolella — siis
	 * keskitettynä. Auto-marginaali kerää koko vapaan tilan nuolen yläpuolelle,
	 * jolloin `justify-content: center` jää tehottomaksi: metarivi liimautuu
	 * kortin yläreunaan, nuoli pohjaan ja ingressin ja nuolen väliin jää
	 * mitattu 208 px Figman 12:n sijaan.
	 */
	.ttf-card-news--wide .ttf-card-news__more {
		margin-block-start: 0;
	}
}

/* 7.2.1 Ajankohtaista-syöte (ttf/news-feed) ----------------------------- */

/*
 * Nostoasettelu: iso nosto vasemmalla, kolme matalaa korttia oikealla.
 * 620 + 24 + 436 = 1080, eli fr-suhde 620:436 osuu tasan kun väli on
 * vähennetty ensin (1080 - 24 = 1056 = 620 + 436).
 *
 * Alle 1024 px palstat menevät päällekkäin: 436 px palsta ei mahdu isomman
 * viereen ilman että kortin 150 px kuva puristuu tunnistamattomaksi.
 */
.ttf-news-feed__split {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
}

@media (min-width: 1024px) {
	.ttf-news-feed__split {
		grid-template-columns: minmax(0, 620fr) minmax(0, 436fr);
		align-items: stretch;
	}

	/*
	 * Kolme korttia jakavat noston korkeuden tasan. flex-basis on `auto`, ei 0:
	 * nollalla palsta ei enää kanna korttien 230 px vähimmäiskorkeutta ylöspäin,
	 * jolloin rivin korkeus jäisi noston tekstimäärän varaan (mitattu: 702 px
	 * Figman 738:n sijaan). `auto` pitää Figman laskennan voimassa —
	 * 3 x 230 + 2 x 24 = 738 — ja nosto venyy siihen.
	 */
	.ttf-news-feed__rest > * {
		flex: 1 1 auto;
	}
}

.ttf-news-feed__rest {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--lg);
	min-inline-size: 0;
}

/* Sama sarakekaava kuin .ttf-card-grid:llä (ks. kommentti sen yllä) — vain
   sarakemäärä tulee lohkon attribuutista. Erillinen luokka siksi, että syöte
   ei ole lista vaan palvelinrenderöity ruudukko eikä siihen kuulu
   list-style-nollausta. Arkistosyöte (ttf/archive-feed) piirtää täsmälleen
   saman 344 px:n ruudukon ja asettaa saman muuttujan, joten se jakaa säännön
   sen sijaan että kaava kirjoitettaisiin toiseen kertaan. */
.ttf-news-feed__grid,
.ttf-archive-feed__grid {
	--ttf-news-feed-columns: 3;
	--ttf-grid-gap: var(--wp--preset--spacing--lg);

	display: grid;
	gap: var(--ttf-grid-gap);
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			max(
				300px,
				(100% - (var(--ttf-news-feed-columns) - 1) * var(--ttf-grid-gap)) / var(--ttf-news-feed-columns)
			),
			1fr
		)
	);
}

.ttf-news-feed__grid > *,
.ttf-archive-feed__grid > * {
	min-width: 0;
}

.ttf-news-feed__empty,
.ttf-archive-feed__empty {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
}

/* 7.3 Kohderyhmänosto (Figma: Card / Audience 2062:2791) ----------------
   Kaksi varianttia: "Kortti / <kohderyhmä>" (etusivu 344×188) ja
   "Malli / <nimi>" (Oppilaitokset, Kolme tapaa). Ero on pehmusteessa,
   väleissä, typografiassa ja siinä että Malli näyttää nimetyn linkin
   pelkän nuolen sijaan. */

.ttf-card-audience {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3-xs);
	padding: var(--wp--preset--spacing--md);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--surface-blue-card);
	color: var(--wp--preset--color--text-black);
	text-decoration: none;
	transition: box-shadow 0.15s ease;
}

@media (min-width: 768px) {
	.ttf-card-audience {
		/* Väli koskee vain sisältöryhmää ja nuolta. Figmassa kortti on kiinteä
		   188 px space-between-asemoinnilla, jolloin pisimmässä kortissa väli
		   puristuu nollaan. Kiinteää korkeutta ei jäljitellä — teksti saa
		   kasvaa — joten väli on pienin luettava 8 px ja nuolen auto-marginaali
		   hoitaa loput. */
		gap: var(--wp--preset--spacing--2-xs);
		padding: var(--wp--preset--spacing--lg);
	}
}

/* Figman "Sisältö"-ryhmä: otsikon ja tekstin väli on 12 vaikka kortin oma
   väli nuoleen on 20. Ilman tätä ryhmää ne olisivat väkisin sama luku. */
.ttf-card-audience__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
}

.ttf-card-audience--purple { background-color: var(--wp--preset--color--surface-purple-card); }
.ttf-card-audience--green { background-color: var(--wp--preset--color--surface-green-card); }

.ttf-card-audience__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 400; /* Figma: korttiotsikot 400, ks. .ttf-card-news__title */
	line-height: 1.17;
	color: var(--wp--preset--color--brand-blue);
}

.ttf-card-audience--purple .ttf-card-audience__title { color: var(--wp--preset--color--brand-purple); }
.ttf-card-audience--green .ttf-card-audience__title { color: var(--wp--preset--color--brand-green-dark); }

.ttf-card-audience__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.63;
}

/* Nuoli on koriste: linkin nimi tulee otsikosta. margin-block-start:auto
   painaa sen kortin alareunaan, jolloin rinnakkaisten korttien nuolet ovat
   samalla viivalla vaikka tekstit olisivat eri mittaisia. */
.ttf-card-audience__arrow {
	display: flex;
	margin-block-start: auto;
	padding-block-start: 4px;
	color: var(--wp--preset--color--brand-blue);
}

.ttf-card-audience--purple .ttf-card-audience__arrow { color: var(--wp--preset--color--brand-purple); }
.ttf-card-audience--green .ttf-card-audience__arrow { color: var(--wp--preset--color--brand-green-dark); }

/* Malli-variantti: Figman "Malli / <nimi>", pehmuste 32, kaikki välit 12,
   otsikko 28/34, teksti 18/30, linkki 16/24 brändinsinisenä. */
.ttf-card-audience--malli {
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--xl);
}

.ttf-card-audience--malli .ttf-card-audience__title {
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.21;
	color: var(--wp--preset--color--text-black);
}

.ttf-card-audience--malli .ttf-card-audience__text {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.67;
	/* Figmassa leveän Kumppanuus-kortin (1080) teksti on rajattu 640 px:iin,
	   jotta rivi ei veny lukukelvottoman pitkäksi. Kapeammissa korteissa
	   (556 ja 372) raja ei tule vastaan. */
	max-inline-size: 640px;
}

.ttf-card-audience__link {
	margin-block-start: auto;
	color: var(--wp--preset--color--brand-blue);
}

a.ttf-card-audience:hover {
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.10);
}

a.ttf-card-audience:hover .ttf-card-audience__title {
	text-decoration: underline;
}

a.ttf-card-audience:hover .ttf-card-audience__link > span {
	text-decoration: underline;
}

/* 7.4 Hyötykortit (Figma: Card / Benefit 2062:2822) -------------------- */

/* Väri tulee järjestyksestä eikä attribuutista: kun sisällönsyöttäjä siirtää
   kortteja editorissa, värirytmi sininen-lila-vihreä pysyy ehjänä. */
.ttf-benefit {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2-xs);
	padding: var(--wp--preset--spacing--md);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--surface-blue-card);
	color: var(--wp--preset--color--text-black);
}

@media (min-width: 768px) {
	.ttf-benefit { padding: var(--wp--preset--spacing--lg); }
}

.ttf-benefit-list > .ttf-benefit:nth-child(3n + 2) { background-color: var(--wp--preset--color--surface-purple-card); }
.ttf-benefit-list > .ttf-benefit:nth-child(3n + 3) { background-color: var(--wp--preset--color--surface-green-card); }

.ttf-benefit__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 400; /* Figma: korttiotsikot 400, ks. .ttf-card-news__title */
	line-height: 1.17;
	color: var(--wp--preset--color--text-black);
}

.ttf-benefit__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.63;
}

/* Rivi-variantti (Figma: Yritykset 340:8324, "Tarkistuslista"). Ei taustaa
   eikä pyöristystä: rivit erotetaan 1 px viivalla. Otsikkopalsta on Figman
   mukaan kiinteä 260 px ja teksti 560 px, väli 32. Kapealla näytöllä palstat
   menevät päällekkäin, koska 260 + 32 + 560 ei mahdu. */
.ttf-benefit-list--rivi > .ttf-benefit {
	padding: var(--wp--preset--spacing--md) 0;
	border-radius: 0;
	background-color: transparent;
	border-block-end: 1px solid var(--wp--preset--color--border-divider);
}

.ttf-benefit-list--rivi > .ttf-benefit:first-child {
	border-block-start: 1px solid var(--wp--preset--color--border-divider);
}

/* Värirytmi kuuluu vain korttivarianttiin. */
.ttf-benefit-list--rivi > .ttf-benefit:nth-child(3n + 2),
.ttf-benefit-list--rivi > .ttf-benefit:nth-child(3n + 3) {
	background-color: transparent;
}

@media (min-width: 768px) {
	.ttf-benefit-list--rivi > .ttf-benefit {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		gap: var(--wp--preset--spacing--xl);
		align-items: start;
		padding: var(--wp--preset--spacing--md) 0;
	}
}

@media (min-width: 1024px) {
	.ttf-benefit-list--rivi > .ttf-benefit {
		grid-template-columns: 260px 560px;
	}
}

/* 8. Prosessi (Figma: Process step 2060:2762) ---------------------------- */

/* Numero on CSS-laskuri, ei tekstiä. Jos se olisi tekstiä <ol>:n sisällä,
   ruudunlukija lukisi järjestysnumeron kahdesti. */
/* Figman "Askeleet"-framella on 32 px:n oma yläpehmuste (paddingTop=32,
   paddingBottom=0) — numeropallot eivät ala heti ingressin alta. Sektion
   itemSpacing on 20, joten ingressin ja ensimmäisen pallon väliksi tulee 52.
   Coren lohkoväli antaa niistä 32, tämä loput 20. Sama luku kaikilla kolmella
   prosessisivulla (hankkeesta, opiskelijat, yritykset, oppilaitokset). */
.ttf-process {
	/* Numeropallon halkaisija. Muuttujana, koska yhdysviivan pystypaikka on
	   pallon keskikohta — sitä ei voi kirjoittaa kahteen kertaan käsin. */
	--ttf-step-size: 48px;

	counter-reset: ttf-step;
	padding-block-start: var(--wp--preset--spacing--md);

	/*
	 * Yhdysviiva piirretään askelkohtaisesti vasemmalle (ks. alla). Rivin
	 * ensimmäisellä askeleella se osuu kokonaan säiliön vasemmalle puolelle,
	 * ja tämä leikkaa sen pois. Näin viiva katkeaa oikein myös silloin kun
	 * ruudukko rivittyy — CSS ei muuten tunnista "rivin ensimmäistä".
	 */
	overflow: hidden;
}

.ttf-process__step {
	counter-increment: ttf-step;
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	align-items: flex-start;
	position: relative;
}

.ttf-process__step::before {
	content: counter(ttf-step);
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--ttf-step-size);
	block-size: var(--ttf-step-size);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--brand-blue);
	color: var(--wp--preset--color--surface-white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1;
}

/* Värikierto sininen - lila - vihreä, kuten Figman Color-variantti. Vihreä on
   tumma sävy: #99BA60 valkoisella tekstillä ei läpäise kontrastivaatimusta. */
.ttf-process__step:nth-child(3n + 2)::before { background-color: var(--wp--preset--color--brand-purple); }
.ttf-process__step:nth-child(3n + 3)::before { background-color: var(--wp--preset--color--brand-green-dark); }

@media (min-width: 768px) {
	.ttf-process {
		--ttf-step-size: 56px;
	}

	.ttf-process__step {
		flex-direction: column;
		gap: var(--wp--preset--spacing--xs);
	}

	/*
	 * Yhdysviiva (Figma: "Askeleet / Yhdysviiva", 826 x 2 #C9CDD6). Sama
	 * elementti on viidellä sivulla: hankkeesta, opiskelijat-ja-osaajat,
	 * yritykset, oppilaitokset ja students-and-talents.
	 *
	 * Figmassa se on YKSI suorakulmio pallojen takana, ensimmäisen ja viimeisen
	 * pallon keskipisteestä keskipisteeseen. Sitä ei voi jäljentää säiliötason
	 * elementtinä, koska ruudukko rivittyy kapealla näytöllä eikä CSS tiedä
	 * missä rivi katkeaa. Siksi jokainen askel piirtää oman pätkänsä
	 * VASEMMALLE: edellisen pallon oikeasta reunasta oman pallonsa vasempaan
	 * reunaan. Pallot ovat läpinäkymättömiä, joten lopputulos on pikselilleen
	 * sama kuin keskipisteestä keskipisteeseen kulkeva viiva.
	 *
	 * Rivin ensimmäisellä askeleella pätkä osuu kokonaan säiliön ulkopuolelle
	 * (x < 0) ja .ttf-process:n overflow leikkaa sen. Viiva katkeaa siis
	 * itsestään oikeissa kohdissa, olipa rivillä 2, 3 vai 4 askelta.
	 *
	 * Poikkeama Figmaan: leiskassa viiva on 4 px pallon keskiviivan ALAPUOLELLA
	 * (pallon keskikohta y=28, viivan y=32) sekä 56 px:n että 20 px:n
	 * pallokoolla. Se on komponenttiin jäänyt siirtymä, ei tarkoitus — viiva
	 * yhdistää pallojen keskipisteet, joten se piirretään tässä keskelle.
	 */
	.ttf-process__step::after {
		content: '';
		position: absolute;
		inset-inline-end: 100%;
		inset-block-start: calc(var(--ttf-step-size) / 2 - 1px);
		inline-size: calc(100% + var(--ttf-grid-gap) - var(--ttf-step-size));
		block-size: 2px;
		background-color: var(--wp--preset--color--border-rule);
	}
}

.ttf-process__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 400; /* Figma: vaiheotsikot 400, ks. .ttf-card-news__title */
	line-height: 1.17;
	color: var(--wp--preset--color--text-black);
}

.ttf-process__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.63;
	color: var(--wp--preset--color--text-black);
}

/* 9. Nosto (Figma: Feature / Story 2065:2792) ---------------------------- */

.ttf-feature-story {
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--surface-white);
}

.ttf-feature-story__media {
	position: relative;
	block-size: 200px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface-blue-90);
	display: flex;
	align-items: flex-start;
	padding: var(--wp--preset--spacing--xs);
}

.ttf-feature-story__image {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ttf-feature-story__media .ttf-badge {
	position: relative;
	z-index: 1;
}

.ttf-feature-story__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2-xs);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md) var(--wp--preset--spacing--md);
}

.ttf-feature-story__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 500;
	line-height: 1.21;
	color: var(--wp--preset--color--text-black);
}

.ttf-feature-story__link {
	color: inherit;
	text-decoration: none;
}

.ttf-feature-story__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ttf-feature-story__link:hover {
	text-decoration: underline;
}

.ttf-feature-story:has(.ttf-feature-story__link:focus-visible) {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--focus-dark);
	outline-offset: var(--wp--custom--focus--offset);
}

.ttf-feature-story__link:focus-visible {
	outline: none;
}

.ttf-feature-story__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.63;
	color: var(--wp--preset--color--text-muted);
}

/* Vihje on span saman linkin sisällä, ei toinen linkki — muuten samaan
   kohteeseen syntyisi kaksi tab-pysähdystä. */
.ttf-feature-story__cue {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2-xs);
	margin-block-start: var(--wp--preset--spacing--3-xs);
	font-size: var(--wp--preset--font-size--link);
	font-weight: 600;
	color: var(--wp--preset--color--brand-blue);
}

@media (min-width: 768px) {
	.ttf-feature-story__media { block-size: 450px; }

	.ttf-feature-story__body {
		gap: var(--wp--preset--spacing--xs);
		padding: var(--wp--preset--spacing--lg);
	}
}

@media (min-width: 1024px) {
	.ttf-feature-story--horizontal {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--2-xl);
		border-radius: 0;
		background-color: transparent;
	}

	.ttf-feature-story--horizontal .ttf-feature-story__media {
		flex: 0 0 620px;
		max-inline-size: 620px;
		block-size: 400px;
		border-radius: var(--wp--custom--radius--lg);
	}

	.ttf-feature-story--horizontal .ttf-feature-story__body {
		padding: 0;
	}
}

/* 10. Huomiolaatikko (Figma: Callout 2061:2753) -------------------------- */

.ttf-callout {
	padding: var(--wp--preset--spacing--lg);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--surface-blue-hover);
	color: var(--wp--preset--color--text-black);
}

.ttf-callout--purple { background-color: var(--wp--preset--color--surface-purple-light); }
.ttf-callout--green { background-color: var(--wp--preset--color--surface-green-light); }

.ttf-callout__title {
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 500;
	line-height: 1.17;
	color: var(--wp--preset--color--text-black);
}

.ttf-callout__body > :first-child { margin-block-start: 0; }
.ttf-callout__body > :last-child { margin-block-end: 0; }

/* 11. Osiotunniste ------------------------------------------------------- */

/* Figman sektioiden auto-layout käyttää itemSpacing 20 (osa 24) otsikon,
   ingressin ja sisällön välillä. Mitattu jokaiselta sivulta:
   node tools/figma-boxes.mjs <slug> 3 → "Section / ... gap=20". */
.ttf-section-header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
}

.ttf-section-header.has-text-align-center {
	align-items: center;
	text-align: center;
}

.ttf-section-header h2 { margin: 0; max-width: var(--wp--custom--measure--heading); }

/* Otsikkorivi: otsikko vasemmalla, nuolilinkki oikeassa reunassa samalla
   rivillä (Figma: "Otsikkorivi" h42, linkki x=1014 kun container alkaa x=117).
   Rivi kääntyy pinoksi kun ne eivät mahdu vierekkäin — linkki ei saa työntää
   otsikkoa kahdelle riville kapealla ruudulla. */
.ttf-section-header__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--lg);
}

.ttf-section-header__link {
	color: var(--wp--preset--color--brand-blue);
	flex: 0 0 auto;
}

/* Osion ingressi on Figmassa 18 / 30 px ja 620–640 px leveä — siis leipätekstiä,
   ei body-largea. Sama arvo toistuu kaikilla seitsemällä sivulla (tarkistettu
   figma-cachen TEXT-nodeista). body-large (22 / 36.7 / 760 px) on hero- ja
   page-hero-ingressin koko, ja se jää niille. Ero näkyy rivimääränä: 22 px:llä
   sama teksti vei kolme riviä kahden sijaan, mikä kasvatti jokaisen osion
   korkeutta 14–20 px. */
.ttf-section-header p:not(.ttf-eyebrow) {
	margin: 0;
	max-width: var(--wp--custom--measure--body);
	font-size: var(--wp--preset--font-size--body);
	/* Väriä EI aseteta: ingressi perii text-blackin. Figmassa 18 px:n
	   tekstinoodeista 52/53 on #1A1A1A ja vain yksi #595F6B, joten harmaa oli
	   väärä yleistys yhdestä poikkeuksesta. Harmaa jää metariveille ja
	   alaviitteille, joissa se on Figman mukainen. */
}

.ttf-eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--meta);
	/* Figmassa 14 / 20 (1.43). Leipätekstin 1.67 antaisi 23.4 px ja siirtäisi
	   alla olevaa sisältöä 3 px alas jokaisessa nostossa. */
	line-height: 1.43;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-blue);
}

/* 12. Herot ja bannerit -------------------------------------------------- */

/* 12.1 Etusivun hero (ttf/hero)
   Figma: Section / Hero A — värikenttä, 340:7618 (1440) · 2021:2032 (768) ·
   340:8016 (390).

   Sininen kenttä on reunasta reunaan. Kolme brändimuotoa vuotaa sen reunojen
   yli ja leikkautuu — Perusta / Responsiivisuus merkitsee sen tarkoitukselliseksi.
   Muodot sijoitetaan cqw-yksiköillä eli suhteessa kentän leveyteen, jolloin
   sommitelma säilyy myös Figman kehysten välissä olevilla leveyksillä. */
.ttf-hero {
	position: relative;
	/* Figmassa nostorivi päättyy 15 px ennen hero-osion alareunaa (etusivu
	   340:7618: Row / Kohderyhmänostot -697, osio -682). Ilman tätä kortit
	   ovat kiinni osion reunassa ja seuraava otsikko nousee liian lähelle. */
	padding-block-end: var(--wp--preset--spacing--sm);
}

.ttf-hero__field {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	container-type: inline-size;
	/* Väri tulee lohkon asetuksista muuttujana. Varalla Figman brändisininen,
	   jotta vanha sisältö ja tyhjä valinta piirtyvät leiskan mukaan. */
	background-color: var(--ttf-field-bg, var(--wp--preset--color--brand-blue));
	color: var(--ttf-field-fg, var(--wp--preset--color--surface-white));
	padding-block: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--lg);
	padding-inline: var(--wp--custom--margin-mobile);
}

/* Taustakuva. Kuva on <img> eikä background-image, jotta se saa srcset-koot ja
   jotta "näytä kokonaan" (object-fit: contain) toimii — background-size: contain
   ei osaa jättää reunoille kentän väriä ilman toista kerrosta.

   Verho on kentän oma väri läpinäkyvänä. Ilman sitä valkoinen otsikko katoaa
   vaalean kuvan päälle; peitto on säädettävissä lohkon asetuksista. */
.ttf-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	overflow: hidden;
}

.ttf-hero__bgimg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: var(--ttf-media-fit, cover);
	object-position: var(--ttf-media-pos, center center);
}

.ttf-hero__veil {
	position: absolute;
	inset: 0;
	display: block;
	background-color: var(--ttf-field-bg, var(--wp--preset--color--brand-blue));
	/* Alaraja peitolle kapealla näytöllä. Työpöydällä otsikko ja ingressi ovat
	   712 px:n palstassa vasemmalla, joten kuva-alue jää tekstin ulkopuolelle ja
	   peitto saa olla 0. Tabletissa ja mobiilissa teksti täyttää kentän
	   leveydeltään, jolloin kuva on väistämättä tekstin alla: ilman alarajaa
	   valkoinen otsikko osuisi kuvan vaaleisiin kohtiin (WCAG 1.4.3). Raja
	   poistetaan 1024:stä ylöspäin. */
	opacity: max(var(--ttf-veil, 0.85), 0.8);
}

.ttf-hero__decor {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	z-index: 1;
}

.ttf-hero__decor .ttf-hero__shape {
	position: absolute;
	display: block;
	inline-size: var(--ttf-size);
	block-size: var(--ttf-size);
	inset-block-start: var(--ttf-y);
	inset-inline-start: var(--ttf-x);
}

.ttf-hero__shape--1 { color: var(--wp--preset--color--brand-green); }
.ttf-hero__shape--2 { color: var(--wp--preset--color--surface-white); }
.ttf-hero__shape--3 { color: var(--wp--preset--color--brand-purple); }

/* Mobiili 390: pyöreä @273,-116 · neliö @390,124 · vino @329,202. */
.ttf-hero__shape--1 { --ttf-x: 70cqw; --ttf-y: -29.74cqw; --ttf-size: 52.05cqw; }
.ttf-hero__shape--2 { --ttf-x: 100cqw; --ttf-y: 31.79cqw; --ttf-size: 33.33cqw; }
.ttf-hero__shape--3 { --ttf-x: 84.36cqw; --ttf-y: 51.79cqw; --ttf-size: 46.15cqw; }

.ttf-hero__inner {
	position: relative;
	z-index: 2;
	max-inline-size: var(--wp--custom--content);
	margin-inline: auto;
	display: grid;
	/* Sama väli tekstipalstan sisällä ja palstojen välissä. Muuttujana, koska
	   tekstipalsta on flex ja kehys grid — gap on molemmissa mutta arvo pitää
	   antaa vain kerran, jotta murtumakohdat eivät erkaannu. */
	--ttf-hero-gap: var(--wp--preset--spacing--md);
	gap: var(--ttf-hero-gap);
}

.ttf-hero__text {
	display: flex;
	flex-direction: column;
	gap: var(--ttf-hero-gap);
}

/* Kuvapaikka oikealla (mediaMode "side"). Mobiilissa ja tabletissa palstat
   pinoutuvat, kuten alasivun herossa. */
.ttf-hero__media {
	display: flex;
	justify-content: center;
}

.ttf-hero__frame {
	position: relative;
	inline-size: 100%;
	max-inline-size: 267px;
	aspect-ratio: 1;
	overflow: hidden;
	/* Näkyy "näytä kuva kokonaan" -rajauksessa kuvan sivuilla. */
	background-color: var(--wp--preset--color--surface-blue-card);
	/* Muoto "ei muotoa" jättää muuttujan asettamatta, jolloin var() on
	   virheellinen ja mask-image palautuu arvoon none — kuva jää suorakaiteeksi. */
	-webkit-mask-image: var(--ttf-hero-mask);
	mask-image: var(--ttf-hero-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.ttf-hero__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: var(--ttf-media-fit, cover);
	object-position: var(--ttf-media-pos, center center);
}

.ttf-hero__title {
	margin: 0;
	color: inherit;
}

.ttf-hero__lead {
	margin: 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--body-large);
}

/* Rahoittajalogot ovat kentän sisällä, eivät alatunnisteen tapaan erillään. */
.ttf-hero__funders {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--2-xs);
}

.ttf-hero__funder img {
	display: block;
	block-size: 75px;
	inline-size: auto;
	max-inline-size: 100%;
}

/* Kohderyhmänostot nousevat kentän päälle. Mobiilissa Figma siirtää ne
   kokonaan seuraavaan osioon, joten päällekkäisyyttä ei ole. */
.ttf-hero__overlap {
	position: relative;
	z-index: 3;
	/* Poikkeus yleisestä border-box-säännöstä: --wp--custom--content (1080) on
	   Figman nostorivin leveys, ei rivin ja reunuksen summa. Border-boxina
	   reunus söisi siitä 96 px ja kortit kutistuisivat 344 -> 312. */
	box-sizing: content-box;
	max-inline-size: var(--wp--custom--content);
	margin-inline: auto;
	margin-block-start: var(--wp--preset--spacing--lg);
	padding-inline: var(--wp--custom--margin-mobile);
}

@media (min-width: 768px) {
	/* Kenttä 768 × 579: yläpehmuste 64, alapehmuste 127 (teksti päättyy
	   127 px ennen kentän alareunaa, ja nostorivi peittää siitä 119). */
	.ttf-hero__field {
		min-block-size: 579px;
		padding-block: var(--wp--preset--spacing--4-xl) 127px;
		padding-inline: var(--wp--custom--margin-tablet);
	}

	.ttf-hero__inner {
		--ttf-hero-gap: var(--wp--preset--spacing--xl);
	}

	.ttf-hero__lead {
		max-inline-size: var(--wp--custom--measure--body);
	}

	.ttf-hero__frame {
		max-inline-size: 340px;
	}

	.ttf-hero__funder img {
		block-size: 58px;
	}

	.ttf-hero__overlap {
		margin-block-start: -119px;
		padding-inline: var(--wp--custom--margin-tablet);
	}

	/* Tablet 768: pyöreä @568,-200 · neliö @668,117 · vino @598,290. */
	.ttf-hero__shape--1 { --ttf-x: 73.96cqw; --ttf-y: -26.04cqw; --ttf-size: 44.27cqw; }
	.ttf-hero__shape--2 { --ttf-x: 86.98cqw; --ttf-y: 15.23cqw; --ttf-size: 26.69cqw; }
	.ttf-hero__shape--3 { --ttf-x: 77.86cqw; --ttf-y: 37.76cqw; --ttf-size: 29.95cqw; }
}

@media (min-width: 1024px) {
	/* Kenttä 1440 × 620: yläpehmuste 75, alapehmuste 127, päällekkäisyys 80. */
	.ttf-hero__field {
		min-block-size: 620px;
		padding-block: 75px 127px;
		padding-inline: var(--wp--custom--margin-wide);
	}

	.ttf-hero__title,
	.ttf-hero__lead {
		max-inline-size: 712px;
	}

	/* Tekstipalsta on nyt 712 px eikä yllä kentän oikeaan reunaan, joten
	   taustakuva saa näkyä lohkon asettamalla peitolla. Ks. .ttf-hero__veil. */
	.ttf-hero__veil {
		opacity: var(--ttf-veil, 0.85);
	}

	/* Kuvapaikka oikealla: 640 + 80 + 360 = 1080, eli sama sisältöleveys kuin
	   ilman kuvaa. Tekstin 712 px:n mittaraja puretaan, koska palsta on jo sitä
	   kapeampi — muuten raja jäisi vaikuttamatta ja hämäisi lukijaa. */
	.ttf-hero--media-side .ttf-hero__inner {
		grid-template-columns: minmax(0, 640fr) minmax(0, 360fr);
		column-gap: var(--wp--preset--spacing--5-xl);
		align-items: center;
	}

	.ttf-hero--media-side .ttf-hero__title,
	.ttf-hero--media-side .ttf-hero__lead {
		max-inline-size: none;
	}

	.ttf-hero__frame {
		max-inline-size: 360px;
	}

	.ttf-hero__overlap {
		margin-block-start: -80px;
		padding-inline: var(--wp--custom--margin-wide);
	}

	/* Desktop 1440: pyöreä @968,-292 · neliö @1298,175 · vino @993,315. */
	.ttf-hero__shape--1 { --ttf-x: 67.22cqw; --ttf-y: -20.28cqw; --ttf-size: 30.9cqw; }
	.ttf-hero__shape--2 { --ttf-x: 90.14cqw; --ttf-y: 12.15cqw; --ttf-size: 15.97cqw; }
	.ttf-hero__shape--3 { --ttf-x: 68.96cqw; --ttf-y: 21.88cqw; --ttf-size: 21.18cqw; }
}

/* 12.2 Alasivun hero (ttf/page-hero)
   Figma: Section / Hero — Opiskelijat ja osaajat (340:7892) · Yritykset
   (340:8324) · Hankkeesta (340:8626) · Yhteystiedot (340:8778) · Students and
   talents (340:8990). Tablet 2024:2182, mobiili 340:8234.

   Desktopilla kaksi palstaa: teksti 526 px vasemmalla, maskattu kuvapaikka
   465 px oikealla. Kuva alkaa 43 px tekstiä ylempää. Tabletissa ja mobiilissa
   Figma pinoaa palstat ja keskittää kuvan. H1 on tällä sivutyypillä sininen. */
.ttf-page-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	container-type: inline-size;
	padding-block: var(--wp--preset--spacing--md) var(--wp--preset--spacing--2-xs);
	padding-inline: var(--wp--custom--margin-mobile);
}

.ttf-page-hero__decor {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	z-index: 0;
}

.ttf-page-hero__shape {
	position: absolute;
	display: block;
	inline-size: var(--ttf-size);
	block-size: var(--ttf-size);
	inset-block-start: var(--ttf-y);
	inset-inline-start: var(--ttf-x);
}

.ttf-page-hero__shape .ttf-icon {
	inline-size: 100%;
	block-size: 100%;
}

.ttf-page-hero__shape--green { color: var(--wp--preset--color--brand-green); }
.ttf-page-hero__shape--purple { color: var(--wp--preset--color--brand-purple); }
.ttf-page-hero__shape--blue { color: var(--wp--preset--color--brand-blue); }
.ttf-page-hero__shape--white { color: var(--wp--preset--color--surface-white); }

/* Koristeiden geometria on mitattu vain 1440 px:n kehyksistä. Figma sijoittaa
   ne kapeammilla leveyksillä kuva-alueen sisään eri kokoisina, eikä
   tablet-/mobiilikehyksiä ole kuin osasta sivuja — siksi koristeet piilotetaan
   alle 1024 px:n sijasta että arvot arvattaisiin. */
.ttf-page-hero__decor {
	display: none;
}

.ttf-page-hero__inner {
	position: relative;
	z-index: 1;
	max-inline-size: var(--wp--custom--content);
	margin-inline: auto;
	display: grid;
	gap: var(--wp--preset--spacing--sm);
}

.ttf-page-hero__text {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--sm);
}

.ttf-page-hero__title {
	margin: 0;
	color: var(--wp--preset--color--brand-blue);
}

.ttf-page-hero__lead {
	margin: 0;
	max-inline-size: var(--wp--custom--measure--body-large);
	font-size: var(--wp--preset--font-size--body-large);
}

.ttf-page-hero__media {
	display: flex;
	justify-content: center;
}

/* Kuvapaikka on maskattu brändimuodolla. Maskin osoite tulee render.php:stä
   muuttujassa --ttf-hero-mask, koska se riippuu teeman sijainnista. */
.ttf-page-hero__frame {
	position: relative;
	inline-size: 100%;
	max-inline-size: 267px;
	aspect-ratio: 1;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface-blue-card);
	-webkit-mask-image: var(--ttf-hero-mask);
	mask-image: var(--ttf-hero-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.ttf-page-hero__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: var(--ttf-media-fit, cover);
	object-position: var(--ttf-media-pos, center center);
}

@media (min-width: 768px) {
	.ttf-page-hero {
		padding-block: var(--wp--preset--spacing--3-xl) var(--wp--preset--spacing--sm);
		padding-inline: var(--wp--custom--margin-tablet);
	}

	.ttf-page-hero__inner {
		gap: var(--wp--preset--spacing--lg);
	}

	.ttf-page-hero__frame {
		max-inline-size: 340px;
	}
}

@media (min-width: 1024px) {
	.ttf-page-hero {
		padding-block: 104px var(--wp--preset--spacing--3-xl);
		padding-inline: var(--wp--custom--margin-wide);
	}

	.ttf-page-hero__decor {
		display: block;
	}

	.ttf-page-hero__inner {
		grid-template-columns: minmax(0, 526fr) minmax(0, 465fr);
		column-gap: var(--wp--preset--spacing--6-xl);
		align-items: start;
	}

	.ttf-page-hero__text {
		gap: var(--wp--preset--spacing--md);
	}

	.ttf-page-hero__media {
		margin-block-start: -43px;
	}

	.ttf-page-hero__frame {
		max-inline-size: 465px;
	}
}

/* 12.3 Huomiobanneri (ttf/highlight-banner) ------------------------------ */

.ttf-highlight-banner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.ttf-highlight-banner__bg {
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--brand-blue);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -1;
}

.ttf-highlight-banner__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--brand-blue);
	opacity: 0.82;
	z-index: -1;
}

.ttf-highlight-banner__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--md);
	padding-block: var(--wp--preset--spacing--4-xl);
	color: var(--wp--preset--color--surface-white);
}

.ttf-highlight-banner__inner h2,
.ttf-highlight-banner__inner p {
	color: var(--wp--preset--color--surface-white);
	margin: 0;
}

@media (min-width: 1024px) {
	.ttf-highlight-banner__inner {
		gap: var(--wp--preset--spacing--xl);
		padding-block: var(--wp--preset--spacing--6-xl);
	}
}

/* 13. Henkilökortit ------------------------------------------------------ */

.ttf-staff-grid {
	--ttf-staff-cols: 4;

	display: grid;
	gap: var(--wp--preset--spacing--lg);
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			max(
				240px,
				(100% - (var(--ttf-staff-cols) - 1) * var(--wp--preset--spacing--lg)) /
					var(--ttf-staff-cols)
			),
			1fr
		)
	);
}

.ttf-staff-grid > * { min-width: 0; }

/* Figma: Yhteystiedot 340:8778, "Henkilö"-kortti — 252 × 338, valkoinen,
   r=16, pehmuste 24, väli 12. Kortti on vaalealla kaistalla, joten sen oma
   tausta on valkoinen eikä surface-light. */
.ttf-staff-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--lg);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--surface-white);
}

/* Kasvokuvapaikka. Figmassa 96 × 96 ELLIPSE, ei kortin levyinen neliö:
   96 + 12 px väliä on osa kortin 338 px korkeudesta. Pyöristys tehdään tässä
   eikä kuvatiedostoon, jotta sama tiedosto kelpaa muualle neliönä.

   `flex: 0 0 auto` estää flex-säiliötä kutistamasta ympyrää, jos kortti jää
   kapeaksi — muuten se litistyisi ellipsiksi ja kortti muuttuisi matalammaksi
   ilman että mikään näyttää rikkoutuneen. */
.ttf-staff-card__image {
	flex: 0 0 auto;
	inline-size: 96px;
	block-size: 96px;
	object-fit: cover;
	border-radius: 50%;
}

/* Kuvaton tila. Figmassa täyttö on brändiväri 18 %:n peitolla valkoista
   vasten; paletin kortti-sävyt ovat käytännössä samat värit (#E8DEF6,
   #DBE3F6, #E6F1D1), joten sävy tulee paletista eikä läpinäkyvyydestä ja
   toimii myös muulla kuin valkoisella taustalla. */
.ttf-staff-card__image--tyhja { display: block; }
.ttf-staff-card__image--blue   { background-color: var(--wp--preset--color--surface-blue-card); }
.ttf-staff-card__image--purple { background-color: var(--wp--preset--color--surface-purple-card); }
.ttf-staff-card__image--green  { background-color: var(--wp--preset--color--surface-green-card); }

.ttf-staff-card h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-4);
	/* Figman 165 otsikosta 160 on 400; nämä neljä nimeä ovat 500. Paino on
	   siis kirjoitettava tähän erikseen — theme.jsonin oletus on 400. */
	font-weight: 500;
}

.ttf-staff-card__role {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.63;
}

.ttf-staff-card__contact {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.63;
}

/* Figmassa sähköposti ja puhelin ovat 16/400 #1A1A1A eli täsmälleen samaa
   tekstiä kuin titteli — Figmassa ei ole linkin käsitettä. Väri otetaan
   leiskasta, mutta linkin on erotuttava jotenkin: pelkkä musta teksti ilman
   alleviivausta ei kerro klikattavuudesta mitään (WCAG 1.4.1). Ratkaisu on
   alleviivaus, ei brändisininen.

   Sama käsittely koskee oppilaitossivun yhteyshenkilöriviä (.ttf-contact-line):
   se on sama komponentti eri sivulla, ja Figmassa senkin yhteystiedot ovat
   #1A1A1A. Muut leipätekstin linkit pysyvät brändisinisinä. */
.ttf-staff-card__contact a,
.ttf-contact-line a {
	color: var(--wp--preset--color--text-black);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ttf-staff-card__contact a:hover,
.ttf-staff-card__contact a:focus-visible,
.ttf-contact-line a:hover,
.ttf-contact-line a:focus-visible {
	color: var(--wp--preset--color--brand-blue);
}

/* 13.1 Yhteydenotto-osio (Figma: Yhteystiedot 340:8778) ------------------ */

/* Osio on vasempaan tasattu ja kaksiosainen: otsikkolohko ja lomakelohko,
   väli 40. Otsikkolohkon sisäinen väli on 16, lomakelohkon 12. */
.ttf-contact-section {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2-xl);
}

.ttf-contact-section__head {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}

.ttf-contact-section__title {
	margin: 0;
}

.ttf-contact-section__lead {
	margin: 0;
	/* Figmassa 640 px = measure.body, ja ingressi on 18 px eli leipätekstiä. */
	max-inline-size: var(--wp--custom--measure--body);
}

.ttf-contact-section__form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	padding-block: var(--wp--preset--spacing--lg);
	border-radius: var(--wp--custom--radius--lg);
	/* Figman täyttö on #FFFFFF. Sivun oma tausta on sama, joten tämä ei näy
	   yhteystiedot-sivulla — mutta lohko toimii myös vaalealla pinnalla, ja
	   ilman täyttöä 16 px:n pyöristys ei tarkoittaisi mitään. */
	background-color: var(--wp--preset--color--surface-white);
}

.ttf-contact-section__form-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-3);
	color: var(--wp--preset--color--brand-blue);
}

.ttf-contact-section__form-note {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

/* 14. Lomakkeet (Contact Form 7) ----------------------------------------- */

/* Figma: Lomake / Lähetä viesti — kentät 52 px, r=6, tausta #F7F8FC,
   pehmuste 12/16, ja jokaisen rivin väli 12 px. Lomakepohja on
   inc/contact-form.php:ssä; nämä säännöt koskevat mitä tahansa CF7-lomaketta
   sivustolla, jotta ylläpitäjän itse tekemä lomake näyttää samalta. */
.wpcf7 { width: 100%; }

/* Rivien väli on Figman 12, ei coren 24. Marginaali eikä gap, koska
   <form> ei ole asettelusäiliö eikä CF7 takaa lasten järjestystä:
   piilotetut kentät ja vastausviesti ovat samoja sisaruksia. */
.wpcf7-form p { margin: 0 0 var(--wp--preset--spacing--xs); }
.wpcf7-form p:last-of-type { margin-block-end: 0; }

/* Figmassa kentän nimi on kentän SISÄLLÄ eikä sen yläpuolella, joten
   näkyvää otsikkoa ei ole. Otsikko on silti olemassa .screen-reader-text
   -luokalla, jotta kentällä on saavutettava nimi silloinkin kun
   placeholder on kirjoitettu piiloon — tätä sääntöä ei siis saa antaa
   kumota piilotusta (siksi :not). Sääntö on olemassa sitä varten, että
   ylläpitäjä voi ottaa otsikot näkyviin poistamalla luokan. */
.wpcf7-form label:not(.screen-reader-text) {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--text-black);
	margin-block-end: var(--wp--preset--spacing--2-xs);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
	inline-size: 100%;
	min-block-size: var(--wp--custom--target--field);
	box-sizing: border-box;
	padding: 12px 16px;
	border: 1px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface-light);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.63;
	color: var(--wp--preset--color--text-black);
}

/* Figman kentänsisäinen teksti: 16 / 400 / #595F6B. Selaimen oletus on
   noin 54 % läpinäkyvyyttä, mikä jää alle kontrastivaatimuksen. */
.wpcf7-form ::placeholder {
	color: var(--wp--preset--color--text-muted);
	opacity: 1;
}

/* display: block poistaa rivilaatikon alapuolelle jäävän perusviivavälin.
   Inline-elementtinä 120 px:n tekstialue vei 129 px, eli rivi oli 9 px
   leiskaa korkeampi ilman että mikään mitta oli väärin. */
.wpcf7-form textarea {
	display: block;
	resize: vertical;
	min-block-size: 120px;
}

.wpcf7-form .wpcf7-not-valid {
	border-color: var(--wp--preset--color--status-error);
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-block-start: var(--wp--preset--spacing--3-xs);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--status-error);
}

/* CF7:n oma tyylitiedosto antaa jokaiselle valintariville vasemman
   marginaalin: `.wpcf7-list-item { display: inline-block; margin: 0 0 0 1em }`.
   Se työnsi suostumusrivin 1 em muita rivejä oikeammalle (mitattu 18 px
   1440:ssä, 16 px 390:ssä — em seuraa fonttikokoa, joten rako oli myös eri
   kokoinen eri leveyksillä). Figmassa valintaruutu on samassa linjassa
   kenttien, tekstien ja painikkeen kanssa, joten marginaali nollataan.

   Rivi tehdään samalla lohkotason elementiksi. CF7:n inline-block on
   tarkoitettu siihen, että monivalinnan vaihtoehdot asettuvat vierekkäin,
   mutta silloin rivin pituus määrää rivityksen ja pitkät vaihtoehdot
   katkeavat sattumanvaraisesti. Allekkain jokainen vaihtoehto on oma
   osumakohteensa ja vasen reuna pysyy suorana; vaihtoehtojen väli tulee
   erillisestä säännöstä eikä marginaalista, joka rikkoisi tasauksen. */
.wpcf7-form .wpcf7-list-item {
	display: block;
	margin: 0;
}

.wpcf7-form .wpcf7-list-item + .wpcf7-list-item {
	margin-block-start: var(--wp--preset--spacing--2-xs);
}

/* Figmassa suostumustekstin linkki on musta, ei brändisininen. Sama ratkaisu
   kuin henkilökortin yhteystiedoissa (.ttf-staff-card__contact a): väri
   leiskasta, mutta alleviivaus jätetään, koska pelkkä musta teksti ei kerro
   klikattavuudesta mitään (WCAG 1.4.1). Leipätekstin linkit muualla
   sivustolla pysyvät sinisinä. */
.wpcf7-form a {
	color: var(--wp--preset--color--text-black);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wpcf7-form a:hover,
.wpcf7-form a:focus-visible {
	color: var(--wp--preset--color--brand-blue);
}

.wpcf7-form .wpcf7-acceptance label,
.wpcf7-form .wpcf7-checkbox label,
.wpcf7-form .wpcf7-radio label {
	display: flex;
	gap: var(--wp--preset--spacing--xs);
	align-items: flex-start;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-black);
}

/* Figma: Rasti / tyhjä — 22×22, valkoinen täyttö, 1.5 px #8A90A0, r=4.
   Selaimen oma valintaruutu on 13×13 eikä sen reunusta voi tyylittää, joten
   ruutu piirretään itse. accent-color ei riitä: se vaihtaa vain täyttövärin. */
.wpcf7-form input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	inline-size: 22px;
	block-size: 22px;
	flex: 0 0 auto;
	margin: 0;
	border: 1.5px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--xs);
	background-color: var(--wp--preset--color--surface-white);
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
}

/* Rastin väri on data-URI:ssa kiinteä valkoinen. Se on ainoa kohta koko
   tyylitiedostossa, jossa hex on kirjoitettu näkyviin: data-URI ei voi
   lukea CSS-muuttujaa. Väri on brändisinisen päällä oleva rasti, joten se
   seuraa surface-white-tokenia eikä muutu ylläpitäjän väriasetuksista. */
.wpcf7-form input[type="checkbox"]:checked {
	border-color: var(--wp--preset--color--brand-blue);
	background-color: var(--wp--preset--color--brand-blue);
	background-image: url( 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M20 6 9 17l-5-5"/%3E%3C/svg%3E' );
}

.wpcf7-form input[type="radio"] {
	inline-size: 22px;
	block-size: 22px;
	flex: 0 0 auto;
	accent-color: var(--wp--preset--color--brand-blue);
}

/* Figma: Painike / Lähetä viesti — 146×52, r=999, 16/500 valkoisella.
   14 + 24 + 14 = 52, sama laskenta kuin theme.jsonin button-elementissä. */
.wpcf7-form input[type="submit"] {
	padding: 14px 24px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--brand-blue);
	color: var(--wp--preset--color--surface-white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--button);
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.wpcf7-form input[type="submit"]:hover {
	background-color: var(--wp--preset--color--brand-blue-hover);
}

/* CF7:n oletusmarginaali on 2em/1em eli irrallinen sivun rytmistä. */
.wpcf7 form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--xs) 0 0;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output {
	border-width: 1px;
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--small);
}

/* Lähetyksen aikainen kehä. CF7 lisää sen inline-tyylillä oletuksena
   keskelle painiketta; annetaan sille oma paikka rivin lopusta. */
.wpcf7-form .wpcf7-spinner {
	margin: 0 0 0 var(--wp--preset--spacing--xs);
	vertical-align: middle;
}

.ttf-form-placeholder {
	padding: var(--wp--preset--spacing--sm);
	border: 1px dashed var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface-light);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

/* 15. Ylätunniste (Figma: Header 11:23, 12:23, 12:52) -------------------- */

/* Ylätunniste on reunasta reunaan valkoinen, mutta sen sisältö rajautuu
   sivun maksimileveyteen. 1440px näytöllä 48px padding jättää 1344px —
   sama kuin Figman kehyksessä. Leveämmällä näytöllä palkki keskittyy. */
.ttf-header {
	background-color: var(--wp--preset--color--surface-white);
}

.ttf-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
	max-inline-size: var(--wp--custom--page-max);
	margin-inline: auto;
	padding-inline: var(--wp--custom--margin-mobile);
	min-block-size: var(--wp--custom--header-mobile);
}

.ttf-header__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
}

.ttf-header__logo img {
	display: block;
	inline-size: auto;
	block-size: 44px;
	max-inline-size: none;
}

.ttf-header__right {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--lg);
}

/* Ylätunnisteen osat eivät kutistu eivätkä rivity. Tämä on myös mittauksen
   edellytys: rivittyvä linkki kutistuu aina sopivaksi, jolloin tilanpuutetta
   ei voi havaita. Kun rivi ei mahdu, JS vaihtaa hampurilaisvalikkoon. */
.ttf-header__logo,
.ttf-header__right,
.ttf-header__right > * {
	flex: 0 0 auto;
}

.ttf-nav__link,
.ttf-header__search {
	white-space: nowrap;
}

/* Navigaatio, erotin ja hakulinkki ovat desktop-osia. Kapeilla näytöillä
   sama sisältö on overlay-paneelissa, joten ne piilotetaan kokonaan
   (display:none) eikä vain siirretä pois näkyvistä — muuten ne jäisivät
   sarkainjärjestykseen kahteen kertaan. */
.ttf-nav,
.ttf-header__divider,
.ttf-header__search {
	display: none;
}

.ttf-nav__list {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ttf-nav__item {
	margin: 0;
}

/* Aktiivinen sivu saa 3px palkin linkin alle (Figma: "Active bar").
   Palkki on ::after, jotta se ei muuta rivikorkeutta. */
.ttf-nav__link {
	position: relative;
	display: block;
	padding-block: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--nav);
	font-weight: 400;
	line-height: 1.34;
	color: var(--wp--preset--color--text-black);
	text-decoration: none;
}

.ttf-nav__link:hover {
	text-decoration: underline;
}

.ttf-nav__item.is-current .ttf-nav__link {
	font-weight: 600;
}

.ttf-nav__item.is-current .ttf-nav__link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 1px;
	block-size: 3px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--brand-blue);
}

.ttf-header__divider {
	inline-size: 1px;
	block-size: 24px;
	background-color: var(--wp--preset--color--surface-blue-hover);
}

.ttf-header__search {
	align-items: center;
	gap: var(--wp--preset--spacing--2-xs);
	padding-block: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--nav);
	font-weight: 400;
	color: var(--wp--preset--color--text-black);
	text-decoration: none;
}

.ttf-header__search:hover .ttf-header__search-label {
	text-decoration: underline;
}

.ttf-header__search-icon {
	display: block;
	inline-size: 18px;
	block-size: 18px;
	color: var(--wp--preset--color--brand-blue);
}

/* Valikkopainike: Figma 40x39, pad 12/8, r=6. Kosketuskohde nostetaan
   44px:ään läpinäkyvällä ::before-alueella, jotta ulkoasu ei muutu. */
.ttf-header__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	min-block-size: 40px;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--2-xs);
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background-color: transparent;
	color: var(--wp--preset--color--brand-blue);
	cursor: pointer;
}

.ttf-header__toggle::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	inline-size: var(--wp--custom--target--nav-row);
	block-size: var(--wp--custom--target--nav-row);
	transform: translate(-50%, -50%);
}

.ttf-header__toggle:hover {
	background-color: var(--wp--preset--color--surface-blue-hover);
}

.ttf-header__toggle-icon {
	display: block;
	inline-size: 24px;
	block-size: 16px;
}

@media (min-width: 768px) {
	/* Ylätunniste ei noudata sisällön marginaalia: Figmassa sivupehmuste on
	   48 px sekä kehyksessä 1440 että 768 (sisältöosiot 180 / 32). Korkeus on
	   samoin 96 px molemmissa. */
	.ttf-header__inner {
		padding-inline: var(--wp--custom--margin-wide);
		min-block-size: var(--wp--custom--header-tablet);
	}

	.ttf-header__logo img {
		block-size: 56px;
	}
}

/* Vararaja ilman JS:ää. Mitattu selaimessa: nykyinen valikko vaatii logon,
   navin, erottimen ja hakulinkin kanssa 1128 px + 2 x 48 px pehmusteen eli
   1224 px näkymäleveyden. 1280 on lähin turvallinen katkaisu. JS tarkentaa
   rajan molempiin suuntiin, koska valikon nimikkeet voivat muuttua. */
@media (min-width: 1280px) {
	.ttf-nav {
		display: block;
	}

	.ttf-header__divider {
		display: block;
	}

	.ttf-header__search {
		display: inline-flex;
	}

	.ttf-header__toggle {
		display: none;
	}
}

/* JS:n mittaustulos ohittaa mediakyselyn molempiin suuntiin. Luokka on
   .ttf-headerissa, joten spesifisyys (0,2,0) voittaa mediakyselyn säännön
   (0,1,0) sijainnista riippumatta — mediakysely ei nosta spesifisyyttä. */
.ttf-header.is-nav-inline .ttf-nav,
.ttf-header.is-nav-inline .ttf-header__divider {
	display: block;
}

.ttf-header.is-nav-inline .ttf-header__search {
	display: inline-flex;
}

.ttf-header.is-nav-inline .ttf-header__toggle {
	display: none;
}

.ttf-header.is-nav-collapsed .ttf-nav,
.ttf-header.is-nav-collapsed .ttf-header__divider,
.ttf-header.is-nav-collapsed .ttf-header__search {
	display: none;
}

.ttf-header.is-nav-collapsed .ttf-header__toggle {
	display: inline-flex;
}

/* Hakupaneeli: aukeaa navirivin alle, ei sen sekaan — rivillä ei ole tilaa.
   Ratkaisu on tässä tehty, Figmassa ei ole työpöytähaulle kehystä. */
.ttf-header__search-panel[hidden] {
	display: none;
}

.ttf-header__search-panel {
	border-block-start: 1px solid var(--wp--preset--color--border-divider);
	background-color: var(--wp--preset--color--surface-white);
}

.ttf-header__search-form {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	max-inline-size: var(--wp--custom--page-max);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--md) var(--wp--custom--margin-mobile);
}

.ttf-header__search-form .ttf-search {
	flex: 1 1 auto;
	min-inline-size: 0;
}

/* Näkyvä lähetyspainike eikä pelkkä Enter: paneeli on uusi elementti, jonka
   toiminta ei ole opittu, ja näkyvä painike on myös isompi kosketuskohde. */
.ttf-header__search-submit {
	flex: 0 0 auto;
	min-block-size: var(--wp--custom--target--button);
	padding-inline: var(--wp--preset--spacing--lg);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--brand-blue);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--button);
	font-weight: 500;
	color: var(--wp--preset--color--surface-white);
	cursor: pointer;
}

.ttf-header__search-submit:hover {
	background-color: var(--wp--preset--color--brand-blue-hover);
}

.ttf-header__search-close {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	inline-size: var(--wp--custom--target--nav-row);
	block-size: var(--wp--custom--target--nav-row);
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background-color: transparent;
	color: var(--wp--preset--color--brand-blue);
	cursor: pointer;
}

.ttf-header__search-close:hover {
	background-color: var(--wp--preset--color--surface-blue-hover);
}

.ttf-header__search-close-icon {
	display: block;
	inline-size: 20px;
	block-size: 20px;
}

@media (min-width: 768px) {
	.ttf-header__search-form {
		padding-inline: var(--wp--custom--margin-wide);
	}
}

/* 16. Valikkopaneeli (Figma: Menu / Overlay 13:65, 13:112) --------------- */

/* Paneeli peittää koko näkymän. hidden-attribuutti on totuuden lähde:
   ilman JS:ää paneeli ei avaudu eikä sen sisältö ole sarkainjärjestyksessä. */
.ttf-menu[hidden] {
	display: none;
}

.ttf-menu {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--wp--preset--color--surface-white);
}

/* Taustan vieritys lukitaan kun paneeli on auki. */
.ttf-menu-open,
.ttf-menu-open body {
	overflow: hidden;
}

.ttf-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
	padding-inline: var(--wp--custom--margin-mobile);
	min-block-size: var(--wp--custom--header-mobile);
	flex: 0 0 auto;
}

.ttf-menu__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--wp--custom--target--nav-row);
	min-block-size: 48px;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--2-xs);
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background-color: transparent;
	color: var(--wp--preset--color--brand-blue);
	cursor: pointer;
}

.ttf-menu__close:hover {
	background-color: var(--wp--preset--color--surface-blue-hover);
}

.ttf-menu__close-icon {
	display: block;
	inline-size: 24px;
	block-size: 24px;
}

.ttf-menu__nav {
	padding: var(--wp--preset--spacing--2-xs) var(--wp--custom--margin-mobile) 0;
}

.ttf-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ttf-menu__item {
	margin: 0;
}

/* Rivi 60px = teksti 28px + pad 16/16 (Figma). */
.ttf-menu__link {
	display: block;
	padding-block: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--menu);
	line-height: 1.65;
	color: var(--wp--preset--color--text-black);
	text-decoration: none;
}

.ttf-menu__link:hover {
	text-decoration: underline;
}

.ttf-menu__item.is-current .ttf-menu__link {
	font-weight: 600;
	color: var(--wp--preset--color--brand-blue);
}

.ttf-menu__search {
	padding: var(--wp--preset--spacing--md) var(--wp--custom--margin-mobile) var(--wp--preset--spacing--xl);
}

@media (min-width: 768px) {
	.ttf-menu__top {
		padding-inline: var(--wp--custom--margin-tablet);
		min-block-size: var(--wp--custom--header-tablet);
	}

	.ttf-menu__nav {
		padding-inline: var(--wp--custom--margin-tablet);
	}

	.ttf-menu__search {
		padding-inline: var(--wp--custom--margin-tablet);
	}
}

/* 17. Hakukenttä (Figma: Input / Site search 302:696, 254:1426) ---------- */

.ttf-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	min-block-size: var(--wp--custom--target--field);
	padding-inline: var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface-light);
}

.ttf-search__icon {
	display: block;
	flex: 0 0 auto;
	inline-size: 18px;
	block-size: 18px;
	color: var(--wp--preset--color--text-muted);
}

.ttf-search__input {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-black);
}

.ttf-search__input::placeholder {
	color: var(--wp--preset--color--text-muted);
	opacity: 1;
}

/* Fokusrengas piirretään koko kentän ympärille, ei pelkän inputin —
   muuten se leikkautuisi reunuksen sisään. */
.ttf-search:focus-within {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--focus-dark);
	outline-offset: var(--wp--custom--focus--offset);
}

.ttf-search__input:focus-visible {
	outline: none;
}

/* Sinisellä pinnalla: läpinäkyvä tausta, 1.5px valkoinen reunus (Figma). */
.ttf-search--inverse {
	border-width: 1.5px;
	border-color: var(--wp--preset--color--surface-white);
	background-color: transparent;
}

.ttf-search--inverse .ttf-search__icon,
.ttf-search--inverse .ttf-search__input {
	color: var(--wp--preset--color--surface-white);
}

.ttf-search--inverse .ttf-search__input::placeholder {
	color: var(--wp--preset--color--surface-white);
	opacity: 1;
}

.ttf-search--inverse:focus-within {
	outline-color: var(--wp--preset--color--focus-light);
}

/* 18. Alatunniste (Figma: Footer 254:1457, 254:5531) --------------------- */

.ttf-footer {
	padding-block: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--lg);
	padding-inline: var(--wp--custom--margin-mobile);
	background-color: var(--wp--preset--color--brand-blue);
	color: var(--wp--preset--color--surface-white);
}

/* Tummalla pinnalla kaikki linkit ovat valkoisia — muuten theme.json:n
   linkkiväri (brand-blue) katoaisi taustaan. */
.ttf-footer a {
	color: var(--wp--preset--color--surface-white);
}

.ttf-footer :focus-visible {
	outline-color: var(--wp--preset--color--focus-light);
}

.ttf-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
	max-inline-size: var(--wp--custom--content);
	margin-inline: auto;
}

.ttf-footer__logo img {
	display: block;
	inline-size: auto;
	block-size: 51px;
	max-inline-size: none;
}

.ttf-footer__top {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
}

.ttf-footer__intro p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.ttf-footer__links ul,
.ttf-footer__bottom-links,
.ttf-footer__social {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ttf-footer__links ul {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
}

.ttf-footer__links li {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.ttf-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
}

/* Rahoittajalogot pysyvät AINA rinnakkain, myös kapeimmalla puhelimella.

   Figman mobiiliversio (254:5531) piirtää logot rinnakkain 77 px korkeina,
   mutta se käyttää eri kuvasuhdetta kuin työpöytä: 153x77 ja 166x77 vastaan
   212x51 ja 201x52. Meillä on vain leveät tiedostot (636x153 ja 603x156,
   kuvasuhteet 4.16 ja 3.87), joten 77 px:n korkeus vaatisi 618 px leveyttä
   eikä mahdu 342 px:n kaistaan — siitä syntyi rivitys.

   Ratkaisu ei ole vw-laskettu korkeus vaan flexin oma kutistus:
   `flex-wrap: nowrap` estää rivityksen, `min-inline-size: 0` sallii kohteen
   kutistua sisältöään kapeammaksi, ja kun kuvalla on `max-inline-size: 100%`
   ja `block-size: auto`, korkeus seuraa leveyttä kuvasuhde säilyttäen.
   Mitoitus säätyy siis itse jokaisella leveydellä ilman taikanumeroita.
   `max-block-size` pitää katon Figman 77 px:ssä leveillä puhelimilla. */
.ttf-footer__funders {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--wp--preset--spacing--lg);
	padding-block: var(--wp--preset--spacing--3-xs) var(--wp--preset--spacing--sm);
}

.ttf-footer__funders > * {
	min-inline-size: 0;
	flex: 0 1 auto;
}

.ttf-footer__funders img {
	display: block;
	block-size: auto;
	max-block-size: 77px;
	inline-size: auto;
	max-inline-size: 100%;
}

.ttf-footer__rule {
	block-size: 1px;
	margin: 0;
	border: 0;
	background-color: var(--wp--preset--color--surface-white);
}

.ttf-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
	min-block-size: var(--wp--custom--target--nav-row);
}

.ttf-footer__social {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2-xs);
}

.ttf-footer__social li {
	margin: 0;
}

/* Some-ikonit ovat valkoinen ympyrä + sinisellä upotettu tunnus.
   currentColor ohjaa tunnusta, ympyrä on ikonissa kiinteästi valkoinen. */
.ttf-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--wp--custom--target--social);
	block-size: var(--wp--custom--target--social);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--brand-blue);
}

.ttf-footer__social a svg {
	inline-size: 28px;
	block-size: 28px;
}

.ttf-footer__social a:hover {
	color: var(--wp--preset--color--brand-blue-hover);
}

.ttf-footer__bottom-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--lg);
}

.ttf-footer__bottom-links li {
	margin: 0;
	font-size: var(--wp--preset--font-size--nav);
}

@media (min-width: 768px) {
	.ttf-footer {
		padding-inline: var(--wp--custom--margin-tablet);
	}

	/* Sama itsesäätyvä mitoitus kuin mobiilissa: katto laskee 77 → 52, mutta
	   `block-size` pysyy autona, jotta kuvasuhde säilyy jos kaista kapenee. */
	.ttf-footer__funders img {
		max-block-size: 52px;
	}
}

@media (min-width: 1024px) {
	.ttf-footer {
		padding-block: var(--wp--preset--spacing--4-xl) var(--wp--preset--spacing--xl);
		padding-inline: var(--wp--custom--margin-wide);
	}

	.ttf-footer__inner {
		gap: var(--wp--preset--spacing--xl);
	}

	.ttf-footer__logo img {
		block-size: 56px;
	}

	/* Figma: esittely 440 | linkit 200 | haku 312, gap 64.
	   Leveydet ovat joustavia eivätkä kiinteitä pikseleitä, jotta suhteet
	   säilyvät myös kapeammalla desktopilla. */
	.ttf-footer__top {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--4-xl);
	}

	.ttf-footer__intro {
		flex: 1 1 440px;
		max-inline-size: 440px;
	}

	.ttf-footer__links {
		flex: 0 1 200px;
	}

	.ttf-footer__search {
		flex: 0 1 312px;
	}

	.ttf-footer__bottom {
		gap: var(--wp--preset--spacing--md);
	}

	/* Työpöytä keskittää logoparin (Figman auto-layout
	   primaryAxisAlignItems=CENTER: x419 ja x695 1080 px:n kaistassa).
	   Mobiilissa Figma pitää ne vasemmassa reunassa, joten keskitys on tässä
	   eikä perussäännössä.

	   Pehmusteeksi Figma ilmoittaa 8/24, mutta framen korkeus on lukittu
	   (counterAxisSizingMode FIXED, h=67) eikä auto-layout siksi koskaan piirrä
	   sitä 24:ää: logot ovat 8 px ylä- ja 7 px alareunasta. Piirretty jälki on
	   tässä totuus, joten pehmuste on symmetrinen 8/8. */
	.ttf-footer__funders {
		justify-content: center;
		gap: var(--wp--preset--spacing--4-xl);
		padding-block: var(--wp--preset--spacing--2-xs);
	}
}

/* 19. Murupolku (Figma: Breadcrumb 263:1975) ----------------------------- */

.ttf-breadcrumbs {
	padding-block: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--3-xs);
	padding-inline: var(--wp--custom--margin-mobile);
}

.ttf-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--3-xs);
	max-inline-size: var(--wp--custom--content);
	margin: 0 auto;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	line-height: 1.43;
	color: var(--wp--preset--color--text-muted);
}

.ttf-breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3-xs);
	margin: 0;
}

/* Erotin on koriste: sen on tultava CSS:stä, jotta ruudunlukija ei lue
   sitä jokaisen tason välissä. */
.ttf-breadcrumbs__item + .ttf-breadcrumbs__item::before {
	content: "\203A";
	font-weight: 400;
	color: var(--wp--preset--color--text-muted);
}

.ttf-breadcrumbs__item a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.ttf-breadcrumbs__item a:hover {
	text-decoration: underline;
}

@media (min-width: 768px) {
	.ttf-breadcrumbs {
		padding-block: var(--wp--preset--spacing--md) var(--wp--preset--spacing--3-xs);
		padding-inline: var(--wp--custom--margin-tablet);
	}

	.ttf-breadcrumbs__list {
		gap: var(--wp--preset--spacing--2-xs);
	}

	.ttf-breadcrumbs__item {
		gap: var(--wp--preset--spacing--2-xs);
	}
}

@media (min-width: 1024px) {
	.ttf-breadcrumbs {
		padding-inline: var(--wp--custom--margin-wide);
	}
}

/* 20. Logorivi (Figma: Section / Yhteistyössä 340:7618) ------------------- */

/* Logopaikka on Figmassa 197 x 96 ja niitä on viisi rinnakkain 1080 px:n
   sisällössä. Sarakeväli on siis (1080 - 5*197) / 4 = 24 px. Sama
   auto-fill-kaava kuin osiossa 6, mutta oma muuttujanimi: logorivi ja
   korttiruudukko rivittyvät eri leveyksillä eivätkä saa jakaa samaa
   --ttf-grid-min-arvoa.

   Sarakeväli on lukittu 24 px:iin, koska kaava johtaa siitä sarakeleveyden:
   suurempi väli kutistaisi sarakkeen alle Figman 197 px:n. Riviväli oli
   aiemmin nostettu 24 -> 40 px, koska tiukasti rajatut logotiedostot eivät
   täyttäneet paikkaansa reunoja myöten ja 24 px näytti tiiviimmältä kuin
   luonnoksessa. Toimittajan logopaketissa pehmuste on tiedoston sisällä
   (500 x 282 -kanvas, merkki keskellä), joten se ilma tulee nyt kuvasta —
   40 px:n riviväli päälle tekisi rivien välistä noin 96 px:n aukon. Siksi
   riviväli on takaisin Figman arvossa 24. */
.ttf-logo-wall {
	--ttf-logos-cols: 5;
	--ttf-logos-min: 160px;
	--ttf-logos-gap: var(--wp--preset--spacing--lg);
	--ttf-logos-row-gap: var(--wp--preset--spacing--lg);

	/*
	 * Kaavassa käytetty minimi on oma muuttujansa, jotta mediakysely pääsee
	 * siihen käsiksi. --ttf-logos-min tulee lohkon attribuutista render.php:n
	 * inline-tyylinä, ja inline-tyyli voittaa mediakyselyn aina — sitä ei siis
	 * voi ylikirjoittaa täältä.
	 */
	--ttf-logos-min-used: var(--ttf-logos-min);

	/* Figman logopaikan korkeus. Logon korkeus on tämän kaistan osuus
	   (--ttf-logo-k), ei kaista itse — ks. talenttrek_logo_scale(). */
	--ttf-logo-band: 96px;

	display: grid;
	column-gap: var(--ttf-logos-gap);
	row-gap: var(--ttf-logos-row-gap);
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			max(
				var(--ttf-logos-min-used),
				(100% - (var(--ttf-logos-cols) - 1) * var(--ttf-logos-gap)) / var(--ttf-logos-cols)
			),
			1fr
		)
	);
}

/* Mobiilissa logot pysyvät rinnakkain. 160 px:n minimi ei mahdu kahdesti
   342 px:n sisältöleveyteen (2*160 + 24 = 344), joten rivi tippui yhteen
   sarakkeeseen. 132 px antaa kaksi 159 px:n saraketta. Leveimmät logot
   rajautuvat silloin sarakkeen levyisiksi ja contain kutistaa ne suhteessa —
   pinta-alan tasaus säilyy, koko vain pienenee kaikilla samassa suhteessa. */
@media (max-width: 767px) {
	.ttf-logo-wall {
		--ttf-logos-min-used: 132px;
	}
}

.ttf-logo-wall__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: var(--ttf-logo-band);
}

/* Logot ovat eri muotoisia: neliömäisiä vaakunoita ja leveitä tekstilogoja.
   Aiemmin niillä oli sama max-height, jolloin leveä logo peitti moninkertaisen
   pinta-alan neliöön nähden ja rivi näytti heittelevältä. Korkeus on siksi
   sivusuhteesta laskettu osuus kaistasta: render.php kirjoittaa li-elementtiin
   --ttf-logo-k -kertoimen. Toimittajan logopaketin tiedostoilla kerroin on 1
   (kanvas on jo tasattu, ks. talenttrek_logo_scale()), jolloin kuva täyttää
   kaistan ja tasaus tulee tiedoston omasta pehmusteesta. Oletus 0.72 on kaavan
   arvo noin 2:1 -logolle ja astuu voimaan vain jos mittoja ei saatu selville.

   Valitsimessa on kaksi luokkaa tarkoituksella: coren .wp-block-image img
   (0,1,1) asettaa height: auto ja voittaisi yhden luokan säännön. Tämä on
   0,2,1. */
.ttf-logo-wall .ttf-logo-wall__item img {
	block-size: calc(var(--ttf-logo-band) * var(--ttf-logo-k, 0.72));
	inline-size: auto;

	/* Kapealla näytöllä sarake voi olla kapeampi kuin laskettu leveys. Silloin
	   leveys rajautuu ja object-fit: contain kutistaa piirtoalan suhteessa —
	   logo ei veny eikä karkaa sarakkeestaan. */
	max-inline-size: 100%;
	object-fit: contain;
}

.ttf-logo-wall__item :where(figure) {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 21. Koristemuodot (ttf/decor-shapes) ----------------------------------- */

/*
 * Sama cqw-geometria kuin sivuherossa (kohta 12), mutta irrallisena lohkona:
 * 404-sivulla muotoja on kolme eikä sivulla ole heroa johon ne kuuluisivat.
 *
 * Lohko venytetään osion pehmusteen yli negatiivisilla insetseillä, jotta
 * container-type mittaa KOKO sektion leveyden. Ilman sitä cqw laskettaisiin
 * 640 px:n palstasta ja Figman 1440 px:n kehyksestä mitattu sommitelma
 * kasaantuisi tekstin päälle.
 *
 * max-inline-size ja margin-inline nollataan, koska constrained-asettelu
 * antaa jokaiselle lapselleen contentSize-rajan — se leikkaisi tämän
 * takaisin 640 px:iin.
 */
.ttf-has-decor {
	position: relative;
}

/*
 * Koriste on merkkauksessa ENSIMMÄINEN, mutta sijoitettuna (z-index: 0) se
 * piirtyisi silti sisarustensa päälle: sijoitetut elementit maalataan
 * virtauslaatikoiden jälkeen. Siksi sisarukset nostetaan omalle tasolleen.
 * Negatiivinen z-index olisi lyhyempi mutta hajoaisi heti, jos osiolle
 * annetaan taustaväri — muodot katoaisivat taustan alle.
 */
.ttf-has-decor > :not(.ttf-decor) {
	position: relative;
	z-index: 1;
}

/*
 * Koriste ei saa kuluttaa lohkoväliä. Coren asettelusääntö on
 * `> * + * { margin-block-start: gap }`, ja koska .ttf-decor on ryhmän
 * ensimmäinen lapsi, otsikko on sille "seuraava sisarus" ja saisi 20 px:n
 * marginaalin, jota Figmassa ei ole. Ero on juuri sen verran ettei se näytä
 * virheeltä — se vain siirtää koko sivun sisältöä alaspäin.
 */
.ttf-has-decor > .ttf-decor + * {
	margin-block-start: 0;
}

.ttf-decor {
	position: absolute;
	inset-block: 0;

	/*
	 * inset-inline: 0 eikä negatiivinen root-padding. Absoluuttinen sijainti
	 * lasketaan säiliön PEHMUSTELAATIKOSTA, ja koriste on aina täysleveän
	 * osion sisällä — nolla osuu siis jo sivun reunaan. Negatiivinen arvo
	 * veti koristeen 48 px yli molemmilta puolilta: sivulle tuli vaakascroll,
	 * ja koska muotojen paikat ovat cqw-yksiköitä, myös sommitelma siirtyi
	 * (säiliö 1536 ≠ Figman 1440).
	 */
	inset-inline: 0;
	max-inline-size: none;
	margin-inline: 0;
	container-type: inline-size;
	pointer-events: none;
	z-index: 0;

	/* Kuten sivuherossa: sommitelmasta on Figma-vastine vain 1440 px:n
	   kehyksessä, joten kapeilla näytöillä muotoja ei piirretä. */
	display: none;
}

.ttf-decor__shape {
	position: absolute;
	display: block;
	inline-size: var(--ttf-size);
	block-size: var(--ttf-size);
	inset-block-start: var(--ttf-y);
	inset-inline-start: var(--ttf-x);
}

.ttf-decor__shape .ttf-icon {
	inline-size: 100%;
	block-size: 100%;
}

/* 404-sivun muodot ovat vaaleita KORTTIPINTOJA, eivät heron brändivärejä. */
.ttf-decor__shape--blue-card {
	color: var(--wp--preset--color--surface-blue-card);
}

.ttf-decor__shape--purple-card {
	color: var(--wp--preset--color--surface-purple-card);
}

.ttf-decor__shape--green-card {
	color: var(--wp--preset--color--surface-green-card);
}

@media (min-width: 1024px) {
	.ttf-decor {
		display: block;
	}
}

/* Editorin paikkamerkki — frontendissä lohko on absoluuttinen koriste. */
.ttf-decor-placeholder {
	margin: 0;
	padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
	border: 1px dashed var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--text-muted);
}

/* 22. Hakulomake (ttf/search-form) --------------------------------------- */

/*
 * Kaksi Figma-muotoa, yksi lohko (CLAUDE.md kohta 10.4):
 *   Haku 2073:3169   kenttä 480 + väli 16 + painike 79, kaikki 52 px korkeita
 *   Virhe 404        kenttä 640, ei painiketta
 *
 * Itse kenttä on jaettu .ttf-search-komponentti (kohta 17) — sama kuin
 * ylätunnisteen paneelissa ja arkistosuodattimessa.
 */
.ttf-search-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
}

.ttf-search-form__field {
	flex: 1 1 240px;
	min-inline-size: 0;
}

/* Figman 480 px on maksimi, ei kiinteä mitta: kapealla näytöllä kenttä
   kutistuu painikkeen viereen ja rivittyy vasta kun tilaa ei ole. */
.ttf-search-form--field .ttf-search-form__field {
	flex: 1 1 480px;
	max-inline-size: 480px;
}

.ttf-search-form--full .ttf-search-form__field {
	flex: 1 1 100%;
}

.ttf-search-form__submit {
	flex: 0 0 auto;
	min-block-size: var(--wp--custom--target--button);
}

/* 23. Hakutulokset (ttf/search-results) ---------------------------------- */

/*
 * Figman pystyvälit (Haku 2073:3169):
 *   kenttä → tulosmäärä            24  (osion blockGap)
 *   tulosmäärä → suodatinteksti    32
 *   suodatinteksti → 1. tunniste   64  = listan 40 + tuloksen pehmuste 24
 *   tulosten väli                  48  = 2 × pehmuste 24
 *   viimeinen tulos → painike      48
 */
.ttf-search-results__count {
	margin: 0;
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	line-height: 1.43;
	color: var(--wp--preset--color--text-muted);
}

.ttf-search-results__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--lg);
	margin-block-start: var(--wp--preset--spacing--xl);
}

/* Sama tyylipari kuin arkistosuodattimen välilehdillä (kohta 24): valittu on
   sininen ja puolilihava, muut harmaita. Alleviivauspalkkia ei ole — Figman
   "Suodattimet" on pelkkää tekstiä. */
.ttf-search-results__filter {
	font-size: var(--wp--preset--font-size--nav);
	font-weight: 400;
	line-height: 1.33;
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
}

.ttf-search-results__filter:hover,
.ttf-search-results__filter:focus-visible {
	color: var(--wp--preset--color--brand-blue);
	text-decoration: underline;
}

.ttf-search-results__filter.is-active {
	font-size: var(--wp--preset--font-size--nav-active);
	font-weight: 600;
	color: var(--wp--preset--color--brand-blue);
}

.ttf-search-results__list {
	list-style: none;
	margin: var(--wp--preset--spacing--2-xl) 0 0;
	padding: 0;
}

.ttf-search-result {
	padding-block: var(--wp--preset--spacing--lg);
}

.ttf-search-result__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	margin: 0;
}

.ttf-search-result__date,
.ttf-search-result__type {
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	line-height: 1.43;
	color: var(--wp--preset--color--text-muted);
}

.ttf-search-result__title {
	margin: var(--wp--preset--spacing--2-xs) 0 0;
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 400;
	line-height: 1.214;
}

.ttf-search-result__title a {
	color: var(--wp--preset--color--brand-blue);
	text-decoration: none;
}

.ttf-search-result__title a:hover,
.ttf-search-result__title a:focus-visible {
	text-decoration: underline;
}

.ttf-search-result__excerpt {
	margin: var(--wp--preset--spacing--2-xs) 0 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.667;
	color: var(--wp--preset--color--text-black);

	/* Figman kuvaus on jokaisessa tuloksessa kaksi riviä (60 px). Ote
	   lyhennetään jo PHP:ssä, mutta sanamäärä ei ole rivimäärä — kapea palsta
	   tai pitkä sana veisi kolmannelle riville. Rajaus tässä pitää mitan. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.ttf-search-result__url {
	margin: var(--wp--preset--spacing--2-xs) 0 0;
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	line-height: 1.43;
	color: var(--wp--preset--color--text-muted);

	/* Pitkä osoite ei saa työntää 640 px:n palstaa leveämmäksi. */
	overflow-wrap: anywhere;
}

.ttf-search-results__pagination,
.ttf-archive-feed__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
}

/* Haussa viimeisestä tuloksesta painikkeeseen on 48. Arkistossa väli on 32 ja
   se tulee .ttf-archive-feedin ruudukkovälistä — tässä se kaksinkertaistuisi. */
.ttf-search-results__pagination {
	margin-block-start: var(--wp--preset--spacing--3-xl);
}

/*
 * "Edelliset" on toissijainen painike. Ilme kirjoitetaan tähän, koska
 * core/buttonin is-style-secondary koskee vain lohkoa — nämä linkit ovat
 * palvelimen renderöimiä <a>-elementtejä, jotka saavat perusilmeensä
 * .wp-element-button-luokasta.
 */
.ttf-search-results__page-link--back,
.ttf-archive-feed__page-link--back {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--brand-blue);
	color: var(--wp--preset--color--brand-blue);
}

.ttf-search-results__page-link--back:hover,
.ttf-search-results__page-link--back:focus-visible,
.ttf-archive-feed__page-link--back:hover,
.ttf-archive-feed__page-link--back:focus-visible {
	background-color: var(--wp--preset--color--surface-blue-hover);
	color: var(--wp--preset--color--brand-blue);
}

/* 23.1 Tyhjä hakutulos (Figma: haku-tyhja 2079:3413) ---------------------- */

/*
 * Figmassa tämä on oma osionsa tulosmäärän alla. Väli on siksi kahden osion
 * summa: hakuosion alapehmuste 32 + ei-tuloksia-osion yläpehmuste 24.
 * Toteutuksessa molemmat tilat ovat samassa ryhmässä, joten summa kirjoitetaan
 * tähän — sivupohja ei voi tietää kumpi tila on näkyvissä.
 */
.ttf-search-empty {
	margin-block-start: calc(
		var(--wp--preset--spacing--xl) + var(--wp--preset--spacing--lg)
	);

	/*
	 * Figman alapehmuste on tässä osiossa 96 px, tuloslistan osiossa 80.
	 * Sivupohjan pehmuste on yhteinen (80), joten erotus tulee tästä.
	 */
	margin-block-end: var(--wp--preset--spacing--sm);
}

.ttf-search-empty__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 400;
	line-height: 1.214;
	color: var(--wp--preset--color--text-black);
}

.ttf-search-empty__text {
	margin: var(--wp--preset--spacing--xs) 0 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.667;
	color: var(--wp--preset--color--text-black);
}

/* Linkkilista: Figmassa kehyksen sisäpehmuste 12 + väli kappaleeseen 12. */
.ttf-search-empty__links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	margin-block-start: var(--wp--preset--spacing--lg);
}

/* 24. Arkistosuodatin (ttf/archive-filter) ------------------------------- */

/*
 * Figma: arkisto-ajankohtaista 340:7736, "Section / Syöte / Suodattimet".
 * Välilehtirivi on keskitetty 1080 px:n palstaan, väli 32, ja hakukenttä
 * 524 × 50 sen alla.
 *
 * Yhden välilehden pystymitat Figmasta (Tabi / Kaikki):
 *   34  osion yläreunasta tekstiin
 *   20  teksti (sama korkeus sekä 15/400- että 16/600-muodossa)
 *   30  tekstistä aktiivipalkkiin
 *    3  aktiivipalkki
 * Palkki piirtyy välilehtikehyksen ULKOPUOLELLE (kehys 84, palkin alareuna
 * 87) — niin se on Figmassakin. Siksi ::after on inset-block-end: -3px eikä
 * 0: jos palkki mahtuisi kehyksen sisään, sen alle jäävä väli hakukenttään
 * kutistuisi 32:sta 29:ään.
 */
.ttf-archive-filter {
	display: grid;
	justify-items: center;
	gap: var(--wp--preset--spacing--xl);
}

.ttf-archive-filter__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--xl);
}

.ttf-archive-filter__tab {
	position: relative;
	padding-block: 34px 30px;
	font-size: var(--wp--preset--font-size--nav);
	font-weight: 400;

	/* Kiinteä 20 px, koska Figmassa molemmat muodot ovat yhtä korkeat vaikka
	   fonttikoko vaihtuu 15 → 16. Suhdeluku antaisi kahdelle muodolle eri
	   korkeuden ja siirtäisi aktiivipalkkia. */
	line-height: 20px;
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
}

.ttf-archive-filter__tab:hover,
.ttf-archive-filter__tab:focus-visible {
	color: var(--wp--preset--color--brand-blue);
}

.ttf-archive-filter__tab.is-active {
	font-size: var(--wp--preset--font-size--nav-active);
	font-weight: 600;
	color: var(--wp--preset--color--brand-blue);
}

.ttf-archive-filter__tab.is-active::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -3px;
	block-size: 3px;
	background-color: var(--wp--preset--color--brand-blue);
}

/*
 * Ilmoitus englanninkielisestä sisällöstä. Näkyy vain Students and talents
 * -kohderyhmän arkistossa; Figma "Ajankohtaista 1440 / Students and talents
 * valittuna" (340:9108), kehys "Ilmoitus / Students and talents".
 *
 * Figma: 1080 × 92, r 12, tausta #E6EBF6, pehmuste 20 / 24, teksti 16/400
 * #1A1A1A rivikorkeudella 26 ja keskitettynä.
 *
 * TEKSTIN ENIMMÄISLEVEYS 560 EI OLE KOSMETIIKKAA. Ilman sitä lause mahtuu
 * 1032 px:n sisämittaan yhdelle riville, jolloin kehys on 66 px eikä 92 —
 * eli 26 px matalampi kuin leiskassa. Figmassa tekstilaatikko on 560 leveä,
 * ja kahdelle riville katkeaminen on siis leiskan mitta.
 */
.ttf-archive-filter__notice {
	box-sizing: border-box;
	inline-size: 100%;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface-blue-hover);
}

.ttf-archive-filter__notice-text {
	max-inline-size: 560px;
	margin: 0 auto;
	color: var(--wp--preset--color--text-black);
	font-size: var(--wp--preset--font-size--small);
	line-height: 26px;
	text-align: center;
}

/* Arkiston hakukenttä on valkoinen ja 50 px korkea; ylätunnisteen paneelissa
   sama komponentti on vaalealla pohjalla ja 52 px. Vain nämä kaksi arvoa
   poikkeavat, muu ilme tulee .ttf-search-säännöstä (kohta 17). */
.ttf-archive-filter__search {
	inline-size: 100%;
	max-inline-size: 524px;
	min-block-size: 50px;
	background-color: var(--wp--preset--color--surface-white);
}

/* 25. Arkistosyöte (ttf/archive-feed) ------------------------------------ */

/* Ruudukko ja tyhjän tilan viesti tulevat news-feedin kanssa jaetuista
   säännöistä (kohta 7.2.1). Tässä vain uloin pystyrytmi: Figmassa ruudukon
   alareunasta "Näytä lisää" -painikkeeseen on 32 px. Haussa vastaava väli on
   48, joten sivutuksen oma marginaali on siellä eikä täällä. */
.ttf-archive-feed {
	display: grid;
	gap: var(--wp--preset--spacing--xl);
}

/*
 * Latauksen aikainen tila. Välilehden vaihto ei lataa sivua
 * (assets/js/archive-filter.js), joten selaimen oma latausilmaisin ei kerro
 * mitään — ilman himmennystä nopeasti kahdesti klikkaava käyttäjä ei näe että
 * mitään tapahtuu.
 *
 * Sääntö on `aria-busy`-määreessä eikä omassa luokassa: sama tieto, jonka
 * ruudunlukija saa, ohjaa myös ulkoasun. Kaksi rinnakkaista tilamerkintää
 * ehtisi erkaantua toisistaan.
 *
 * Ei siirtymää sisään: himmennys on palautetta ja saa näkyä heti. Paluu
 * täyteen näkyvyyteen ei ehdi olla siirtymä, koska elementti korvataan.
 */
main[aria-busy="true"] {
	opacity: 0.55;
}

/* 26. Artikkeli (ttf/post-meta, ttf/share-row, kirjoittajarivi) ----------- */

/*
 * Figma: artikkeli 340:8851.
 *   Tunnisterivi   badge, 32 px pääkuvan alapuolelta
 *   Metarivi       14/500 #595F6B
 *   Erotinviiva    1 px #595F6B 30 %:n peitteellä, 1080 leveä
 *   Kirjoittaja    56 px pyöreä kuva + 16 väli + nimi 16/600, rooli 16/400
 *   Jaa juttu      otsikko 16/500 + kolme 40 px painiketta, reuna 1 px, r 6
 */
/*
 * EI omaa marginaalia. Molemmat metarivit ovat sivupohjassa saman
 * virtausryhmän lapsia, ja väli otsikkoon (Figmassa 20) tulee ryhmän
 * blockGapista. Coren väli kirjoitetaan `:where()`-säännöllä, jonka
 * spesifisyys on 0 — mikä tahansa luokkasääntö kumoaa sen hiljaa, joten
 * tässä ollut `margin: 0` litisti metarivin kiinni otsikkoon. Sama sääntö
 * nollaa myös selaimen oman <p>-marginaalin, joten sitä ei tarvitse
 * kirjoittaa uudelleen.
 */

.ttf-post-meta--badge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
}

.ttf-post-meta--line {
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	line-height: 1.43;
	color: var(--wp--preset--color--text-muted);
}

/*
 * Erotinviiva on reunus eikä oma elementti: WordPressin border-tuki
 * kirjoittaa patternista leveyden ja värin mutta ei border-styleä, joten
 * patterniin merkitty viiva ei piirtyisi lainkaan. Väri on Figman #595F6B
 * 30 %:n peitteellä, ei border-divider — sävy on selvästi tummempi.
 * Viivan yläpuolinen 24 px tulee osion omasta pehmusteesta.
 */
.ttf-article-share {
	padding-block-start: var(--wp--preset--spacing--lg);
	border-block-start: 1px solid
		color-mix(in srgb, var(--wp--preset--color--text-muted) 30%, transparent);
}

/*
 * Kirjoittaja (ttf/post-author). Luokat ovat teeman omia eivätkä
 * `wp-block-post-author`-alkuisia, koska lohko ei ole enää coren: WP:n
 * kirjoittaja on kirjautunut käyttäjä eli useimmiten sisällön syöttäjä, ja
 * tällä sivustolla kirjoittaja on jutun oma kenttä (inc/content-model.php
 * kohta 4).
 */
.ttf-post-author {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
}

.ttf-post-author__image {
	flex: 0 0 auto;
	display: block;
	border-radius: 50%;

	/* Kasvokuva on Figmassa ympyrä. Mediakirjaston `thumbnail` on neliö, mutta
	   ylläpitäjä voi valita minkä kokoisen kuvan tahansa; ilman object-fitiä
	   ei-neliöllinen kuva venyisi soikioksi. Mitat tulevat lohkon
	   imageSize-attribuutista <img>-tagiin, joten ne eivät ole tässä. */
	object-fit: cover;
}

/* Editorin malli: kuvaa ei ole, joten ympyrä piirretään taustavärillä.
   Mitat tulevat inline-tyylistä samasta attribuutista kuin frontendillä. */
.ttf-post-author__image--placeholder {
	background: var(--wp--preset--color--border-divider);
}

.ttf-post-author__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--text-black);
}

/* Tekstipalsta on tavallinen virtaus eikä lohkoasettelu, joten coren
   `:where(.is-layout-flow)` -välit eivät osu tänne — selaimen oma
   <p>-marginaali on nollattava käsin ja 4 px:n väli kirjoitettava. */
.ttf-post-author__title {
	margin-block: var(--wp--preset--spacing--3-xs) 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.625;
	color: var(--wp--preset--color--text-black);
}

/*
 * Pystypehmuste 16 näyttää Figmassa tyhjältä, mutta se on se mikä antaa
 * kirjoittajarivin korkeuden: "Jaa juttu" -kehys on 72 px vaikka painikkeet
 * ovat 40, ja rivin toinen puoli (56 px kuva) keskittyy siihen — siitä tulee
 * Figman kuvan 8 px:n siirtymä kehyksen yläreunasta. Ilman pehmustetta rivi
 * on 56 ja koko osio 16 px matalampi kuin leiskassa.
 */
.ttf-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	padding-block: var(--wp--preset--spacing--sm);
}

.ttf-share__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--text-black);
}

.ttf-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Figmassa painike on 40 px korkea; kosketuskohteen 44 px:n vähimmäismitta
   täyttyy siitä, että linkit ovat omalla rivillään eikä niiden ympärillä ole
   muita kohteita 24 px:n säteellä (WCAG 2.5.8, poikkeus "spacing"). */
.ttf-share__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2-xs);
	min-block-size: 40px;
	padding-inline: var(--wp--preset--spacing--xs);
	border: 1px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--text-black);
	text-decoration: none;
}

.ttf-share__link:hover,
.ttf-share__link:focus-visible {
	border-color: var(--wp--preset--color--brand-blue);
	color: var(--wp--preset--color--brand-blue);
}

/* 26.1 Artikkelin leipäteksti -------------------------------------------- */

/*
 * Figma: artikkeli 340:8851, "Section / Artikkelin sisältö". Nämä säännöt
 * eivät koske yhtään lohkoa jonka teema itse renderöi, vaan sitä mitä
 * sisällönsyöttäjä kirjoittaa editorissa: kappaleita, väliotsikoita,
 * sitaatteja ja listoja. Ilman niitä artikkeli saa coren oletukset, jotka
 * eivät ole lähelläkään leiskaa — ja virhe näkyy vasta kun ensimmäinen
 * oikea juttu kirjoitetaan.
 *
 * Pystyväli lohkojen välillä (Figmassa 24) tulee sivupohjan blockGapista,
 * ei tästä.
 */

/*
 * Ingressi 22/36. Ehto on "artikkeli alkaa kappaleella", ei "ensimmäinen
 * kappale missä tahansa": jos juttu alkaa kuvalla tai nostolaatikolla,
 * ingressiä ei ole eikä sitä pidä keksiä keskeltä tekstiä.
 */
.ttf-article-body > p:first-child {
	font-size: var(--wp--preset--font-size--body-large);
	line-height: 1.636;
}

/* Väliotsikko 36/42, tavallinen paino. Figmassa artikkelissa on vain yksi
   otsikkotaso; h3 on mukana siltä varalta että juttu tarvitsee toisen, ja
   se on porrastettu samalla suhdeluvulla. */
.ttf-article-body h2 {
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 400;
	line-height: 1.167;
	color: var(--wp--preset--color--text-black);
}

.ttf-article-body h3 {
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 400;
	line-height: 1.214;
	color: var(--wp--preset--color--text-black);
}

/*
 * Sitaattinosto: 4 px pystyviiva brand-bluella, 32 px viivasta tekstiin,
 * 12 px pehmuste ylä ja ala. Viiva on reunus eikä ::before-elementti, jotta
 * se venyy sitaatin mittaiseksi ilman erillistä korkeussääntöä.
 *
 * EI `margin: 0`. Sitaatti ja lista ovat sisältöpalstan suoria lapsia, joten
 * coren virtausasettelu nollaa jo selaimen oman marginaalin ja antaa 24 px:n
 * välin. Oma nollaus kumoaisi välin — sama hiljainen ansa kuin kohdassa 26.
 */
.ttf-article-body blockquote {
	padding-block: var(--wp--preset--spacing--xs);
	padding-inline-start: var(--wp--preset--spacing--xl);
	border-inline-start: 4px solid var(--wp--preset--color--brand-blue);
}

.ttf-article-body blockquote p {
	margin: 0;
	font-size: var(--wp--preset--font-size--quote);
	font-weight: 400;
	line-height: 1.25;
	color: var(--wp--preset--color--text-black);
}

/* Lähde 16/24, 16 px sitaatista. Coren cite on kursiivi — Figmassa ei. */
.ttf-article-body blockquote cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--text-black);
}

/*
 * Lista: merkki sisältöpalstan vasemmassa reunassa, teksti 23 px siitä.
 *
 * Säännöt ovat siirtyneet kohtaan 27.8 (.wp-block-list), koska täsmälleen
 * samat arvot tarvitaan myös tavallisilla sivuilla eikä vain artikkeleissa.
 * Älä kirjoita niitä tänne uudestaan — kaksi lähdettä samalle arvolle
 * eroaa ennemmin tai myöhemmin.
 */

/* 27. Gutenbergin peruslohkot -------------------------------------------- */

/*
 * Tämä osio brändää ydinlohkot, joita teemassa ei ole omana ttf/*-lohkonaan
 * mutta joita sisällönsyöttäjä voi käyttää. Mallisivu on
 * patterns/esimerkkisivu.php.
 *
 * MIKSI TÄTÄ OSIOTA TARVITAAN. Teema kutsuu
 * add_theme_support( 'wp-block-styles' ) (functions.php), joka lataa coren
 * mielipiteelliset lohkotyylit (wp-includes/blocks/<lohko>/theme.min.css).
 * Ne ovat WordPressin oletusbrändi, eivät tämän sivuston: #555 kuvatekstit,
 * 13 px fontti, mustat 2–3 px viivat, #f0f0f0 raidat, Menlo-fonttipino.
 * Tukea ei voi poistaa, koska sama tiedosto tuo myös asioita joita teema
 * tarvitsee — joten off-brand arvot ylikirjoitetaan tässä.
 *
 * KASKADI. Coren lohkotyylit tulostetaan <head>issä ENNEN talenttrek-main
 * -tiedostoa (todennettu curlilla), joten samalla spesifisyydellä kirjoitettu
 * teeman sääntö voittaa lähdejärjestyksen perusteella. Useimmat coren
 * säännöt ovat lisäksi :where()-käärittyjä (spesifisyys 0), jolloin mikä
 * tahansa luokkasääntö voittaa. Älä siis lisää !importantia tähän osioon.
 *
 * RAJAUS LUOKKIIN, EI TAGEIHIN. Valitsimet ovat .wp-block-*-luokkia eivätkä
 * paljaita ul/ol/table-tageja, koska teeman oma kromi (navi, alatunniste,
 * murupolku, prosessilista, logorivi, hakutulokset, jakorivi) on myös
 * <ul>-merkkausta. Paljas tagivalitsin osuisi niihin kaikkiin.
 *
 * COREN MARGINAALIT (ks. kohta 10.5). Core kirjoittaa kolmeen lohkoon
 * margin: 0 0 1em (.wp-block-image, .wp-block-table, .wp-block-pullquote).
 * Se on marginaali asettelusäiliön suoralla lapsella, eli se voittaa
 * virtausasettelun nollaspesifisyyksisen säännön ja lisää lohkovälin PÄÄLLE
 * 18 px. Lopputulos on epäsymmetrinen väli: 24 px yläpuolella, 42 px
 * alapuolella. Neutralointi kirjoitetaan longhandina margin-block-end: 0,
 * ei shorthandina margin-block: 0 — jälkimmäinen tappaisi myös coren
 * asettaman margin-block-startin eli itse lohkovälin.
 */

/* 27.1 Kuvatekstit ------------------------------------------------------- */

/*
 * Core: :root :where(.wp-block-image figcaption){color:#555;font-size:13px;
 * text-align:center} ja sama kuva-, taulukko-, galleria-, upotus-, ääni- ja
 * videolohkolle. Sivuston oma metateksti on 14/1.43 #595F6B vasempaan
 * tasattuna (vrt. .ttf-post-meta), joten kuvateksti seuraa samaa.
 *
 * Valitsin sulkee ulos gallerian SISÄKKÄISTEN kuvien kuvatekstit:
 * niissä core piirtää valkoisen tekstin kuvan päälle tummalle liukuvärille,
 * ja text-muted tekisi siitä lukukelvottoman. Rakenne on
 *   figure.wp-block-gallery > figure.wp-block-image > figcaption
 * joten :not(.wp-block-gallery) > figure > … osuu itsenäiseen kuvaan ja
 * gallerian OMAAN kuvatekstiin (jonka emo on ryhmä) muttei sisäkkäisiin.
 */
:not( .wp-block-gallery ) > figure > .wp-element-caption {
	margin-block: var(--wp--preset--spacing--2-xs) 0;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.43;
	text-align: start;
	color: var(--wp--preset--color--text-muted);
}

/*
 * Kuvalohkon ylimääräinen alamarginaali pois, ks. osion alun selitys.
 * margin-inline jätetään koskematta: se kantaa alignleft/alignright/center
 * -kohdistukset, jotka core asettaa erikseen.
 */
.wp-block-image {
	margin-block-end: 0;
}

/* 27.2 Erotin ------------------------------------------------------------ */

/*
 * Core piirtää oletuserottimen 100 px leveänä keskitettynä 2 px viivana
 * (:not(.is-style-wide):not(.is-style-dots){width:100px} +
 * border-bottom:2px solid eli currentColor = musta). Figmassa ei ole
 * yhtään sellaista elementtiä: jokainen osioviiva on koko palstan levyinen
 * 1 px #E5E7EB (vrt. kohta 8 ja .ttf-article-share).
 *
 * Oletustyyli tehdään siis palstan levyiseksi. Se tarkoittaa että
 * "Leveä viiva" -tyylivariantti näyttää samalta kuin oletus — se on
 * tarkoituksellista: oikea ulkoasu on tärkeämpi kuin coren varianttiero.
 * is-style-dots jätetään coren omaksi, se on tietoinen koriste.
 *
 * Leveyssääntö toistaa coren molemmat :not()-ehdot, vaikka is-style-wide
 * olisi muutenkin 100 %. Syy on spesifisyys: coren sääntö on 0,3,0 ja
 * lyhyempi muoto .wp-block-separator:not(.is-style-dots) jäisi 0,2,0:aan
 * eli häviäisi lähdejärjestyksestä huolimatta. Mitattu: viiva pysyi
 * 100 px:n levyisenä.
 *
 * Pelkkä width, EI max-widthiä. Rajatun asettelun palstaleveys tulee coren
 * säännöstä `max-width: var(--wp--style--global--content-size)`, joka on
 * :where()-käärittynä spesifisyydeltään 0 — oma `max-width: 100%` voitti
 * sen ja venytti viivan 640 px:stä 1344 px:iin eli säiliön pehmustereunaan.
 */
.wp-block-separator:not( .is-style-dots ) {
	border: none;
	border-block-start: 1px solid var(--wp--preset--color--border-divider);
	opacity: 1;
}

.wp-block-separator:not( .is-style-wide ):not( .is-style-dots ) {
	width: 100%;
}

/*
 * Taustavärillinen erotin on coressa korkeutena (height:1px|2px) eikä
 * reunuksena. Silloin oma reunus piirtyisi värin lisäksi — pois se.
 */
.wp-block-separator.has-background:not( .is-style-dots ) {
	border-block-start: none;
}

/* 27.3 Nostolainaus (pullquote) ------------------------------------------ */

/*
 * Core: 4 px musta viiva ylä- ja alapuolella, padding:4em 0 (= 144 px
 * pystysuunnassa), cite 0.8125em VERSAALEINA. Kaikki kolme ovat
 * WordPressin oletusbrändiä.
 *
 * Sivuston oma nostolainaus: otsikkofontti, quote-preset 32/40, brand-blue.
 * Tämä on se paikka johon quote-fonttikoko oli varattu (ks. kohta 1.:
 * core/quote saa theme.jsonista h-3:n, koska Figman Section/Sitaatti on
 * 28/34; 32/40 on nimenomaan nostolainaus).
 */
.wp-block-pullquote {
	margin-block-end: 0;
	padding-block: var(--wp--preset--spacing--2-xl);
	padding-inline: 0;
	border-block: 1px solid var(--wp--preset--color--border-divider);
}

.wp-block-pullquote blockquote p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--quote);
	font-weight: 500;
	line-height: 1.25;
	color: var(--wp--preset--color--brand-blue);
}

.wp-block-pullquote cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--sm);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 500;
	line-height: 1.5;
	text-transform: none;
	color: var(--wp--preset--color--text-muted);
}

/* 27.4 Taulukko ---------------------------------------------------------- */

/*
 * Core: td,th{border:1px solid;padding:.5em} (currentColor = musta),
 * thead{border-bottom:3px solid}, raidoille kovakoodattu #f0f0f0.
 *
 * Sivuston vastineet: soluviiva border-divider (#E5E7EB), otsikkorivin
 * alleviivaus border-rule (#C9CDD6) 2 px, raita surface-light (#F7F8FC).
 * Solupehmuste 12/16 px eli xs/sm — coren .5em (9 px) on liian tiivis
 * 18 px:n leipätekstille.
 *
 * Otsikkosolu tasataan alkuun: selaimen oletus on keskitys, jota Figmassa
 * ei käytetä missään taulukkomaisessa listauksessa.
 */
.wp-block-table {
	margin-block-end: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.wp-block-table td,
.wp-block-table th {
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--border-divider);
}

.wp-block-table th {
	font-weight: 600;
	text-align: start;
	color: var(--wp--preset--color--text-black);
	background-color: var(--wp--preset--color--surface-light);
}

.wp-block-table thead {
	border-block-end: 2px solid var(--wp--preset--color--border-rule);
}

.wp-block-table tfoot {
	border-block-start: 2px solid var(--wp--preset--color--border-rule);
}

/*
 * Raidoitettu variantti: core poistaa soluviivat
 * (is-style-stripes td,th{border-color:transparent}) ja piirtää tilalle
 * raidan + alareunan. Säilytetään sama idea, vaihdetaan vain värit — ja
 * otsikkorivi jää erottumaan alleviivauksella, ei taustalla, koska
 * surface-light on jo raidan väri.
 */
.wp-block-table.is-style-stripes {
	border-block-end: 1px solid var(--wp--preset--color--border-divider);
}

.wp-block-table.is-style-stripes tbody tr:nth-child( odd ) {
	background-color: var(--wp--preset--color--surface-light);
}

.wp-block-table.is-style-stripes th {
	background-color: transparent;
}

/* 27.5 Tiedot (details) -------------------------------------------------- */

/*
 * Core lähettää tästä lohkosta täsmälleen kaksi määrittelyä:
 * box-sizing:border-box ja summary{cursor:pointer}. Lohko on siis
 * tyylittelemätön — mitattuna 640 × 30 px pelkkää tekstiä.
 *
 * Ulkoasu lainataan huomiolaatikolta (kohta 10): vaalea kehys, radius.md,
 * sama pehmuste. Näin haitari näyttää sivustolla samalta rakenteelta kuin
 * muutkin rajatut laatikot.
 */
.wp-block-details {
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	border: 1px solid var(--wp--preset--color--border-divider);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface-white);
}

.wp-block-details summary {
	font-weight: 600;
	line-height: 1.44;
	color: var(--wp--preset--color--text-black);
}

/*
 * Kolmiomerkki jätetään selaimen omaksi (se kertoo auki/kiinni-tilan myös
 * ilman CSS:ää), mutta väritetään brändin siniseksi jotta se luetaan
 * toimintoelementiksi eikä luetelmamerkiksi.
 */
.wp-block-details summary::marker {
	color: var(--wp--preset--color--brand-blue);
}

/*
 * Kohdan 10.5 tietoinen poikkeus. <details> on core/details-lohkossa ITSE
 * asettelusäiliö (is-layout-flow), joten sen lapsiväli tulee juuren
 * blockGapista = 32 px. Se on haitarin sisällä liikaa: yhteenveto ja sen
 * oma sisältö erkanevat toisistaan. Arvoa ei voi säätää editorista (lohko
 * ei tarjoa blockGap-säädintä), joten se kirjoitetaan tässä — tarkoituksella
 * marginaalina, koska juuri sitä coren asettelusääntö käyttää.
 */
.wp-block-details.is-layout-flow > :not( :first-child ) {
	margin-block-start: var(--wp--preset--spacing--sm);
}

/* 27.6 Koodi ------------------------------------------------------------- */

/*
 * Core: border:1px solid #ccc; border-radius:4px;
 * font-family:Menlo,Consolas,monaco,monospace; padding:.8em 1em.
 * Fonttipino oli ainoa kohta koko sivustolla jossa fontti tuli muualta kuin
 * theme.jsonista — siksi theme.jsoniin lisättiin fontFamily-slug mono.
 * Älä kirjoita fonttipinoa tähän takaisin (CLAUDE.md kohta 7).
 */
.wp-block-code {
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	overflow-x: auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--text-black);
	background-color: var(--wp--preset--color--surface-light);
	border: 1px solid var(--wp--preset--color--border-divider);
	border-radius: var(--wp--custom--radius--md);
}

/*
 * Tekstin seassa oleva <code> on coressa kokonaan tyylittelemätön (se saa
 * vain selaimen oman monospace-oletuksen). :not(pre) > code rajaa säännön
 * inline-käyttöön: .wp-block-code ON <pre>, joten koodilohko ei saa taustaa
 * kahteen kertaan.
 *
 * Koko on em-suhteellinen tarkoituksella — inline-koodi esiintyy sekä
 * leipätekstissä (18 px) että metariveillä (14 px), ja sen pitää skaalautua
 * ympäröivän tekstin mukana.
 */
code,
kbd,
samp {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9375em;
}

:not( pre ) > code {
	padding: 2px 6px;
	color: var(--wp--preset--color--text-black);
	background-color: var(--wp--preset--color--surface-light);
	border-radius: var(--wp--custom--radius--xs);
}

/* 27.7 Mukautettu HTML --------------------------------------------------- */

/*
 * core/html tulostaa sisältönsä sellaisenaan eikä saa mitään kääreluokkaa
 * frontendillä — sille ei siis voi eikä pidä kirjoittaa tyylejä. Kohta on
 * tässä vain siksi, että seuraava lukija ei etsi niitä turhaan.
 *
 * Lohkon sisältö on kirjoittajan vastuulla. <script>-tagit säilyvät vain
 * käyttäjiltä joilla on unfiltered_html; muilta WordPress riisuu ne
 * tallennuksessa. Sivukohtainen <head>- ja </body>-koodi menee sen sijaan
 * muokkausnäkymän laatikkoon "Sivukohtainen skripti tai HTML"
 * (inc/scripts.php), ja koko sivustoa koskeva Sivuston asetuksiin.
 */

/* 27.8 Listat ------------------------------------------------------------ */

/*
 * Siirretty tänne kohdasta 26.1 (artikkelin leipäteksti): samat arvot
 * tarvitaan myös tavallisilla sivuilla.
 *
 * Merkki sisältöpalstan vasemmassa reunassa, teksti 23 px siitä.
 * Luetelmamerkit jätetään selaimen omiksi (list-style: none veisi listalta
 * listasemantiikan osassa ruudunlukijoita), joten sisennys tehdään
 * pehmusteella eikä absoluuttisella ::before-merkillä.
 *
 * Sisäkkäinen lista on Gutenbergissä oma lohkonsa ja saa saman luokan,
 * mutta käsin kirjoitettu (core/html, tuotu sisältö) voi olla paljas
 * <ul> — siksi myös jälkimmäinen muoto on mukana, .wp-block-listin sisälle
 * rajattuna.
 */
.wp-block-list,
.wp-block-list ul,
.wp-block-list ol {
	padding-inline-start: 23px;
}

.wp-block-list li {
	line-height: 1.667;
}

.wp-block-list li + li {
	margin-block-start: var(--wp--preset--spacing--xs);
}

/* 27.9 Uusimmat artikkelit (core/latest-posts) --------------------------- */

/*
 * Tämä on ydinlohkon versio teeman omasta ttf/news-feedistä. Se ei korvaa
 * sitä — uutisnostot sivuilla tehdään edelleen ttf/news-feedillä, jolla on
 * Figman mukainen kortti. core/latest-posts on mukana siksi, että
 * sisällönsyöttäjä löytää sen inserteristä ja käyttää sitä ennemmin tai
 * myöhemmin; silloin sen pitää näyttää sivustolta eikä oletus-WordPressiltä.
 *
 * Kolme coren ongelmaa:
 *
 * 1) Pääkuva. __featured-image img{width:auto} ilman kattoa venyttää kuvan
 *    palstan levyiseksi (mitattu: 1080 px leveä rivi). Kuvalle annetaan
 *    kiinteä kuvasuhde ja object-fit, jolloin eri kokoiset pääkuvat
 *    rivittyvät samankorkuisiksi.
 * 2) Ruudukko. is-grid on coressa flexboxia, jonka välit tulevat lasten
 *    marginaaleista (margin:0 1.25em 1.25em 0) ja sarakeleveydet
 *    calc()-kaavoista 600 px:n rajalla. Korvataan teeman omalla rivittyvällä
 *    gridillä (kohta 6): sama auto-fill + minmax(max(…)) -kaava kuin
 *    .ttf-card-gridissä, jolloin listaus rivittyy täsmälleen samoissa
 *    kohdissa kuin teeman omat korttiruudukot eikä tarvitse yhtään
 *    media queryä. Mitattu 768 px:llä: coren 600 px:n raja olisi pakottanut
 *    kolme 218 px:n korttia, joissa otsikko rivittyi neljälle riville.
 * 3) Typografia. Otsikko on pelkkä alleviivattu sininen linkki ja päiväys
 *    0.8125em. Kortin otsikko käyttäytyy kuten muuallakin: otsikkofontti,
 *    musta, alleviivaus vasta hoverissa.
 */
.wp-block-latest-posts.is-grid:not( .is-layout-grid ) {
	--ttf-grid-cols: 3;
	--ttf-grid-min: 280px;
	--ttf-grid-gap: var(--wp--preset--spacing--lg);

	display: grid;
	gap: var(--ttf-grid-gap);
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			max(
				var(--ttf-grid-min),
				(100% - (var(--ttf-grid-cols) - 1) * var(--ttf-grid-gap)) / var(--ttf-grid-cols)
			),
			1fr
		)
	);
}

/*
 * Sarakemäärä tulee coren columns-N-luokasta. Arvot 1–6 ovat ne, jotka
 * lohkon oma säädin tarjoaa; muita ei voi syntyä.
 */
.wp-block-latest-posts.columns-1:not( .is-layout-grid ) {
	--ttf-grid-cols: 1;
}

.wp-block-latest-posts.columns-2:not( .is-layout-grid ) {
	--ttf-grid-cols: 2;
}

.wp-block-latest-posts.columns-4:not( .is-layout-grid ) {
	--ttf-grid-cols: 4;
}

.wp-block-latest-posts.columns-5:not( .is-layout-grid ) {
	--ttf-grid-cols: 5;
}

.wp-block-latest-posts.columns-6:not( .is-layout-grid ) {
	--ttf-grid-cols: 6;
}

/*
 * Coren leveyslaskenta ja marginaalivälit pois: gridissä väli on gap, ja
 * calc()-leveys lukitsisi sarakkeen (ks. kohta 6:n min-width-huomautus).
 */
.wp-block-latest-posts.is-grid:not( .is-layout-grid ) > li {
	width: auto;
	min-width: 0;
	margin: 0;
}

.wp-block-latest-posts__featured-image {
	margin-block-end: var(--wp--preset--spacing--xs);
}

.wp-block-latest-posts__featured-image a,
.wp-block-latest-posts__featured-image img {
	display: block;
	width: 100%;
}

.wp-block-latest-posts__featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
}

.wp-block-latest-posts__list > li > a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 400;
	line-height: 1.17;
	color: var(--wp--preset--color--text-black);
	text-decoration: none;
}

.wp-block-latest-posts__list > li > a:hover,
.wp-block-latest-posts__list > li > a:focus-visible {
	text-decoration: underline;
}

.wp-block-latest-posts__post-date {
	margin-block-start: var(--wp--preset--spacing--2-xs);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	line-height: 1.43;
	color: var(--wp--preset--color--text-muted);
}

.wp-block-latest-posts__post-excerpt,
.wp-block-latest-posts__post-full-content {
	margin-block: var(--wp--preset--spacing--2-xs) 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--text-black);
}

/*
 * Listamuodossa (ei is-grid) lohko on is-layout-flow, jolloin <li>-välit
 * tulevat juuren blockGapista = 32 px. Se on liian väljä listalle jossa
 * jokainen rivi on vain otsikko + päiväys, ja liian tiivis kun mukana on
 * pääkuva. Väli sidotaan siksi sisältöön: 24 px, sama kuin ruudukon gap.
 */
.wp-block-latest-posts__list.is-layout-flow > li:not( :first-child ) {
	margin-block-start: var(--wp--preset--spacing--lg);
}