/*
Theme Name: MSL Manninen
Theme URI: https://www.mslmanninen.fi/
Author: Maansiirtoliike Manninen Oy
Description: Maansiirtoliike Manninen Oy:n oma lohkoteema. Korvaa aiemman Divi-toteutuksen.
Version: 0.32.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: msl-teema
Tags: block-theme, full-site-editing, business
*/

/* -------------------------------------------------------------
   Perusasetukset
   Suurin osa tyyleistä tulee theme.jsonista. Täällä on vain se,
   mitä lohkoasetuksilla ei saa tehtyä.
------------------------------------------------------------- */

html { scroll-behavior: smooth; }

/* -------------------------------------------------------------
   Typografian hienosäätö

   Inter on suunniteltu ruudulle. Nämä asetukset ottavat käyttöön
   sen ominaisuudet, jotka eivät ole oletuksena päällä.
------------------------------------------------------------- */

body {
	/* Tasavälinen numerointi, jotta luvut eivät hypi. */
	font-feature-settings: "tnum" 1, "cv05" 1, "cv11" 1;
}

/* Isot otsikot kaipaavat tiiviimpää kirjainväliä kuin leipäteksti. */
h1, .wp-block-post-title {
	letter-spacing: -0.03em;
}

/* WordPress jättää oletuksena välin ylä- ja alatunnisteen ympärille.
   Osiot hoitavat oman välistyksensä, joten väli näkyisi vain
   valkoisena raitana tummien osioiden välissä. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

body { -webkit-font-smoothing: antialiased; }

p { text-wrap: pretty; }

:where(h1, h2, h3) { text-wrap: balance; }


/* -------------------------------------------------------------
   Osioiden esiintulo vieritettäessä

   Hillitty: pieni nousu ja häivytys, ei liukuja sivusuunnassa.
   Piilotus tehdään vain jos selainskripti on käynnissä, jotta
   sisältö näkyy myös silloin kun skriptit on estetty.
------------------------------------------------------------- */

/* Siirto tehdään translate-ominaisuudella eikä transformilla.
   Esiintulon loppuasento on "transform: none", ja se voitti aiemmin
   korttien transform-pohjaisen osoitinefektin: kortit eivät siksi
   suurentuneet lainkaan. Erilliset ominaisuudet eivät kilpaile. */
.msl-js .msl-esiin {
	opacity: 0;
	translate: 0 16px;
	transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
	            translate 700ms cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, translate;
}

.msl-js .msl-esiin.nakyvissa {
	opacity: 1;
	translate: none;
}

/* Kortit tulevat esiin peräkkäin, ei kaikki kerralla. */
.msl-js .msl-esiin:nth-child(2) { transition-delay: 70ms; }
.msl-js .msl-esiin:nth-child(3) { transition-delay: 140ms; }
.msl-js .msl-esiin:nth-child(4) { transition-delay: 210ms; }
.msl-js .msl-esiin:nth-child(5) { transition-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
	.msl-js .msl-esiin {
		opacity: 1;
		translate: none;
		transition: none;
	}
}


/* -------------------------------------------------------------
   Silmälappu — pieni oranssi yläotsikko viivalla
------------------------------------------------------------- */

.msl-silmalappu {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--korostus);
	margin-bottom: 18px !important;
}

.msl-silmalappu::before {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
	flex: none;
	transform-origin: left center;
	transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1) 180ms;
}

/* Silmälappu on tarkoitettu pieneksi yläotsikoksi kappaleen kokoisena.
   Jos luokka päätyy otsikkoon, otsikko perii versaalit, harvan
   kirjainvälin ja edeltävän viivan. Isossa koossa se näyttää rikki
   menneeltä: sanat hajoavat kirjaimiksi ja viiva roikkuu irrallaan
   vasemmalla. Otsikko saa siis otsikon typografian riippumatta siitä,
   mikä luokka sille on annettu. */
h1.msl-silmalappu,
h2.msl-silmalappu,
h3.msl-silmalappu {
	display: block;
	text-transform: none;
	letter-spacing: -0.03em;
	line-height: 1.08;
	font-weight: 700;
	margin-bottom: 0 !important;
}

h1.msl-silmalappu::before,
h2.msl-silmalappu::before,
h3.msl-silmalappu::before {
	content: none;
}

/* Viiva piirtyy vasemmalta oikealle, kun osio tulee esiin. Skaalaus
   ei vie tilaa, joten teksti ei nytkähdä animaation aikana. */
.msl-js .msl-esiin .msl-silmalappu::before,
.msl-js .msl-esiin.msl-silmalappu::before {
	transform: scaleX(0);
}

.msl-js .msl-esiin.nakyvissa .msl-silmalappu::before,
.msl-js .msl-esiin.nakyvissa.msl-silmalappu::before {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.msl-js .msl-esiin .msl-silmalappu::before,
	.msl-js .msl-esiin.msl-silmalappu::before {
		transform: none;
		transition: none;
	}
}


/* -------------------------------------------------------------
   Ylätunniste
------------------------------------------------------------- */

/* WordPress kääriin mallinosat omaan header-elementtiinsä. Kiinnitys on
   tehtävä siihen: sisemmän elementin kiinnitys ei toimi, koska sen
   sisältölaatikko on täsmälleen ylätunnisteen korkuinen — se ei siis
   voi liukua missään. Tästä syystä ylätunniste vain vieri pois näkyvistä
   eikä kutistumista ehtinyt nähdä. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

/* -------------------------------------------------------------
   Vierityksen edistymispalkki

   Ohut oranssi viiva ylätunnisteen alareunassa. Kertoo yhdellä
   silmäyksellä, paljonko sivua on jäljellä. Leveys tulee skriptistä
   muuttujana, jotta piirto jää selaimen kompositorille.
------------------------------------------------------------- */

.msl-edistyminen {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	z-index: 2;
	transform-origin: left center;
	transform: scaleX(var(--msl-edistys, 0));
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--korostus) 0%,
		var(--wp--preset--color--korostus-tumma) 100%
	);
	pointer-events: none;
}

.msl-ylatunniste {
	/* Edistymispalkin ankkuri. */
	position: relative;
	/* Vanhalla sivustolla palkin alareunassa oli ohut valkoinen viiva. */
	border-bottom: 1px solid rgba(255, 255, 255, 0.9);
	transition: box-shadow 300ms ease;
}

/* Tausta ja sumennus omassa kerroksessaan, eivät ylätunnisteessa
   itsessään.

   backdrop-filter tekee elementistä kiinnityskohdan kaikille sen sisällä
   oleville position: fixed -elementeille. WordPressin mobiilivalikko on
   juuri sellainen kokoruudun peite, joten se jäi ylätunnisteen sisään:
   valikko oli palkin korkuinen ja siitä näkyi vain ensimmäinen kohta.
   Kun sumennus on pseudoelementissä, valikko pääsee taas koko ruudulle. */
/* Läpikuultavuus ja tumma yläliuku ovat vanhalta sivustolta, jossa
   arvot olivat rgba(70,93,85,0.71) ja musta liuku ylhäältä alaspäin.
   Palkki lepää heron päällä kevyemmin kuin umpinainen väri. */
.msl-ylatunniste::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: rgba(70, 93, 85, 0.71);
	background-image: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.72) 0%,
		rgba(0, 0, 0, 0) 100%
	);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background-color 300ms ease;
}

/* Ylätunnisteen sisältö oli rajattu leipätekstin leveyteen (760 px),
   vaikka sivun muu sisältö on 1200 px leveä. Logo ja valikko olivat
   siksi ahtaassa kaistassa keskellä, ja isompi logo pakotti valikon
   kahdelle riville. Sama leveys kuin sisällöllä. */
.msl-ylatunniste > .wp-block-group {
	max-width: var(--wp--style--global--wide-size);
	width: 100%;
	transition: padding 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Logo on sivun yläreunassa isona ja kutistuu vasta vieritettäessä.
   Koko asetetaan tässä eikä mallinosassa: WordPress säilöö mallinosat
   välimuistiin, joten teematiedoston muutos ei aina tule voimaan. */
.msl-ylatunniste .wp-block-site-logo img {
	width: 290px;
	/* Kapealla näytöllä kokoa rajoitetaan max-widthillä, joten
	   molempien on liu'uttava, jotta kutistus näkyy myös puhelimessa. */
	transition: width 300ms cubic-bezier(0.16, 1, 0.3, 1),
	            max-width 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------
   Pyörivä tunnus (vain etusivu)

   Tunnus on umpinainen laatta: etu- ja takapinnalla on tunnus, ja
   niiden välissä on siluetista tehty runko. Rakenne syntyy skriptissä,
   joten ilman JavaScriptiä ylätunnisteessa on tavallinen tunnus.

   Kolme asiaa, jotka tekevät tästä toimivan:

   1. Runko on eri kuva kuin tunnus. Tunnus on ääriviivataidetta, jossa
      suurin osa pinta-alasta on läpinäkyvää; siitä pinotut kerrokset
      näkyisivät toistensa läpi haiveena. Umpinaisen siluetin läpi ei näe.

   2. Laatalla on tuntuva paksuus. Ohut laatta katoaa särmälleen
      kääntyessään lähes olemattomiin, ja siihen jäisi tyhjä hetki.

   3. Väärältä puolelta katsotut pinnat piilotetaan. Tunnus on oikein
      päin molemmilla puolilla, mikä on tietoinen huijaus; ilman
      piilotusta etupinta näkyisi takaa peilikuvana takapinnan läpi.
------------------------------------------------------------- */

body.home .msl-ylatunniste .wp-block-site-logo {
	perspective: 1500px;
}

.msl-t3d {
	display: block;
	position: relative;
	transform-style: preserve-3d;
	animation: msl-t3d-kierto var(--msl-t3d-aika, 18s) linear infinite;
	will-change: transform;
}

.msl-t3d > img {
	display: block;
	position: relative;
	z-index: 1;
}

/* Kerrokset seuraavat etupinnan kokoa, joka muuttuu ylätunnisteen
   kutistuessa. */
.msl-t3d__kerros {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.msl-t3d__kerros img {
	display: block;
	width: 100%;
	height: auto;
}

/* Rungon kerros piirretään maskina eikä kuvana. Kuvana runko olisi
   valkoinen siluetti, jota jouduttaisiin himmentämään suotimella, ja
   siitä tulee väistämättä harmaa. Maskilla väri on suoraan valittu,
   joten runko voi olla tunnuksen omaa väriä. Samalla säästyy 28 kuvan
   purkaminen, koska taustaväri riittää. */
.msl-t3d__kerros--runko {
	background-color: var(--msl-t3d-runko, #514138);
	-webkit-mask-image: var(--msl-t3d-maski);
	mask-image: var(--msl-t3d-maski);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Pinnat piiloon väärältä puolelta. Runko näkyy molemmilta, koska
   jokaisella rungon kerroksella on oma peilikaksosensa. */
.msl-t3d > img,
.msl-t3d__kerros { backface-visibility: hidden; }

@keyframes msl-t3d-kierto {
	from { transform: rotateY(0deg); }
	to   { transform: rotateY(360deg); }
}

/* Liikkeen vaimennus: laatta puretaan skriptissä, mutta varmistetaan
   myös tyyleillä ettei mikään pyöri. */
@media (prefers-reduced-motion: reduce) {
	.msl-t3d { animation: none; }
}

/* -------------------------------------------------------------
   Tunnuksen vaalea laatta

   Tunnus on suunniteltu vaalealle. Sen ruskea yläteksti #744C28 ja
   ylätunnisteen vihreä #465D55 ovat käytännössä yhtä tummia: kontrasti
   on 1,05 : 1, kun luettavuuden alaraja on 4,5 : 1. Teksti ei siis
   käytännössä näy. Taustan tummentaminen ei auta, koska ruskea on
   itsessään tumma sävy; mitattuna musta tausta nostaa luvun vasta
   2,62:een. Vaalealla laatalla luku on 6,87 : 1.

   Tunnuksen väreihin ei kosketa. Vain alusta vaihtuu.

   Laatta ulottuu ylätunnisteessa vasempaan reunaan asti ja on palkin
   korkuinen, jolloin se lukee kylttipintana eikä paikkana. Leveys
   lasketaan samasta geometriasta kuin sisällön sijainti: sisältökaista
   on keskitetty ja enintään wide-sizen levyinen, joten tunnuksen
   vasempaan reunaan on matkaa joko puolet yli jäävästä tilasta tai
   vähintään sivun oma reunus.
------------------------------------------------------------- */

/* Laatan oikea reuna on vino, 48 astetta pystysuorasta.

   Vinous kasvaa vain alaspäin: yläreuna pysyy 26 pikselin päässä
   tunnuksesta ja alareuna työntyy oikealle. Jos rajaa kallistettaisiin
   keskilinjan ympäri, tunnuksen oikea yläkulma eli kolme palloa jäisi
   laatan ulkopuolelle jo 48 asteessa.

   Vinous on sidottu palkin korkeuteen eikä kiinteään pikselimäärään.
   Palkki madaltuu vieritettäessä 98 pikselistä 54:ään, joten kiinteä
   vinous jyrkentäisi kulmaa kutistuessa ja muoto eläisi. */

.msl-ylatunniste { --msl-laatta: 290px; --msl-vino: 109px; }
.msl-ylatunniste.kutistunut { --msl-laatta: 148px; --msl-vino: 60px; }

.msl-ylatunniste::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: calc(
		max((100% - var(--wp--style--global--wide-size)) / 2, 24px)
		+ var(--msl-laatta) + 26px + var(--msl-vino)
	);
	background: var(--wp--preset--color--vaalea);
	clip-path: polygon(0 0, calc(100% - var(--msl-vino)) 0, 100% 100%, 0 100%);
	/* Taustakerroksen päällä, sisällön alla. */
	z-index: 1;
	transition: width 300ms cubic-bezier(0.16, 1, 0.3, 1),
	            clip-path 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sisältö laatan päälle. Ilman tätä sijoitettu ::before piirtyisi
   tavallisten lapsielementtien yli ja peittäisi tunnuksen. */
.msl-ylatunniste > .wp-block-group {
	position: relative;
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.msl-ylatunniste::before { transition: none; }
}

/* -------------------------------------------------------------
   Alatunniste vanhan sivuston väreillä

   Vanhalla sivustolla alatunniste oli kaksiosainen: vaaleampi
   sinivihreä #718F8C, jonka päällä 40 asteen tumma liuku, ja sen alla
   umpinainen tummanvihreä palkki. Yläreunassa oli sama vino kiila kuin
   heron alla, peilattuna.

   Vaaleaa laattaa alatunnisteeseen ei tehdä. Se kokeiltiin sekä
   tunnusta myötäilevänä että koko alatunnisteen jakavana, eikä
   kumpikaan istunut. Laatta on siis vain ylätunnisteessa.
------------------------------------------------------------- */

.msl-alatunniste {
	position: relative;
	/* Kiila ulottuu reunojen yli, joten se on rajattava. */
	overflow: clip;
	/* Lohkon oma taustaluokka käyttää !importantia, joten sekin tarvitaan. */
	background-color: #718F8C !important;
	background-image: linear-gradient(
		40deg,
		rgba(0, 0, 0, 0.82) 0%,
		rgba(0, 0, 0, 0) 100%
	);
}

.msl-alatunniste::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100px;
	z-index: 0;
	pointer-events: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 140" preserveAspectRatio="none"><g fill="%23F7F5F3"><path d="M1280 140V0H0l1280 140z" fill-opacity=".5"/><path d="M1280 98V0H0l1280 98z"/></g></svg>');
	background-size: 100% 100px;
	background-repeat: no-repeat;
}

.msl-alatunniste > * {
	position: relative;
	z-index: 1;
}

/* Alarivi on umpinainen tummanvihreä palkki läpi näytön leveyden. */
.msl-alatunniste-alaosa {
	position: relative;
	z-index: 1;
}

.msl-alatunniste-alaosa::before {
	content: "";
	position: absolute;
	inset: 0 -100vw;
	background: var(--wp--preset--color--pohja);
	z-index: -1;
}

.msl-ylatunniste.kutistunut {
	box-shadow: 0 6px 26px rgba(48, 64, 58, 0.3);
}

/* Tausta tummenee kutistuessa. Se on nyt taustakerroksessa. */
.msl-ylatunniste.kutistunut::after {
	background-color: rgba(70, 93, 85, 0.9);
}


/* -------------------------------------------------------------
   Vino kiila osioiden väliin

   Vanhan sivuston tunnusomaisin muoto. Se on kaksi kolmiota
   päällekkäin: takimmainen puoliksi läpinäkyvä, etummainen
   umpinainen, jolloin syntyy kaksiportainen viisto. Muoto on
   luettu vanhalta sivustolta sellaisenaan.

   Väri on kirjoitettu kuvaan kiinteänä, koska CSS-muuttujia ei voi
   käyttää data-URLin sisällä. Se on sama #F7F5F3 kuin osiolla, johon
   kiila liittyy, eli sertifikaattinauha ja heron jälkeinen osio.
------------------------------------------------------------- */

.msl-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	/* Yksi pikseli yli, jottei osioiden väliin jää hiusviivaa. */
	bottom: -1px;
	height: 100px;
	z-index: 5;
	pointer-events: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 140" preserveAspectRatio="none"><g fill="%23F7F5F3"><path d="M0 0v140h1280L0 0z" fill-opacity=".5"/><path d="M0 42v98h1280L0 42z"/></g></svg>');
	background-size: 100% 100px;
	background-repeat: no-repeat;
}

/* Heron sisältö nousee kiilan yläpuolelle, jottei teksti jää sen alle. */
.msl-hero > .wp-block-cover__inner-container {
	padding-bottom: 90px;
}

.msl-ylatunniste.kutistunut > .wp-block-group {
	padding-top: 5px;
	padding-bottom: 5px;
}

.msl-ylatunniste.kutistunut .wp-block-site-logo img {
	width: 148px;
}

@media (prefers-reduced-motion: reduce) {
	.msl-ylatunniste,
	.msl-ylatunniste > .wp-block-group,
	.msl-ylatunniste .wp-block-site-logo img { transition: none; }
}

.msl-ylatunniste .wp-block-navigation .wp-block-navigation-item__content,
.msl-ylatunniste .wp-block-navigation a {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.93rem;
	font-weight: 600;
	padding-bottom: 6px;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
	text-decoration: none;
}

.msl-ylatunniste .wp-block-navigation .wp-block-navigation-item__content:hover,
.msl-ylatunniste .wp-block-navigation a:hover,
.msl-ylatunniste .wp-block-navigation .current-menu-item > a {
	color: #fff;
	border-bottom-color: var(--wp--preset--color--korostus);
}

/* Valikkonappi on WordPressin oletuksena piilossa jo 600 pikselistä ylöspäin,
   mutta viisi valikkokohtaa ei mahdu yhdelle riville ennen noin 1000 pikseliä.
   Siihen asti käytetään samaa avattavaa valikkoa kuin puhelimessa. */
@media (max-width: 1000px) {
	.msl-ylatunniste .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.msl-ylatunniste .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.msl-ylatunniste .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}
}

/* Alavalikko pysyy luettavana tummalla ylätunnisteella */
.msl-ylatunniste .wp-block-navigation .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--pohja-vaalennus);
	border-color: rgba(255, 255, 255, 0.12);
}

.msl-logo .wp-block-site-title a {
	color: #fff;
	text-decoration: none;
	line-height: 1.15;
}

.msl-logo-ylateksti {
	display: block;
	font-size: 0.6rem;
	letter-spacing: 0.3em;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--wp--preset--color--korostus);
}


/* -------------------------------------------------------------
   Hero
------------------------------------------------------------- */

.msl-hero {
	position: relative;
	min-height: min(88vh, 760px);
	display: flex;
	align-items: flex-end;
}

.msl-hero .wp-block-cover__background {
	background: linear-gradient(
		105deg,
		rgba(48, 64, 58, 0.94) 0%,
		rgba(48, 64, 58, 0.78) 45%,
		rgba(48, 64, 58, 0.35) 100%
	);
}

/* Heron kerrosjärjestys pohjalta ylöspäin:
   1. poster-kuva  2. taustavideo  3. tummennus  4. teksti

   Ilman näitä sekä kuva että video ovat tasolla 0, jolloin myöhemmin
   tuleva kuva peittää videon — video pyörii mutta ei näy.

   WordPressin omat lohkotyylit ladataan teeman tyylien jälkeen ja asettavat
   nämä kaikki tasolle 1, joten ne on ohitettava !important-määreellä. */
.msl-hero > .wp-block-cover__image-background { z-index: 0 !important; }
.msl-hero > .wp-block-cover__background { z-index: 2 !important; }
.msl-hero > .wp-block-cover__inner-container { z-index: 3 !important; }

/* Taustavideo. Piilossa kunnes se tosiasiassa pyörii, jotta taustakuva
   ei koskaan välähdä tyhjänä. Ei osallistu sivun ensilataukseen. */
.msl-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	opacity: 0;
	transition: opacity 900ms ease;
	pointer-events: none;
}

.msl-hero__video.on { opacity: 1; }

/* Vierityskehotus heron alalaidassa.

   Ilman vihjettä iso kokoruudun hero näyttää helposti koko sivulta.
   Katoaa heti kun kävijä on ymmärtänyt vihjeen, eikä palaa. */
.msl-vierityskehotus {
	position: absolute;
	left: 50%;
	bottom: 26px;
	translate: -50% 0;
	z-index: 4;
	width: 26px;
	height: 42px;
	border: 2px solid rgba(255, 255, 255, 0.55);
	border-radius: 13px;
	opacity: 0.85;
	transition: opacity 400ms ease;
	pointer-events: none;
}

/* Piste valuu "hiiren" sisällä alaspäin. */
.msl-vierityskehotus::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 8px;
	width: 3px;
	height: 8px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: var(--wp--preset--color--korostus);
	animation: msl-valuu 1.9s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes msl-valuu {
	0%        { transform: translateY(0);    opacity: 0; }
	22%       { opacity: 1; }
	72%, 100% { transform: translateY(16px); opacity: 0; }
}

.msl-vierityskehotus.piiloon { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.msl-vierityskehotus::after { animation: none; opacity: 1; }
}

/* Kapealla näytöllä hero on jo valmiiksi tiukka, eikä kehotus mahdu
   tekstin alle ilman että se menee sen päälle. */
@media (max-width: 600px) {
	.msl-vierityskehotus { display: none; }
}

.msl-hero h1 { max-width: 16ch; }

.msl-hero h1 em {
	font-style: normal;
	color: var(--wp--preset--color--korostus);
}

.msl-hero p { max-width: 52ch; }

/* Lukurivi heron alalaidassa */
.msl-luvut {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.msl-luku strong {
	display: block;
	font-size: clamp(1.8rem, 4vw, 2.3rem);
	font-weight: 800;
	color: #fff;
	line-height: 1;
	margin-bottom: 6px;
}

.msl-luku span {
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
}


/* -------------------------------------------------------------
   Osion otsikko — teksti vasemmalla, painike oikealla
------------------------------------------------------------- */

.msl-osio-otsikko {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	flex-wrap: wrap;
}


/* -------------------------------------------------------------
   Palvelukortit
------------------------------------------------------------- */

.msl-kortti {
	background: #fff;
	border: 1px solid var(--wp--preset--color--raja);
	border-radius: 4px;
	overflow: hidden;
	transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 280ms ease,
	            border-color 280ms ease;
	display: flex;
	flex-direction: column;
	position: relative;
	transform-origin: center bottom;
}

/* Kortti nousee ja suurenee selvästi hiiren alla. Suurennus kasvaa
   alareunasta ylöspäin, jolloin korttirivi pysyy linjassa vaikka
   liike on iso. z-index nostaa aktiivisen kortin naapureiden päälle. */
/* Esiintulon siirtymämäärittely on tarkempi kuin kortin oma ja korvasi
   sen kokonaisuudessaan, jolloin suurennus tapahtui ilman liukua eli
   nykäyksenä. Kortille luetellaan siksi molemmat. */
.msl-js .msl-esiin.msl-kortti {
	transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
	            translate 700ms cubic-bezier(0.16, 1, 0.3, 1),
	            transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 280ms ease,
	            border-color 280ms ease;
}

/* -------------------------------------------------------------
   Viiden kortin ruudukko: 3 + 2

   WordPressin ruudukkoasettelu täyttää rivin niin monella sarakkeella
   kuin mahtuu, jolloin viisi korttia asettuu leveällä näytöllä 4 + 1
   ja viides jää yksin roikkumaan. Kuusi saraketta jakautuu tasan sekä
   kolmeen että kahteen, joten sama ruudukko tuottaa molemmat rivit.

   Sääntö osuu vain ruudukkoon, jossa on täsmälleen viisi korttia, eikä
   siis häiritse muita korttirivejä. Jos selain ei tue :has-valitsinta,
   koko lohko jää pois ja asettelu on entisellään.
------------------------------------------------------------- */

@supports selector(:has(*)) {
	@media (min-width: 900px) {
		.wp-block-group.is-layout-grid:has(> .msl-kortti:nth-child(5):last-child) {
			grid-template-columns: repeat(6, minmax(0, 1fr));
		}

		/* Ylärivi: kolme korttia, kaksi saraketta kukin. */
		.wp-block-group.is-layout-grid:has(> .msl-kortti:nth-child(5):last-child) > .msl-kortti {
			grid-column: span 2;
		}

		/* Alarivi: kaksi korttia, kolme saraketta kumpikin. */
		.wp-block-group.is-layout-grid:has(> .msl-kortti:nth-child(5):last-child) > .msl-kortti:nth-child(n + 4) {
			grid-column: span 3;
		}

		/* Alarivin kortit ovat leveämmät, joten sama 4:3-kuvasuhde
		   tuottaisi niihin puolitoistakertaiset kuvat. Loivempi suhde
		   pitää kaikkien viiden kuvan korkeuden samana. */
		.wp-block-group.is-layout-grid:has(> .msl-kortti:nth-child(5):last-child) > .msl-kortti:nth-child(n + 4) figure,
		.wp-block-group.is-layout-grid:has(> .msl-kortti:nth-child(5):last-child) > .msl-kortti:nth-child(n + 4) .wp-block-image img {
			aspect-ratio: 2 / 1;
		}
	}
}

.msl-kortti:hover,
.msl-kortti:focus-within {
	transform: translateY(-10px) scale(1.07);
	box-shadow: 0 34px 70px rgba(48, 64, 58, 0.32);
	border-color: var(--wp--preset--color--korostus);
	z-index: 3;
}

.msl-kortti figure,
.msl-kortti .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	margin: 0;
}

/* Kuva elää hienovaraisesti kun kortti on aktiivinen. */
.msl-kortti figure { overflow: hidden; }

.msl-kortti .wp-block-image img {
	transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.msl-kortti:hover .wp-block-image img,
.msl-kortti:focus-within .wp-block-image img { transform: scale(1.12); }

@media (prefers-reduced-motion: reduce) {
	.msl-kortti .wp-block-image img { transition: none; }
	.msl-kortti:hover .wp-block-image img { transform: none; }
}

.msl-lisaa {
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--wp--preset--color--korostus-tumma);
	letter-spacing: 0.04em;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	text-decoration: none;
}

.msl-lisaa::after {
	content: "→";
	transition: transform 0.2s ease;
}

.msl-kortti:hover .msl-lisaa::after { transform: translateX(6px); }


/* -------------------------------------------------------------
   Tarkistuslista (tummalla pohjalla)
------------------------------------------------------------- */

.msl-lista { list-style: none; padding: 0; margin: 0; }

.msl-lista li {
	padding-left: 44px;
	position: relative;
	margin-bottom: 22px;
}

.msl-lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 26px;
	height: 26px;
	border-radius: 4px;
	background-color: var(--wp--preset--color--korostus);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='white'/></svg>") center / 18px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='white'/></svg>") center / 18px no-repeat;
}

.msl-lista strong { display: block; margin-bottom: 4px; }

.msl-lista span { color: rgba(255, 255, 255, 0.65); font-size: 0.93rem; }


/* -------------------------------------------------------------
   Palveluluettelo palvelusivulla

   Tarkoituksella eri näköinen kuin etusivun kuvakortit: tässä
   tehtävä on toimia hakemistona, ei myydä samaa uudestaan.
------------------------------------------------------------- */

.msl-palveluluettelo {
	margin: var(--wp--preset--spacing--40) 0;
	border-top: 1px solid var(--wp--preset--color--raja);
}

.msl-palvelurivi {
	border-bottom: 1px solid var(--wp--preset--color--raja);
	padding: 18px 0;
	transition: padding-left 0.18s ease;
}

.msl-palvelurivi:hover { padding-left: 8px; }

.msl-palvelurivi-nimi {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-bottom: 2px;
}

.msl-palvelurivi-nimi a {
	color: var(--wp--preset--color--teksti);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.msl-palvelurivi-nimi a::after {
	content: "→";
	color: var(--wp--preset--color--korostus);
	transition: transform 0.18s ease;
}

.msl-palvelurivi:hover .msl-palvelurivi-nimi a { color: var(--wp--preset--color--korostus-tumma); }
.msl-palvelurivi:hover .msl-palvelurivi-nimi a::after { transform: translateX(5px); }

.msl-palvelurivi-kuvaus { margin: 0; }


/* -------------------------------------------------------------
   Sertifikaatit ja jäsenyydet

   Nauha alatunnisteen yläpuolella, vaalealla pohjalla. Merkit ovat
   kolmansien osapuolten tunnuksia, joten niitä ei väritetä uudelleen
   eikä rajata; ainoastaan koko on yhtenäistetty.
------------------------------------------------------------- */

.msl-sertifikaatit {
	background: var(--wp--preset--color--vaalea);
	border-top: 1px solid var(--wp--preset--color--raja);
	padding: var(--wp--preset--spacing--40) 24px;
}

.msl-sertifikaatit__sisus {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	text-align: center;
}

.msl-sertifikaatit .msl-silmalappu {
	justify-content: center;
}

.msl-sertifikaatit__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.msl-sertifikaatti img {
	display: block;
	/* Merkit ovat hyvin eri muotoisia: osa lähes neliöitä, INFRAn tunnus
	   kolme kertaa leveämpi kuin korkea. Pelkkä yhteinen korkeus tekisi
	   leveästä tunnuksesta kolme kertaa muita isomman. Molemmat mitat
	   rajataan, ja contain sovittaa tunnuksen laatikkoon vääristämättä. */
	height: 96px;
	width: auto;
	max-width: 190px;
	object-fit: contain;
	/* Merkit ovat värikkäitä ja veisivät muuten huomion sisällöltä.
	   Väri palaa täyteen, kun merkkiä katsotaan. */
	opacity: 0.72;
	transition: opacity 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.msl-sertifikaatti a:hover img,
.msl-sertifikaatti a:focus-visible img,
.msl-sertifikaatti:hover img {
	opacity: 1;
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.msl-sertifikaatti img { transition: opacity 220ms ease; }
	.msl-sertifikaatti a:hover img,
	.msl-sertifikaatti:hover img { transform: none; }
}

@media (max-width: 781px) {
	.msl-sertifikaatit__lista { gap: var(--wp--preset--spacing--30); }
	.msl-sertifikaatti img { height: 76px; max-width: 150px; }
}


/* -------------------------------------------------------------
   Referenssin tietopaneeli
------------------------------------------------------------- */

.msl-tieto-otsikko {
	color: var(--wp--preset--color--teksti-himmea);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 4px;
}

.msl-tieto-arvo {
	font-weight: 600;
	line-height: 1.4;
}

/* Kohteesta toiseen siirtyminen sivun alalaidassa. */
.wp-block-post-navigation-link {
	font-weight: 600;
	font-size: 0.93rem;
	max-width: 22rem;
}

.wp-block-post-navigation-link a { text-decoration: none; }

.wp-block-post-navigation-link a:hover { text-decoration: underline; }


/* -------------------------------------------------------------
   Henkilökortit yhteystiedoissa
------------------------------------------------------------- */

.msl-hlo {
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.msl-hlo figure,
.msl-hlo .wp-block-image {
	margin: 0;
}

.msl-hlo .wp-block-image img {
	width: 100%;
	display: block;
	object-position: center 30%;
}

.msl-hlo h3 { margin-bottom: 4px; }

.msl-hlo-rooli { min-height: 2.6em; margin-bottom: 14px; }

.msl-hlo-yhteys a {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--korostus-tumma);
	text-decoration: none;
	margin-top: 4px;
	/* Pitkä sähköpostiosoite ei saa työntyä kortin ulkopuolelle. */
	overflow-wrap: anywhere;
}

.msl-hlo-yhteys a:hover { text-decoration: underline; }


/* -------------------------------------------------------------
   Referenssikortit — kuva, jonka päällä teksti
------------------------------------------------------------- */

/* Kortti on kuva, jonka päälle teksti asettuu. Artikkelikuvalohko
   viedään taustalle ja teksti nostetaan sen päälle. */
.msl-referenssi {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 4px;
	overflow: hidden;
	color: #fff;
	display: flex;
	align-items: flex-end;
	background: var(--wp--preset--color--brandi);
}

.msl-referenssi .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	margin: 0;
	height: 100%;
}

.msl-referenssi .wp-block-post-featured-image a,
.msl-referenssi .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Tummennus, jotta valkoinen teksti erottuu kuvasta. */
.msl-referenssi::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		0deg,
		rgba(48, 64, 58, 0.92) 8%,
		rgba(48, 64, 58, 0.15) 65%
	);
	pointer-events: none;
}

.msl-referenssi-teksti {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* Kortin otsikko oli asetettu valkoiseksi, mutta se on samalla linkki,
   ja linkin oma tummanoranssi väri voitti sen. Tumma oranssi tumman
   valokuvan päällä on lähes lukukelvoton. Linkit perivät nyt värinsä
   siltä elementiltä, jossa ne ovat. */
.msl-referenssi .wp-block-post-title a,
.msl-referenssi .wp-block-post-title a:hover {
	color: inherit;
	text-decoration: none;
}

.msl-referenssi:hover .wp-block-post-title a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Palvelutyyppi säilyy oranssina, mutta kirkkaammalla sävyllä, joka
   erottuu kuvasta. */
.msl-referenssi-meta,
.msl-referenssi-meta a {
	color: var(--wp--preset--color--korostus);
	text-decoration: none;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------
   Referenssinostot etusivulla — vaihtuva esittely

   Yksi kohde kerrallaan isolla kuvalla. Kolme samankokoista korttia
   vierekkäin jää helposti huomaamatta; iso vaihtuva kuva pysäyttää.

   Toteutus on tavallinen vaakavieritys, johon on lisätty
   kiinnityskohdat. Se toimii sellaisenaan myös ilman skriptejä:
   silloin kohteita selataan sormella tai vierityspalkilla.

   Kohdistus etusivun body-luokkaan eikä kuvion omaan luokkaan:
   WordPress säilöö teeman kuviot välimuistiin, joka ei aina purkaudu
   teemaa päivitettäessä. Etusivulla on vain yksi kyselylohko, joten
   tämä osuu oikeaan kohteeseen riippumatta kuvion versiosta.
------------------------------------------------------------- */

body.home .wp-block-query {
	position: relative;
}

body.home .wp-block-query .wp-block-post-template {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Vierityspalkki pois: selaus tapahtuu nuolilla ja pisteillä. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Reunan yli menevä varjo ei saa leikkautua. */
	padding-bottom: 4px;
}

body.home .wp-block-query .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

body.home .wp-block-query .wp-block-post-template > li {
	flex: 0 0 100%;
	scroll-snap-align: center;
	margin: 0;
}

/* Iso kuva ansaitsee ison otsikon ja väljemmän tekstialueen. */
@media (min-width: 900px) {
	body.home .wp-block-query .msl-referenssi {
		aspect-ratio: 16 / 8;
	}

	body.home .wp-block-query .wp-block-post-title {
		font-size: var(--wp--preset--font-size--otsikko);
		line-height: 1.1;
	}

	body.home .wp-block-query .msl-referenssi-teksti {
		padding: 44px !important;
		max-width: 720px;
	}

	/* Tummennus painottuu vasempaan reunaan, jossa teksti on. */
	body.home .wp-block-query .msl-referenssi::after {
		background: linear-gradient(
			100deg,
			rgba(48, 64, 58, 0.9) 0%,
			rgba(48, 64, 58, 0.6) 46%,
			rgba(48, 64, 58, 0.12) 100%
		);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home .wp-block-query .wp-block-post-template { scroll-behavior: auto; }
}

/* Nuolet. Lisätään skriptillä, joten niitä ei ole ilman JavaScriptiä. */
/* Karusellin slaidit ovat vuorollaan vaakasuunnassa ulkona näkyvistä,
   joten esiintuloanimaatio pitäisi ne piilossa. Osio tulee esiin
   kokonaisuutena, yksittäiset kohteet eivät erikseen. */
.msl-js body.home .wp-block-query .msl-esiin {
	opacity: 1;
	translate: none;
}

.msl-slaidinuoli {
	position: absolute;
	/* Keskitys kuvaan, ei koko lohkoon: pisteet vievät alalaidasta 26 px. */
	top: calc((100% - 26px) / 2);
	transform: translateY(-50%);
	z-index: 4;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--teksti);
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 22px rgba(48, 64, 58, 0.28);
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.msl-slaidinuoli:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.08);
}

.msl-slaidinuoli[disabled] { opacity: 0.35; cursor: default; }
.msl-slaidinuoli--edellinen { left: 16px; }
.msl-slaidinuoli--seuraava { right: 16px; }

@media (min-width: 900px) {
	.msl-slaidinuoli { display: flex; }
}

/* Pisteet kertovat, montako kohdetta on ja missä kohtaa ollaan. */
.msl-slaidipisteet {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 22px;
}

.msl-slaidipiste {
	width: 34px;
	height: 4px;
	border: 0;
	padding: 0;
	border-radius: 2px;
	background: var(--wp--preset--color--raja);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.msl-slaidipiste[aria-current="true"] {
	background: var(--wp--preset--color--korostus);
}

/* Näkyvissä olevan kohteen kuva elää hitaasti koko sen ajan, jonka se
   on esillä. Pysähtynyt valokuva näyttää kuvakaappaukselta; hidas
   liike saa saman kuvan näyttämään siltä, että työmaalla tapahtuu.
   Liike on niin hidas, ettei sitä katso, mutta se tuntuu. */
body.home .wp-block-query .msl-referenssi .wp-block-post-featured-image img {
	transition: scale 900ms ease;
	scale: 1;
}

body.home .wp-block-query li.aktiivinen .wp-block-post-featured-image img {
	animation: msl-hidas-zoom 9s ease-out forwards;
}

@keyframes msl-hidas-zoom {
	from { scale: 1; }
	to   { scale: 1.075; }
}

@media (prefers-reduced-motion: reduce) {
	body.home .wp-block-query li.aktiivinen .wp-block-post-featured-image img {
		animation: none;
	}
}

/* Kohdesivun yläosa samalla periaatteella. */
.msl-refhero {
	position: relative;
	overflow: hidden;
	min-height: 460px;
	display: flex;
	align-items: flex-end;
}

.msl-refhero .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	margin: 0;
	height: 100%;
}

.msl-refhero .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.msl-refhero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		rgba(48, 64, 58, 0.92) 0%,
		rgba(48, 64, 58, 0.72) 50%,
		rgba(48, 64, 58, 0.4) 100%
	);
	pointer-events: none;
}

.msl-refhero-teksti {
	position: relative;
	z-index: 2;
	width: 100%;
}

.msl-referenssi .msl-referenssi-meta {
	color: var(--wp--preset--color--korostus);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.72rem;
}


/* -------------------------------------------------------------
   Alatunniste
------------------------------------------------------------- */

.msl-alatunniste { font-size: 0.93rem; }

/* Vektoritunnuksen oma koko on 1989 pikseliä, eli ilman rajoitusta se
   venyisi palstan levyiseksi. Ylätunnisteella on oma leveytensä, tässä
   on alatunnisteen. */
.msl-alatunniste .wp-block-site-logo img {
	width: 240px;
	max-width: 100%;
	height: auto;
}

.msl-alatunniste h2,
.msl-alatunniste h3,
.msl-alatunniste h4 {
	color: #fff;
	font-size: 0.78rem !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 20px;
}

/* Linkkilistat ilman pallukoita ja sisennystä. Ilman näitä selain
   näyttää ne tavallisina luetteloina, jolloin alatunniste näyttää
   keskeneräiseltä. */
.msl-alatunniste ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: grid;
	gap: 10px;
}

.msl-alatunniste li { margin: 0; }

.msl-alatunniste a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }

.msl-alatunniste a:hover { color: var(--wp--preset--color--korostus); text-decoration: none; }

.msl-alatunniste-alaosa {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.45);
}


/* -------------------------------------------------------------
   Saavutettavuus
------------------------------------------------------------- */

.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 999;
	background: #fff;
	color: var(--wp--preset--color--teksti);
	padding: 12px 20px;
	border-radius: 4px;
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--korostus);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.msl-kortti, .msl-lisaa::after { transition: none; }
	.msl-hero__video { transition: none; }
}


/* -------------------------------------------------------------
   Puhelin ja tabletti
   Työmaalla sivustoa katsotaan puhelimesta, joten kapea näyttö
   ei ole poikkeus vaan tavallisin tapaus.
------------------------------------------------------------- */

@media (max-width: 781px) {

	/* Hero ei saa viedä koko ruutua puhelimessa — sisällön pitää
	   antaa vihje siitä, että sivua kannattaa vierittää. */
	.msl-hero {
		min-height: 78svh;
	}

	.msl-hero h1 { max-width: 100%; }

	/* Neljä lukua allekkain venyttäisi heron kohtuuttoman pitkäksi.
	   Kahden sarakkeen ruudukko pitää ne yhdessä silmäyksessä. */
	.msl-luvut.wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px 24px;
	}

	.msl-luvut.wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
	}

	.msl-luku strong { font-size: 1.6rem; }
	.msl-luku span { font-size: 0.72rem; }

	/* Osion otsikon "kaikki palvelut" -painike omalle rivilleen. */
	.msl-osio-otsikko {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	/* Tarkistuslistan merkit hieman pienemmiksi, jotta teksti saa tilaa. */
	.msl-lista li { padding-left: 38px; }
	.msl-lista li::before { width: 22px; height: 22px; }

	/* Referenssikortit ovat pystykuvia — koko ruudun korkuisina ne
	   veisivät liikaa tilaa, joten madalletaan hieman. */
	.msl-referenssi { aspect-ratio: 4 / 4.4; }

	/* Alatunnisteen sarakkeet allekkain, tiiviimmällä rivivälillä. */
	.msl-alatunniste .wp-block-columns { gap: 36px; }
	.msl-alatunniste ul { line-height: 1.9 !important; }
}

@media (max-width: 781px) {
	/* Painikkeen teksti ei saa katketa monelle riville — se kasvattaisi
	   ylätunnisteen korkeutta ja veisi tilaa sisällöltä. */
	.msl-ylatunniste .wp-block-button__link {
		white-space: nowrap;
		padding: 10px 18px;
		font-size: 0.85rem;
	}

	.msl-ylatunniste .wp-block-buttons { flex: none; }

	/* Kapealla näytöllä logo ei mahdu työpöytäkokoiseksi. Kutistuminen
	   säilyy silti, koska juuri puhelimessa ylätunnisteen viemä tila
	   on sisällöltä pois. */
	.msl-ylatunniste .wp-block-site-logo img { max-width: 172px; }
	.msl-ylatunniste.kutistunut .wp-block-site-logo img { max-width: 126px; }

	/* Laatan leveys seuraa tunnuksen leveyttä ja vinous palkin
	   korkeutta, joka on puhelimessa 59 ja kutistuneena 54 pikseliä. */
	.msl-ylatunniste { --msl-laatta: 172px; --msl-vino: 66px; }
	.msl-ylatunniste.kutistunut { --msl-laatta: 126px; --msl-vino: 60px; }
}

@media (max-width: 400px) {
	/* Kaikkein kapeimmilla näytöillä logo pienenee vielä, jotta
	   painike ja valikkonappi mahtuvat samalle riville. */
	.msl-ylatunniste .wp-block-site-logo img { max-width: 128px; }
	.msl-ylatunniste.kutistunut .wp-block-site-logo img { max-width: 104px; }

	.msl-ylatunniste { --msl-laatta: 128px; --msl-vino: 60px; }
	.msl-ylatunniste.kutistunut { --msl-laatta: 104px; --msl-vino: 56px; }

	.msl-ylatunniste .wp-block-button__link {
		padding: 9px 14px;
		font-size: 0.8rem;
	}

	.msl-silmalappu { font-size: 0.72rem; }
}