/*
 * Artikkelien yhteiset tyylit.
 *
 * Kaikki koodilla rakennetut artikkelit käyttävät näitä — omaa CSS:ää ei
 * kirjoiteta artikkelikohtaisesti. Jos kuvio esiintyy toisen kerran, se
 * kuuluu tänne.
 *
 * Breakdancen zero-teema ei tyylitä peruselementtejä — sen CSS osuu vain
 * .bde-*-luokkiin. Siksi väri, fontti, koko ja kontaineri asetetaan tässä
 * eksplisiittisesti eikä luoteta perimiseen.
 *
 * Luokka on toistettu (.rt-artikkeli.rt-artikkeli) tarkoituksella:
 * global-settings.css asettaa `.breakdance { color: #FFF }` ja
 * `.breakdance h3 { color: #FFF }`. Yhdellä luokalla säännöt olisivat samaa
 * spesifisyyttä ja Breakdancen CSS latautuu tämän jälkeen. Toistettu luokka
 * voittaa järjestyksestä riippumatta eikä kytke tätä Breakdanceen.
 * Poistuu kun kuori siirtyy koodiin.
 */

.rt-artikkeli.rt-artikkeli {
	--rt-tausta: #f1efe8;
	--rt-kortti: #fff;
	--rt-raja: rgba(0, 0, 0, .12);
	--rt-raja-ohut: rgba(0, 0, 0, .08);
	--rt-teksti: #191919;
	--rt-leipa: #555;
	--rt-vaimea: #7c7c74;
	--rt-numero: #a3a39a;
	--rt-keltainen: #ffed00;
	--rt-linkki: #1a6db8;
	--rt-punainen-raja: rgba(226, 0, 26, .35);
	--rt-punainen-tausta: rgba(226, 0, 26, .06);

	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(28px, 5vw, 44px) 24px 72px;

	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 4vw, 56px);
	align-items: flex-start;

	color: var(--rt-teksti);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: 16.5px;
	line-height: 1.7;
	text-align: left;
}

.rt-artikkeli.rt-artikkeli *,
.rt-artikkeli.rt-artikkeli *::before,
.rt-artikkeli.rt-artikkeli *::after { box-sizing: inherit; }

/* ---------- Sisällysluettelo ---------- */

.rt-artikkeli.rt-artikkeli .rt-artikkeli__sisallys {
	flex: 1 1 200px;
	max-width: 270px;
	min-width: 0;
	position: sticky;
	top: 72px;
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	border-top: 1px solid rgba(0, 0, 0, .14);
}

.rt-artikkeli.rt-artikkeli .rt-artikkeli__sisallys-otsikko {
	font-family: 'ITCMachineProBold', Impact, sans-serif;
	font-size: 12px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: #8c8c84;
	margin: 0;
	padding: 14px 0 10px;
}

.rt-artikkeli.rt-artikkeli .rt-artikkeli__sisallys-rivi {
	display: flex;
	gap: 10px;
	font-size: 14px;
	line-height: 1.35;
	padding: 9px 0;
	color: var(--rt-teksti);
	text-decoration: none;
	border-top: 1px solid var(--rt-raja-ohut);
}

.rt-artikkeli.rt-artikkeli .rt-artikkeli__sisallys-rivi:last-child {
	border-bottom: 1px solid var(--rt-raja-ohut);
}

.rt-artikkeli.rt-artikkeli .rt-artikkeli__sisallys-rivi:hover,
.rt-artikkeli.rt-artikkeli .rt-artikkeli__sisallys-rivi:focus-visible {
	color: #000;
	background: rgba(0, 0, 0, .035);
}

.rt-artikkeli.rt-artikkeli .rt-artikkeli__sisallys-numero {
	color: var(--rt-numero);
	flex: none;
	width: 18px;
}

/* ---------- Artikkeli ---------- */

.rt-artikkeli.rt-artikkeli .rt-artikkeli__sisalto {
	flex: 1 1 440px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(36px, 5vw, 48px);
}

.rt-artikkeli.rt-artikkeli section { scroll-margin-top: 120px; }

.rt-artikkeli.rt-artikkeli h2 {
	font-family: 'ITCMachineProBold', Impact, sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 4.4vw, 32px);
	/*
	 * Handoffissa 1.15. Se toimii lyhyillä otsikoilla, mutta tämän sivun
	 * otsikot ovat pitkiä ja rivittyvät kahdelle tai kolmelle riville,
	 * jolloin versaali ITCMachine ahtautuu.
	 */
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--rt-teksti);
	margin: 0;
	text-wrap: balance;
}

/*
 * Handoff määritteli h3:lle 16px, mutta se on pienempi kuin leipäteksti
 * (16,5px) — alaotsikko luki pienempänä kuin teksti jota se otsikoi.
 * Nostettu selvästi leipätekstin yläpuolelle.
 */
.rt-artikkeli.rt-artikkeli h3 {
	font-family: 'ITCMachineProBold', Impact, sans-serif;
	font-weight: 700;
	font-size: clamp(19px, 1rem + .5vw, 22px);
	line-height: 1.25;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--rt-teksti);
	margin: 28px 0 12px;
}

.rt-artikkeli.rt-artikkeli .rt-kortti h3 {
	font-size: clamp(17px, .95rem + .3vw, 19px);
	margin: 0 0 12px;
}

.rt-artikkeli.rt-artikkeli p {
	color: var(--rt-leipa);
	margin: 0 0 1rem;
}

.rt-artikkeli.rt-artikkeli p:last-child { margin-bottom: 0; }

.rt-artikkeli.rt-artikkeli .rt-artikkeli__ingressi { margin: 14px 0 0; }

.rt-artikkeli.rt-artikkeli strong,
.rt-artikkeli.rt-artikkeli b {
	font-weight: 700;
	color: var(--rt-teksti);
}

.rt-artikkeli.rt-artikkeli em,
.rt-artikkeli.rt-artikkeli i { font-style: italic; }

.rt-artikkeli.rt-artikkeli a {
	color: var(--rt-linkki);
	text-decoration: underline;
	text-underline-offset: .15em;
}

.rt-artikkeli.rt-artikkeli a:hover,
.rt-artikkeli.rt-artikkeli a:focus-visible { color: #000; }

.rt-artikkeli.rt-artikkeli ul,
.rt-artikkeli.rt-artikkeli ol {
	padding-left: 20px;
	margin: 0 0 1rem;
	font-size: 15px;
	line-height: 1.7;
	color: var(--rt-leipa);
}

.rt-artikkeli.rt-artikkeli ul { list-style: disc; }
.rt-artikkeli.rt-artikkeli ol { list-style: decimal; }
.rt-artikkeli.rt-artikkeli li { display: list-item; margin: 0 0 .5rem; }

/* ---------- Korttiruudukko ---------- */

.rt-artikkeli.rt-artikkeli .rt-kortit {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 14px;
	margin-top: 20px;
}

.rt-artikkeli.rt-artikkeli .rt-kortti {
	background: var(--rt-kortti);
	border: 1px solid var(--rt-raja);
	border-radius: 12px;
	padding: 20px;
}

.rt-artikkeli.rt-artikkeli .rt-kortti__lappu {
	font-family: 'ITCMachineProBold', Impact, sans-serif;
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--rt-vaimea);
	margin: 0;
}

.rt-artikkeli.rt-artikkeli .rt-kortti__arvo {
	font-family: 'ITCMachineProBold', Impact, sans-serif;
	font-size: 26px;
	line-height: 1.05;
	color: var(--rt-teksti);
	margin: 10px 0 0;
}

.rt-artikkeli.rt-artikkeli .rt-kortti p {
	font-size: 14.5px;
	line-height: 1.6;
	margin: 10px 0 0;
}

.rt-artikkeli.rt-artikkeli .rt-kortti ul,
.rt-artikkeli.rt-artikkeli .rt-kortti ol { margin: 10px 0 0; }

.rt-artikkeli.rt-artikkeli .rt-kortti__huomio { font-size: 14.5px; }

/* ---------- Numeroidut rivit ---------- */

.rt-artikkeli.rt-artikkeli .rt-rivit {
	border-top: 1px solid var(--rt-raja);
	margin-top: 18px;
}

.rt-artikkeli.rt-artikkeli .rt-rivit--kortti {
	border: 1px solid var(--rt-raja);
	border-radius: 14px;
	overflow: hidden;
	background: var(--rt-kortti);
	margin-top: 20px;
}

.rt-artikkeli.rt-artikkeli .rt-rivi {
	display: flex;
	gap: 16px;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px solid var(--rt-raja-ohut);
}

.rt-artikkeli.rt-artikkeli .rt-rivit--kortti .rt-rivi { padding: 16px 18px; }
.rt-artikkeli.rt-artikkeli .rt-rivit--kortti .rt-rivi:last-child { border-bottom: 0; }

.rt-artikkeli.rt-artikkeli .rt-rivi > div { min-width: 0; }

.rt-artikkeli.rt-artikkeli .rt-rivi__numero {
	font-family: 'ITCMachineProBold', Impact, sans-serif;
	font-size: 18px;
	color: var(--rt-numero);
	flex: none;
	width: 26px;
}

.rt-artikkeli.rt-artikkeli .rt-rivit--kortti .rt-rivi__numero { font-size: 20px; }

.rt-artikkeli.rt-artikkeli .rt-rivi__otsikko {
	font-size: 16.5px;
	font-weight: 700;
	color: var(--rt-teksti);
	margin: 0;
}

.rt-artikkeli.rt-artikkeli .rt-rivi p + p {
	font-size: 15px;
	line-height: 1.65;
	margin: 5px 0 0;
}

.rt-artikkeli.rt-artikkeli .rt-rivi--yksi p {
	font-size: 15.5px;
	line-height: 1.65;
	margin: 0;
}

/* ---------- Vinkki ja varoitus ---------- */

.rt-artikkeli.rt-artikkeli .rt-vinkki {
	background: var(--rt-kortti);
	border: 1px solid var(--rt-raja);
	border-left: 3px solid var(--rt-keltainen);
	border-radius: 4px;
	padding: 20px;
	margin-top: 16px;
}

.rt-artikkeli.rt-artikkeli .rt-varoitus {
	border: 1px solid var(--rt-punainen-raja);
	background: var(--rt-punainen-tausta);
	border-radius: 12px;
	padding: 20px;
	margin-top: 20px;
}

.rt-artikkeli.rt-artikkeli .rt-varoitus p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--rt-teksti);
	font-weight: 700;
	margin: 0;
}

/* ---------- Teksti + kuva ---------- */

.rt-artikkeli.rt-artikkeli .rt-jako {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 24px;
	align-items: start;
	margin-top: 20px;
}

.rt-artikkeli.rt-artikkeli .rt-kuva {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}


.rt-artikkeli.rt-artikkeli .rt-kuva img {
	width: 100%;
	height: auto;
	display: block;
}

.rt-artikkeli.rt-artikkeli figcaption {
	font-size: 13px;
	color: #888;
	margin: 10px 0 0;
	text-align: center;
}

.rt-artikkeli.rt-artikkeli .rt-kuva img {
	max-width: 100%;
	margin-inline: auto;
}

/* ---------- Iso luku ---------- */

.rt-artikkeli.rt-artikkeli .rt-luku {
	background: var(--rt-kortti);
	border: 1px solid var(--rt-raja);
	border-radius: 12px;
	padding: 20px;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 12px;
}

.rt-artikkeli.rt-artikkeli .rt-luku__arvo {
	font-family: 'ITCMachineProBold', Impact, sans-serif;
	font-size: 44px;
	line-height: 1;
	color: var(--rt-teksti);
	margin: 0;
	flex: none;
}

.rt-artikkeli.rt-artikkeli .rt-luku p:not(.rt-luku__arvo) {
	flex: 1 1 240px;
	min-width: 0;
	margin: 0;
}

/* ---------- Video ---------- */

.rt-artikkeli.rt-artikkeli .rt-artikkeli__video { margin: 24px 0 0; }

.rt-artikkeli.rt-artikkeli .rt-video {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 14px;
	overflow: hidden;
}

.rt-artikkeli.rt-artikkeli .rt-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Kapea näyttö ---------- */

@media (max-width: 768px) {
	.rt-artikkeli.rt-artikkeli .rt-artikkeli__sisallys {
		position: static;
		max-width: none;
		flex-basis: 100%;
	}
}

/* ==========================================================================
   Sivutason ilme: taustaväri ja hero
   ========================================================================== */

/*
 * Koodisivujen taustaväri. Body-luokka tulee moduulirekisteristä.
 * Luokka toistettu, koska Breakdance asettaa oman taustavärinsä.
 */
body.rt-koodisivu.rt-koodisivu {
	background-color: #f1efe8;
}

/*
 * Hero levittyy reunasta reunaan vaikka se on kapeassa kontainerissa.
 * margin-inline negatiivisena ja width auto — ei 100vw, koska se laskee
 * vierityspalkin mukaan ja aiheuttaa vaakavierityksen.
 */
.rt-sivu .rt-hero {
	/*
	 * Varalevitys jos JS ei aja. Tarkat marginaalit asetetaan
	 * js/turvallisuus.js:ssä mittaamalla, koska prosentti laskee tässä
	 * kontainerissa eri leveydestä kuin ikkuna.
	 */
	margin-inline: calc(50% - var(--rt-ikkuna, 100vw) / 2);
	border-bottom: 1px solid rgba(0, 0, 0, .1);

	/*
	 * Tasainen pohjaväri. Handoffissa oli tässä keltainen radial-gradientti
	 * (rgba(255,237,0,.35) oikeasta yläkulmasta) — poistettu, koska se
	 * näytti koristeelliselta eikä tuonut sisältöön mitään.
	 */
	background: #f7f5ee;
}

.rt-sivu .rt-hero__sisus {
	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(36px, 6vw, 56px) 24px clamp(32px, 5vw, 48px);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	text-align: left;
}

/*
 * Otsikon vasen reuna kohdistetaan sisällön kanssa samaan kohtaan.
 * max-width on sama 1180px kuin .rt-artikkeli:lla ja .rt-mp__hakuosiolla,
 * jolloin laatikoiden vasen reuna on aina sama kohta viewportista
 * riippumatta — jäljelle jää vain se, että turvallisuus-sivulla sisältö
 * alkaa sisällysluettelon ja välin verran padding-vasenta myöhemmin kuin
 * hero. Tämä lisäys mitataan ja asetetaan js/artikkeli.js:ssä
 * (kohdistaOtsikko()), koska sisällysluettelon leveys on flex-jaettu
 * eikä kiinteä, ja koska sivuilla joilla ei ole .rt-artikkeli__sisalto-
 * elementtiä (esim. myyntipisteet) lisäystä ei tarvita — 24px:n
 * peruspadding on jo sama kuin sisällön oma reuna.
 */

.rt-sivu .rt-hero__lappu {
	font-family: 'ITCMachineProBold', Impact, sans-serif;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #7c7c74;
	margin: 0;
}

.rt-sivu .rt-hero h1 {
	font-family: 'ITCMachineProBold', Impact, sans-serif;
	font-weight: 700;
	font-size: clamp(34px, 7vw, 58px);
	line-height: .95;
	text-transform: uppercase;
	color: #191919;
	margin: 16px 0 0;
	text-wrap: balance;
}

.rt-sivu .rt-hero__ingressi {
	font-size: clamp(16px, 2.4vw, 19px);
	line-height: 1.55;
	color: #555;
	margin: 20px 0 0;
	text-wrap: pretty;
}

/* ==========================================================================
   Yhteensovitus Breakdancen kanssa
   ==========================================================================

   style.css rajaa koodilohkosääntönsä body:not(.rt-koodisivu)-ehdolla, joten
   keltaisia otsikoita ja overflow-leikkausta ei tarvitse enää kumota täältä.
   Aiemmin tässä oli viisi !important-sääntöä ja yksi :has().
   ========================================================================== */

/*
 * Kiinteän headerin verran tilaa heron yläpuolelle. Header on
 * position:fixed eikä vie tilaa. Korkeus mitataan js/artikkeli.js:ssä;
 * 96px on vara siltä varalta ettei JS aja.
 */
.rt-sivu .rt-hero {
	padding-top: var(--rt-header-korkeus, 96px);
}

/*
 * Single Post -templaten (389) oma kuorirakenne piilotetaan koodisivuilta.
 *
 * Template tuottaa 34rem korkean taustakuvakaistan ja vetää otsikkolohkon
 * sen päälle -16rem marginaalilla. Koodiartikkelit tuottavat oman heronsa,
 * joten kaista ja templaten otsikko olisivat päällekkäisiä — kaksi h1:tä.
 *
 * Templatea itseään ei muokata: nämä säännöt osuvat vain koodisivuihin,
 * joten olemassa olevat artikkelit näyttävät täsmälleen entiseltä.
 *
 * HUOM: sectionia 389-101 EI saa piilottaa — sisältöalue on sen sisällä.
 * Vain otsikkolohko 389-102. Murupolku (389-123) jätetään näkyviin.
 */
body.rt-koodisivu .bde-section-389-100 { display: none; }
body.rt-koodisivu .bde-section-389-101 { margin-top: 0; }
body.rt-koodisivu .bde-div-389-102     { display: none; }


/* Raketit-osion ingressi kaventuu kun kuva on vieressä. */
.rt-artikkeli.rt-artikkeli .rt-artikkeli__ingressi--kapea { margin-top: 0; }

/* ---------- Leveä kortti ja tuotelista ---------- */


.rt-artikkeli.rt-artikkeli .rt-kortti__valiotsikko {
	font-weight: 700;
	color: var(--rt-teksti);
	margin: 16px 0 0;
}

.rt-artikkeli.rt-artikkeli .rt-tuotelista {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	margin: 10px 0 0;
}

.rt-artikkeli.rt-artikkeli .rt-tuotelista li { display: block; margin: 0; }

.rt-artikkeli.rt-artikkeli .rt-tuotelista a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--rt-raja);
	border-radius: 999px;
	font-size: 14.5px;
	line-height: 1.3;
	color: var(--rt-teksti);
	text-decoration: none;
	background: #fff;
}

.rt-artikkeli.rt-artikkeli .rt-tuotelista a:hover,
.rt-artikkeli.rt-artikkeli .rt-tuotelista a:focus-visible {
	border-color: #000;
	background: var(--rt-keltainen);
	color: #000;
}

/* ---------- Videon julkisivu ---------- */

.rt-artikkeli.rt-artikkeli .rt-video--julkisivu {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	cursor: pointer;
	appearance: none;
}

.rt-artikkeli.rt-artikkeli .rt-video__kuva {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rt-artikkeli.rt-artikkeli .rt-video__nappi {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .15s ease-in-out;
}

.rt-artikkeli.rt-artikkeli .rt-video--julkisivu:hover .rt-video__nappi,
.rt-artikkeli.rt-artikkeli .rt-video--julkisivu:focus-visible .rt-video__nappi {
	transform: scale(1.08);
}

.rt-artikkeli.rt-artikkeli .rt-video--julkisivu:hover svg path:first-child { fill: #e2000a; fill-opacity: 1; }

/* ---------- Badge ---------- */

.rt-artikkeli.rt-artikkeli .rt-badge {
	display: inline-block;
	background: var(--rt-keltainen);
	color: #000;
	font-family: 'ITCMachineProBold', Impact, sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1.4;
	padding: 4px 9px;
	border-radius: 4px;
}

/* Toissijainen: pelkkä reuna, ei täyttöä. */
.rt-artikkeli.rt-artikkeli .rt-badge--reuna {
	background: none;
	border: 1px solid rgba(0, 0, 0, .25);
	color: var(--rt-teksti);
	padding: 3px 9px;
}

/* Badgen jälkeinen kappale erilleen. */
.rt-artikkeli.rt-artikkeli .rt-badge + p { margin-top: 12px; }