/* ============================================================
   Hero-karuselli (Swiper.js) - etusivun demo 13.8.2026
   Korvaa Revolution Sliderin home2026.php-sivupohjalla.
   Katso alustus: functions.php -> elsalonki_enqueue_swiper_demo()
   ============================================================ */

/* Korkeus skaalautuu dynaamisesti leveyden mukaan (aspect-ratio),
   ei enää kiinteitä px-korkeuksia breakpointeittain. Suhde 1170/600
   vastaa alkuperäisen Revolution Sliderin startwidth/startheight-
   asetusta. min-height estää kuvan litistymisen kapeimmilla
   puhelimilla, max-height estää liiallisen venymisen leveillä
   näytöillä. Napit (koko + asemointi, ks. alempana) eivät riipu
   tästä säännöstä. */
.hero-swiper {
	width: 100%;
	aspect-ratio: 1170 / 600;
	min-height: 260px;
	max-height: 640px;
}

.hero-swiper .swiper-slide {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
}

/* Kerros 1: sumennettu, rajattu täyttökuva - paikkaa reunat kauniisti
   sen sijaan että jättäisi tyhjän/yksivärisen palkin, kun dian ja
   kuvan kuvasuhteet eroavat toisistaan (etenkin mobiilissa). */
.hero-swiper .hero-slide-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	filter: blur(25px) brightness(0.7);
	transform: scale(1.15);
	z-index: 0;
}

/* Kerros 2: koko kuva aina kokonaan näkyvissä, mitään reunoista ei
   rajaudu pois millään näytön leveydellä (työpöytä/tabletti - ks.
   alla oleva @media-sääntö mobiilin eri toteutukselle). */
.hero-swiper .hero-slide-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: 1;
}

/* Mobiilissa (<=767px) kuva taytetaan koko dian korkeuteen asti
   letterbox-tyylisen "koko kuva nakyvissa" -ratkaisun sijaan, ja
   ylimaara leikataan tarvittaessa OIKEASTA reunasta - vasen reuna
   (jossa kuvan paakohde yleensa on) pysyy aina nakyvissa. Muutetaan
   siis object-fit: contain -> cover ja ankkuroidaan vasempaan
   reunaan seka Kerros 2:ssa (hero-slide-img) etta Kerros 1:ssa
   (hero-slide-bg, sumennettu tayttokuva - jaa cover-tilassa lahes
   aina kokonaan Kerros 2:n alle piiloon, mutta pidetaan
   yhdenmukaisena siltä varalta etta breakpointtia joskus muutetaan). */
@media (max-width: 767px) {
	.hero-swiper .hero-slide-img {
		object-fit: cover;
		object-position: left center;
	}

	.hero-swiper .hero-slide-bg {
		background-position: left center;
	}
}

/* Ken Burns -hidas zoomaus taustakuviin - lisatty 25.8.2026. Molemmat
   kuvakerrokset (Kerros 1 sumennettu tayttokuva + Kerros 2 koko kuva)
   zoomautuvat hitaasti koko sen ajan kun dia on nakyvissa. Kesto (8s)
   on synkronoitu functions.php:n autoplay-viiveen (delay: 8000ms)
   kanssa, jotta zoomaus ehtii juuri valmiiksi ennen seuraavaan diaan
   siirtymista. Laukaisijana sama .swiper-slide-active -tekniikka kuin
   nappien fade-in-animaatiossa alempana (ks. heroBtnFadeIn) - toimii
   siis myos loop:true-tilan klooneilla ilman erillista JS-muutosta.
   .swiper-slide:n overflow:hidden (ks. ylla) rajaa zoomauksen
   ylivuodon pois nakyvista. animation-fill-mode: both pitaa kuvan
   lopetusskaalassa siihen asti etta dia ei ole enaa aktiivinen. */
.hero-swiper .swiper-slide-active .hero-slide-bg {
	animation: heroKenBurnsBg 8s linear both;
}

.hero-swiper .swiper-slide-active .hero-slide-img {
	animation: heroKenBurnsImg 8s linear both;
}

@keyframes heroKenBurnsBg {
	from {
		transform: scale(1.15);
	}
	to {
		transform: scale(1.3);
	}
}

@keyframes heroKenBurnsImg {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.12);
	}
}

/* Kerros 3: koko dian tumma liuku-overlay poistettu 25.8.2026 -
   tuotantosivun (ja kayttajan lahettaman kuvakaappauksen) kolmannessa
   diassa itse kuva nakyy taysin kirkkaana, kontrasti tekstille tulee
   vain otsikon/tekstin omasta tummasta laatikosta (ks. hero-slide-content
   alla). Elementti jatetty markupiin (home2026.php) silta varalta etta
   sita halutaan joskus kayttaa uudelleen, mutta tausta on nyt lapinakyva. */
.hero-swiper .hero-slide-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	z-index: 2;
}

/* Otsikko/teksti-laatikko - paivitetty 25.8.2026 vastaamaan tuotantosivun
   (ja kayttajan lahettaman kuvakaappauksen) kolmatta diaa: puolilapinakyva
   tumma laatikko, joka on kooltaan vain tekstin mittainen (ei koko
   dian levyinen), ankkuroitu dian oikeaan alakulmaan, teksti oikealle
   tasattuna. Mitat/sijainti/varit poimittu pikselianalyysilla kuvasta
   (laatikko n. 65-93% dian korkeudesta, oikea reuna n. 2% dian oikeasta
   reunasta, tausta mustaa n. 78% peittavyydella). */
.hero-swiper .hero-slide-content {
	position: absolute;
	z-index: 3;
	right: 2%;
	bottom: 7%;
	max-width: min(900px, 92%);
	width: max-content;
	text-align: right;
	background: rgba(0, 0, 0, 0.78);
	padding: clamp(20px, 4vw, 44px) clamp(20px, 4vw, 42px) clamp(18px, 3.5vw, 38px);
}

.hero-swiper .hero-slide-content h2 {
	color: #fff;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 3.1vw, 46px);
	line-height: 1.25;
	text-transform: none;
	margin: 0 0 8px;
}

.hero-swiper .hero-slide-content p {
	color: #fff;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 300;
	font-size: clamp(13px, 1.55vw, 23px);
	line-height: 1.4;
	margin: 0;
}

/* Napit ankkuroitu n. 20 % dian alalaidasta ylöspäin - riippumaton
   otsikon/tekstin pituudesta, koska hero-slide-buttons on oma
   lohkonsa suoraan .swiper-slide:n alla (position: relative), ei
   enää hero-slide-content-tekstilohkon sisällä. Vaakasijainti
   (vasen/keskitetty/oikea) valitaan ylläpidossa per dia - ks.
   .align-vasen / .align-keskitetty / .align-oikea alempana. */
.hero-swiper .hero-slide-buttons {
	position: absolute;
	bottom: 20%;
	z-index: 4;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	width: max-content;
	max-width: 90%;
}

/* left/right-etäisyys mukailee .container-luokan vasenta/oikeaa
   reunaa (max-width 1170px + 15px sisennys), jotta napit linjautuvat
   samaan reunaan kuin otsikko/teksti-lohko silloin kun ne eivät ole
   keskitettyjä. */
.hero-swiper .hero-slide-buttons.align-vasen {
	left: max(15px, calc((100% - 1170px) / 2 + 15px));
	justify-content: flex-start;
}

.hero-swiper .hero-slide-buttons.align-keskitetty {
	left: 50%;
	transform: translateX(-50%);
	justify-content: center;
}

.hero-swiper .hero-slide-buttons.align-oikea {
	right: max(15px, calc((100% - 1170px) / 2 + 15px));
	justify-content: flex-end;
}

.hero-swiper .hero-slide-buttons .btn {
	display: inline-block;
	padding: 14px 36px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 15px;
	color: #fff;
	border: none;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	opacity: 0;
}

/* Napit ilmestyvät ketjutettuna (1s välein) sitä mukaa kun dia
   aktivoituu. Laukaisijana toimii Swiperin itsensä aktiiviselle
   dialle lisäämä .swiper-slide-active -luokka, joten tämä toimii
   sekä ensimmäisellä lataisukerralla että jokaisella myöhemmällä
   dianvaihdolla (myös loop:true -tilan kloonatuilla dioilla) ilman
   erillistä JS-muutosta functions.php:hen. Kun dia ei ole enää
   aktiivinen, valinta lakkaa täsmäämästä ja nappi palautuu
   näkymättömäksi (opacity: 0 yllä), jotta animaatio voi toistua
   seuraavalla kerralla kun dia aktivoituu uudelleen.
   Alkuviive (1. napin animation-delay) on tarkoituksella pidempi
   kuin dian siirtymän kesto (speed: 700ms, ks. functions.php), jotta
   kuva ehtii selvästi asettua paikoilleen ennen kuin napit alkavat
   nousta näkyviin - napit eivät siis kilpaile huomiosta itse
   dianvaihdon kanssa.
   animation-fill-mode: both (viimeinen arvo "both" alla) pitää napin
   pakotetusti animaation "from"-tilassa (opacity: 0) koko
   animation-delay-viiveen ajan, eikä vain luota siihen että ylempi
   staattinen "opacity: 0" -sääntö sattuu jäämään voimaan - näin nappi
   ei voi missään tapauksessa "vuotaa" näkyviin ennenaikaisesti,
   vaikka joku muu teeman sääntö yrittäisi asettaa .btn:lle
   opacityn. "Both" pitää myös lopputilan (opacity: 1) animaation
   päätyttyä, jolloin forwards-erillismäärettä ei enää tarvita. */
.hero-swiper .swiper-slide-active .hero-slide-buttons .btn {
	animation: heroBtnFadeIn 1s ease both;
}

.hero-swiper .swiper-slide-active .hero-slide-buttons .btn:nth-child(1) {
	animation-delay: 1.6s;
}

.hero-swiper .swiper-slide-active .hero-slide-buttons .btn:nth-child(2) {
	animation-delay: 2.6s;
}

@keyframes heroBtnFadeIn {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Käyttäjille, jotka ovat pyytäneet käyttöjärjestelmästä vähemmän
   liikettä (esim. huimaus/epilepsia-syistä) - napit näkyvät heti
   ilman viivettä tai liikettä. */
@media (prefers-reduced-motion: reduce) {
	.hero-swiper .hero-slide-buttons .btn {
		opacity: 1;
		animation: none;
		transform: none;
	}

	.hero-swiper .hero-slide-bg,
	.hero-swiper .hero-slide-img {
		animation: none;
	}
}

/* "Täytetty" -tyyli: poimittu tuotantosivun nykyisestä "Tutustu"-napista
   (käyttäjän lähettämä kuvakaappaus 13.8.2026) - lämmin kulta/ruskea
   liukuväri + pehmeä varjo. Sävyt johdettu brown.css:n perusväristä
   #8a7956, jotta yhteys nykyiseen väripalettiin säilyy. */
.hero-swiper .hero-slide-buttons .btn-custom {
	background: linear-gradient(135deg, #a89774 0%, #675633 100%);
	box-shadow: 0 10px 20px -4px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
}

.hero-swiper .hero-slide-buttons .btn-custom:hover,
.hero-swiper .hero-slide-buttons .btn-custom:focus {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 24px -4px rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* "Täytetty (tumma/neutraali)" -tyyli: sama rakenne (koko, pyöristys,
   varjo) kuin btn-custom, mutta tumma/harmaanruskea liukuväri, jotta
   "Tutustu"-nappi on visuaalisesti samaa "täytettyä" perhettä kuin
   "Varaa aika" -nappi (btn-custom) kilpailematta sen kanssa huomiosta.
   Sävyt johdettu samasta brown.css-perusväristä #8a7956, vain
   tummennettuna/desaturoituna. */
.hero-swiper .hero-slide-buttons .btn-dark {
	background: linear-gradient(135deg, #5c5646 0%, #2f2b22 100%);
	box-shadow: 0 10px 20px -4px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2);
}

.hero-swiper .hero-slide-buttons .btn-dark:hover,
.hero-swiper .hero-slide-buttons .btn-dark:focus {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 24px -4px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.25);
}

/* "Ääriviiva" -tyyli: kevyempi vaihtoehto toiselle napille, jos ei
   haluta kahta samanlaista täytettyä nappia vierekkäin. Jätetty
   valittavaksi ylläpidossa, vaikka ei ole enää oletuksena. */
.hero-swiper .hero-slide-buttons .btn-white {
	background: transparent;
	border: 2px solid #fff;
	padding: 12px 34px;
}

.hero-swiper .hero-slide-buttons .btn-white:hover,
.hero-swiper .hero-slide-buttons .btn-white:focus {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

/* Mobiilissa (<=767px, sama breakpoint kuin muualla tiedostossa)
   napit ovat 30 % pienemmät kuin työpöytäversiossa (eli 70 % koko
   koosta) - padding, fonttikoko ja pyöristys on kaikki kerrottu
   0,7:llä. .btn-white skaalataan samassa suhteessa, jolloin sen
   pienempi padding (kompensoi 2px reunaviivaa) ja ohuempi 1,5px
   reunaviiva pysyvät oikeassa mittasuhteessa .btn-custom/.btn-dark
   -nappeihin nähden. */
@media (max-width: 767px) {
	.hero-swiper .hero-slide-buttons .btn {
		padding: 10px 25px;
		border-radius: 6px;
		font-size: 11px;
	}

	.hero-swiper .hero-slide-buttons .btn-white {
		padding: 8px 24px;
		border-width: 1.5px;
	}
}

.hero-swiper .swiper-pagination-bullet {
	background: #fff;
	opacity: 0.7;
}

.hero-swiper .swiper-pagination-bullet-active {
	background: #8a7956;
	opacity: 1;
}

.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
	color: #fff;
}

.hero-swiper .swiper-button-prev:after,
.hero-swiper .swiper-button-next:after {
	font-size: 26px;
}

/* Otsikon/tekstin fonttikoot skaalautuvat clamp()-funktiolla
   (ks. .hero-slide-content h2/p ylla), joten erillista mobiilin
   font-size-ohitusta ei enaa tarvita tassa. */