/*
 * ViluWorks – kuvamoduulit ja korostusväri
 *
 * Tämä tiedosto ladataan main.css:n jälkeen. Se sisältää kuvaosiot
 * (kuvakaista, kuvateksti, korttikuvat) ja mintunvihreän korostusvärin
 * maltilliset käyttökohteet. Kun lohkotyö aloitetaan, tämän sisältö
 * yhdistetään main.css:ään.
 */

/* --------------------------------------------------------- Kuvan pohjatyyli
 * Duotone: kuva luminanssina violetin pohjan päällä, jolloin mikä tahansa
 * valokuva asettuu brändin sävyyn. Kuvan rajauskohta tulee --vw-kuva-kohta
 * -muuttujasta, joten samasta tiedostosta saa eri näköisiä rajauksia.
 */
.vw-kuvakaista .vw-tausta,
.vw-kuvateksti__kuva .vw-tausta,
.vw-paneelikortti__kuva .vw-tausta {
	background-position: var(--vw-kuva-kohta, center);
}

/* ------------------------------------------------------------- Kuvakaista */

.vw-kuvakaista {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: clamp(17rem, 26vw, 23rem);
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
	background: var(--wp--preset--color--plum-dark);
	color: #fff;
}

.vw-kuvakaista--matala {
	min-height: clamp(12rem, 18vw, 16rem);
	padding-block: clamp(3rem, 7vw, 5.5rem);
}

.vw-kuvakaista::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(65, 47, 80, .94) 0%, rgba(65, 47, 80, .82) 42%, rgba(65, 47, 80, .40) 100%);
	pointer-events: none;
	z-index: -1;
}

.vw-kuvakaista .vw-tausta {
	z-index: -2;
}

.vw-kuvakaista__sisalto {
	position: relative;
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--vw-gutter));
}

.vw-kuvakaista h2 {
	max-width: 22ch;
	margin: 0;
	color: #fff;
}

.vw-kuvakaista .vw-ylateksti {
	color: var(--wp--preset--color--mint);
}

.vw-kuvakaista__ingressi {
	max-width: 52ch;
	margin: 1.1rem 0 0;
	font-size: var(--wp--preset--font-size--large);
	color: rgba(255, 255, 255, .88);
}

.vw-kuvakaista .vw-napit {
	margin-top: 1.9rem;
}

/* Nostorivi kuvakaistan alla: luvut mintunvihreänä, kuten
   energiatehokkuusmateriaalissa. */
.vw-nostot {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 3.25rem;
	margin: 2.25rem 0 0;
	padding: 0;
	list-style: none;
}

.vw-nostot li {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	max-width: 16rem;
	padding-left: 1.1rem;
	border-left: 2px solid var(--wp--preset--color--mint);
}

.vw-nosto__arvo {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.9rem, 3vw, 2.6rem);
	line-height: 1;
	color: var(--wp--preset--color--mint);
}

.vw-nosto__teksti {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	color: rgba(255, 255, 255, .82);
}

/* -------------------------------------------------------- Kuva ja teksti */

.vw-kuvateksti {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.25rem);
	align-items: center;
}

.vw-kuvateksti__kuva {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--plum-dark);
	border-bottom: 3px solid var(--wp--preset--color--plum);
}

.vw-kuvateksti__kuva .vw-tausta {
	opacity: .5;
}

/* Violetti varjostus kuvan päälle, samaan tapaan kuin herossa: kuva jää
   näkyviin mutta asettuu brändin sävyyn eikä kilpaile tekstin kanssa. */
.vw-kuvateksti__kuva::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(165deg, rgba(90, 66, 109, .52) 0%, rgba(65, 47, 80, .86) 100%);
	pointer-events: none;
}

.vw-kuvateksti__teksti > *:first-child {
	margin-top: 0;
}

.vw-kuvateksti .vw-osio__otsikko {
	margin-bottom: 1.25rem;
}

.vw-kuvateksti__teksti p {
	max-width: 46ch;
}

@media (min-width: 900px) {
	.vw-kuvateksti {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.vw-kuvateksti--oikea .vw-kuvateksti__kuva {
		order: 2;
	}

	.vw-kuvateksti__kuva {
		aspect-ratio: auto;
		align-self: stretch;
		min-height: clamp(18rem, 26vw, 24rem);
	}
}

@media (min-width: 1200px) {
	.vw-kuvateksti {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}

	.vw-kuvateksti--oikea {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	}
}

/* ------------------------------------------------- Etusivun korttien kuvat
 * Korttien sisäreunus oli epäsymmetrinen (reunimmaisista puuttui ulkoreunus),
 * jolloin keskimmäinen kortti – ja sen kuva – jäi kapeammaksi. Sisäreunuksen
 * tilalle tulee ruudukon kaista, jolloin kaikki kolme korttia ja kuvaa ovat
 * täsmälleen yhtä suuria. Erotinviivat piirretään kaistojen keskelle ja
 * yhtenäinen yläviiva ruudukon omalla pseudoelementillä.
 */

@media (min-width: 782px) {
	.vw-etusivu__paneelit {
		position: relative;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(2.25rem, 4vw, 3.5rem);
	}

	.vw-etusivu__paneelit::before {
		content: "";
		position: absolute;
		top: 0;
		left: var(--vw-gutter);
		right: var(--vw-gutter);
		border-top: 2px solid var(--wp--preset--color--plum);
	}

	.vw-etusivu__paneelit .vw-paneelikortti {
		padding-inline: 0;
		border-top-color: transparent;
		border-left: 0;
	}

	/* Erotinviiva kaistan keskelle – ei rivin ensimmäiselle kortille. */
	.vw-etusivu__paneelit .vw-paneelikortti::after {
		content: none;
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(-1 * clamp(1.125rem, 2vw, 1.75rem));
		border-left: var(--vw-rule);
	}

	.vw-etusivu__paneelit .vw-paneelikortti:nth-child(2n)::after {
		content: "";
	}
}

@media (min-width: 1000px) {
	.vw-etusivu__paneelit {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vw-etusivu__paneelit .vw-paneelikortti:nth-child(2n)::after {
		content: none;
	}

	.vw-etusivu__paneelit .vw-paneelikortti:not(:nth-child(3n + 1))::after {
		content: "";
	}
}

.vw-paneelikortti__kuva {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: block;
	aspect-ratio: 16 / 10;
	margin-bottom: 1.15rem;
	background: var(--wp--preset--color--plum-dark);
}

.vw-paneelikortti__kuva::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(90, 66, 109, .40) 0%, rgba(65, 47, 80, .80) 100%);
	pointer-events: none;
}

.vw-paneelikortti__kuva .vw-tausta {
	opacity: .5;
	transition: opacity var(--vw-speed) var(--vw-ease), transform .5s var(--vw-ease);
}

.vw-paneelikortti:hover .vw-paneelikortti__kuva .vw-tausta,
.vw-paneelikortti:focus-visible .vw-paneelikortti__kuva .vw-tausta {
	opacity: .66;
	transform: scale(1.03);
}

/* ------------------------------------------------- Mintunvihreä korostus
 * Korostusväriä käytetään vain siellä, missä on kyse säästöstä tai
 * mitatusta hyödystä: energiatehokkuuden osiossa ja kuvakaistan luvuissa.
 */

.vw-osio--savy .vw-ylateksti {
	color: var(--wp--preset--color--mint-dark);
}

.vw-osio--savy .vw-lista > li::before,
.vw-osio--savy .vw-paneeli .vw-lista li::before {
	background: var(--wp--preset--color--mint-dark);
}

.vw-osio--savy .vw-luokka--korostus {
	border-top: 3px solid var(--wp--preset--color--mint);
}

.vw-osio--savy .vw-huomio__kaava {
	border-left-color: var(--wp--preset--color--mint);
}

/* Hero-kuvan faktarivi: pienet mintunvihreät merkit violetilla pohjalla. */
.vw-hero--kuva .vw-faktat li::before {
	background: var(--wp--preset--color--mint);
}

/* ------------------------------------------ Kosketuskohteet mobiilissa
 * Alapalkin ja yhteystietojen linkit ovat pystysuunnassa vain reilut 20 px
 * korkeita, mikä on sormelle pieni. Kasvatetaan kosketusalue mobiilissa
 * 44 pikseliin. Leipätekstin sisäisiin linkkeihin ei kosketa, koska
 * pystypehmuste menisi siellä rivien päälle.
 */
@media (max-width: 781px) {
	.vw-footer__list a,
	.vw-footer__legal a,
	.vw-some a,
	.vw-yhteys a,
	.vw-etusivu__palkkisisalto a,
	.vw-etusivu__palkkisisalto .vw-etusivu__alue {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Linkkien väliin jää riittävä rako, jottei viereistä osu vahingossa. */
	.vw-footer__list > li + li,
	.vw-yhteys li + li {
		margin-top: .1rem;
	}
}

/* ------------------------------------------------ Booosted-upotuspaikat
 * Upotettu lomake tai chatbot saa oman leveytensä, mutta kehyksen leveys
 * on rajattu niin ettei se leviä koko palstan levyiseksi. Tyhjän paikan
 * merkintä näkyy vain ylläpitäjälle.
 */
.vw-upotus {
	max-width: 40rem;
}

.vw-osio--upotus .vw-upotus {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.vw-lomake__kentat.vw-upotus {
	max-width: none;
}

/* Upotetut lomakkeet eivät saa vuotaa palstan yli kapealla näytöllä. */
.vw-upotus__sisalto {
	max-width: 100%;
}

.vw-upotus__sisalto iframe,
.vw-upotus__sisalto img {
	max-width: 100%;
}

.vw-upotus__paikka {
	margin: 0;
	padding: 1.15rem 1.25rem;
	border: 1px dashed var(--wp--preset--color--plum-light);
	background: var(--wp--preset--color--plum-tint);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--plum-dark);
}

.vw-upotus__paikka span {
	display: block;
	margin-top: .35rem;
	color: var(--wp--preset--color--mist);
}

/* -------------------------------------------- Etusivun heron typografia
 * Etusivun otsikko on H1 kuten alasivujenkin hero-otsikot, joten sillä on
 * sama koko: theme.jsonin "huge" (fluid 2,75–4,5 rem). main.css kaventaa
 * sen omalla clamp-arvollaan, joten se palautetaan tässä.
 */
.vw-etusivu__otsikko {
	font-size: var(--wp--preset--font-size--huge);
}

.vw-hero--etusivu .vw-etusivu__ingressi {
	font-size: var(--wp--preset--font-size--large);
}

/* ------------------------------------------------------------- Murupolku */

.vw-murut {
	padding-block: .9rem;
	border-bottom: var(--vw-rule);
	background: #fff;
}

.vw-murut ol {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mist);
}

.vw-murut li + li::before {
	content: "/";
	margin-right: .5rem;
	color: var(--wp--preset--color--line);
}

.vw-murut a {
	color: var(--wp--preset--color--mist);
	text-decoration: none;
}

.vw-murut a:hover,
.vw-murut a:focus-visible {
	color: var(--wp--preset--color--plum);
	text-decoration: underline;
}

.vw-murut [aria-current] {
	color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------ Usein kysytyt kysymykset */

.vw-ukk {
	display: grid;
	gap: 0;
	max-width: 52rem;
	border-top: var(--vw-rule);
}

.vw-ukk__kohta {
	padding-block: clamp(1.15rem, 2vw, 1.6rem);
	border-bottom: var(--vw-rule);
}

.vw-ukk__kysymys {
	margin: 0 0 .5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
}

.vw-ukk__vastaus {
	margin: 0;
	max-width: 60ch;
}

/* ------------------------------------------------- Täydennettävät kohdat
 * Merkintä erottuu tarkoituksella: se ei saa jäädä sivustolle julkaisussa.
 * Kun kaikki on täytetty, koko sääntö voi poistua.
 */
.vw-taytto {
	display: inline-block;
	padding: .1em .5em;
	border: 1px dashed var(--wp--preset--color--mint-dark);
	border-radius: 2px;
	background: var(--wp--preset--color--mint-tint);
	font-family: var(--wp--preset--font-family--heading);
	font-size: .85em;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mint-dark);
}

.vw-taytto__vihje {
	font-size: .9em;
	font-style: italic;
	color: var(--wp--preset--color--mist);
}

/* Kahden sarakkeen ruudukko (referenssikohteet). main.css määrittelee vain
   kolmen ja neljän sarakkeen muunnelmat. */
@media (min-width: 900px) {
	.vw-ruudukko--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =====================================================================
 * VAIHE 2: ydinlohkojen yhteensopivuus
 *
 * Sisältö on siirretty Gutenbergin ydinlohkoihin. Lohkot kantavat samat
 * teemaluokat kuin PHP-osiot, joten valtaosa main.css:stä osuu suoraan.
 * Tässä katetaan ne kohdat, joissa ydinlohkon rakenne poikkeaa: lohko
 * piirtää divin siellä missä ennen oli dl, figure tai ul.
 * ===================================================================== */

/* Ryhmälohkon virtausvälit kumotaan main.css:n alussa ("Lohkojen
   virtausvälit"), koska kumoamisen on oltava ennen teeman luokkasääntöjä. */

/* --- Painikkeet ---
   Ennen: <a class="vw-btn vw-btn--solid">. Nyt luokka on lohkon kääreessä
   ja linkki on sen sisällä. Kääre kantaa luokan vain tunnisteena: main.css:n
   nappityylit puretaan siitä, muuten napista piirtyy kaksi sisäkkäistä. */
.wp-block-buttons.vw-napit {
	gap: .75rem 1.25rem;
}

.wp-block-buttons > .wp-block-button.vw-btn,
.wp-block-buttons > .wp-block-button.vw-btn:hover,
.wp-block-buttons > .wp-block-button.vw-btn:focus-visible {
	display: inline-block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	text-decoration: none;
	transition: none;
}

.wp-block-button.vw-btn > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .85rem 2.1rem;
	border: 1px solid transparent;
	border-radius: var(--vw-radius);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--vw-speed) var(--vw-ease),
		border-color var(--vw-speed) var(--vw-ease),
		color var(--vw-speed) var(--vw-ease);
}

.wp-block-button.vw-btn--solid > .wp-block-button__link {
	background: var(--wp--preset--color--plum);
	color: #fff;
}

.wp-block-button.vw-btn--solid > .wp-block-button__link:hover,
.wp-block-button.vw-btn--solid > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--plum-dark);
	color: #fff;
}

.wp-block-button.vw-btn--outline > .wp-block-button__link {
	background: transparent;
	border-color: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--plum);
}

.wp-block-button.vw-btn--outline > .wp-block-button__link:hover,
.wp-block-button.vw-btn--outline > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--plum);
	color: #fff;
}

/* Linkkinappi on inline-block eikä flex, jotta alaviiva ei jatku
   CSS:llä piirretyn nuolen alle (koristeet periytyvät flex-lapsiin). */
.wp-block-button.vw-btn--link > .wp-block-button__link {
	display: inline-block;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--plum);
	font-family: var(--wp--preset--font-family--heading);
	text-decoration: underline;
	text-underline-offset: .25em;
}

.wp-block-button.vw-btn--link > .wp-block-button__link:hover,
.wp-block-button.vw-btn--link > .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--plum-dark);
}

/* Vaalealla pohjalla olevat napit heroissa ja kehotteissa. */
.vw-hero--kuva .wp-block-button.vw-btn--solid > .wp-block-button__link,
.vw-kehote .wp-block-button.vw-btn--solid > .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--plum-dark);
}

.vw-hero--kuva .wp-block-button.vw-btn--outline > .wp-block-button__link,
.vw-kehote .wp-block-button.vw-btn--outline > .wp-block-button__link {
	border-color: rgba(255, 255, 255, .7);
	color: #fff;
}

.vw-hero--kuva .wp-block-button.vw-btn--link > .wp-block-button__link,
.vw-kehote .wp-block-button.vw-btn--link > .wp-block-button__link {
	color: #fff;
}

.vw-hero--kuva .wp-block-button.vw-btn--link > .wp-block-button__link:hover,
.vw-hero--kuva .wp-block-button.vw-btn--link > .wp-block-button__link:focus-visible,
.vw-kehote .wp-block-button.vw-btn--link > .wp-block-button__link:hover,
.vw-kehote .wp-block-button.vw-btn--link > .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--plum-light);
}

/* --- Termi–arvo-rivit ---
   Ennen: <dl><div><dt><dd>. Nyt: <div><p class="__nimi"><p class="__arvo">. */
.vw-taulukko .vw-taulukko__nimi {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.vw-taulukko .vw-taulukko__arvo {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
}

.vw-hinnasto .vw-hinnasto__nimi {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
}

.vw-hinnasto .vw-hinnasto__arvo {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

/* --- Palautteet ---
   Ennen: <figure><blockquote><figcaption>. Nyt: ryhmä + lainaus + kappale. */
.vw-palaute .vw-palaute__lainaus {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
	line-height: 1.6;
}

.vw-palaute .vw-palaute__lainaus p {
	margin: 0;
	font-size: inherit;
	font-style: normal;
}

.vw-palaute .vw-palaute__nimi {
	margin-top: auto;
	display: grid;
	gap: .1rem;
	padding-top: 1rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--mist);
}

.vw-palaute .vw-palaute__nimi strong {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* --- Kuvakaistan nostot ---
   Ennen: <ul><li>. Nyt: <div class="vw-nosto">. */
.vw-nostot .vw-nosto {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	max-width: 16rem;
	padding-left: 1.1rem;
	border-left: 2px solid var(--wp--preset--color--mint);
}

.vw-nostot .vw-nosto p {
	margin: 0;
}

/* --- Pienet tagimuutokset: span → p --- */
.vw-askel .vw-askel__numero,
.vw-luokka .vw-luokka__tunnus,
.vw-luokka .vw-luokka__mittari,
.vw-luokka .vw-luokka__aloitusotsikko,
.vw-luokka .vw-luokka__aloitustunnit,
.vw-kortti .vw-kortti__linkki {
	margin-block: 0;
}

.vw-luokka .vw-luokka__ylarivi p,
.vw-luokka .vw-luokka__alarivi p {
	margin: 0;
}

/* Lohkoeditorin lainausmerkki pois palautteista. */
.vw-palaute .wp-block-quote::before {
	content: none;
}

/* --- Kortin linkki ---
   Ennen koko kortti oli <a>, jonka sisällä nuoli-ikoni. Lohkoversiossa
   kortti on ryhmä ja linkki sen sisällä. Linkki venytetään kattamaan koko
   kortti, jolloin klikkausalue säilyy, ja nuoli piirretään CSS:llä. */
.vw-osio .vw-kortti {
	position: relative;
}

.vw-kortti .vw-kortti__linkki a,
.vw-kortti .vw-kortti__linkki a:hover {
	color: inherit;
	text-decoration: none;
}

.vw-kortti .vw-kortti__linkki a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vw-kortti .vw-kortti__linkki::after {
	content: "→";
	margin-left: .1rem;
	font-size: 1.05em;
	line-height: 1;
	transition: transform var(--vw-speed) var(--vw-ease);
}

.vw-kortti:hover .vw-kortti__linkki::after,
.vw-kortti:focus-within .vw-kortti__linkki::after {
	transform: translateX(4px);
}

/* --- Linkkinapit ---
   Nuoli tuli ennen ikonista; lohkoversiossa se piirretään CSS:llä. */
.wp-block-button.vw-btn--link > .wp-block-button__link::after {
	content: "→";
	margin-left: .45rem;
	display: inline-block;
	transition: transform var(--vw-speed) var(--vw-ease);
}

.wp-block-button.vw-btn--link > .wp-block-button__link:hover::after,
.wp-block-button.vw-btn--link > .wp-block-button__link:focus-visible::after {
	transform: translateX(3px);
}

.wp-block-button.vw-btn--link > .wp-block-button__link {
	text-decoration: underline 1px;
	text-underline-offset: .25em;
}

/* --- Etusivun palvelukortit lohkoina ---
   Sama kuin kortin linkki: koko kortti klikattavaksi ja nuoli CSS:llä. */
.vw-etusivu__paneelit .vw-paneelikortti {
	position: relative;
}

.vw-paneelikortti .vw-paneelikortti__linkki a,
.vw-paneelikortti .vw-paneelikortti__linkki a:hover {
	color: inherit;
	text-decoration: none;
}

.vw-paneelikortti .vw-paneelikortti__linkki a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vw-paneelikortti .vw-paneelikortti__linkki::after {
	content: "→";
	margin-left: .35rem;
	font-size: 1.05em;
	line-height: 1;
	transition: transform var(--vw-speed) var(--vw-ease);
}

.vw-paneelikortti:hover .vw-paneelikortti__linkki::after,
.vw-paneelikortti:focus-within .vw-paneelikortti__linkki::after {
	transform: translateX(4px);
}

.vw-paneelikortti:hover .vw-paneelikortti__otsikko,
.vw-paneelikortti:focus-within .vw-paneelikortti__otsikko {
	color: var(--wp--preset--color--plum);
}

.vw-paneelikortti:hover::before,
.vw-paneelikortti:focus-within::before {
	transform: scaleX(1);
}

/* Pitkä napin teksti ei saa levitä ruudun yli kapealla näytöllä. */
.wp-block-buttons.vw-napit .wp-block-button {
	max-width: 100%;
}

@media (max-width: 600px) {
	.wp-block-button.vw-btn > .wp-block-button__link {
		white-space: normal;
		text-align: center;
	}
}

/* =========================================================================
   Kuvalohkot (core/image)

   Kuvakerrokset olivat aiemmin lyhytkoodeja, jotka piirsivät CSS-taustakuvan
   --vw-kuva-muuttujasta. Nyt jokainen kuva on aito Gutenbergin kuvalohko,
   joten sen voi vaihtaa editorista "Korvaa"-painikkeella.

   Ulkoasu säilyy: figure saa saman vw-tausta-luokan kuin aiempi span, joten
   luminanssisekoitus, läpinäkyvyys ja gradientit toimivat ennallaan. Kuva
   täyttää kerroksen object-fitillä ja rajautuu vw-kohta-luokan mukaan.

   Vanhat lyhytkoodit ovat yhä käytössä (PHP-osiot ja aiempi sisältö), joten
   --vw-kuva-pohjainen tausta jää main.css:ään rinnalle.
   ========================================================================= */

.vw-tausta.wp-block-image {
	margin: 0;
	padding: 0;
	max-width: none;
}

.vw-tausta.wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/* Kehotteen kuvakerros jäi aiemmin näkymättömäksi: osion > * -sääntö
   palautti sen virtaukseen, jolloin tyhjän spanin koko oli 0 x 0. Kuvalohko
   tarvitsee kerroksen mitat, joten asemointi palautetaan. */
.vw-kehote--kuva > .vw-tausta {
	position: absolute;
	inset: 0;
}

/* -------------------------------------------------------- Rajauskohdat
 * Ydinlohko ei voi kantaa vapaata tyyliattribuuttia ilman että lohko
 * muuttuu virheelliseksi, joten rajaus annetaan luokkana. Luokat vastaavat
 * inc/sisalto.php:n kohdistus- ja rajaus-arvoja (vw_kuva_rajausluokka).
 * Uusi rajausarvo tarvitsee tähän oman sääntönsä.
 */
.vw-kohta--vasen.wp-block-image img {
	object-position: left center;
}

.vw-kohta--oikea.wp-block-image img {
	object-position: right center;
}

.vw-kohta--y30.wp-block-image img {
	object-position: center 30%;
}

.vw-kohta--y35.wp-block-image img {
	object-position: center 35%;
}

.vw-kohta--y38.wp-block-image img {
	object-position: center 38%;
}

.vw-kohta--y40.wp-block-image img {
	object-position: center 40%;
}

.vw-kohta--y42.wp-block-image img {
	object-position: center 42%;
}

.vw-kohta--y45.wp-block-image img {
	object-position: center 45%;
}

.vw-kohta--y48.wp-block-image img {
	object-position: center 48%;
}

.vw-kohta--y55.wp-block-image img {
	object-position: center 55%;
}