/*
 * Small Hero II (acf/tke-small-hero-ii)
 *
 * Kapea hero: vasemmalla teksti (Above title text ja Title), sen oikealla puolella nappulat. Taustana väri ja
 * valinnainen kuva. Small title on valkoisessa kortissa alueen alareunassa ja valikko väliviivan alla, kuten Hero II:ssa.
 * Kortissa on otsikon alla valinnaisesti Small text (.small-hero-ii-intro) ja Tags (.small-hero-ii-tags), jotka ovat
 * vain tässä lohkossa (Hero II:ssa niitä ei ole). Alueen korkeuden voi asettaa kentällä Height (CSS-muuttuja
 * --small-hero-ii-height).
 *
 * TÄMÄ ON HERO II:N KOPIO (blocks/hero-ii/style.css) ilman tekstisaraketta ja kuvaa. Yhteiset osat ovat samat
 * molemmissa tiedostoissa: taustakuva, Above title, vaalean tekstin nappulat, valikko ja Small title -kortti
 * (ilman Small textiä ja Tagsia). Jos muutat jotain niistä toisessa lohkossa ja haluat saman toiseenkin, tee muutos
 * molempiin. Luokkien etuliite on tässä lohkossa small-hero-ii- (Hero II:ssa hero-ii-).
 *
 * RIIPPUVUUDET TOIMITTAJAN TEEMAAN (tarkista teeman päivityksen jälkeen, ks. README.md):
 *   - luokat:    .block, .container, .title, .h1, .h2, .text-center,
 *                .buttons, .button-item, .highlight, .button, .screen-reader-text
 *   - muuttujat: --morgan-font-size-large, --morgan-font-base-size, --morgan-font-family-alt, --morgan-block-link-color,
 *                --morgan-block-link-hover-color, --morgan-block-link-outline-color,
 *                --morgan-color-button-* (bg, border, border-hover, text, bg-hover, text-hover, outline)
 *   - nappien ulkoasu: teeman .site-main .button ja .button-item.highlight sekä tke.css:n nappulasäännöt
 *   - valikko: WordPressin wp_nav_menu()-markup (ul > li.menu-item > a), luokka .current-menu-item ja a[aria-current="page"]
 *   - .block .container antaa sivupaddingin sekä ylä- ja alapaddingin
 *
 * KORKEUS: kenttä Height on alueen (.small-hero-ii-main, valikko mukaan lukien) vähimmäiskorkeus pikseleinä. Alue ei
 * ole sitä matalampi, mutta kasvaa, jos sisältö tarvitsee enemmän tilaa (esim. kapealla näytöllä). Teksti ja nappulat
 * keskitetään pystysuunnassa valikon yläpuoliseen tilaan, ja valikko pysyy alareunassa. Ilman korkeutta alue on
 * sisällön korkuinen. Small title -kortti peittää alueen alareunaa 4rem, ja tämä tila on varattu valikon tai sisällön
 * alapaddingissa, joten keskitys ei osu kortin alle.
 *
 * LEVEYS: lohko on reunasta reunaan, koska teeman .block.block antaa lohkoille negatiiviset sivumarginaalit
 * (calc(var(--morgan-wrap-padding) * -1)), jotka kumoavat sivun sisältöalueen sivupaddingin. Tässä tiedostossa
 * EI ylikirjoiteta noita marginaaleja. Sisältö (.small-hero-ii-container) pysyy silti sivun sisältöleveydessä,
 * samassa linjassa muun sivun kanssa.
 *
 * VALIKON LEVEYS: valikko (.small-hero-ii-menu) ja Small title -kortti (.small-hero-ii-card) ovat saman levyisiä (90 %,
 * enintään 96,25rem), jotta valikon väliviiva ja kortti ovat samassa linjassa. Leveys on yhteinen sääntö, ks. alempana.
 *
 * SPESIFISYYS: kaikki säännöt alkavat tuplaluokalla .block-small-hero-ii.block-small-hero-ii, kuten Hero II:ssa ja teemassa.
 * Näin säännöt voittavat teeman säännöt latausjärjestyksestä riippumatta, esim. teeman .block .container (0,2,0) vs.
 * .block-small-hero-ii.block-small-hero-ii .small-hero-ii-container (0,3,0). Jos jokin sääntö ei tunnu vaikuttavan,
 * vertaa ensin spesifisyyttä selaimen kehittäjätyökaluilla.
 *
 * LATAUS: WordPress upottaa pienet lohko-CSS-tiedostot sivun HTML:ään <style>-elementtinä
 * (id="acf-tke-small-hero-ii-style-inline-css"), joten erillistä CSS-tiedostoa ei välttämättä näy verkkopyynnöissä.
 */

/* Värillinen alue. Väri tulee lohkon style-attribuutista (--small-hero-ii-bg), korkeus muuttujasta
   --small-hero-ii-height. Ilman väriä ei taustaa, ilman korkeutta ei vähimmäiskorkeutta. Alue on pystysuuntainen
   flex-säiliö: sisältöalue (.small-hero-ii-container) kasvaa täyttämään vapaan tilan ja valikko jää alareunaan. */
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-main {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: var(--small-hero-ii-height, 0);
	background-color: var(--small-hero-ii-bg, transparent);
}

/* Taustakuva. Jos kuvaa ei ole, tätä elementtiä ei tulosteta ja näkyy vain taustaväri.
   Kuva on <img>-elementti, joten se ei toistu. Sovitus tehdään object-fit- ja object-position-ominaisuuksilla.
   Alueen taustaväri näkyy kuvan takana, jos kuva ei peitä koko aluetta. */
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-bg {
	position: absolute;
	z-index: 0;
	inset: 0;
	overflow: hidden;
}

/* Sijainti tulee lohkon style-attribuutin muuttujasta --small-hero-ii-bg-position (oletus Center Center). */
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-bg .img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--small-hero-ii-bg-position, center center);
}

/* "Stretch to fit": kuva peittää koko alueen (rajautuu tarvittaessa, ei vääristy). */
.block-small-hero-ii.block-small-hero-ii.bg-fit-cover .small-hero-ii-bg .img {
	object-fit: cover;
}

/* "Scale to fit": koko kuva näkyy aina. */
.block-small-hero-ii.block-small-hero-ii.bg-fit-contain .small-hero-ii-bg .img {
	object-fit: contain;
}

/* "No repeat": kuva alkuperäisessä koossaan, kerran. */
.block-small-hero-ii.block-small-hero-ii.bg-fit-none .small-hero-ii-bg .img {
	object-fit: none;
}

/* Sisältö taustakuvan päällä. Sisältöalue kasvaa täyttämään alueen vapaan tilan (kun korkeus on asetettu), ja
   rivi (teksti + nappulat) keskitetään siinä pystysuunnassa. */
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-container {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	overflow: visible;
}

/* Small title -kortti peittää alueen alareunaa 4rem, joten sisällölle jätetään sen verran lisätilaa. */
.block-small-hero-ii.block-small-hero-ii.has-small-title .small-hero-ii-container {
	padding-bottom: calc(clamp(2rem, 6vw, 5rem) + 4rem);
}

/* Valikko on omana elementtinään sisältöalueen alla. Sisältöalueen alapadding on silloin vain väli väliviivaan (2,5rem).
   Alareunan tila ja Small title -kortin peittämä 4rem tulevat valikolta (ks. .small-hero-ii-menu). */
.block-small-hero-ii.block-small-hero-ii.has-menu .small-hero-ii-container,
.block-small-hero-ii.block-small-hero-ii.has-menu.has-small-title .small-hero-ii-container {
	padding-bottom: 2.5rem;
}

/* Asettelu: mobiilissa (ja alle 64em) teksti ja sen alla nappulat vasemmalla, leveällä näytöllä teksti vasemmalla ja
   nappulat sen oikealla puolella samalla rivillä, pystysuunnassa keskitettynä. */
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2rem;
}

@media print, screen and (min-width: 64em) {
	.block-small-hero-ii.block-small-hero-ii .small-hero-ii-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 3rem;
	}

	/* Teksti käyttää kaiken tilan, jonka nappulat jättävät. min-width: 0 antaa pitkän otsikon rivittyä. */
	.block-small-hero-ii.block-small-hero-ii .small-hero-ii-text {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* Teksti vasemmalla. Tekstilohkon ylä- ja alamarginaali nollataan, jotta lohko keskittyy pystysuunnassa tarkasti
   (teeman otsikolla on alamarginaali). Tila alueen ylä- ja alareunaan tulee sisältöalueen paddingista. */
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-text {
	text-align: left;
}

.block-small-hero-ii.block-small-hero-ii .small-hero-ii-text > :first-child {
	margin-top: 0;
}

.block-small-hero-ii.block-small-hero-ii .small-hero-ii-text > :last-child {
	margin-bottom: 0;
}

/* Above title text näkyy sellaisena kuin se on kirjoitettu. Isoja kirjaimia ei pakoteta (toisin kuin Herossa). */
.block-small-hero-ii.block-small-hero-ii .above-title {
	margin-top: 0;
	margin-bottom: 0;
	font-size: var(--morgan-font-size-large);
}

.block-small-hero-ii.block-small-hero-ii .above-title::before {
	content: "";
	display: inline-block;
	width: 2.75rem;
	height: 0.125rem;
	margin-right: 0.625rem;
	background-color: #ffce00;
	vertical-align: middle;
}

/* Nappulat. Markup (ul.buttons > li.button-item > a.button, .highlight) ja ulkoasu tulevat teemasta ja sivuston
   tke.css:stä. Tässä vain sijoittelu: kapealla näytöllä tekstin alla vasemmalla, leveällä näytöllä tekstin oikealla
   puolella, rivin oikeassa reunassa. Rivi rivittyy, jos nappulat eivät mahdu vierekkäin. */
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-row > .buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 1em;
	margin: 0;
}

@media print, screen and (min-width: 64em) {
	.block-small-hero-ii.block-small-hero-ii .small-hero-ii-row > .buttons {
		flex: 0 0 auto;
		justify-content: flex-end;
		margin-left: auto;
	}
}

/* Valikon ja Small title -kortin leveys on sama (90 %, enintään 96,25rem), joten valikon väliviiva ja kortti ovat
   samassa linjassa. Leveys muutetaan tässä, jolloin molemmat muuttuvat. */
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-menu,
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-card {
	width: 90%;
	max-width: 96.25rem;
	margin-right: auto;
	margin-left: auto;
}

/* Valikko (valinnainen). Tulostetaan vain, kun lohkolle on valittu valikko (kenttä Menu). Rakenne:
   nav.small-hero-ii-menu > ul.small-hero-ii-menu-list > li.menu-item > a. Nav on värillisen alueen
   (.small-hero-ii-main) oma lapsi sisältöalueen (.small-hero-ii-container) jälkeen, ei sen sisällä, jotta sillä voi olla
   eri leveys kuin sisällöllä, ja flex-säiliössä se jää alareunaan. Yläreunassa väliviiva ja sen alla linkit vierekkäin.
   WordPress lisää nykyisen sivun linkille luokan .current-menu-item (li) ja attribuutin aria-current="page" (a), ja se
   näytetään lihavoituna ja keltaisella alaviivalla. Väliviiva ja hover-viiva käyttävät tekstin väriä (currentcolor),
   joten ne toimivat sekä vaalealla että tummalla tekstillä. z-index pitää valikon taustakuvan päällä. Alapadding on
   sama kuin sisällön alapadding. */
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-menu {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	padding-bottom: clamp(2rem, 6vw, 5rem);
	border-top: 0.125rem solid rgba(128, 128, 128, 0.6);
	border-top-color: color-mix(in srgb, currentcolor 45%, transparent);
}

/* Valikko ja Small title yhdessä: kortti peittää alueen alareunaa 4rem, joten valikon ja kortin väliin jätetään vain
   pieni väli (1,5rem). Valikko jää heti kortin yläpuolelle. */
.block-small-hero-ii.block-small-hero-ii.has-small-title .small-hero-ii-menu {
	padding-bottom: calc(1.5rem + 4rem);
}

.block-small-hero-ii.block-small-hero-ii .small-hero-ii-menu-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.75rem;
	margin: 0;
	padding: 1.25rem 0 0;
	list-style: none;
}

@media print, screen and (min-width: 48em) {
	/* Linkkien väli kasvaa teeman perusfonttikoon mukana (48, 51 ja 54 px). */
	.block-small-hero-ii.block-small-hero-ii .small-hero-ii-menu-list {
		column-gap: calc(var(--morgan-font-base-size, 1rem) * 3);
	}
}

.block-small-hero-ii.block-small-hero-ii .small-hero-ii-menu-list > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.block-small-hero-ii.block-small-hero-ii .small-hero-ii-menu-list a {
	display: block;
	padding: 0.25rem 0 0.375rem;
	border-bottom: 0.1875rem solid transparent;
	color: inherit;
	font-family: var(--morgan-font-family-alt, inherit);
	font-size: calc(var(--morgan-font-base-size, 1rem) * 1.125);
	font-weight: 400;
	line-height: 1.3;
	text-decoration: none;
}

/* Hover ja näppäimistöfokus: alaviiva tekstin värillä. Väri ja alleviivaus asetetaan tässäkin, jotta teeman
   linkkien hover-tyylit eivät voita. */
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-menu-list a:hover,
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-menu-list a:focus-visible {
	border-bottom-color: currentcolor;
	color: inherit;
	text-decoration: none;
}

/* Näppäimistöfokus: näkyvä kehys tekstin värillä. Teeman oletuskehys on tumma violetti, joka ei näy tummalla taustalla. */
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-menu-list a:focus-visible {
	outline: 0.125rem solid currentcolor;
	outline-offset: 0.125rem;
}

/* Nykyinen sivu. Tämä sääntö on hover-sääntöä myöhemmin, jotta keltainen viiva pysyy myös hoverissa. */
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-menu-list .current-menu-item > a,
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-menu-list a[aria-current="page"] {
	border-bottom-color: #ffce00;
	font-weight: 700;
}

/* Vaalea teksti tummalla taustalla. Tumma teksti käyttää teeman oletusvärejä, joten sille ei tarvita sääntöjä. */
.block-small-hero-ii.block-small-hero-ii.text-light .small-hero-ii-main {
	--morgan-block-link-color: #ffce00;
	--morgan-block-link-hover-color: #ffffff;
	--morgan-block-link-outline-color: #ffce00;
	color: #ffffff;
}

.block-small-hero-ii.block-small-hero-ii.text-light .small-hero-ii-main .title,
.block-small-hero-ii.block-small-hero-ii.text-light .small-hero-ii-main .above-title {
	color: #ffffff;
}

/* Vaalea teksti: tavalliset nappulat valkoisella reunalla ja tekstillä, kuten teeman tummissa (.theme-dark)
   lohkoissa. Muuten ne olisivat tke.css:n violetit ja katoaisivat tummalle taustalle. Highlight-nappulat
   käyttävät teeman ja tke.css:n highlight-tyyliä sellaisenaan. Muuttujat asetetaan suoraan nappulaan,
   koska tke.css asettaa ne siihen, ja valitsin on spesifisempi kuin tke.css:n. */
.block-small-hero-ii.block-small-hero-ii.text-light .small-hero-ii-main .button-item:not(.highlight) .button.button {
	--morgan-color-button-bg: transparent;
	--morgan-color-button-border: #ffffff;
	--morgan-color-button-border-hover: #ffffff;
	--morgan-color-button-text: #ffffff;
	--morgan-color-button-bg-hover: #ffffff;
	--morgan-color-button-text-hover: #311b33;
	--morgan-color-button-outline: #ffce00;
}

/* Small title: valkoinen kortti, joka asettuu värillisen alueen alareunan päälle. Leveys on yhteinen valikon kanssa
   (ks. .small-hero-ii-menu yllä). */
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-card {
	z-index: 5;
	margin-top: -4rem;
	border-radius: 0.625rem;
	background-color: #ffffff;
	color: #000000;
}

.block-small-hero-ii.block-small-hero-ii .small-hero-ii-card .title {
	margin-bottom: 0;
}

/* Small text: kortin otsikon alla oleva teksti (WYSIWYG-kenttä). Näyttää samalta kuin teeman Description-teksti
   (.block .header .description, esim. Columns-lohkon Description): sama koko (--morgan-font-size-large), sama väri
   (kortin musta, peritään), sama rivikorkeus ja keskitys, eikä rivejä tasata (ei text-wrap: balance), joten rivitys on
   sama. Teeman p-marginaali (1.5em) nollataan.
   Leveys (48em ja leveämmillä näytöillä): teemassa Description on 80 % otsikkoalueesta, joka on 80 % sisältöleveydestä
   (enintään 102,5rem), eli 0,64 × sisältöleveys, enintään 65,6rem. Kortti on 90 % leveä (ks. yhteinen leveyssääntö yllä) ja
   sillä on sivupadding (--morgan-wrap-padding) molemmin puolin, joten sama absoluuttinen leveys on kortin sisäleveydestä
   0,64 / 0,9 = 71,1111 % lisättynä 0,64 × 2 × (1 / 0,9 - 1) = 0,1422 sivupaddingia. Näin rivitys on sama kuin Descriptionilla
   joka leveydellä (tarkistettu 768-2600 px:n välillä). Kapeammalla näytöllä teksti käyttää kortin koko sisäleveyden. Jos
   teema muuttaa Descriptionin leveyttä tai kortin leveyttä muutetaan, päivitä nämä luvut. */
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-intro {
	width: 100%;
	margin: 1.5em auto 0;
	color: inherit;
	font-size: var(--morgan-font-size-large);
	line-height: 1.5;
	text-align: center;
}

@media print, screen and (min-width: 48em) {
	.block-small-hero-ii.block-small-hero-ii .small-hero-ii-intro {
		width: min(calc(71.1111% + 0.1422 * var(--morgan-wrap-padding, 2rem)), 65.6rem);
	}
}

.block-small-hero-ii.block-small-hero-ii .small-hero-ii-intro p {
	margin: 0;
}

.block-small-hero-ii.block-small-hero-ii .small-hero-ii-intro p + p {
	margin-top: 0.75em;
}

/* Luettelot (WYSIWYG-kentän bullet- ja numerolistat) keskitetään lohkona, rivit tasataan vasemmalle. */
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-intro :is(ul, ol) {
	display: table;
	margin: 0.75em auto 0;
	text-align: left;
}

/* Tags: yksi rivi lyhyitä sanoja (esim. CAN · CAN FD · CANopen · SAE J1939), keskitettynä Small textin alla. Jokainen sana on
   oma li-elementtinsä (ei rivity kesken sanan), ja pisteet ovat CSS:llä tehtyjä erottimia: content-arvon jälkimmäinen
   versio ("·" / "") kertoo ruudunlukijalle, ettei erottimella ole tekstiä. Jos rivi ei mahdu, se rivittyy sanojen välistä
   ja piste jää edellisen sanan perään. Isoja kirjaimia ei pakoteta (CANopen pysyy kirjoitetussa muodossa). Kapealla
   näytöllä fontti ja kirjainväli ovat pienemmät, jotta rivi mahtuu yhdelle riville tavallisessa puhelimessa. */
.block-small-hero-ii.block-small-hero-ii .small-hero-ii-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.25rem 0.7em;
	margin: 1.75em 0 0;
	padding: 0;
	color: #612166;
	font-family: var(--morgan-font-family-alt, inherit);
	font-size: calc(var(--morgan-font-base-size, 1rem) * 0.875);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.5;
	list-style: none;
}

@media print, screen and (min-width: 48em) {
	.block-small-hero-ii.block-small-hero-ii .small-hero-ii-tags {
		font-size: var(--morgan-font-base-size, 1rem);
		letter-spacing: 0.1em;
	}
}

.block-small-hero-ii.block-small-hero-ii .small-hero-ii-tags > li {
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.block-small-hero-ii.block-small-hero-ii .small-hero-ii-tags > li:not(:last-child)::after {
	content: "\00b7";
	content: "\00b7" / "";
	margin-left: 0.7em;
}