/**
 * SAK Hero: kaksi vaakakuvaa vierekkäin + keskitetty sisältö.
 *
 * Kuvat ovat vaakana vierekkäin (toimipiste vasen, ostoauto oikea), kultainen hiusviiva
 * välissä. Yksi keskitetty sisältölohko kuvien päällä: yläteksti, otsikko, napit ja
 * luottamuspalkki (tähdet, luvut, puhelin). Kuvat ovat taustakuvina, joten Elementorin
 * img { height:auto } ei aiheuta mustia palkkeja.
 *
 * Ostoauton kuva: käytä leveää kuvaa (Kullan-ostoauto.jpg, suhde 1,72). Kapea rajaus
 * leikkaa auton niin että näkyy vain taivas ja punainen talo.
 */

.sak-hero-k,
.sak-hero-k *,
.sak-hero-k *::before,
.sak-hero-k *::after { box-sizing: border-box; }

.sak-hero-k {
	--sak-gold: #c9a564;
	--sak-gold-soft: #e6ce93;
	--sak-bone: #f1ebdd;
	--sak-ink: #0c0f0d;

	position: relative;
	/* Emmekä käytä 100vw:tä: se sisältää vierityspalkin leveyden, jolloin heroon jäi
	   noin 7 px valkoinen kaistale oikeaan laitaan. Elementor-container on jo täysleveä. */
	width: 100%;
	max-width: none;
	margin-left: 0;
	/* Hero täyttää koko ruudun. svh on mobiilin dynaaminen korkeus (osoitepalkki huomioitu),
	   vh jää vanhemmille selaimille varalle. */
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	isolation: isolate;
	color: var(--sak-bone);
	background: var(--sak-ink);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- kuvakerros: kaksi puolikasta vierekkäin --- */
.sak-hero-k__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.sak-hero-k__half {
	position: relative;
	overflow: hidden;
}
.sak-hero-k__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center 52%;
	/* kevyt yhtenäistys, ei tummennusta: liike on tumma sisäkuva, ostoauto kirkas ulkokuva */
	filter: brightness(.95) saturate(1.02);
	transition: transform 1.8s cubic-bezier(.2, .7, .2, 1);
}
.sak-hero-k__half:hover .sak-hero-k__bg { transform: scale(1.03); }

/* kultainen hiusviiva kuvien välissä */
.sak-hero-k__line {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--sak-gold);
	opacity: .5;
	z-index: 2;
	pointer-events: none;
}

/* --- verho: pitää ohuen otsikon luettavana kirkkaidenkin kuvien päällä.
   Tummin keskellä, jossa teksti on. --- */
.sak-hero-k__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 90% 80% at center, rgba(8, 11, 9, .8), rgba(8, 11, 9, .5) 55%, rgba(8, 11, 9, .34)),
		linear-gradient(180deg, rgba(8, 11, 9, .35), rgba(8, 11, 9, .12) 30%, rgba(8, 11, 9, .12) 70%, rgba(8, 11, 9, .5));
}

/* --- keskitetty sisältö: vie vapaan tilan ja on siinä pystykeskitetty --- */
.sak-hero-k__center {
	position: relative;
	z-index: 3;
	flex: 1;
	width: min(1120px, calc(100% - 48px));
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 22px;
	padding: 56px 0 24px;
}
.sak-hero-k__kicker {
	margin: 0;
	font-family: "Work Sans", system-ui, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #ffffff;
}
/* Perusteksti valkoinen, vain hopea hopeanvärisenä ja kulta kultaisena */
.sak-hero-k__kicker .kulta { color: #e6ce93; }
.sak-hero-k__kicker .hopea { color: #d8dce1; }
.sak-hero-k__title {
	margin: 0;
	max-width: 20ch;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 300;
	font-size: clamp(34px, 5.4vw, 74px);
	line-height: .96;
	letter-spacing: .005em;
	color: var(--sak-bone);
}
.sak-hero-k__title em {
	font-style: italic;
	color: var(--sak-gold-soft);
}
.sak-hero-k__title-mob { display: none; }

/* --- napit --- */
.sak-hero-k__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 2px;
}
.sak-hero-k__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 13px 24px;
	font-family: "Work Sans", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	color: var(--sak-bone);
	background: transparent;
	border: 1px solid rgba(201, 165, 100, .55);
	transition: color .3s, background-color .3s, border-color .3s;
}
.sak-hero-k__cta:hover,
.sak-hero-k__cta:focus-visible {
	color: var(--sak-ink);
	background: var(--sak-gold);
	border-color: var(--sak-gold);
	outline: none;
}
/* korostettu (kulta) nappi */
.sak-hero-k__cta--primary {
	color: var(--sak-ink);
	background: var(--sak-gold);
	border-color: var(--sak-gold);
}
.sak-hero-k__cta--primary:hover,
.sak-hero-k__cta--primary:focus-visible {
	background: var(--sak-gold-soft);
	border-color: var(--sak-gold-soft);
}

/* --- luottamuspalkki: heron alareunassa, erillään napeista --- */
.sak-hero-k__trust {
	position: relative;
	z-index: 3;
	flex: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 44px;
	width: min(880px, calc(100% - 48px));
	margin: 0 auto;
	padding: 22px 0 clamp(30px, 5vh, 52px);
	border-top: 1px solid rgba(201, 165, 100, .3);
}
.sak-hero-k__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: "Work Sans", system-ui, sans-serif;
	font-size: 12px;
	letter-spacing: .04em;
	color: rgba(241, 235, 221, .82);
}
.sak-hero-k__stars {
	color: var(--sak-gold);
	font-size: 14px;
	letter-spacing: 1px;
}
.sak-hero-k__metric {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 24px;
	font-weight: 500;
	color: var(--sak-gold-soft);
	line-height: 1;
}
.sak-hero-k__trust-text {
	max-width: 16ch;
	text-align: left;
	line-height: 1.25;
}
.sak-hero-k__phone-icon {
	display: inline-flex;
	width: 15px;
	height: 15px;
	color: var(--sak-gold);
}
.sak-hero-k__phone-icon svg { width: 100%; height: 100%; stroke: currentColor; }
.sak-hero-k__phone-number {
	font-weight: 600;
	letter-spacing: .06em;
	text-decoration: none !important;
	color: var(--sak-bone);
	white-space: nowrap;
}
.sak-hero-k__phone-number:hover { color: var(--sak-gold-soft); }

/* Astra lisää sisältölinkkeihin globaalin alaviivan. Rajaa poisto vain heroon. */
.sak-hero-k a.sak-hero-k__cta,
.sak-hero-k a.sak-hero-k__phone-number,
.ast-single-post .entry-content .sak-hero-k a.sak-hero-k__cta,
.ast-single-post .entry-content .sak-hero-k a.sak-hero-k__phone-number {
	text-decoration: none !important;
}

/* ==============================================================================
   Kapea näyttö: kuvat pinoutuvat päällekkäin, sisältö pysyy keskellä niiden yli.
   Ylhäällä on turvaväli Astran läpinäkyvälle headerille (hampurilaisvalikko). */
@media (max-width: 1024px) {
	.sak-hero-k {
		/* Mobiilissa oma header on fixed 86px ja body saa saman verran padding-topia,
		   joten ruudun vapaa korkeus on kokonaiskorkeus miinus palkki. */
		min-height: calc(100vh - 86px);
		min-height: calc(100svh - 86px);
	}
	.sak-hero-k__media {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
	}
	.sak-hero-k__line {
		left: 0;
		right: 0;
		top: 50%;
		bottom: auto;
		width: auto;
		height: 1px;
	}
	.sak-hero-k__center {
		gap: 18px;
		/* Iso yläpehmuste oli Astran läpinäkyvää headeria varten. Oma mobiiliheader on
		   fixed ja bodylla on sen verran padding-topia, joten hero alkaa jo sen alta.
		   Pienempi pehmuste nostaa sisällön ylemmäs, jolloin yläkolmannekseen ei jää
		   turhaa tyhjää kuvapintaa. */
		padding: clamp(24px, 4vh, 44px) 4px 32px;
	}
	.sak-hero-k__title-desk { display: none; }
	.sak-hero-k__title-mob { display: inline; }
	.sak-hero-k__title {
		max-width: 100%;
		font-size: clamp(30px, 9vw, 48px);
	}
	.sak-hero-k__actions {
		flex-direction: column;
		align-items: stretch;
		width: min(320px, 100%);
		gap: 10px;
	}
	.sak-hero-k__cta { width: 100%; }
	.sak-hero-k__trust {
		gap: 12px 26px;
		padding: 18px 0 clamp(24px, 4vh, 36px);
	}
	.sak-hero-k__metric { font-size: 20px; }
	.sak-hero-k__trust-item { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
	.sak-hero-k__bg { transition: none; }
}