/*
 * Hero, hakuosio ja seo-teksti/accordion ovat kolme ERI diviä, joilla on
 * kullakin OMA riippumaton leveysrajoitus (samat luvut, mutta ei jaettua
 * kääretta) — accordionin sisällä tapahtuva korkeuden muutos ei siis voi
 * missään tapauksessa vaikuttaa hakuosion tai heron leveyteen, koska ne
 * eivät jaa mitään elementtiä sen kanssa jonka koko riippuisi sisällöstä.
 */
.rt-mp__hakuosio,
.rt-mp__seo-teksti {
	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.rt-mp__hakuosio {
	padding: clamp(20px, 4vw, 32px) 24px;
}

.rt-mp__seo-teksti {
	padding: 0 24px clamp(32px, 5vw, 56px);
}

.rt-mp__hakuosio-ruudukko {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	align-items: start;
}

/*
 * min-width:0 kumoaa gridin oletuksen (min-width:auto), joka antaa
 * sarakkeelle sen sisällön min-content-leveyden vaikka 1fr sanoisi
 * muuta. Ilman tätä lista-sarake levenee osoiterivien mukaan ja
 * kartta jää puolikkaaksi kapeammaksi kuin listasarake.
 */
.rt-mp__lista,
.rt-mp__kartta {
	min-width: 0;
}

@media (max-width: 800px) {
	.rt-mp__hakuosio-ruudukko {
		grid-template-columns: 1fr;
	}
}

.rt-mp__lista {
	max-height: 46rem;
	overflow-y: auto;
}

/*
 * Otsikkovärit ja -tasaus eivät tule perityn Breakdance-osion mukana
 * (se on suunniteltu tummalle taustalle, valkoinen ja keskitetty).
 * Asetetaan samat värit/fontit kuin rt-artikkeli.css:ssä, koska tämä
 * moduuli ei käytä .rt-artikkeli-luokkaa eikä siten sen muuttujia.
 */
.rt-mp__hakuosio,
.rt-mp__seo-teksti,
.rt-mp__hakuosio h1,
.rt-mp__hakuosio h2,
.rt-mp__hakuosio h3,
.rt-mp__seo-teksti h1,
.rt-mp__seo-teksti h2,
.rt-mp__seo-teksti h3,
.rt-mp__seo-teksti p {
	color: #191919;
	text-align: left;
}

/*
 * Breakdance generoi sivukohtaisen post-331.css:n joka osuu h2/h3:iin
 * spesifisyydellä jonka pelkkä .rt-mp__seo-teksti h3 ei voita (tumma
 * teksti näkyi silti valkoisena, väärällä fontilla). Nostetaan
 * spesifisyyttä samalla .rt-mp__seo-teksti.rt-mp__seo-teksti-tempulla
 * kuin artikkeli.css käyttää .rt-artikkeli.rt-artikkeli:lle, ja
 * varmistetaan !importantilla koska kyse on ulkopuolisen generoidun
 * CSS:n kumoamisesta, ei tavallisesta kaskadista.
 */
.rt-mp__hakuosio.rt-mp__hakuosio h2,
.rt-mp__seo-teksti.rt-mp__seo-teksti h2,
.rt-mp__seo-teksti.rt-mp__seo-teksti h3 {
	font-family: 'ITCMachineProBold', Impact, sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	line-height: 1.25 !important;
	color: #191919 !important;
	margin: 0 !important;
}

.rt-mp__hakuosio.rt-mp__hakuosio h2,
.rt-mp__seo-teksti.rt-mp__seo-teksti h2 {
	font-size: clamp(24px, 4vw, 32px) !important;
	margin: 0 0 20px !important;
}

.rt-mp__seo-teksti.rt-mp__seo-teksti h3 {
	font-size: clamp(18px, 1rem + .4vw, 21px) !important;
	margin: 28px 0 12px !important;
}

.rt-mp__seo-teksti.rt-mp__seo-teksti p {
	color: #555 !important;
	line-height: 1.7 !important;
	margin: 0 0 1rem !important;
	text-align: left !important;
}

/*
 * Hero pysyy artikkeli.css:n oletusarvoissa (max-width 1180px, sama kuin
 * .rt-mp__hakuosio tässä tiedostossa) tarkoituksella. Koska tällä sivulla
 * ei ole .rt-artikkeli__sisalto-elementtiä, js/artikkeli.js:n
 * kohdistaOtsikko() ei lisää padding-vasenta, jolloin otsikon ja
 * hakuosion vasen reuna on sama 24px ilman erillistä sääntöä.
 */

/*
 * Heron reunasta-reunaan-levitys (artikkeli.css + artikkeli.js:n levita())
 * kuuntelee itse window resize -tapahtumaa ja laskee marginaalit uusiksi
 * joka kerta — se EI ollutkaan kerran mitattu, ei tarvitse kumota.
 * Kartan harmaa aukko accordionin avatessa korjataan sen omalla
 * ResizeObserverilla moduulin <script>-tagissa (dispatchaa synteettisen
 * resize-eventin, jonka Leaflet jo osaa käsitellä).
 */