/**
 * Hero – ehdokas.
 *
 * Neljä versiota (a–d). Mitat vastaavat 1440 px:n suunnitelmaa, mutta
 * asettelu on joustava: kuva-alue kutistuu clampilla eikä rikkoudu
 * väliliiskoilla 1024 ja 768 px.
 */

.v-hero {
	position: relative;
	overflow: hidden;
	padding-left: var(--v-sivumarginaali);
	padding-right: var(--v-sivumarginaali);
	display: flex;
	align-items: center;
}

.v-hero__sisalto {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--v-sisalto-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.v-hero__teksti {
	display: flex;
	flex-direction: column;
	gap: 28px;
	flex: 1 1 520px;
	max-width: 620px;
	position: relative;
	z-index: 2;
}

.v-hero__nimi {
	font-size: var(--wp--preset--font-size--h1, clamp(52px, 6.2vw, 88px));
	line-height: 0.98;
	letter-spacing: -0.035em;
	color: var(--v-paa);
}

.v-hero__slogan {
	font-family: var(--v-font-otsikko);
	font-weight: 700;
	font-size: clamp(21px, 2.2vw, 30px);
	line-height: 1.25;
	color: var(--v-teksti);
	max-width: 580px;
	margin: 0;
}

.v-hero__napit {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* Ikonirivi (versiot a ja b) */
.v-hero__ikonirivi {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	gap: 40px;
}

.v-hero__ikonikohta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 180px;
}

.v-hero__ikoni {
	width: 38px;
	height: 38px;
}

.v-hero__ikoniteksti {
	font-family: var(--v-font-otsikko);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
	color: var(--v-teksti);
}

/* Päivärivi (versiot c ja d) */
.v-hero__paivat {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
	margin: 0;
	font-family: var(--v-font-otsikko);
	font-weight: 600;
	font-size: 15px;
	color: var(--v-valkoinen);
}

.v-hero__paiva-label {
	color: var(--v-vaalea);
	margin-right: 6px;
}

/* Kuva-alue */
.v-hero__kuva-alue {
	position: relative;
	flex: 0 0 auto;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
}

.v-hero__merkki {
	position: absolute;
	z-index: 3;
}

/* Taustakuva ja varjostus (versiot b ja d) */
.v-hero__tausta {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.v-hero__taustakuva {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--fokus, 40% 50%);
	display: block;
}

.v-hero__varjostus {
	position: absolute;
	inset: 0;
	display: block;
}

/* Maapallokoriste */
.v-hero__maapallo {
	position: absolute;
	display: block;
	pointer-events: none;
}

.v-hero__maapallo svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* =========================================================================
   Versio A – vaalea tausta, pyöreä kuva
   ========================================================================= */

.v-hero--a {
	min-height: 720px;
	background: var(--v-vaalea-tint);
}

.v-hero--a .v-hero__kuva-alue {
	width: clamp(320px, 44vw, 640px);
	aspect-ratio: 1;
}

.v-hero__ympyrakuva {
	width: 87.5%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 20%;
	display: block;
	margin-right: 4%;
}

.v-hero--a .v-hero__merkki {
	right: -24px;
	bottom: 6px;
}

/* Tummalla taustalla teksti kääntyy vaaleaksi. Koskee versioita b, c ja d. */
.v-hero.v-tumma-tausta .v-hero__nimi {
	color: var(--v-valkoinen);
}

.v-hero.v-tumma-tausta .v-hero__slogan {
	color: var(--v-vaalea);
}

.v-hero.v-tumma-tausta .v-hero__ikoniteksti {
	color: var(--v-valkoinen);
}

/* =========================================================================
   Versio B – taustakuva + pyöreä rajattu kuva
   ========================================================================= */

.v-hero--b {
	min-height: 720px;
	background: var(--v-tumma);
}

.v-hero--b .v-hero__varjostus {
	background: linear-gradient(
		90deg,
		rgba(var(--v-overlay), .92) 0%,
		rgba(var(--v-overlay), .78) 36%,
		rgba(var(--v-overlay), .25) 66%,
		rgba(var(--v-overlay), .05) 100%
	);
}

.v-hero--b .v-hero__kuva-alue {
	width: clamp(320px, 44vw, 640px);
	aspect-ratio: 1;
}

/*
 * Versiossa b ikonit ovat vaaleassa ympyrässä: tummanvihreä symboli ei
 * erottuisi suoraan tummaa taustakuvaa vasten.
 */
.v-hero--b .v-hero__ikoni {
	width: 52px;
	height: 52px;
	padding: 11px;
	border-radius: 50%;
	background: var(--v-vaalea);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.v-hero__ympyra {
	position: relative;
	width: 87.5%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--v-valkoinen);
	margin-right: 4%;
}

.v-hero--b .v-hero__maapallo {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 89%;
	height: 89%;
	opacity: .12;
}

.v-hero__rajattu {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	height: 93%;
	width: auto;
	max-width: none;
	display: block;
}

.v-hero--b .v-hero__merkki {
	right: -24px;
	bottom: 6px;
}

/* =========================================================================
   Versiot C ja D – henkilö pääkuvana
   ========================================================================= */

.v-hero--c,
.v-hero--d {
	min-height: 760px;
	background: var(--v-tumma);
	align-items: flex-end;
}

.v-hero--c .v-hero__sisalto,
.v-hero--d .v-hero__sisalto {
	align-items: flex-end;
	min-height: 760px;
}

.v-hero--c .v-hero__teksti,
.v-hero--d .v-hero__teksti {
	max-width: 600px;
	gap: 26px;
	padding: 96px 0;
	margin-top: auto;
	margin-bottom: auto;
}

.v-hero--c .v-hero__nimi,
.v-hero--d .v-hero__nimi {
	font-size: var(--wp--preset--font-size--h1-iso, clamp(60px, 7.8vw, 112px));
	line-height: 0.92;
	letter-spacing: -0.04em;
	color: var(--v-valkoinen);
}

.v-hero--c .v-hero__slogan,
.v-hero--d .v-hero__slogan {
	color: var(--v-vaalea);
	max-width: 540px;
}

.v-hero--c .v-hero__kuva-alue,
.v-hero--d .v-hero__kuva-alue {
	flex: 1 1 auto;
	align-self: flex-end;
	min-height: 760px;
	align-items: flex-end;
	justify-content: flex-end;
}

.v-hero--c .v-hero__maapallo--iso {
	right: -6%;
	top: 50px;
	width: 700px;
	height: 700px;
	max-width: 110%;
	opacity: .55;
	z-index: 0;
}

.v-hero__henkilo {
	position: relative;
	z-index: 2;
	height: clamp(420px, 48vw, 700px);
	width: auto;
	max-width: none;
	display: block;
	margin-right: 70px;
}

/* Olkapään korkeudella, osin henkilön päällä (suunnitelmassa top 400 / 760). */
.v-hero--c .v-hero__merkki,
.v-hero--d .v-hero__merkki {
	left: 0;
	bottom: 120px;
	z-index: 3;
}

.v-hero--d .v-hero__varjostus {
	background: linear-gradient(
		90deg,
		rgba(var(--v-overlay), .92) 0%,
		rgba(var(--v-overlay), .75) 38%,
		rgba(var(--v-overlay), .25) 68%,
		rgba(var(--v-overlay), .15) 100%
	);
}

/* =========================================================================
   Väliliiskat
   ========================================================================= */

/*
 * Tablettialue alkaa samasta kohdasta kuin ylätunnisteen hampurilaisvalikko
 * (1200 px), jotta hero ei jää kiinteään 720/760 px:n korkeuteen silloin kun
 * kuva on jo kutistunut. Korkeus skaalautuu leveyden mukana clampilla —
 * pelkkä min-height:0 litisti heron alle 470 px:n.
 */
@media (max-width: 1200px) {
	.v-hero__ikonirivi {
		gap: 24px;
	}

	.v-hero__henkilo {
		margin-right: 0;
	}

	.v-hero--a,
	.v-hero--b {
		min-height: clamp(520px, 60vw, 720px);
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.v-hero--a .v-hero__kuva-alue,
	.v-hero--b .v-hero__kuva-alue {
		width: clamp(280px, 38vw, 480px);
	}

	/*
	 * Versioissa c ja d henkilökuva kutistuu leveyden mukana, joten myös
	 * osion korkeuden on kutistuttava — muuten kuvan yläpuolelle jää
	 * tyhjää tilaa.
	 */
	.v-hero--c,
	.v-hero--d,
	.v-hero--c .v-hero__sisalto,
	.v-hero--d .v-hero__sisalto,
	.v-hero--c .v-hero__kuva-alue,
	.v-hero--d .v-hero__kuva-alue {
		min-height: clamp(560px, 58vw, 760px);
	}

	.v-hero__henkilo {
		height: clamp(420px, 52vw, 700px);
	}

	.v-hero--c .v-hero__teksti,
	.v-hero--d .v-hero__teksti {
		padding: 56px 0;
	}

	.v-hero--c .v-hero__nimi,
	.v-hero--d .v-hero__nimi {
		font-size: clamp(48px, 6.5vw, 80px);
	}

	.v-hero--c .v-hero__merkki,
	.v-hero--d .v-hero__merkki {
		bottom: 80px;
	}
}

/* =========================================================================
   Mobiili
   ========================================================================= */

@media (max-width: 781px) {
	.v-hero {
		padding-top: 36px;
		padding-bottom: 48px;
		min-height: 0;
		align-items: stretch;
	}

	.v-hero__sisalto {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	/*
	 * Sisältö on mobiilissa pystysuuntainen flex, jolloin työpöydän
	 * flex-basis 520 px muuttuisi korkeudeksi ja jättäisi tekstin alle
	 * tyhjän vihreän alueen. Korkeus tulee sisällöstä.
	 */
	.v-hero__teksti {
		max-width: none;
		gap: 20px;
		flex: 0 0 auto;
	}

	.v-hero__napit {
		flex-direction: column;
		gap: 12px;
	}

	.v-hero__ikonirivi {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}

	.v-hero__ikonikohta {
		align-items: center;
		text-align: center;
		max-width: none;
	}

	.v-hero__ikoniteksti {
		font-size: 14px;
	}

	.v-hero__paivat {
		justify-content: space-between;
		gap: 12px;
		font-size: 14px;
	}

	/* Versiot A ja B: kuva tekstin jälkeen */
	.v-hero--a .v-hero__kuva-alue,
	.v-hero--b .v-hero__kuva-alue {
		width: 100%;
		aspect-ratio: auto;
		height: 330px;
		order: 2;
		justify-content: flex-start;
	}

	.v-hero__ympyrakuva,
	.v-hero__ympyra {
		width: 310px;
		height: 310px;
		margin-right: 0;
	}

	.v-hero--a .v-hero__merkki,
	.v-hero--b .v-hero__merkki {
		right: -8px;
		bottom: -8px;
	}

	/*
	 * Versiot C ja D: kuva-alue ensin, sitten teksti. Tummassa versiossa
	 * kuva-alueen alareuna liukuu tekstiosan taustaan ohuen erottimen kautta.
	 */
	.v-hero--c .v-hero__sisalto,
	.v-hero--d .v-hero__sisalto {
		min-height: 0;
		flex-direction: column;
	}

	.v-hero--c .v-hero__kuva-alue,
	.v-hero--d .v-hero__kuva-alue {
		order: -1;
		width: 100%;
		min-height: 0;
		height: 400px;
		margin: -36px calc(-1 * var(--v-sivumarginaali)) 0;
		width: calc(100% + 2 * var(--v-sivumarginaali));
		border-bottom: 1px solid rgba(217, 234, 154, .35);
	}

	.v-hero--c .v-hero__teksti,
	.v-hero--d .v-hero__teksti {
		padding: 0;
		max-width: none;
	}

	.v-hero--c .v-hero__maapallo--iso {
		left: 40px;
		right: auto;
		top: 30px;
		width: 360px;
		height: 360px;
	}

	/* Mobiilissa henkilö on kuva-alueen ainoa sisältö → keskelle */
	.v-hero__henkilo {
		position: absolute;
		left: 50%;
		right: auto;
		bottom: 0;
		height: 390px;
		margin-right: 0;
		transform: translateX(-50%);
	}

	.v-hero--c .v-hero__merkki,
	.v-hero--d .v-hero__merkki {
		left: 12px;
		bottom: 16px;
	}

	/* Mobiilissa taustakuva varjostetaan pystysuunnassa */
	.v-hero--b .v-hero__varjostus {
		background: linear-gradient(
			180deg,
			rgba(var(--v-overlay), .55) 0%,
			rgba(var(--v-overlay), .8) 45%,
			rgba(var(--v-overlay), .94) 100%
		);
	}

	.v-hero--d .v-hero__tausta {
		bottom: auto;
		height: 400px;
	}

	/* Oma rajauskohta mobiilissa, jos lohkoon on annettu */
	.v-hero__taustakuva {
		object-position: var(--fokus-mobiili, var(--fokus, 40% 50%));
	}

	.v-hero--d .v-hero__varjostus {
		background: linear-gradient(
			180deg,
			rgba(var(--v-overlay), .15) 0%,
			rgba(var(--v-overlay), .3) 60%,
			var(--v-tumma) 100%
		);
	}
}

/* =========================================================================
   Lohkon asetukset: varjostuksen voimakkuus (b, d) ja iso henkilökuva (c, d)
   Tiedoston lopussa, jotta nämä voittavat ylempien media queryjen säännöt.
   ========================================================================= */

.v-hero--varjostus-kevyt .v-hero__varjostus {
	background: linear-gradient(
		90deg,
		rgba(var(--v-overlay), .6) 0%,
		rgba(var(--v-overlay), .35) 40%,
		rgba(var(--v-overlay), 0) 72%
	);
}

.v-hero--varjostus-ei .v-hero__varjostus {
	display: none;
}

/* Ilman varjostusta teksti saa kevyen varjon, jotta se erottuu vaaleasta kuvasta. */
.v-hero--varjostus-ei .v-nosto,
.v-hero--varjostus-ei .v-hero__nimi,
.v-hero--varjostus-ei .v-hero__slogan,
.v-hero--varjostus-ei .v-hero__paivat,
.v-hero--varjostus-ei .v-hero__ikoniteksti {
	text-shadow: 0 2px 14px rgba(var(--v-overlay), .6), 0 0 2px rgba(var(--v-overlay), .4);
}

.v-hero--henkilo-iso,
.v-hero--henkilo-iso .v-hero__sisalto,
.v-hero--henkilo-iso .v-hero__kuva-alue {
	min-height: 840px;
}

.v-hero--henkilo-iso .v-hero__henkilo {
	height: clamp(480px, 58vw, 840px);
	margin-right: 24px;
}

.v-hero--henkilo-iso .v-hero__merkki {
	bottom: 140px;
}

@media (max-width: 1200px) {
	.v-hero--henkilo-iso,
	.v-hero--henkilo-iso .v-hero__sisalto,
	.v-hero--henkilo-iso .v-hero__kuva-alue {
		min-height: clamp(600px, 64vw, 840px);
	}

	.v-hero--henkilo-iso .v-hero__henkilo {
		height: clamp(480px, 60vw, 840px);
		margin-right: 0;
	}

	.v-hero--henkilo-iso .v-hero__merkki {
		bottom: 100px;
	}
}

@media (max-width: 781px) {
	.v-hero--varjostus-kevyt .v-hero__varjostus {
		background: linear-gradient(
			180deg,
			rgba(var(--v-overlay), 0) 0%,
			rgba(var(--v-overlay), .25) 55%,
			var(--v-tumma) 100%
		);
	}

	.v-hero--henkilo-iso,
	.v-hero--henkilo-iso .v-hero__sisalto {
		min-height: 0;
	}

	.v-hero--henkilo-iso .v-hero__kuva-alue {
		min-height: 0;
		height: 480px;
	}

	.v-hero--henkilo-iso .v-hero__henkilo {
		height: 470px;
	}

	.v-hero--henkilo-iso.v-hero--d .v-hero__tausta {
		height: 480px;
	}

	.v-hero--henkilo-iso .v-hero__merkki {
		bottom: 16px;
	}
}