/*
 * Hero.
 *
 * Is Figmos:
 *   home  1440x630, tekstas 640 plocio @ (70, 252), antspaudas 216 @ (1154, 323)
 *   inner 1440x240, antraste @ (70, 96), breadcrumb'ai @ (70, 205), antspaudas 156
 *
 * Turinys tvirtinamas prie APACIOS, ne prie virsaus. Priezastis praktine:
 * ilgesnis lietuviskas tekstas augs i virsu ir hero paaugs kartu, o apatinis
 * tarpas liks toks pat. Tvirtinant prie virsaus tekstas isliptu is hero.
 */

.ekotroba-hero {
	position: relative;
	display: flex;
	overflow: hidden;
	isolation: isolate;
}

/* ------------------------------------------------------------------------ fonas */

.ekotroba-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--color--muted);
}

.ekotroba-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ekotroba-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--wp--custom--overlay--hero);
}

/* -------------------------------------------------------------------- antspaudas */

.ekotroba-hero__stamp {
	position: absolute;
	inset-inline-end: var(--wp--custom--container--gutter);
	width: var(--wp--custom--hero--stamp-home);
	height: auto;
}

.ekotroba-hero--home .ekotroba-hero__stamp {
	inset-block-end: var(--wp--custom--hero--pad-bottom-home);
}

.ekotroba-hero--inner .ekotroba-hero__stamp {
	inset-block-start: 50%;
	width: var(--wp--custom--hero--stamp-inner);
	transform: translateY(-50%);
}

/* ------------------------------------------------------------------ konteineris */

/*
 * Antspaudas pozicionuojamas nuo KONTEINERIO, ne nuo lango krasto.
 * Prie 1440 tai sutampa, bet prie 1920 nuo lango krasto jis nuklystu
 * i sona ir nesilygiuotu su turiniu.
 */
.ekotroba-hero__inner {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%;
	max-width: calc(var(--wp--custom--container--max) + var(--wp--custom--container--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--wp--custom--container--gutter);
}

.ekotroba-hero__content {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: var(--wp--preset--color--white);
}

.ekotroba-hero__title {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--heading);
	text-wrap: balance;

}

/*
 * Vidiniame hero antraste negali pasiekti antspaudo.
 *
 * Figmoje ilga paslaugos pavadinima dizaineris susiaurino iki 833, kad jis
 * issilauzytu i dvi eilutes ir liktu atokiai. Bet fiksuotas 833 siauresniame
 * lange vis tiek susidurtu su antspaudu, todel imama MAZESNE is dvieju:
 * dizainerio plotis arba tas, kuris garantuoja tarpa iki antspaudo.
 *
 * Be sio ribojimo ilgi pavadinimai — o jie tokie ir yra, „Grindu siltinimas
 * puciama vata (neardant grindu dangos)“ — pralysdavo po antspaudu.
 */
.ekotroba-hero--inner .ekotroba-hero__title {
	max-width: min(
		var(--wp--custom--hero--title-width-inner),
		calc(100% - var(--wp--custom--hero--stamp-inner) - var(--wp--custom--hero--stamp-gap))
	);
}

/* --------------------------------------------------------------- didelis variantas */

.ekotroba-hero--home {
	min-height: var(--wp--custom--hero--height-home);
}

.ekotroba-hero--home .ekotroba-hero__inner {
	padding-block-end: var(--wp--custom--hero--pad-bottom-home);
}

.ekotroba-hero--home .ekotroba-hero__content {
	gap: var(--wp--preset--spacing--30);
	max-width: var(--wp--custom--hero--text-width);
}

.ekotroba-hero__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--s-18);
	font-weight: 400;
	line-height: var(--wp--custom--button--line-height);
}

.ekotroba-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--15);
}

/* ----------------------------------------------------------------- mazas variantas */

.ekotroba-hero--inner {
	min-height: var(--wp--custom--hero--height-inner);
}

.ekotroba-hero--inner .ekotroba-hero__inner {
	padding-block-end: var(--wp--custom--hero--pad-bottom-inner);
}

.ekotroba-hero--inner .ekotroba-hero__content {
	gap: var(--wp--preset--spacing--60);
}

/* ---------------------------------------------------------------- breadcrumb'ai */

.ekotroba-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--custom--gap--tight);
	font-size: var(--wp--preset--font-size--s-12);
	line-height: var(--wp--custom--line-height--heading);
}

.ekotroba-crumbs a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.ekotroba-crumbs a:hover {
	color: var(--wp--preset--color--brand);
}

.ekotroba-crumbs span {
	color: var(--wp--custom--overlay--white-50);
}

.ekotroba-crumbs__sep {
	display: block;
	width: 5px;
	height: 9px;
	flex-shrink: 0;
}

/* -------------------------------------------------------------------- breakpoint */

@media (max-width: 1024px) {
	.ekotroba-hero__stamp {
		inset-inline-end: var(--wp--custom--container--gutter-mobile);
		width: var(--wp--custom--hero--stamp-inner);
	}

	.ekotroba-hero__inner {
		padding-inline: var(--wp--custom--container--gutter-mobile);
	}
}

@media (max-width: 768px) {
	/*
	 * Mobiliajame antspaudo nera, todel jo plotis nebeatimamas. Kitaip riba
	 * antraste suspausdavo iki 134px ir ji issitempdavo i septynias eilutes.
	 */
	.ekotroba-hero--inner .ekotroba-hero__title {
		max-width: none;
	}

	/*
	 * Mobiliajame vidinis hero AUGA pagal turini, o ne laikosi 240.
	 *
	 * Figmoje jo aukstis skiriasi: „Kontaktai“ — 129, ilgas paslaugos
	 * pavadinimas — 231. Fiksuotos grindys trumpa antraste palikdavo
	 * skendinti beveik dvigubai per dideleje juostoje.
	 */
	.ekotroba-hero--inner {
		min-height: 0;
	}

	.ekotroba-hero--inner .ekotroba-hero__inner {
		padding-block: var(--wp--custom--hero--pad-block-inner-mobile);
	}

	/*
	 * Mobiliajame antspaudas persidengia su tekstu, todel jis lieka tik
	 * dideliame hero, kur vietos uztenka. Vidiniuose — slepiamas.
	 */
	.ekotroba-hero--inner .ekotroba-hero__stamp {
		display: none;
	}

	/*
	 * Antspaudas nusileidzia zemiau mygtuku ir kyso uz hero krasto.
	 *
	 * Mobiliajame hero yra 430 auksčio, o turinys baigiasi likus 40 iki
	 * apacios — 84px antspaudui ten nebetelpa, todel jis gulė ant „Gauti
	 * nemokamą konsultaciją" mygtuko ir dengdavo puse uzrašo.
	 *
	 * Figmoje (M: Titulinis) jis nupiestas 492..576, kai hero yra 80..510 —
	 * t. y. specialiai kyso 66px i info juosta. Nei vieno jos uzrašo
	 * nekerta: tekstai baigiasi ties 243, antspaudas prasideda 261.
	 *
	 * Todel siaurame ekrane hero atsisako apkirpimo ir pakyla virs info
	 * juostos. Fonui tai nieko nekeicia — jis `inset: 0` ir uz hero ribu
	 * fiziskai nepatenka.
	 */
	.ekotroba-hero--home {
		overflow: visible;
		z-index: 1;
	}

	.ekotroba-hero--home .ekotroba-hero__stamp {
		width: var(--wp--custom--hero--stamp-mobile);
		inset-block-end: var(--wp--custom--hero--stamp-offset-mobile);
	}

	.ekotroba-hero--home {
		min-height: var(--wp--custom--hero--height-home-mobile);
	}

	.ekotroba-hero--home .ekotroba-hero__content {
		gap: var(--wp--preset--spacing--20);
		max-width: none;
	}

	/* M: Titulinis — tekstas 15/23, ne 18/26 kaip darbalaukyje. */
	.ekotroba-hero__text {
		font-size: var(--wp--preset--font-size--body);
		line-height: var(--wp--custom--hero--text-line-height-mobile);
	}

	.ekotroba-hero--home .ekotroba-hero__inner {
		padding-block-end: var(--wp--preset--spacing--40);
	}

	.ekotroba-hero__cta {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--15);
	}

	/*
	 * Mobiliajame Figma frame'e rodykle pazymeta hidden=true.
	 *
	 * Be jos "Gauti nemokama konsultacija" telpa i viena eilute
	 * (tekstas 267 + parastes 60 = 327 is turimu 330) ir mygtukas lieka
	 * 52 auksčio, kaip dizaine. Su rodykle reiketu 369 — tekstas
	 * persilauztu ir mygtukas isaugtu iki 70.
	 */
	.ekotroba-hero .ekotroba-btn__icon {
		display: none;
	}

	.ekotroba-hero--inner .ekotroba-hero__content {
		gap: var(--wp--preset--spacing--20);
	}
}