/*
Theme Name: Epäsuoravalo
Theme URI: https://epasuoravalo.fi
Author: Epäsuoravalo.fi / LedStore
Description: Lohkoteema epäsuoran valaistuksen tietopankille. Sisältää Profiili-tietotyypin ja dynaamisen profiilikorttilohkon. Ei build-vaihetta, ei lisäosariippuvuuksia.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: epasuoravalo
Tags: full-site-editing, block-patterns, one-column
*/

/* Lohkoteemassa ilme tulee theme.json-tiedostosta.
   Tässä vain se mitä theme.json ei voi ilmaista. */

html { scroll-behavior: smooth; }

body { -webkit-font-smoothing: antialiased; text-wrap: pretty; }

/* Kuvat eivät venytä layoutia */
img { max-width: 100%; height: auto; }

/* Näppäimistöfokus näkyviin - theme.json ei kata :focus-visible */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--kulta);
	outline-offset: 3px;
}

/* Profiilikorttilohko: karusellin nuolet ja laskuri.
   Lohkon rakenne tulee PHP:stä, tämä on sen ainoa CSS. */
.epv-profiilit__ruudukko {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

.epv-kortti {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--hiili);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 3px;
	overflow: hidden;
	transition: border-color .2s, background .2s;
}

.epv-kortti:hover {
	border-color: rgba(200, 146, 10, .5);
	background: #20201d;
}

.epv-kuva {
	position: relative;
	aspect-ratio: 4 / 3;
	min-height: 200px;
	background: #fff center / contain no-repeat;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* Vanhemmat selaimet: aspect-ratio ei tuettu → kuva litistyisi nauhaksi */
@supports not (aspect-ratio: 4 / 3) {
	.epv-kuva { height: 240px; }
}

.epv-kuva__tyhja {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #26262290, #141412);
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 34px;
	color: rgba(255, 255, 255, .3);
}

.epv-merkki {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: rgba(200, 146, 10, .92);
	color: var(--wp--preset--color--musta);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .06em;
	font-weight: 500;
	padding: 4px 9px;
	border-radius: 2px;
}

.epv-nuoli {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: rgba(13, 13, 11, .55);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background .15s, color .15s;
}

.epv-nuoli:hover { background: rgba(200, 146, 10, .9); color: var(--wp--preset--color--musta); }
.epv-nuoli--edellinen { left: 8px; }
.epv-nuoli--seuraava { right: 8px; }

.epv-laskuri {
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 2;
	background: rgba(13, 13, 11, .6);
	color: rgba(255, 255, 255, .85);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .06em;
	padding: 3px 8px;
	border-radius: 2px;
}

.epv-kortti__sisalto {
	padding: 20px 22px 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.epv-kortti__nimi {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.25;
	color: #fff;
	text-decoration: none;
	margin-bottom: 6px;
}

.epv-kortti__nimi:hover { color: var(--wp--preset--color--kulta-vaalea); }

.epv-kortti__koodi {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .35);
	margin-bottom: 14px;
}

.epv-kortti__kuvaus {
	font-size: 14px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .55);
	margin-bottom: 18px;
	flex: 1;
}

.epv-tiedot {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: rgba(255, 255, 255, .07);
	border-radius: 2px;
	overflow: hidden;
	margin-bottom: 16px;
}

.epv-tiedot__rivi {
	background: #141412;
	padding: 9px 13px;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 12px;
}

.epv-tiedot__avain { color: rgba(255, 255, 255, .4); }
.epv-tiedot__arvo { color: #fff; text-align: right; }

.epv-kortti__alaosa {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.epv-hinta {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 24px;
	color: var(--wp--preset--color--kulta-vaalea);
}

.epv-kortti__linkki {
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
	text-decoration: none;
	white-space: nowrap;
}

.epv-kortti__linkki:hover { color: var(--wp--preset--color--kulta-vaalea); }

/* Kuvagalleria: iso kuva contain-rajauksella, jotta mitään ei leikkaudu pois */
.epv-galleria__iso {
	position: relative;
	aspect-ratio: 16 / 10;
	background-color: #0a0a09;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 3px;
	overflow: hidden;
}

.epv-galleria__pikku {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.epv-pikku {
	flex: 1;
	aspect-ratio: 16 / 11;
	border: 0;
	padding: 0;
	cursor: pointer;
	border-radius: 2px;
	background-color: #0a0a09;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: .45;
	outline: 1px solid transparent;
	outline-offset: -1px;
	transition: opacity .18s, outline-color .18s;
}

.epv-pikku:hover { opacity: .8; }

.epv-pikku.on-valittu {
	opacity: 1;
	outline-color: var(--wp--preset--color--kulta);
}

/* Vaalea osio: otsikot tummiksi.
   theme.json määrittelee otsikot valkoisiksi globaalisti, joten vaalealla
   pohjalla ne katoavat ilman tätä sääntöä. */
.is-style-section-vaalea h1,
.is-style-section-vaalea h2,
.is-style-section-vaalea h3,
.is-style-section-vaalea h4,
.is-style-section-vaalea h5,
.is-style-section-vaalea h6,
.is-style-section-vaalea .wp-block-heading {
	color: var(--wp--preset--color--musta);
}

.is-style-section-vaalea { color: var(--wp--preset--color--teksti-tumma); }
.is-style-section-vaalea p { color: var(--wp--preset--color--teksti-tumma); }
.is-style-section-vaalea li { color: var(--wp--preset--color--teksti-tumma); }
.is-style-section-vaalea strong { color: #111; }
.is-style-section-vaalea a { color: var(--wp--preset--color--kulta); }

.is-style-section-kulta h1,
.is-style-section-kulta h2,
.is-style-section-kulta h3,
.is-style-section-kulta .wp-block-heading { color: var(--wp--preset--color--musta); }

/* Tummat lohkot vaalean osion sisällä - vaalean osion värit eivät saa periytyä niihin */
.is-style-section-vaalea .epv-galleria,
.is-style-section-vaalea .epv-profiilit,
.is-style-section-vaalea .epv-spec,
.is-style-section-vaalea .epv-tuotelinkit {
	color: rgba(255, 255, 255, .82);
}

.is-style-section-vaalea .epv-galleria h2,
.is-style-section-vaalea .epv-profiilit h2,
.is-style-section-vaalea .epv-galleria h3,
.is-style-section-vaalea .epv-profiilit h3,
.is-style-section-vaalea .epv-galleria strong,
.is-style-section-vaalea .epv-profiilit strong {
	color: #fff;
}

.is-style-section-vaalea .epv-galleria p,
.is-style-section-vaalea .epv-profiilit p {
	color: rgba(255, 255, 255, .5);
}

.is-style-section-vaalea .epv-galleria a,
.is-style-section-vaalea .epv-profiilit a {
	color: inherit;
}

/* ── Logo navigaatiossa ───────────────────────────────────── */
.epv-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none !important;
	flex-shrink: 0;
}

.epv-logo__merkki {
	width: 30px;
	height: 30px;
	display: block;
	flex-shrink: 0;
}

.epv-logo__nimi {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 21px;
	font-weight: 500;
	letter-spacing: -.01em;
	color: #fff;
	white-space: nowrap;
}

.epv-logo:hover .epv-logo__nimi { color: var(--wp--preset--color--kulta-vaalea); }

@media (max-width: 600px) {
	.epv-logo__nimi { font-size: 18px; }
	.epv-logo__merkki { width: 26px; height: 26px; }
}

/* CTA-nappi piiloon kapealla näytöllä - valikko vie tilan */
@media (max-width: 900px) {
	.epv-nav-cta { display: none; }
}

/* ── Valikon väliotsikot ────────────────────────────────────────
   Kultainen ryhmänimi alavalikossa. Ei linkki vaan merkintä, joten
   se ohitetaan näppäimistökierroksella ja ruudunlukijalla. */
.wp-block-navigation-item.epv-otsikko {
	pointer-events: none;
	display: block;
	width: 100%;
}

.wp-block-navigation-item.epv-otsikko .epv-otsikko__teksti,
.wp-block-navigation-item.epv-otsikko .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta) !important;
	opacity: .8;
	padding: 12px 20px 3px !important;
	display: block;
	text-decoration: none !important;
	cursor: default;
	white-space: nowrap;
}

/* Ensimmäinen väliotsikko ei tarvitse ylätilaa */
.wp-block-navigation__submenu-container > .epv-otsikko:first-child .wp-block-navigation-item__content {
	padding-top: 6px !important;
}

/* Väliotsikkoa edeltävä viiva erottaa ryhmät */
.wp-block-navigation__submenu-container > .epv-otsikko:not(:first-child) {
	border-top: 1px solid rgba(255, 255, 255, .08);
	margin-top: 6px;
}

/* Mobiilivalikossa leveämmät reunukset */
@media (max-width: 900px) {
	.wp-block-navigation-item.epv-otsikko .wp-block-navigation-item__content {
		padding: 14px clamp(20px, 6vw, 96px) 4px !important;
		white-space: normal;
	}
}

/* ── Vertailutaulukot ───────────────────────────────────────────
   Monisarakkeinen taulukko otsikkorivillä. Tumma pohja, kultainen
   toinen sarake. Hover korostaa koko rivin, jotta silmä pysyy rivillä
   leveässä taulukossa. Editoitavissa WordPressin taulukkolohkona. */
.wp-block-table.is-style-epv-vertailu {
	background: var(--wp--preset--color--musta);
	border-radius: 2px;
	overflow-x: auto;
	margin: 32px 0;
}

.wp-block-table.is-style-epv-vertailu table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	font-size: 15px;
	color: rgba(255, 255, 255, .82);
}

.wp-block-table.is-style-epv-vertailu th {
	background: var(--wp--preset--color--hiili-vaalea);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45) !important;
	font-weight: 400;
	text-align: left;
	padding: 14px 18px;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	white-space: nowrap;
	position: sticky;
	top: 0;
}

.wp-block-table.is-style-epv-vertailu td {
	padding: 16px 18px;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	border-left: 2px solid transparent;
	color: rgba(255, 255, 255, .82) !important;
	vertical-align: top;
	background: transparent;
	transition: background .15s ease, color .15s ease;
}

.wp-block-table.is-style-epv-vertailu td:not(:first-child) { border-left: 0; }
.wp-block-table.is-style-epv-vertailu tbody tr:last-child td { border-bottom: 0; }

/* Ensimmäinen sarake nimi, toinen avainluku kultaisena */
.wp-block-table.is-style-epv-vertailu td:first-child {
	color: #fff !important;
	font-weight: 500;
}

/* Toinen sarake on arvo VAIN kun se on merkitty - tekstisarake rivittyy normaalisti.
   Aiemmin kaikki nth-child(2)-solut saivat otsikkofontin ja nowrap, mikä
   rikkoi taulukot joissa toinen sarake on selitystekstiä. */
.wp-block-table.is-style-epv-vertailu td.epv-arvo,
.wp-block-table.is-style-epv-vertailu table.epv-arvosarake td:nth-child(2) {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 20px;
	color: var(--wp--preset--color--kulta-vaalea) !important;
	white-space: nowrap;
}

/* Vuororaidat luettavuuden vuoksi */
.wp-block-table.is-style-epv-vertailu tbody tr:nth-child(even) td {
	background: rgba(255, 255, 255, .02);
}

/* Hover: koko rivi korostuu ja saa kultaisen reunan.
   Toimii myös kosketusnäytöllä :focus-within-säännön kautta. */
.wp-block-table.is-style-epv-vertailu tbody tr:hover td,
.wp-block-table.is-style-epv-vertailu tbody tr:focus-within td {
	background: rgba(200, 146, 10, .12) !important;
	color: #fff !important;
}

.wp-block-table.is-style-epv-vertailu tbody tr:hover td:first-child,
.wp-block-table.is-style-epv-vertailu tbody tr:focus-within td:first-child {
	border-left-color: var(--wp--preset--color--kulta);
}

.wp-block-table.is-style-epv-vertailu tbody tr:hover td.epv-arvo,
.wp-block-table.is-style-epv-vertailu tbody tr:focus-within td.epv-arvo,
.wp-block-table.is-style-epv-vertailu table.epv-arvosarake tbody tr:hover td:nth-child(2),
.wp-block-table.is-style-epv-vertailu table.epv-arvosarake tbody tr:focus-within td:nth-child(2) {
	color: var(--wp--preset--color--kulta-vaalea) !important;
}

/* Lähteessä merkitty korostusrivi näkyy myös ilman hoveria */
.wp-block-table.is-style-epv-vertailu tbody tr.epv-rivi-korosta td {
	background: rgba(200, 146, 10, .07);
}

.wp-block-table.is-style-epv-vertailu tbody tr.epv-rivi-korosta td:first-child {
	border-left-color: var(--wp--preset--color--kulta);
}

.wp-block-table.is-style-epv-vertailu a { color: var(--wp--preset--color--kulta) !important; }

.wp-block-table.is-style-epv-vertailu figcaption {
	color: rgba(255, 255, 255, .35);
	font-size: 13px;
	padding: 8px 4px 0;
}

/* Editorissa sama ulkoasu, mutta ilman sticky-otsikkoa joka häiritsisi */
.block-editor-block-list__layout .wp-block-table.is-style-epv-vertailu th { position: static; }

/* Tavalliset taulukot vaalealla pohjalla */
.is-style-section-vaalea .wp-block-table:not(.is-style-epv-spec):not(.is-style-epv-vertailu):not(.is-style-epv-taulukko) table {
	border-collapse: collapse;
	font-size: 15px;
}

.is-style-section-vaalea .wp-block-table:not(.is-style-epv-spec):not(.is-style-epv-vertailu):not(.is-style-epv-taulukko) th,
.is-style-section-vaalea .wp-block-table:not(.is-style-epv-spec):not(.is-style-epv-vertailu):not(.is-style-epv-taulukko) td {
	border: 1px solid rgba(0, 0, 0, .12);
	padding: 12px 14px;
	color: var(--wp--preset--color--teksti-tumma);
}

.is-style-section-vaalea .wp-block-table:not(.is-style-epv-spec):not(.is-style-epv-vertailu):not(.is-style-epv-taulukko) th {
	background: var(--wp--preset--color--pellava);
	color: var(--wp--preset--color--musta);
	font-weight: 500;
	text-align: left;
}

/* Täysleveä tumma osio korteille.
   Artikkelipalsta on 740 px ja WordPressin asettelusäännöt pakottavat
   lapsille margin:auto - siksi murtautuminen tehdään transformilla,
   jota noiden sääntöjen tarkkuus ei voi kumota. */
.epv-hub-osio {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 100vw;
	box-sizing: border-box;
	background: var(--wp--preset--color--musta);
	padding: clamp(48px, 7vw, 90px) clamp(20px, 5vw, 80px);
	margin-top: clamp(40px, 6vw, 72px);
	margin-bottom: clamp(40px, 6vw, 72px);
}

/* Vaakavieritys pois: 100vw sisältää pystyvierityspalkin leveyden */
html, body { overflow-x: hidden; }

/* Vaalean osion värit eivät saa valua tummaan korttiosioon.
   Ilman näitä teksti on #333 mustalla pohjalla eli lukukelvoton. */
.is-style-section-vaalea .epv-hub-osio,
.is-style-section-vaalea .epv-hub-osio p,
.is-style-section-vaalea .epv-hub-osio li,
.is-style-section-vaalea .epv-hub-osio span {
	color: rgba(255, 255, 255, .82);
}

.is-style-section-vaalea .epv-hub-osio h2,
.is-style-section-vaalea .epv-hub-osio h3,
.is-style-section-vaalea .epv-hub-osio .epv-hub__otsikko,
.is-style-section-vaalea .epv-hub-osio .epv-hub__nimi {
	color: #fff;
}

.is-style-section-vaalea .epv-hub-osio .epv-hub__eyebrow,
.is-style-section-vaalea .epv-hub-osio .epv-hub__label { color: var(--wp--preset--color--kulta); }

.is-style-section-vaalea .epv-hub-osio .epv-hub__kuvaus,
.is-style-section-vaalea .epv-hub-osio .epv-hub__linkki,
.is-style-section-vaalea .epv-hub-osio .epv-hub__luku { color: rgba(255, 255, 255, .45); }

.is-style-section-vaalea .epv-hub-osio .epv-hub__kirjain { color: rgba(255, 255, 255, .12); }
.is-style-section-vaalea .epv-hub-osio .epv-hub__luku strong { color: var(--wp--preset--color--kulta-vaalea); }
.is-style-section-vaalea .epv-hub-osio .epv-hub__lisa a { color: #fff; }
.is-style-section-vaalea .epv-hub-osio .epv-hub__nuoli { color: var(--wp--preset--color--kulta); }
.is-style-section-vaalea .epv-hub-osio a { text-decoration: none; }

/* ── Hub-korttiruudukko ─────────────────────────────────────────────
   Rakenteet- ja tilat-sivujen A/B/C-valintakortit. Kortti on kokonaan
   linkki, joten koko alue on klikattava. */
.epv-hub {
	max-width: 1200px;
	margin: 0 auto;
	color: rgba(255, 255, 255, .82);
}

.epv-hub__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta);
	margin: 0 0 18px;
}

.epv-hub__eyebrow span {
	display: block;
	width: 32px;
	height: 1px;
	background: currentColor;
	flex-shrink: 0;
}

.epv-hub__otsikko {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: clamp(30px, 4.5vw, 56px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0 0 40px;
}

.epv-hub__ruudukko {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 2px;
	overflow: hidden;
}

/* Neljä tai useampi kortti (tilat-sivu) latoutuu neljään sarakkeeseen */
.epv-hub__ruudukko:has(> :nth-child(7)) { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
	.epv-hub__ruudukko,
	.epv-hub__ruudukko:has(> :nth-child(7)) { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
	.epv-hub__ruudukko,
	.epv-hub__ruudukko:has(> :nth-child(7)) { grid-template-columns: 1fr; }
}

.epv-hub__kortti {
	display: flex;
	flex-direction: column;
	padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px);
	background: var(--wp--preset--color--hiili);
	text-decoration: none;
	transition: background .18s;
}

.epv-hub__kortti:hover { background: #2a2a28; }

.epv-hub__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta);
	margin-bottom: 20px;
}

.epv-hub__kirjain {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 52px;
	font-weight: 300;
	line-height: 1;
	color: rgba(255, 255, 255, .12);
	margin-bottom: 8px;
}

.epv-hub__nimi {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 16px;
}

.epv-hub__kuvaus {
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .45);
	margin: 0 0 24px;
	flex: 1;
}

.epv-hub__luku {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	color: rgba(255, 255, 255, .45);
}

.epv-hub__luku strong {
	color: var(--wp--preset--color--kulta-vaalea);
	font-weight: 400;
}

.epv-hub__linkki {
	margin-top: 28px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}

.epv-hub__kortti:hover .epv-hub__linkki { color: var(--wp--preset--color--kulta-vaalea); }

/* Lisälinkkirivi korttien alla - tilat joilla ei ole omaa korttia */
.epv-hub__lisa {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px;
	margin-top: 32px;
}

.epv-hub__lisa a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 17px 22px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 2px;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
	transition: background .18s, border-color .18s;
}

.epv-hub__lisa a:hover {
	background: rgba(200, 146, 10, .15);
	border-color: rgba(200, 146, 10, .4);
	color: #fff;
}

.epv-hub__nuoli { color: var(--wp--preset--color--kulta); flex-shrink: 0; }

/* ── UKK-haitari ──────────────────────────────────────────────── */
.epv-ukk {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 0 60px;
	align-items: start;
	margin: 24px 0 8px;
}

.epv-ukk .wp-block-details {
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	padding: 0;
	margin: 0;
	background: none;
}

.epv-ukk .wp-block-details summary {
	cursor: pointer;
	list-style: none;
	padding: 22px 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--musta);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}

.epv-ukk .wp-block-details summary::-webkit-details-marker { display: none; }
.epv-ukk .wp-block-details summary::marker { content: ''; }

/* Plus- ja miinusmerkki oikeaan reunaan */
.epv-ukk .wp-block-details summary::after {
	content: '+';
	font-size: 20px;
	line-height: 1;
	color: var(--wp--preset--color--kulta);
	flex-shrink: 0;
}

.epv-ukk .wp-block-details[open] summary::after { content: '−'; }

.epv-ukk .wp-block-details > *:not(summary) {
	font-size: 15px;
	line-height: 1.75;
	color: #404040;
	margin: 0 0 20px;
	max-width: 60ch;
}

/* ── Datataulukko: monisarakkeinen otsikkorivillä ──────────────────
   Spec-tyyli on kaksisarakkeinen avain-arvo. Tämä on sen monisarakkeinen
   pari: tumma pohja, mono-otsikot ja kultainen arvosarake. */
.wp-block-table.is-style-epv-taulukko {
	margin: 40px 0;
	overflow-x: auto;
	background: var(--wp--preset--color--musta);
	border-radius: 2px;
}

/* has-fixed-layout jakaa sarakkeet tasan ja katkoo lukuarvot monelle
   riville - sisältö saa määrätä leveyden. */
.wp-block-table.is-style-epv-taulukko table,
.wp-block-table.is-style-epv-taulukko table.has-fixed-layout {
	table-layout: auto;
	width: 100%;
	width: 100%;
	min-width: 560px;
	table-layout: auto;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 15px;
	color: rgba(255, 255, 255, .82);
}

.wp-block-table.is-style-epv-taulukko th {
	background: #2A2A28;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
	font-weight: 400;
	padding: 14px 20px;
	text-align: left;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	white-space: nowrap;
}

.wp-block-table.is-style-epv-taulukko td {
	padding: 18px 20px;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	line-height: 1.55;
	vertical-align: top;
	background: transparent;
}

.wp-block-table.is-style-epv-taulukko tbody tr:last-child td { border-bottom: 0; }

/* Korostettu rivi: kultainen vasen reuna ja kevyt sävy, kuten suunnitelmassa.
   Parillinen rivi on kolmen rivin taulukossa juuri se tyyppitapaus jonka
   halutaan erottuvan. */
.wp-block-table.is-style-epv-taulukko tbody tr:nth-child(even) td {
	background: rgba(200, 146, 10, .07);
}

.wp-block-table.is-style-epv-taulukko tbody tr:nth-child(even) td:first-child {
	box-shadow: inset 2px 0 0 var(--wp--preset--color--kulta);
}

/* Rivin nimi: valkoinen, ei katkea */
.wp-block-table.is-style-epv-taulukko td:first-child {
	color: #fff;
	font-weight: 500;
}

/* Lukuarvo: kultainen otsikkofontti kuten suunnitelmassa.
   Vain merkityissä soluissa - tekstisarake pysyy leipätekstinä ja rivittyy. */
.wp-block-table.is-style-epv-taulukko td.epv-arvo,
.wp-block-table.is-style-epv-taulukko table.epv-arvosarake td:nth-child(2) {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 21px;
	font-weight: 500;
	color: var(--wp--preset--color--kulta-vaalea);
	white-space: nowrap;
}

/* Selityssarakkeet rivittyvät normaalisti */
.wp-block-table.is-style-epv-taulukko td { white-space: normal; }

/* Viimeinen sarake euromääränä: vain kun taulukko on merkitty summataulukoksi */
.wp-block-table.is-style-epv-taulukko table.epv-summa td:last-child {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 21px;
	font-weight: 500;
	color: var(--wp--preset--color--kulta-vaalea);
}

/* Otsikkorivi ilman erottavia pystyviivoja - vain yksi alareuna */
.wp-block-table.is-style-epv-taulukko thead tr { border: 0; }
.wp-block-table.is-style-epv-taulukko table,
.wp-block-table.is-style-epv-taulukko tr { border: 0; }

.wp-block-table.is-style-epv-taulukko td a {
	color: var(--wp--preset--color--kulta-vaalea);
	text-decoration: none;
	border-bottom: 1px solid rgba(200, 146, 10, .4);
}

.wp-block-table.is-style-epv-taulukko td a:hover { border-bottom-color: var(--wp--preset--color--kulta); }
.wp-block-table.is-style-epv-taulukko td strong { color: #fff; font-weight: 500; }

/* Vaalea artikkelipohja periyttää tummat tekstivärit - datataulukko on
   tumma saareke, joten se palauttaa omat värinsä eksplisiittisesti. */
.is-style-section-vaalea .wp-block-table.is-style-epv-taulukko table,
.is-style-section-vaalea .wp-block-table.is-style-epv-taulukko td { color: rgba(255, 255, 255, .82); }
.is-style-section-vaalea .wp-block-table.is-style-epv-taulukko td:first-child { color: #fff; }
.is-style-section-vaalea .wp-block-table.is-style-epv-taulukko td.epv-arvo,
.is-style-section-vaalea .wp-block-table.is-style-epv-taulukko table.epv-arvosarake td:nth-child(2),
.is-style-section-vaalea .wp-block-table.is-style-epv-taulukko table.epv-summa td:last-child { color: var(--wp--preset--color--kulta-vaalea); }
.is-style-section-vaalea .wp-block-table.is-style-epv-taulukko th {
	background: #2A2A28;
	color: rgba(255, 255, 255, .45);
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.is-style-section-vaalea .wp-block-table.is-style-epv-taulukko td { border: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.is-style-section-vaalea .wp-block-table.is-style-epv-taulukko tbody tr:last-child td { border-bottom: 0; }
.is-style-section-vaalea .wp-block-table.is-style-epv-taulukko figcaption { color: rgba(255, 255, 255, .4); }
.is-style-section-vaalea .wp-block-table.is-style-epv-taulukko td a { color: var(--wp--preset--color--kulta-vaalea); }

.wp-block-table.is-style-epv-taulukko figcaption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.6;
	color: rgba(255, 255, 255, .4);
	padding: 14px 20px;
	margin: 0;
	text-align: left;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.wp-block-table.is-style-epv-taulukko figcaption a { color: var(--wp--preset--color--kulta); }

@media (max-width: 600px) {
	.wp-block-table.is-style-epv-taulukko td,
	.wp-block-table.is-style-epv-taulukko th { padding: 14px 16px; }
	.wp-block-table.is-style-epv-taulukko td.epv-arvo,
	.wp-block-table.is-style-epv-taulukko table.epv-arvosarake td:nth-child(2),
	.wp-block-table.is-style-epv-taulukko table.epv-summa td:last-child { font-size: 18px; }
}

/* Taulukon selite: sijoittuu taulukon alle, ei sen reunuksen sisään */
.epv-taulukko-selite {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.7;
	color: #777;
	margin: -28px 0 40px;
}

.epv-taulukko-selite a { color: var(--wp--preset--color--kulta); }
.has-musta-background-color .epv-taulukko-selite { color: rgba(255, 255, 255, .4); }

/* ── Yksittäinen avattava kysymys leipätekstissä ───────────────────
   Sivun UKK-osiossa details on ryhmän lapsi. Pilarisivuilla se on
   suoraan sisällössä, joten sillä on oltava oma tyyli. */
.wp-block-details.epv-ukk {
	display: block;
	border-bottom: 1px solid rgba(13, 13, 11, .12);
	margin: 0;
	padding: 0;
}

.wp-block-details.epv-ukk > summary {
	position: relative;
	cursor: pointer;
	list-style: none;
	padding: 20px 44px 20px 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--musta);
}

.wp-block-details.epv-ukk > summary::-webkit-details-marker { display: none; }
.wp-block-details.epv-ukk > summary::marker { content: ''; }

.wp-block-details.epv-ukk > summary::after {
	content: '+';
	position: absolute;
	right: 4px;
	top: 18px;
	font-size: 22px;
	line-height: 1;
	color: var(--wp--preset--color--kulta);
}

.wp-block-details.epv-ukk[open] > summary::after { content: '−'; }
.wp-block-details.epv-ukk > summary:hover { color: var(--wp--preset--color--kulta); }

.wp-block-details.epv-ukk > *:not(summary) {
	font-size: 15px;
	line-height: 1.75;
	color: #404040;
	margin: 0 44px 20px 0;
	max-width: 70ch;
}

.wp-block-details.epv-ukk > *:not(summary) a { color: var(--wp--preset--color--kulta); }

/* Tummalla pohjalla sama rivi kääntyy vaaleaksi */
.has-musta-background-color .wp-block-details.epv-ukk,
.epv-hub-osio .wp-block-details.epv-ukk { border-bottom-color: rgba(255, 255, 255, .1); }
.has-musta-background-color .wp-block-details.epv-ukk > summary,
.epv-hub-osio .wp-block-details.epv-ukk > summary { color: #fff; }
.has-musta-background-color .wp-block-details.epv-ukk > *:not(summary),
.epv-hub-osio .wp-block-details.epv-ukk > *:not(summary) { color: rgba(255, 255, 255, .6); }

/* Ryhmän sisällä oleva UKK ei peri tätä - ryhmätyyli hoitaa reunan */
.epv-ukk > .wp-block-details.epv-ukk { border-bottom: 0; }

/* ── Spec-taulukko: editoitava, korvaa vanhan ruudukon ─────────── */
.wp-block-table.is-style-epv-spec {
	margin: 40px 0;
	overflow-x: auto;
}

.wp-block-table.is-style-epv-spec table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 1px;
	background: var(--wp--preset--color--musta);
	border: 0;
	table-layout: auto;
	margin: 0;
}

.wp-block-table.is-style-epv-spec td {
	background: var(--wp--preset--color--hiili);
	border: 0;
	padding: 20px 28px;
	vertical-align: baseline;
}

/* Vasen sarake selite, oikea arvo otsikkofontilla */
.wp-block-table.is-style-epv-spec table:not(:has(thead)) td:first-child {
	font-size: 13px;
	color: rgba(255, 255, 255, .45);
	width: 55%;
}

.wp-block-table.is-style-epv-spec table:not(:has(thead)) td:last-child {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 20px;
	font-weight: 500;
	color: #fff;
	text-align: right;
}

.wp-block-table.is-style-epv-spec figcaption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
	background: var(--wp--preset--color--musta);
	margin: 0;
	padding: 20px 28px 4px;
	text-align: left;
	caption-side: top;
}

@media (max-width: 600px) {
	.wp-block-table.is-style-epv-spec td { padding: 16px 18px; }
	.wp-block-table.is-style-epv-spec table:not(:has(thead)) td:last-child { font-size: 17px; }
}

/* ── Sisällysluettelo ─────────────────────────────────────────────── */
.epv-sisallys {
	background: var(--wp--preset--color--pellava);
	border-left: 3px solid var(--wp--preset--color--kulta);
	border-radius: 0 4px 4px 0;
	padding: 28px 32px;
	margin: 0 0 48px;
}

.epv-sisallys__otsikko {
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: 10px !important;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta) !important;
	font-weight: 400 !important;
	margin: 0 0 16px !important;
	line-height: 1.4 !important;
}

.epv-sisallys__lista {
	list-style: decimal;
	padding-left: 20px;
	margin: 0;
}

.epv-sisallys__lista li {
	font-size: 14px;
	line-height: 1.6;
	color: #555;
	margin-bottom: 6px;
}

.epv-sisallys__lista li:last-child { margin-bottom: 0; }

/* Alatason kohdat sisennettyinä, jotta hierarkia näkyy */
.epv-sisallys__lista li.on-alataso {
	list-style: none;
	padding-left: 14px;
	font-size: 13px;
	color: #6b6b6b;
}

.epv-sisallys__lista li.on-alataso::before {
	content: "-";
	margin-right: 8px;
	color: var(--wp--preset--color--kulta);
}

.epv-sisallys__lista a {
	color: #555;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.epv-sisallys__lista a:hover {
	color: var(--wp--preset--color--kulta);
	border-bottom-color: var(--wp--preset--color--kulta);
}

/* Ankkurilinkki ei saa jättää otsikkoa kiinteän navigaation alle */
:target { scroll-margin-top: 90px; }

/* ── Alatunniste ──────────────────────────────────────────────── */
.epv-footer { color: rgba(255, 255, 255, .45); }

.epv-footer__ylaosa { padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 80px); }

.epv-footer__ruudukko {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 48px 40px;
}

.epv-footer__brandi {
	grid-column: span 2;
	min-width: 220px;
}

.epv-footer__nimi {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 22px;
	font-weight: 500;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	text-decoration: none;
}

.epv-footer__merkki {
	height: 1.05em;
	width: auto;
	flex-shrink: 0;
	display: block;
}

.epv-footer__piste {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--kulta-vaalea);
	flex-shrink: 0;
}

.epv-footer__kuvaus {
	font-size: 13px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .45);
	margin: 0 0 20px;
	max-width: 240px;
}

.epv-footer__osoite {
	font-style: normal;
	font-size: 13px;
	line-height: 2;
	display: flex;
	flex-direction: column;
}

.epv-footer__osoite a { color: rgba(255, 255, 255, .45); text-decoration: none; }
.epv-footer__osoite a:hover { color: #fff; }

.epv-footer__some {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}

.epv-footer__some a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 600;
	color: rgba(255, 255, 255, .5);
	text-decoration: none;
}

.epv-footer__some a:hover {
	border-color: var(--wp--preset--color--kulta);
	color: var(--wp--preset--color--kulta-vaalea);
}

.epv-footer__sarake h3 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .4);
	font-weight: 400;
	margin: 0 0 18px;
}

.epv-footer__sarake nav {
	display: flex;
	flex-direction: column;
}

.epv-footer__sarake nav a {
	font-size: 13px;
	padding: 4px 0;
	color: rgba(255, 255, 255, .45);
	text-decoration: none;
}

.epv-footer__sarake nav a:hover { color: #fff; }

.epv-footer__alaosa { border-top: 1px solid rgba(255, 255, 255, .1); }

.epv-footer__alarivi {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px clamp(20px, 5vw, 80px);
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 12px;
	color: rgba(255, 255, 255, .35);
}

.epv-footer__alarivi a { color: rgba(255, 255, 255, .35); text-decoration: none; }
.epv-footer__alarivi a:hover { color: #fff; }
.epv-footer__erotin { opacity: .4; }

/* ── Tuotenosto ───────────────────────────────────────────────────────
   Yksi tuote leipätekstin sekaan. Kortti käyttää samoja tyylejä kuin
   profiilikorttilohko, rivi on kompakti vaihtoehto. */
.epv-tuotenosto--kortti {
	max-width: 340px;
	margin: clamp(28px, 4vw, 40px) 0;
}

.epv-tuotenosto__otsikko {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta);
	margin: 0 0 12px;
}

.epv-tuotenosto--rivi:not(.epv-nauhanosto) {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.epv-tuotenosto--rivi:not(.epv-nauhanosto),
.epv-nauhanosto__yksi--rivi {
	background: var(--wp--preset--color--musta);
	border: 1px solid rgba(255, 255, 255, .1);
	border-left: 3px solid var(--wp--preset--color--kulta);
	border-radius: 0 3px 3px 0;
	padding: 14px 18px;
	margin: clamp(24px, 3vw, 32px) 0;
}

.epv-tuotenosto__kuva {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: 2px;
	background: #fff center / contain no-repeat;
}

.epv-tuotenosto__tiedot {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 160px;
}

.epv-tuotenosto__nimi {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 18px;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	line-height: 1.3;
}

.epv-tuotenosto__nimi:hover { color: var(--wp--preset--color--kulta-vaalea); }

.epv-tuotenosto__koodi {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .35);
}

.epv-tuotenosto__hinta {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 22px;
	color: var(--wp--preset--color--kulta-vaalea);
	white-space: nowrap;
}

.epv-tuotenosto__nappi {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	background: rgba(200, 146, 10, .12);
	border: 1px solid rgba(200, 146, 10, .3);
	border-radius: 2px;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta-vaalea);
	text-decoration: none;
	white-space: nowrap;
}

.epv-tuotenosto__nappi:hover {
	background: rgba(200, 146, 10, .28);
	color: var(--wp--preset--color--kulta-vaalea);
}

/* Vaalea artikkelipohja: rivinoston teksti pysyy vaaleana tummalla pohjalla */
.is-style-section-vaalea .epv-tuotenosto--rivi .epv-tuotenosto__nimi { color: #fff; }
.is-style-section-vaalea .epv-tuotenosto--rivi .epv-tuotenosto__koodi { color: rgba(255, 255, 255, .35); }

/* ── Nauhanosto: 1-3 korttia riviin ─────────────────────────────────
   Yksi kortti vasemmalle, 2-3 tasavälein. Kortin leveys on sama riippumatta
   määrästä - siksi flex eikä grid, ja yksi kortti ei täytä riviä.
   Mobiilissa kaksi rinnakkain, kolmas rivinvaihtoon keskitettynä. */
.epv-nauhanosto .epv-kuva { aspect-ratio: 16 / 9; }

.epv-nauhanosto--1 { max-width: none; }

.epv-nauhanosto__rivi {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: stretch;
}

.epv-nauhanosto__rivi .epv-nauhanosto__yksi {
	flex: 0 1 calc((100% - 32px) / 3);
	min-width: 240px;
	max-width: 400px;
}

/* Yksi tai kaksi korttia: sama leveys kuin kolmen rivissä, vasemmalle */
.epv-nauhanosto--1 .epv-nauhanosto__rivi,
.epv-nauhanosto--2 .epv-nauhanosto__rivi { justify-content: flex-start; }
.epv-nauhanosto--3 .epv-nauhanosto__rivi { justify-content: space-between; }

/* Rivimuoto: pinoutuu aina, ei rinnakkain */
.epv-tuotenosto--rivi .epv-nauhanosto__rivi { flex-direction: column; gap: 10px; }
.epv-tuotenosto--rivi .epv-nauhanosto__yksi--rivi {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	flex: none;
	max-width: none;
	min-width: 0;
}

@media (max-width: 782px) {
	.epv-nauhanosto__rivi { justify-content: center !important; gap: 12px; }
	.epv-nauhanosto__rivi .epv-nauhanosto__yksi {
		flex: 0 1 calc(50% - 6px);
		min-width: 150px;
		max-width: none;
	}
	/* Yksi kortti mobiilissa: keskitetty, ei koko leveys */
	.epv-nauhanosto--1 .epv-nauhanosto__yksi { flex-basis: min(100%, 340px); }
}

@media (max-width: 400px) {
	.epv-nauhanosto__rivi .epv-nauhanosto__yksi { flex-basis: 100%; }
}

/* ── Sivun UKK-osio ────────────────────────────────────────────────── */
.epv-ukk-osio { margin: clamp(32px, 5vw, 56px) 0; }

.epv-ukk-osio > h2 {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: clamp(24px, 3.5vw, 40px);
	font-weight: 500;
	letter-spacing: -.01em;
	margin: 0 0 24px;
}

/* Kaksi saraketta: pitkillä listoilla lyhentää sivua tuntuvasti */
.epv-ukk-osio--2 .epv-ukk-lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 40px;
	align-items: start;
}

@media (max-width: 700px) {
	.epv-ukk-osio--2 .epv-ukk-lista { grid-template-columns: 1fr; }
}

/* ── Asennuskuvat ─────────────────────────────────────────────────── */
.epv-asennuskuva { margin: clamp(28px, 4vw, 40px) 0; }

/* Valkoinen pohja: kuvat ovat viivapiirroksia valkoisella taustalla */
.epv-asennuskuva img {
	width: 100%;
	display: block;
	background: #fff;
	border: 1px solid rgba(13, 13, 11, .1);
	border-radius: 3px;
}

.epv-asennuskuva figcaption {
	font-size: 15px;
	line-height: 1.7;
	color: #333;
	margin-top: 14px;
	text-align: left;
	max-width: 70ch;
}

.epv-asennuskuva figcaption strong { color: var(--wp--preset--color--musta); }

/* Tummalla pohjalla kuvateksti kääntyy vaaleaksi */
.has-musta-background-color .epv-asennuskuva figcaption,
.epv-hub-osio .epv-asennuskuva figcaption { color: rgba(255, 255, 255, .65); }
.has-musta-background-color .epv-asennuskuva figcaption strong,
.epv-hub-osio .epv-asennuskuva figcaption strong { color: #fff; }

/* ── Isot tilakortit (hub-sivu) ───────────────────────────────────
   Kuva, avainluku, nimi ja yksi lause. Koko kortti on klikattava
   kuvan ja otsikon kautta; teksti pysyy editoitavana. */
.epv-tilaruudukko {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin: clamp(28px, 4vw, 40px) 0 clamp(40px, 6vw, 56px);
}

.epv-tilakortti-iso {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--musta);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 2px;
	overflow: hidden;
	transition: border-color .2s;
}

.epv-tilakortti-iso:hover { border-color: rgba(200, 146, 10, .5); }

.epv-tilakortti-iso__kuva {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.epv-tilakortti-iso__kuva a { display: block; height: 100%; }

.epv-tilakortti-iso__kuva img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s;
}

.epv-tilakortti-iso:hover .epv-tilakortti-iso__kuva img { transform: scale(1.03); }

.epv-tilakortti-iso__luku {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta);
	margin: 20px 22px 8px;
}

.epv-tilakortti-iso__nimi {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 22px 8px;
}

.epv-tilakortti-iso__nimi a { color: #fff; text-decoration: none; }
.epv-tilakortti-iso__nimi a:hover { color: var(--wp--preset--color--kulta-vaalea); }

.epv-tilakortti-iso__teksti {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .6);
	margin: 0 22px 22px;
}

/* Vaalea artikkelipohja periyttää tummat värit - kortti on tumma saareke */
.is-style-section-vaalea .epv-tilakortti-iso__nimi a { color: #fff; }
.is-style-section-vaalea .epv-tilakortti-iso__teksti { color: rgba(255, 255, 255, .6); }

/* ── Tilakortit ────────────────────────────────────────────────────
   Ruudukko tummia linkkikortteja: tilan nimi ja sen mitoitusarvot.
   Kortti on kappale jonka sisällä linkki, jotta teksti pysyy
   editoitavana lohkoeditorissa. */
.epv-tilakortit {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin: clamp(24px, 4vw, 32px) 0;
}

.epv-tilakortti { margin: 0; }

.epv-tilakortti a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 20px;
	background: var(--wp--preset--color--hiili);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 2px;
	text-decoration: none;
}

.epv-tilakortti a:hover {
	background: rgba(200, 146, 10, .18);
	border-color: rgba(200, 146, 10, .45);
}

.epv-tilakortti strong {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta);
}

.epv-tilakortti span {
	font-size: 14px;
	line-height: 1.5;
	color: #fff;
}

/* ── Virhelista ────────────────────────────────────────────────────
   Sama avattava rakenne kuin UKK, mutta tummalla pohjalla ja isolla
   järjestysnumerolla. Numero on himmeä, koska se on rytmiä eikä tietoa. */
.epv-virhelista {
	background: var(--wp--preset--color--musta);
	border-radius: 2px;
	padding: 8px clamp(20px, 4vw, 36px);
	margin: clamp(28px, 4vw, 40px) 0;
}

.wp-block-details.epv-virhe {
	display: block;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	margin: 0;
	padding: 0;
}

.epv-virhelista > .wp-block-details.epv-virhe:last-child { border-bottom: 0; }

.wp-block-details.epv-virhe > summary {
	position: relative;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 24px 44px 24px 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.45;
	color: #fff;
}

.wp-block-details.epv-virhe > summary::-webkit-details-marker { display: none; }
.wp-block-details.epv-virhe > summary::marker { content: ''; }

.epv-virhe__nro {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 36px;
	font-weight: 300;
	line-height: 1;
	color: rgba(255, 255, 255, .14);
	min-width: 52px;
	flex-shrink: 0;
}

.wp-block-details.epv-virhe > summary::after {
	content: '+';
	position: absolute;
	right: 4px;
	top: 26px;
	font-size: 22px;
	line-height: 1;
	color: var(--wp--preset--color--kulta);
}

.wp-block-details.epv-virhe[open] > summary::after { content: '−'; }
.wp-block-details.epv-virhe > summary:hover { color: var(--wp--preset--color--kulta-vaalea); }

.wp-block-details.epv-virhe > *:not(summary) {
	font-size: 15px;
	line-height: 1.75;
	color: rgba(255, 255, 255, .55);
	margin: 0 44px 24px 76px;
	max-width: 62ch;
}

.wp-block-details.epv-virhe > *:not(summary) a { color: var(--wp--preset--color--kulta); }

/* Vaalea artikkelipohja periyttää tummat värit - laatikko on tumma saareke */
.is-style-section-vaalea .wp-block-details.epv-virhe > summary { color: #fff; }
.is-style-section-vaalea .wp-block-details.epv-virhe > *:not(summary) { color: rgba(255, 255, 255, .55); }
.is-style-section-vaalea .epv-tilakortti span { color: #fff; }

@media (max-width: 600px) {
	.wp-block-details.epv-virhe > summary { gap: 14px; font-size: 16px; }
	.epv-virhe__nro { font-size: 28px; min-width: 38px; }
	.wp-block-details.epv-virhe > *:not(summary) { margin-left: 52px; }
}

/* ── LedStore-linkkiruudukko ──────────────────────────────────────
   Tumma laatikko jossa mono-otsikko ja 2-6 linkkinappia ruudukossa.
   Ensimmäinen linkki on ensisijainen ja saa kultaisen reunan. */
.epv-linkkiruudukko {
	background: var(--wp--preset--color--musta);
	border-radius: 4px;
	padding: clamp(24px, 4vw, 36px);
	margin: clamp(32px, 5vw, 44px) 0;
}

.epv-linkkiruudukko__otsikko {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta);
	margin: 0 0 20px;
}

.epv-linkkiruudukko__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
}

.epv-linkkiruudukko__rivi { margin: 0; }

.epv-linkkiruudukko__rivi a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 100%;
	padding: 16px 20px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 2px;
	font-size: 15px;
	line-height: 1.4;
	color: #fff;
	text-decoration: none;
}

/* Nuoli pseudoelementtinä, jotta linkin teksti pysyy editoitavana */
.epv-linkkiruudukko__rivi a::after {
	content: "→";
	color: var(--wp--preset--color--kulta);
	flex-shrink: 0;
}

.epv-linkkiruudukko__rivi a:hover {
	background: rgba(200, 146, 10, .18);
	border-color: rgba(200, 146, 10, .45);
	color: #fff;
}

.epv-linkkiruudukko__rivi--ensisijainen a {
	background: rgba(200, 146, 10, .12);
	border-color: rgba(200, 146, 10, .45);
	color: var(--wp--preset--color--kulta-vaalea);
}

.epv-linkkiruudukko__rivi--ensisijainen a:hover {
	background: rgba(200, 146, 10, .24);
	border-color: var(--wp--preset--color--kulta);
	color: var(--wp--preset--color--kulta-vaalea);
}

/* Vaalea artikkelipohja periyttää tummat värit - laatikko on tumma saareke */
.is-style-section-vaalea .epv-linkkiruudukko__rivi a { color: #fff; }
.is-style-section-vaalea .epv-linkkiruudukko__rivi--ensisijainen a { color: var(--wp--preset--color--kulta-vaalea); }

@media (max-width: 480px) {
	.epv-linkkiruudukko__lista { grid-template-columns: 1fr; }
}

/* Linkkikortin eyebrow ja nuolirivi (kotiin, ammattilaisille) */
.epv-tilakortti__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta);
	margin: 0 0 14px;
}
.epv-tilakortti__teksti {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .6);
	margin: 0;
}

.epv-tilakortti__linkki {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 12px 0 0;
}
.epv-tilakortti__linkki a { color: rgba(255, 255, 255, .45); text-decoration: none; }
.epv-tilakortti:hover .epv-tilakortti__linkki a { color: var(--wp--preset--color--kulta-vaalea); }

/* Kysymys suunnittelijalle: selitys + hyvä vastaus erotettuna */
.epv-kysymys__hyva {
	margin-top: 12px;
	padding: 12px 16px;
	background: rgba(200, 146, 10, .08);
	border-left: 2px solid var(--wp--preset--color--kulta);
	font-size: 14px;
	line-height: 1.65;
}
.epv-kysymys__hyva strong {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta);
	font-weight: 400;
	display: block;
	margin-bottom: 4px;
}

/* Mitoituskaava korostettuna */
.epv-kaava {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 15px;
	line-height: 1.6;
	padding: 16px 20px;
	background: var(--wp--preset--color--musta);
	border-left: 3px solid var(--wp--preset--color--kulta);
	color: #fff;
	margin: 20px 0;
}
.epv-kaava strong { font-weight: 500; color: var(--wp--preset--color--kulta-vaalea); }

/* Kuvapaikka - näkyy vain kirjautuneelle, muistuttaa puuttuvasta kuvasta */
.epv-kuvapaikka { display: none; }
body.logged-in .epv-kuvapaikka {
	display: block;
	border: 2px dashed rgba(200, 146, 10, .5);
	background: rgba(200, 146, 10, .06);
	padding: 32px 24px;
	margin: 24px 0;
	text-align: center;
}
.epv-kuvapaikka__teksti {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	line-height: 1.6;
	color: var(--wp--preset--color--kulta);
	margin: 0;
}
.editor-styles-wrapper .epv-kuvapaikka { display: block; }

/* ── Kohdelinkit LedStoreen ───────────────────────────────────────── */
.epv-kohdelinkit {
	background: var(--wp--preset--color--musta);
	border: 1px solid rgba(255, 255, 255, .1);
	border-left: 3px solid var(--wp--preset--color--kulta);
	padding: 24px 28px;
	margin: clamp(32px, 5vw, 48px) 0;
}

.epv-kohdelinkit__otsikko {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta);
	margin: 0 0 10px;
}

.epv-kohdelinkit__johdanto {
	font-size: 14px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .55);
	margin: 0 0 16px;
	max-width: 62ch;
}

.epv-kohdelinkit__rivi {
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 8px;
	padding-left: 18px;
	position: relative;
}

/* Nuoli merkkinä listamerkin sijaan - rivit ovat linkkejä, eivät luettelo */
.epv-kohdelinkit__rivi::before {
	content: "\2192";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--kulta);
}

.epv-kohdelinkit__rivi:last-child { margin-bottom: 0; }

.epv-kohdelinkit__rivi a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(200, 146, 10, .4);
}

.epv-kohdelinkit__rivi a:hover {
	color: var(--wp--preset--color--kulta-vaalea);
	border-bottom-color: var(--wp--preset--color--kulta);
}

.epv-kohdelinkit__rivi span { color: rgba(255, 255, 255, .5); font-size: 14px; }

/* ── UKK-koonti ────────────────────────────────────────────────────── */
.epv-ukk-koonti { margin: clamp(32px, 5vw, 56px) 0; }

.epv-ukk-haku { margin-bottom: 28px; }

.epv-ukk-haku__kentta {
	width: 100%;
	padding: 16px 20px;
	background: var(--wp--preset--color--musta);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 3px;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
}

.epv-ukk-haku__kentta::placeholder { color: rgba(255, 255, 255, .35); }

.epv-ukk-haku__kentta:focus {
	outline: none;
	border-color: var(--wp--preset--color--kulta);
	box-shadow: 0 0 0 3px rgba(200, 146, 10, .18);
}

.epv-ukk-haku__tila {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .4);
	margin: 10px 0 0;
}

.epv-ukk-pikalinkit {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 40px;
}

.epv-ukk-pikalinkit a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 2px;
	font-size: 13px;
	color: rgba(255, 255, 255, .75);
	text-decoration: none;
}

.epv-ukk-pikalinkit a:hover {
	border-color: var(--wp--preset--color--kulta);
	color: var(--wp--preset--color--kulta-vaalea);
}

.epv-ukk-pikalinkit a span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: var(--wp--preset--color--kulta);
}

.epv-ukk-ryhma { margin-bottom: clamp(40px, 6vw, 64px); scroll-margin-top: 96px; }

.epv-ukk-ryhma__otsikko {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 500;
	color: #fff;
	margin: 0 0 8px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(200, 146, 10, .3);
}

.epv-ukk-ryhma__johdanto {
	font-size: 14px;
	color: rgba(255, 255, 255, .5);
	margin: 0 0 20px;
	max-width: 60ch;
}

.epv-ukk-lista { display: flex; flex-direction: column; }

.epv-ukk-rivi { border-bottom: 1px solid rgba(255, 255, 255, .08); }

.epv-ukk-rivi > summary {
	padding: 16px 32px 16px 0;
	cursor: pointer;
	position: relative;
	font-size: 16px;
	line-height: 1.5;
	color: #fff;
	list-style: none;
}

.epv-ukk-rivi > summary::-webkit-details-marker { display: none; }

/* Oma merkki, koska selaimen oletusnuoli ei noudata värejä */
.epv-ukk-rivi > summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 15px;
	font-size: 20px;
	line-height: 1;
	color: var(--wp--preset--color--kulta);
}

.epv-ukk-rivi[open] > summary::after { content: "−"; }
.epv-ukk-rivi > summary:hover { color: var(--wp--preset--color--kulta-vaalea); }

.epv-ukk-rivi__vastaus { padding: 0 32px 20px 0; }

.epv-ukk-rivi__vastaus p {
	font-size: 15px;
	line-height: 1.75;
	color: rgba(255, 255, 255, .68);
	margin: 0 0 10px;
	max-width: 70ch;
}

.epv-ukk-rivi__lahde { margin: 0; }

.epv-ukk-rivi__lahde a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta);
	text-decoration: none;
}

.epv-ukk-rivi__lahde a:hover { color: var(--wp--preset--color--kulta-vaalea); text-decoration: underline; }

.epv-ukk-tyhja {
	padding: 32px 0;
	text-align: center;
	color: rgba(255, 255, 255, .45);
}

/* Vaalealla artikkelipohjalla koonti pysyy luettavana */
.is-style-section-vaalea .epv-ukk-ryhma__otsikko { color: var(--wp--preset--color--musta); }
.is-style-section-vaalea .epv-ukk-ryhma__johdanto { color: #666; }
.is-style-section-vaalea .epv-ukk-rivi { border-bottom-color: rgba(13, 13, 11, .12); }
.is-style-section-vaalea .epv-ukk-rivi > summary { color: var(--wp--preset--color--musta); }
.is-style-section-vaalea .epv-ukk-rivi__vastaus p { color: #333; }
.is-style-section-vaalea .epv-ukk-pikalinkit a { background: rgba(13, 13, 11, .04); border-color: rgba(13, 13, 11, .14); color: #333; }
.is-style-section-vaalea .epv-ukk-haku__kentta { background: #fff; border-color: rgba(13, 13, 11, .2); color: var(--wp--preset--color--musta); }
.is-style-section-vaalea .epv-ukk-haku__kentta::placeholder { color: #888; }
.is-style-section-vaalea .epv-ukk-haku__tila { color: #666; }

/* ── Spec-ruudukko ────────────────────────────────────────────── */
.epv-spec {
	background: var(--wp--preset--color--musta);
	color: rgba(255, 255, 255, .82);
	padding: clamp(28px, 5vw, 52px) clamp(22px, 4vw, 40px);
	border-radius: 2px;
	margin: 40px 0;
}

.epv-spec__otsikko {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45) !important;
	margin: 0 0 22px !important;
}

.epv-spec__ruudukko {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, .08);
	border-radius: 2px;
	overflow: hidden;
}

.epv-spec__rivi {
	background: var(--wp--preset--color--hiili);
	padding: 20px 28px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}

.epv-spec__avain {
	font-size: 13px;
	color: rgba(255, 255, 255, .45);
}

.epv-spec__arvo {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 20px;
	font-weight: 500;
	color: #fff;
	text-align: right;
}

.epv-spec__avain.on-korostettu,
.epv-spec__arvo.on-korostettu { color: var(--wp--preset--color--kulta-vaalea); }

.epv-spec__alaviite {
	font-size: 13px;
	color: rgba(255, 255, 255, .35) !important;
	margin: 18px 0 0 !important;
}

/* ── Tuotelinkit ─────────────────────────────────────────────── */
.epv-tuotelinkit {
	background: var(--wp--preset--color--musta);
	padding: 32px;
	border-radius: 4px;
	margin: 32px 0;
}

.epv-tuotelinkit__otsikko {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta) !important;
	margin: 0 0 20px !important;
}

.epv-tuotelinkit__ruudukko {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
}

.epv-tuotelinkki {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 2px;
	color: #fff !important;
	font-size: 14px;
	text-decoration: none;
}

.epv-tuotelinkki:hover { background: rgba(200, 146, 10, .22); }
.epv-tuotelinkki__nuoli { color: var(--wp--preset--color--kulta); }

.epv-tuotelinkki.on-korostettu {
	background: rgba(200, 146, 10, .12);
	border-color: rgba(200, 146, 10, .3);
	color: var(--wp--preset--color--kulta-vaalea) !important;
}

.epv-tuotelinkki.on-korostettu .epv-tuotelinkki__nuoli { color: inherit; }

/* ── Vaalea sisältöosio ──────────────────────────────────────────
   theme.json-variantti ei periydy luotettavasti lohkojen sisään,
   joten pakotetaan värit täällä. */
.is-style-section-vaalea,
.is-style-section-vaalea p,
.is-style-section-vaalea li {
	color: var(--wp--preset--color--teksti-tumma);
}

.is-style-section-vaalea h1,
.is-style-section-vaalea h2,
.is-style-section-vaalea h3,
.is-style-section-vaalea h4,
.is-style-section-vaalea strong {
	color: var(--wp--preset--color--musta);
}

/* Otsikot artikkelissa - sama sääntö riippumatta siitä onko otsikko
   tuotu XML:stä vai lisätty editorista. WordPress antaa editorista
   lisätylle otsikolle .wp-block-heading-luokan, has-*-font-size-luokan
   ja joskus inline-marginit; nämä ohitetaan tässä, jotta lopputulos
   on aina sama. */
.is-style-section-vaalea h2,
.is-style-section-vaalea h2.wp-block-heading,
.is-style-section-vaalea h2[class*="has-"][class*="-font-size"] {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: clamp(24px, 3.5vw, 40px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -.01em;
	margin: 56px 0 20px;
}

.is-style-section-vaalea h2:first-child { margin-top: 0; }

.is-style-section-vaalea h3,
.is-style-section-vaalea h3.wp-block-heading,
.is-style-section-vaalea h3[class*="has-"][class*="-font-size"] {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -.01em;
	margin: 36px 0 12px;
}

.is-style-section-vaalea h4,
.is-style-section-vaalea h4.wp-block-heading {
	font-family: var(--wp--preset--font-family--leipa);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	margin: 24px 0 8px;
}

/* Editorin lisäämä blockGap ei saa tuplata otsikon marginia */
.is-style-section-vaalea .wp-block-post-content > h2 + *,
.is-style-section-vaalea .wp-block-post-content > h3 + * { margin-top: 0; }

.is-style-section-vaalea p {
	font-size: 16px;
	line-height: 1.8;
	margin: 0 0 20px;
}

.is-style-section-vaalea a { color: var(--wp--preset--color--kulta); }
.is-style-section-vaalea li { font-size: 16px; line-height: 1.75; }
.is-style-section-vaalea figcaption { color: var(--wp--preset--color--teksti-vaimea); font-size: 13px; }

/* ── Navigaatio ───────────────────────────────────────────────── */
.wp-block-navigation {
	font-family: var(--wp--preset--font-family--leipa);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.wp-block-navigation .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--kulta-vaalea);
}

.wp-block-navigation .wp-block-navigation__submenu-container {
	background: #14140f;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 2px;
	padding: 6px 0;
	min-width: 240px;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	padding: 9px 20px;
}

/* Sivuston nimi: pieni kultainen piste + gemenat */
.wp-block-site-title a {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 21px;
	font-weight: 500;
	letter-spacing: -.01em;
	color: #fff;
	text-decoration: none;
	text-transform: lowercase;
}

.wp-block-site-title::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--kulta);
	margin-right: 12px;
	vertical-align: 2px;
}

/* LedStore-painike navigaation oikealla */
.epv-kauppa-nappi {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--wp--preset--color--kulta);
	color: var(--wp--preset--color--musta) !important;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .04em;
	padding: 12px 22px;
	border-radius: 2px;
	text-decoration: none;
	white-space: nowrap;
}

.epv-kauppa-nappi:hover { background: var(--wp--preset--color--kulta-vaalea); }

/* Sivun hero - taustakuva, otsikko, ingressi, kirjoittajarivi */
.epv-hero {
	/* Murtautuminen 740 px palstasta koko näytön leveyteen.
	   Transformilla, koska WordPressin asettelusäännöt pakottavat
	   sisällön lapsille margin:auto ja kumoaisivat marginaalitempun. */
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 100vw;
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	padding: 100px clamp(20px, 5vw, 80px) 0;
}

.epv-hero__sisalto {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 56px;
}

.epv-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta);
	margin: 0 0 22px;
}

.epv-hero__eyebrow span {
	display: block;
	width: 40px;
	height: 1px;
	background: currentColor;
}

.epv-hero__otsikko {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: clamp(34px, 4.6vw, 62px);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0 0 18px;
	max-width: 16em;
	text-shadow: 0 2px 20px rgba(0, 0, 0, .45);
	hyphens: manual;
	text-wrap: balance;
}

.epv-hero__ingressi {
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .88);
	max-width: 580px;
	margin: 0;
}

.epv-hero__tekija {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 24px;
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
}

.epv-hero__avatar {
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .2);
	display: block;
}

.epv-hero__tekija a {
	color: #fff;
	font-weight: 500;
	text-decoration: none;
}

.epv-hero__tekija a:hover { color: var(--wp--preset--color--kulta-vaalea); }
.epv-hero__erotin { color: rgba(255, 255, 255, .2); }

/* Kirjoittajan esittely - tiedot WordPressin käyttäjäprofiilista */
.epv-tekija__rivi {
	display: flex;
	gap: clamp(24px, 4vw, 48px);
	align-items: flex-start;
	flex-wrap: wrap;
}

.epv-tekija__kuva { flex: 0 0 auto; }

.epv-tekija__avatar {
	border-radius: 4px;
	display: block;
}

.epv-tekija__teksti {
	flex: 1;
	min-width: 280px;
}

.epv-tekija__nimi {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: clamp(32px, 5vw, 64px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0 0 8px;
}

.epv-tekija__nimike {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta);
	margin: 0 0 20px;
}

.epv-tekija__bio p {
	font-size: 16px;
	line-height: 1.8;
	color: rgba(255, 255, 255, .72);
	margin: 0 0 16px;
}

.epv-tekija__bio a { color: var(--wp--preset--color--kulta); }
.epv-tekija__bio a:hover { color: var(--wp--preset--color--kulta-vaalea); }

.epv-tekija__linkit {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 20px;
}

.epv-tekija__linkit a {
	font-size: 14px;
	color: var(--wp--preset--color--kulta);
	text-decoration: none;
}

.epv-tekija__linkit a:hover { color: var(--wp--preset--color--kulta-vaalea); }

/* Taulukot: theme.json ei kata vieritystä kapealla näytöllä */
.wp-block-table { overflow-x: auto; }

/* ── LASKURI ─────────────────────────────────────────────────────────────── */
.epv-laskuri {
	position: relative;
	z-index: 1;
	max-width: 860px;
	width: 100%;
	margin: 40px auto;
	clear: both;
	float: none;
}

.epv-laskuri__kortti {
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 4px 32px rgba(0, 0, 0, .08);
}

.epv-laskuri__vaihe {
	padding: clamp(24px, 4vw, 36px);
	border-bottom: 1px solid #EAE8E0;
}

.epv-laskuri__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta);
	margin: 0 0 16px;
}

.epv-laskuri__label--tumma { color: var(--wp--preset--color--kulta); }

.epv-laskuri__alaotsikko {
	font-size: 13px;
	font-weight: 500;
	color: #333;
	margin: 24px 0 8px;
}

.epv-laskuri__alaotsikko:first-of-type { margin-top: 0; }

.epv-laskuri__napit {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
}

.epv-laskuri__napit--leveat { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.epv-laskuri__nappi {
	padding: 12px 14px;
	border: 1px solid #DDD9D0;
	border-radius: 2px;
	background: #fff;
	color: #444;
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	text-align: left;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.epv-laskuri__nappi:hover { border-color: #C8920A; }

.epv-laskuri__nappi.on-valittu {
	border-color: var(--wp--preset--color--kulta);
	background: rgba(200, 146, 10, .12);
	color: #8A6407;
	font-weight: 500;
}

.epv-laskuri__nappi-sub { font-size: 11px; opacity: .55; }

.epv-laskuri__tavoite {
	margin-top: 16px;
	padding: 12px 16px;
	background: #F5F3EF;
	border-left: 3px solid var(--wp--preset--color--kulta);
	border-radius: 0 2px 2px 0;
	font-size: 13px;
	color: #555;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.epv-laskuri__tavoite strong { color: #333; font-weight: 500; }
.epv-laskuri__tavoite span { color: var(--wp--preset--color--kulta); }
.epv-laskuri__tavoite em { color: #777; }

.epv-laskuri__kentat {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
}

.epv-laskuri__kentat label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	color: #555;
}

.epv-laskuri__kentat input,
.epv-laskuri__kentat select {
	padding: 11px 13px;
	border: 1px solid #DDD9D0;
	border-radius: 2px;
	font-family: inherit;
	font-size: 15px;
	color: var(--wp--preset--color--musta);
	background: #fff;
}

.epv-laskuri__huomio {
	margin-top: 16px;
	padding: 12px 16px;
	background: #F0EDE8;
	border-left: 3px solid var(--wp--preset--color--kulta);
	border-radius: 0 2px 2px 0;
	font-size: 13px;
	line-height: 1.6;
	color: #444;
}

.epv-laskuri__tulos {
	background: var(--wp--preset--color--musta);
	padding: clamp(24px, 4vw, 36px);
	color: rgba(255, 255, 255, .82);
}

.epv-laskuri__luvut {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, .07);
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 28px;
}

.epv-laskuri__luvut--kaksi { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 16px; }

.epv-laskuri__luvut > div {
	background: var(--wp--preset--color--hiili);
	padding: 22px 20px;
	text-align: center;
}

.epv-laskuri__luku {
	display: block;
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 40px;
	font-weight: 400;
	color: #fff;
	line-height: 1.1;
}

.epv-laskuri__luku--kulta { color: var(--wp--preset--color--kulta-vaalea); font-size: 32px; }

.epv-laskuri__luku-teksti {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
	margin-top: 6px;
}

.epv-laskuri__mittari-osa { margin-bottom: 28px; }

.epv-laskuri__mittari-otsake {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.epv-laskuri__mittari-otsake p {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
	margin: 0;
}

.epv-laskuri__mittari-otsake span {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 26px;
	color: #fff;
}

.epv-laskuri__mittari {
	position: relative;
	height: 14px;
	border-radius: 4px;
	overflow: hidden;
	background: linear-gradient(to right, #e24b4a 0%, #e24b4a 20%, #f0a500 35%, #4caf50 55%, #4caf50 80%, #2e7d32 100%);
}

.epv-laskuri__neula {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 0 8px rgba(255, 255, 255, .6);
	transform: translateX(-50%);
	transition: left .4s cubic-bezier(.25, .46, .45, .94);
}

.epv-laskuri__asteikko {
	display: flex;
	justify-content: space-between;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: rgba(255, 255, 255, .4);
	margin-top: 6px;
}

.epv-laskuri__verdict {
	margin-top: 16px;
	padding: 12px 16px;
	border-radius: 3px;
	font-size: 14px;
	line-height: 1.6;
}

.epv-laskuri__verdict.on-hyva        { background: rgba(76, 175, 80, .14);  color: #7ddc82; }
.epv-laskuri__verdict.on-lahella     { background: rgba(240, 165, 0, .14);  color: #f5c451; }
.epv-laskuri__verdict.on-riittamaton { background: rgba(226, 75, 74, .14);  color: #f08a89; }

.epv-laskuri__spotit {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-top: 24px;
	margin-bottom: 24px;
}

.epv-laskuri__spottiteksti {
	font-size: 13px;
	color: rgba(255, 255, 255, .55);
	line-height: 1.7;
	margin: 0 0 16px;
}

.epv-laskuri__linkit { display: flex; gap: 10px; flex-wrap: wrap; }
.epv-laskuri__linkit .epv-nappi { padding: 11px 22px; }

.epv-laskuri__tekninen {
	font-size: 13px;
	color: rgba(255, 255, 255, .45);
	line-height: 1.75;
	padding: 14px 16px;
	background: rgba(255, 255, 255, .04);
	border-radius: 3px;
}

.epv-laskuri__vastuuvapaus {
	padding: 20px 24px;
	background: #FAFAF8;
	border-top: 1px solid #EAE8E0;
}

.epv-laskuri__vastuuvapaus p {
	font-size: 12px;
	color: #888;
	line-height: 1.7;
	margin: 0;
}

.epv-laskuri__vastuuvapaus a { color: var(--wp--preset--color--kulta); text-decoration: underline; }

.epv-laskuri__noscript {
	padding: 16px;
	background: #fff3cd;
	border-left: 3px solid var(--wp--preset--color--kulta);
	color: #856404;
}

/* ── ETUSIVU ─────────────────────────────────────────────────── */
.epv-etu-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--wp--preset--color--musta);
}

.epv-etu-hero__kuva {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(to bottom, rgba(13,13,11,.6) 0%, rgba(13,13,11,.72) 40%, rgba(13,13,11,.97) 78%, #0D0D0B 100%),
		url('https://ledstore.fi/uploads/blog/kansikuva-makuuhuoneen-alaslasku-750x375-1.jpg');
	background-size: cover;
	background-position: center;
}

.epv-etu-hero__sisalto {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding: 120px clamp(20px, 5vw, 80px) 48px;
}

.epv-etu-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta);
	margin: 0 0 28px;
}

.epv-etu-eyebrow span {
	display: block;
	width: 36px;
	height: 1px;
	background: currentColor;
	flex-shrink: 0;
}

.epv-etu-hero__otsikko {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: clamp(42px, 8vw, 108px);
	font-weight: 600;
	line-height: .98;
	letter-spacing: -.03em;
	color: #fff;
	max-width: 860px;
	margin: 0 0 28px;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}

.epv-etu-hero__otsikko em {
	font-style: italic;
	color: var(--wp--preset--color--kulta-vaalea);
}

.epv-etu-hero__ingressi {
	font-size: 17px;
	color: rgba(255, 255, 255, .88);
	max-width: 480px;
	line-height: 1.65;
	margin: 0 0 40px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

.epv-etu-hero__napit {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 32px;
}

.epv-nappi {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 14px 32px;
	border-radius: 2px;
	text-decoration: none;
}

.epv-nappi--kulta {
	background: var(--wp--preset--color--kulta);
	color: var(--wp--preset--color--musta) !important;
	font-weight: 500;
}

.epv-nappi--kulta:hover { background: var(--wp--preset--color--kulta-vaalea); }

.epv-nappi--reuna {
	border: 1px solid rgba(255, 255, 255, .25);
	color: #fff !important;
}

.epv-nappi--reuna:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }

.epv-nappi--reuna-tumma {
	border: 1px solid rgba(0, 0, 0, .18);
	color: var(--wp--preset--color--musta) !important;
}

.epv-nappi--reuna-tumma:hover { border-color: var(--wp--preset--color--musta); }

.epv-etu-luvut {
	position: relative;
	z-index: 1;
	border-top: 1px solid rgba(255, 255, 255, .1);
	background: rgba(13, 13, 11, .5);
	backdrop-filter: blur(8px);
}

.epv-etu-luvut__rivi {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(20px, 5vw, 80px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.epv-etu-luvut__rivi > div {
	padding: 28px 32px;
	border-right: 1px solid rgba(255, 255, 255, .1);
}

.epv-etu-luvut__rivi > div:first-child { padding-left: 0; }
.epv-etu-luvut__rivi > div:last-child { border-right: 0; }

.epv-luku {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: clamp(30px, 4vw, 52px);
	font-weight: 400;
	color: #fff;
	line-height: 1;
	margin: 0 0 4px;
}

.epv-luku span { color: var(--wp--preset--color--kulta); }
.epv-luku small { font-size: 15px; color: rgba(255, 255, 255, .5); }

.epv-luku__teksti {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
	margin: 0;
}

.epv-etu-intro {
	background: var(--wp--preset--color--luonnonvalkoinen);
	color: var(--wp--preset--color--musta);
	padding: clamp(60px, 10vw, 120px) clamp(20px, 5vw, 80px);
}

.epv-etu-intro__ruudukko {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(40px, 6vw, 100px);
	align-items: center;
}

.epv-etu-intro__kuva { position: relative; }

.epv-etu-intro__kuva img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 2px;
	display: block;
}

.epv-etu-intro__merkki {
	position: absolute;
	bottom: -20px;
	right: -20px;
	background: var(--wp--preset--color--kulta);
	padding: 20px 24px;
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 38px;
	font-weight: 500;
	color: var(--wp--preset--color--musta);
	line-height: 1;
	border-radius: 2px;
}

.epv-etu-intro__merkki small { font-size: 13px; }

.epv-etu-intro__merkki-teksti {
	display: block;
	font-family: var(--wp--preset--font-family--leipa);
	font-size: 13px !important;
	font-weight: 400;
	color: rgba(13, 13, 11, .7);
	margin-top: 4px;
}

.epv-etu-otsikko {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: clamp(28px, 4vw, 52px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--musta);
	margin: 0 0 24px;
}

.epv-etu-otsikko--vaalea { color: #fff; }

.epv-etu-leipa {
	font-size: 16px;
	color: #444;
	line-height: 1.8;
	margin: 0 0 18px;
}

.epv-etu-leipa a { color: var(--wp--preset--color--kulta); text-decoration: underline; }

.epv-etu-rakenteet { background: var(--wp--preset--color--luonnonvalkoinen); }

.epv-etu-rakenteet__otsake {
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 80px) clamp(32px, 4vw, 48px);
}

/* Rakennekortit: 400 px minimi pakotti vaakavierityksen kapealla näytöllä */
.epv-etu-kortti {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
	min-height: 500px;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.epv-etu-kortti--viimeinen { border-bottom: 0; }
.epv-etu-kortti__kuva { overflow: hidden; }

.epv-etu-kortti__kuva img {
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	display: block;
}

.epv-etu-kortti__teksti {
	padding: clamp(32px, 5vw, 72px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--wp--preset--color--luonnonvalkoinen);
}

.epv-etu-numero {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: clamp(60px, 10vw, 120px);
	font-weight: 300;
	color: rgba(13, 13, 11, .06);
	line-height: 1;
	margin: 0 0 -20px;
}

.epv-etu-kortti__luokka {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta);
	margin: 0 0 16px;
}

.epv-etu-kortti__otsikko {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: clamp(24px, 3.5vw, 40px);
	font-weight: 500;
	color: var(--wp--preset--color--musta);
	line-height: 1.12;
	margin: 0 0 16px;
}

.epv-etu-kortti__leipa {
	font-size: 15px;
	color: #555;
	line-height: 1.75;
	margin: 0 0 28px;
}

.epv-etu-kortti__faktat {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(0, 0, 0, .08);
	padding-top: 24px;
}

.epv-etu-kortti__faktat > div { display: flex; flex-direction: column; gap: 4px; }

.epv-etu-fakta {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 22px;
	font-weight: 500;
	color: var(--wp--preset--color--musta);
}

.epv-etu-fakta__teksti {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #888;
}

.epv-etu-linkki {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--musta) !important;
	font-weight: 500;
	margin-top: 20px;
	text-decoration: underline;
	text-decoration-color: rgba(0, 0, 0, .2);
	align-self: flex-start;
}

.epv-etu-linkki:hover {
	color: var(--wp--preset--color--kulta) !important;
	text-decoration-color: currentColor;
}

.epv-etu-paatokset {
	background: var(--wp--preset--color--musta);
	padding: clamp(60px, 10vw, 120px) clamp(20px, 5vw, 80px);
}

.epv-etu-paatokset__sisalto { max-width: 1200px; margin: 0 auto; }

.epv-etu-paatokset__otsake {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 48px;
}

.epv-etu-paatokset__ruudukko {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 2px;
	overflow: hidden;
}

.epv-etu-paatos {
	background: var(--wp--preset--color--hiili);
	padding: 40px 32px;
	display: block;
	text-decoration: none;
	transition: background .2s;
}

.epv-etu-paatos:hover { background: var(--wp--preset--color--hiili-vaalea); }

.epv-etu-paatos__nro {
	display: block;
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 44px;
	font-weight: 300;
	color: rgba(255, 255, 255, .14);
	line-height: 1;
	margin-bottom: 14px;
}

.epv-etu-paatos h3 {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 22px;
	font-weight: 500;
	color: #fff;
	margin: 0 0 12px;
	line-height: 1.2;
}

.epv-etu-paatos p {
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .45);
	margin: 0;
}

/* ── MOBIILI ─────────────────────────────────────────────────────────────── */

/* Perusturva: mikään ei valu reunan yli.
   HUOM: overflow-x vain bodylle ja clip-arvolla - hidden htmlille luo
   sisäkkäisen vierityskontekstin, joka rikkoo sticky-navin ja pinoutumisen. */
body { max-width: 100%; overflow-x: clip; }

/* Grid- ja flex-lapset kutistuvat sisällön alle vain jos min-width nollataan */
.epv-etu-intro__ruudukko > *,
.epv-etu-kortti > *,
.epv-etu-paatokset__ruudukko > *,
.epv-footer__ruudukko > *,
.epv-profiilit__ruudukko > *,
.epv-laskuri__luvut > *,
.epv-laskuri__kentat > * { min-width: 0; }

/* Pitkät sanat ja osoitteet eivät riko layoutia */
h1, h2, h3, .epv-etu-hero__otsikko, .epv-etu-kortti__otsikko, .epv-kortti__nimi {
	overflow-wrap: break-word;
	hyphens: auto;
}

.epv-kortti__koodi { overflow-wrap: anywhere; }

/* Kaikki taulukot vieritettäviksi */
.wp-block-table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 900px) {
	/* Hero: reunukset varmistettuna, ei tuplana sisäkkäiseen elementtiin */
	.epv-hero {
		min-height: auto;
		padding: 88px 20px 0;
	}

	.epv-hero__sisalto { padding-bottom: 36px; }
	.epv-hero__otsikko { font-size: clamp(30px, 9vw, 46px); }
	.epv-hero__ingressi { font-size: 16px; }
	.epv-hero__tekija { font-size: 13px; gap: 10px; }

	/* Profiilikortin kuva ei saa litistyä */
	.epv-kuva { min-height: 220px; }

	/* Hero: 100svh on liikaa kun osoitepalkki vie tilaa */
	.epv-etu-hero { min-height: auto; }

	.epv-etu-hero__sisalto { padding-top: 100px; padding-bottom: 40px; }

	/* Lukupalkki: reunaviivat pystysuunnassa kun rivit rivittyvät */
	.epv-etu-luvut__rivi { grid-template-columns: repeat(2, 1fr); }

	.epv-etu-luvut__rivi > div {
		padding: 20px 0;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .1);
	}

	.epv-etu-luvut__rivi > div:nth-child(odd) {
		padding-right: 20px;
		border-right: 1px solid rgba(255, 255, 255, .1);
	}

	.epv-etu-luvut__rivi > div:nth-child(even) { padding-left: 20px; }
	.epv-etu-luvut__rivi > div:nth-last-child(-n+2) { border-bottom: 0; }

	/* Rakennekortit: kuva aina ennen tekstiä, myös käännetyissä */
	.epv-etu-kortti { min-height: 0; }
	.epv-etu-kortti--kaanteinen .epv-etu-kortti__kuva { order: -1; }
	.epv-etu-kortti__kuva img { min-height: 240px; max-height: 320px; }

	/* Intro-merkki ei saa valua kuvan ulkopuolelle */
	.epv-etu-intro__merkki {
		bottom: -14px;
		right: 12px;
		padding: 14px 18px;
		font-size: 30px;
	}

	.epv-etu-intro__kuva img { aspect-ratio: 4 / 3; }

	/* Päätösruudukko: otsake pinoon */
	.epv-etu-paatokset__otsake { flex-direction: column; align-items: flex-start; }

	/* Footer: brändiosio omalle riville */
	.epv-footer__ruudukko { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 36px 28px; }
	.epv-footer__brandi { grid-column: 1 / -1; }
	.epv-footer__kuvaus { max-width: 100%; }
}

@media (max-width: 600px) {
	/* Otsikot kapealle näytölle */
	.epv-etu-hero__otsikko { font-size: clamp(34px, 11vw, 52px); letter-spacing: -.02em; }
	.epv-etu-hero__ingressi { font-size: 16px; margin-bottom: 28px; }
	.epv-etu-hero__napit { gap: 10px; margin-top: 24px; }

	/* Napit täysleveiksi, jotta kosketusalue riittää */
	.epv-nappi { width: 100%; justify-content: center; padding: 15px 24px; }
	.epv-etu-hero__napit, .epv-laskuri__linkit { flex-direction: column; align-items: stretch; }

	.epv-luku { font-size: 30px; }
	.epv-etu-numero { font-size: 64px; margin-bottom: -12px; }

	/* Rakennekortin faktat pinoon, ettei teksti katkea */
	.epv-etu-kortti__faktat { gap: 16px 24px; }
	.epv-etu-kortti__teksti { padding: 32px 20px; }

	.epv-etu-paatos { padding: 28px 22px; }

	/* Galleria: pikkukuvat 5 kappaletta on liian kapea - vain 4 näkyviin */
	.epv-galleria__iso { aspect-ratio: 4 / 3; }
	.epv-galleria__pikku { gap: 6px; }
	.epv-galleria__pikku .epv-pikku:nth-child(n+5) { display: none; }

	/* Nuolet suuremmiksi kosketukseen */
	.epv-nuoli { width: 40px; height: 40px; font-size: 24px; }

	/* Profiilikortit yhteen sarakkeeseen */
	.epv-profiilit__ruudukko { grid-template-columns: 1fr; }

	/* Laskuri */
	.epv-laskuri { margin: 24px 0; }
	.epv-laskuri__kortti { border-radius: 4px; }
	.epv-laskuri__napit,
	.epv-laskuri__napit--leveat { grid-template-columns: 1fr 1fr; }
	.epv-laskuri__kentat { grid-template-columns: 1fr 1fr; }
	.epv-laskuri__luvut { grid-template-columns: 1fr; }
	.epv-laskuri__luku { font-size: 34px; }
	.epv-laskuri__luku--kulta { font-size: 26px; }
	.epv-laskuri__tavoite { flex-direction: column; gap: 4px; }
	.epv-laskuri__asteikko span:nth-child(2),
	.epv-laskuri__asteikko span:nth-child(4) { display: none; }

	/* Kenttäkoko 16 px estää iOS:n automaattisen zoomin */
	.epv-laskuri__kentat input,
	.epv-laskuri__kentat select { font-size: 16px; }

	/* Taulukot: tiiviimmät marginaalit */
	.wp-block-table.is-style-epv-vertailu th,
	.wp-block-table.is-style-epv-vertailu td { padding: 12px 14px; }
	.wp-block-table.is-style-epv-vertailu td.epv-arvo,
	.wp-block-table.is-style-epv-vertailu table.epv-arvosarake td:nth-child(2) { font-size: 18px; }
}

@media (max-width: 400px) {
	.epv-laskuri__napit,
	.epv-laskuri__napit--leveat,
	.epv-laskuri__kentat { grid-template-columns: 1fr; }
	.epv-etu-luvut__rivi { grid-template-columns: 1fr; }
	.epv-etu-luvut__rivi > div:nth-child(odd) { border-right: 0; padding-right: 0; }
	.epv-etu-luvut__rivi > div:nth-child(even) { padding-left: 0; }
	.epv-etu-luvut__rivi > div:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .1); }
	.epv-etu-luvut__rivi > div:last-child { border-bottom: 0; }
	.epv-footer__ruudukko { grid-template-columns: 1fr; }
}

/* Tulostus: navigaatio ja CTA pois */
@media print {
	header, footer, .epv-nuoli, .epv-laskuri { display: none !important; }
	body { background: #fff; color: #000; }
}

/* Hero: otsikko ja ingressi ovat sisälohkoja.
   Tyylit kohdistetaan myös ilman luokkaa, jotta ne pätevät vaikka
   käyttäjä lisäisi lohkon itse tai vaihtaisi otsikkotasoa. */
.epv-hero__teksti { max-width: 900px; }

.epv-hero__teksti > *:first-child { margin-top: 0; }
.epv-hero__teksti > *:last-child { margin-bottom: 0; }

.epv-hero__teksti h1,
.epv-hero__teksti h2,
.epv-hero__teksti .epv-hero__otsikko,
.epv-hero .epv-hero__otsikko {
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: clamp(34px, 4.6vw, 62px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0 0 18px;
	text-shadow: 0 2px 20px rgba(0, 0, 0, .45);
	max-width: 20ch;
}

.epv-hero__teksti p,
.epv-hero__teksti .epv-hero__ingressi {
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .88);
	max-width: 60ch;
	margin: 0 0 22px;
	text-wrap: pretty;
}

/* Editorin hero: sama ulkoasu, mutta vihjeteksti kirjoittajarivin tilalla */
.epv-hero--editori {
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	padding: 100px clamp(20px, 5vw, 80px) 0;
}

.epv-hero__tekija--vihje {
	font-size: 12px;
	color: rgba(255, 255, 255, .4);
	font-style: italic;
	margin: 8px 0 0;
}

/* Editorissa otsikkolohkon oma väri ei saa jäädä theme.json-oletuksen alle */
.epv-hero--editori .wp-block-heading,
.epv-hero--editori h1,
.epv-hero--editori h2 { color: #fff; }