/*
 * border-box visur.
 *
 * Be sio WordPress naudoja content-box, ir tada `max-width: 1300` + parastes 70
 * duoda 1440 plocio, o `min-height: 109` + parastes 20 duoda 149 auksčio.
 * Butent tai ir nutiko pirmoje antrastes versijoje: abu nuokrypiai buvo
 * lygiai lygus parastems.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * Bendri komponentai.
 *
 * Mygtuku variantai ir ju hover busenos paimti tiesiai is Figma `hovers`
 * frame'o (82:2423), kuriame dizaineris dokumentavo keturias poras.
 *
 * Matmenys is header'io (47:247): padding 8/20, radius 100, tekstas
 * Montserrat Bold 16px / line-height 26px, ikona 32px, tarpas 10px.
 * Bendras auktis: 8 + 26 + 8 + 2 (remelis) = 44px, kaip Figmoje.
 */

.ekotroba-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding-block: var(--wp--custom--button--padding-block);
	padding-inline: var(--wp--custom--button--padding-inline);
	border: 1px solid transparent; /* token-exempt: plaukelio remelis */
	border-radius: var(--wp--custom--radius--pill);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--s-16);
	font-weight: 700;
	line-height: var(--wp--custom--button--line-height);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.ekotroba-btn:focus-visible {
	outline: var(--wp--custom--focus-ring) solid var(--wp--preset--color--brand-hover);
	outline-offset: 2px; /* token-exempt: fokuso ziedo atotrukis */
}

/* ------------------------------------------------------------------------ ikona */

.ekotroba-btn__icon {
	flex-shrink: 0;
	width: var(--wp--custom--button--icon);
	height: var(--wp--custom--button--icon);
	margin-inline-start: var(--wp--custom--gap--tight);
	transition:
		width var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		margin var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		opacity var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.ekotroba-btn__icon path:first-child {
	fill: currentColor;
}

/*
 * Kontūriniuose variantuose Figmoje rodykles nera, o ant hover ji atsiranda.
 * Vietoj sokancio plocio ji issiskleidzia — numatytoji busena atitinka
 * dizaina tiksliai, o perejimas lieka ramus.
 */
.ekotroba-btn--outline .ekotroba-btn__icon,
.ekotroba-btn--outline-light .ekotroba-btn__icon,
.ekotroba-btn--ghost .ekotroba-btn__icon {
	width: 0;
	margin-inline-start: 0;
	opacity: 0;
	overflow: hidden;
}

.ekotroba-btn--outline:hover .ekotroba-btn__icon,
.ekotroba-btn--outline-light:hover .ekotroba-btn__icon,
.ekotroba-btn--ghost:hover .ekotroba-btn__icon {
	width: var(--wp--custom--button--icon);
	margin-inline-start: var(--wp--custom--gap--tight);
	opacity: 1;
}

/* --------------------------------------------------------------------- primary */
/* Zalias fonas, tamsus tekstas -> hover: tamsesnis zalias, baltas tekstas.       */

.ekotroba-btn--primary {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);

	/* Rodykle: baltas apskritimas, tamsi strele. */
	--ekotroba-arrow-fg: var(--wp--preset--color--ink);
}

.ekotroba-btn--primary .ekotroba-btn__icon {
	color: var(--wp--preset--color--white);
}

.ekotroba-btn--primary:hover {
	background: var(--wp--preset--color--brand-hover);
	border-color: var(--wp--preset--color--brand-hover);
	color: var(--wp--preset--color--white);
}

/* --------------------------------------------------------------------- outline */
/* Zalias remelis -> hover: zalias fonas, baltas tekstas, rodykle atsiranda.      */

.ekotroba-btn--outline {
	background: transparent;
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);

	--ekotroba-arrow-fg: var(--wp--preset--color--ink);
}

.ekotroba-btn--outline .ekotroba-btn__icon {
	color: var(--wp--preset--color--white);
}

.ekotroba-btn--outline:hover {
	background: var(--wp--preset--color--brand-hover);
	border-color: var(--wp--preset--color--brand-hover);
	color: var(--wp--preset--color--white);
}

/* --------------------------------------------------------------- outline-light */
/* Baltas remelis ant tamsaus fono -> hover: baltas fonas, zalia rodykle.         */

.ekotroba-btn--outline-light {
	background: transparent;
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);

	--ekotroba-arrow-fg: var(--wp--preset--color--white);
}

.ekotroba-btn--outline-light .ekotroba-btn__icon {
	color: var(--wp--preset--color--brand);
}

.ekotroba-btn--outline-light:hover {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

/* ----------------------------------------------------------------------- ghost */
/* Smulkus "Placiau" korteleje -> hover: baltas fonas, zalia rodykle.             */

.ekotroba-btn--ghost {
	background: transparent;
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--muted);

	--ekotroba-arrow-fg: var(--wp--preset--color--white);
}

.ekotroba-btn--ghost .ekotroba-btn__icon {
	color: var(--wp--preset--color--brand);
}

.ekotroba-btn--ghost:hover {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------------------------- variantai */

.ekotroba-btn--compact {
	padding-inline: var(--wp--preset--spacing--15);
	font-size: var(--wp--preset--font-size--s-14);
	line-height: var(--wp--custom--line-height--body);
}

@media (prefers-reduced-motion: reduce) {
	.ekotroba-btn,
	.ekotroba-btn__icon {
		transition: none;
	}
}

/* -------------------------------------------------------------- didelis dydis */
/*
 * Hero mygtukai Figmoje yra didesni nei antrastes: pad 10/30 (primary su
 * 32px ikona) arba 13/30 (be ikonos), sriftas 17px, auksčio 52 abiem.
 * `min-height` uztikrina 52 abiem atvejais, nepriklausomai nuo turinio.
 */

.ekotroba-btn--lg {
	min-height: var(--wp--custom--button--height-large);
	padding-inline: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--s-17);
}

/*
 * Siauresnis didelis mygtukas: parastes 20 vietoj 30.
 *
 * Figmoje antrasis kortelės mygtukas („Projektuokite 3D") yra 233 plocio,
 * ir 126 + 10 + 233 = 369 telpa i 380 kortelės vidu. Su 30 parastemis jis
 * isauga iki 253, suma virsta 389, eilute luzta ir kortele paauga 62px —
 * o kartu su ja issitempia visa tinklelio eile.
 */
.ekotroba-btn--lg.ekotroba-btn--narrow {
	padding-inline: var(--wp--custom--button--padding-inline);
}

/* ------------------------------------------------------------- turinio juostos */
/*
 * Kiekviena dizaino sekcija yra juosta per VISA lango ploti su turiniu,
 * apribotu iki 1300. Todel `main` neturi `layout: constrained` — jei turetu,
 * sekciju fonai butu apkirpti ir plaCiuose ekranuose atsirastu balti sonai.
 *
 * Kaina: paprasti core blokai, jei klientas ideda juos tiesiai i puslapi,
 * liktu per visa ploti. Taisykle zemiau juos apriboja, kad tekstas
 * neissidrieksu per 1920 px.
 */

main > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, figure, table, pre, .wp-block-buttons, .wp-block-separator, .wp-block-embed) {
	box-sizing: content-box;
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding-inline: var(--wp--custom--container--gutter);
}

@media (max-width: 768px) {
	main > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, figure, table, pre, .wp-block-buttons, .wp-block-separator, .wp-block-embed) {
		padding-inline: var(--wp--custom--container--gutter-mobile);
	}
}

/* ------------------------------------------------------------------ juostos */
/*
 * Sekcijos juostos baze. TIK isdestymas, jokiu spalvu.
 *
 * Spalvos gyvena pacio bloko CSS. Jei baze jas nustatytu, blokas su savo
 * spalva laimetu arba pralaimetu priklausomai nuo CSS failu KRAOVIMO EILES —
 * butent tai ir buvo nutike: `benefits` gaudavo tamsu `cta-band` fona.
 */

.ekotroba-band__inner {
	max-width: calc(var(--wp--custom--container--max) + var(--wp--custom--container--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--wp--custom--container--gutter);
	padding-block: var(--wp--custom--band--padding-block);
}

@media (max-width: 768px) {
	.ekotroba-band__inner {
		padding-inline: var(--wp--custom--container--gutter-mobile);
		padding-block: var(--wp--preset--spacing--30);
	}
}

/* ---------------------------------------------------------- sekcijos antraste */
/*
 * Is Figmos: pavadinimas 600/32, bruksnys 1px #D9D9D9 uzpildo likusia vieta,
 * tekstas 400/15, lapelis 38x38 desineje. Tarpas 20.
 */

.ekotroba-heading {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--gap--base);
}

.ekotroba-heading__title {
	flex-shrink: 0;
	max-width: var(--wp--custom--heading--title-width);
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--heading);
	text-wrap: balance;
}

.ekotroba-heading__rule {
	flex: 1 1 auto;
	min-width: var(--wp--custom--benefits--rule-width);
	height: 1px; /* token-exempt: plaukelio bruksnys */
	background: var(--wp--preset--color--divider);
}

.ekotroba-heading__intro {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.ekotroba-heading__leaf {
	flex-shrink: 0;
	width: var(--wp--custom--cta-band--leaf-size);
	height: auto;
	align-self: flex-start;
}

@media (max-width: 1024px) {
	.ekotroba-heading {
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	/*
	 * Desktop'e pavadinimas nesitraukia, kad bruksnys uzimtu likusia vieta.
	 * Mobiliajame bruksnio nera, o nesitraukiantis elementas issitempia iki
	 * savo max-content plocio ir isstumia visa puslapi i sona.
	 */
	.ekotroba-heading__title {
		flex-shrink: 1;
		max-width: 100%;
	}

	.ekotroba-heading__rule {
		display: none;
	}
}

@media (max-width: 768px) {
	.ekotroba-heading__leaf {
		display: none;
	}
}

/* ------------------------------------------------------------------ juosta */
/*
 * Slenkama juosta. Rodykliu centrai sutampa su konteinerio krastais — kaip
 * Figmoje, kur jos issikisa i parastes puse savo plocio.
 */

.ekotroba-carousel {
	position: relative;
}

.ekotroba-carousel__track {
	display: flex;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ekotroba-carousel__track::-webkit-scrollbar {
	display: none;
}

.ekotroba-carousel__track > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.ekotroba-carousel__arrow {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--arrow-btn--size);
	height: var(--wp--custom--arrow-btn--size);
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition:
		background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		opacity var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.ekotroba-carousel__arrow--prev {
	left: 0;
}

.ekotroba-carousel__arrow--next {
	left: 100%;
}

.ekotroba-carousel__arrow:hover:not(:disabled) {
	background: var(--wp--preset--color--brand-hover);
}

.ekotroba-carousel__arrow:disabled {
	cursor: default;
	opacity: 0.3;
}

/* Netelpanciu elementu nera — rodykles nieko nedarytu, tad ju nerodom. */
.ekotroba-carousel.is-static .ekotroba-carousel__arrow {
	display: none;
}

/*
 * Figmoje mobiliajame rodykliu nera. Jos ir netilptu: rodykle issikisa 19px
 * uz konteinerio, o mobili paraste tera 15 — puslapis pradetu slinktis i sona.
 * Juosta stumiama pirstu.
 *
 * Taisykle turi buti PO bazines. Vienodo specifiskumo laimi ta, kuri faile
 * veliau, o medijos uzklausa specifiskumo neprideda. Anksciau ji stovejo
 * auksciau, todel bazinis display ja nurungdavo ir rodykle isliauzdavo uz
 * ekrano — matesi tik tada, kai juosta tikrai perpildavo.
 */
@media (max-width: 768px) {
	.ekotroba-carousel__arrow {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ekotroba-carousel__track {
		scroll-behavior: auto;
	}

	.ekotroba-carousel__arrow {
		transition: none;
	}
}

/* ------------------------------------------------------------ zvaigzdutes */

.ekotroba-stars {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--custom--review--rating-gap);
}

.ekotroba-star {
	display: block;
	width: var(--wp--custom--review--star);
	height: var(--wp--custom--review--star);
	color: var(--wp--preset--color--divider);
}

.ekotroba-star--on {
	color: var(--wp--preset--color--star);
}

/* ---------------------------------------------------------------- kortele */
/*
 * Paslaugos kortele. Naudojama tituliniame (420) ir paslaugu puslapyje (310),
 * todel gyvena cia, o ne viename is bloku. Plotis ateina is tinklelio.
 */
/* ------------------------------------------------------------------ kortele */

/*
 * Sesėlis ant baltos kortelės baltame fone. Be jo kortele su fonu
 * susilieja ir tinklelis atrodo kaip laisvai plaukiojantis tekstas.
 *
 * Dizaine sesėliai DU ir tik vienas is ju įjungtas:
 *   item (paslaugu ir darbu kortele) — 0 1px 35px juoda 8%, visible
 *   card (atsiliepimas)              — 0 4px 85px juoda 7%, ISJUNGTAS
 * Anksciau pamaciau antraji, isjungta, ir klaidingai nusprendziau, kad
 * sesėliu nera niekur.
 */
.ekotroba-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--gap--base);
	margin: 0;
	padding: var(--wp--custom--card--padding);
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card);
	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.ekotroba-card__media {
	display: block;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--divider);
	height: var(--wp--custom--card--image-height);
}

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

.ekotroba-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--heading);
}

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

.ekotroba-card__text {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

/*
 * Mygtukai lieka kortelės apacioje net kai tekstai skirtingo ilgio —
 * kitaip lietuviski pavadinimai, kuriu vieni telpa i viena eilute, o kiti
 * i dvi, isdarkytu eiluciu lygiavima.
 */
.ekotroba-card__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--custom--gap--tight);
	margin-block-start: auto;
}

/* ------------------------------------------------------------------- hover */
/*
 * Figmoje viena kortele nupiesta zalia — tai hover busena, ne pozymis.
 * Perejus visa kortele tampa zalia, o `Placiau` mygtukas — baltas.
 */

.ekotroba-card:hover {
	background: var(--wp--preset--color--brand);
}

.ekotroba-card:hover .ekotroba-btn--ghost {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.ekotroba-card:hover .ekotroba-btn--ghost .ekotroba-btn__icon {
	width: var(--wp--custom--button--icon);
	margin-inline-start: var(--wp--custom--gap--tight);
	opacity: 1;
}
/*
 * Du mygtukai vienoje kortelėje: rodykle neissiskleidzia.
 *
 * Kortelės viduje yra 380. Abu mygtukai uzima 127 + 10 + 235 = 372, tad lieka
 * 8. Rodyklei reikia 42 (32 ikona plius 10 tarpas), todel ant hover eilute
 * luzdavo, „Projektuokite 3D" nusokdavo zemyn, o kortele paaugdavo nuo 467
 * iki 529 — kartu su ja issitempdavo visa tinklelio eile.
 *
 * Figmoje hover busena nupiesta TIK vieno mygtuko kortelėms; su dviem
 * mygtukais jos tiesiog nera. Todel rodykles atsisakymas cia nieko nupiesto
 * neprieštarauja, o isdestymas lieka toks, koks dizaine — viena eilute, 52.
 */
.ekotroba-card__cta--pair .ekotroba-btn--ghost:hover .ekotroba-btn__icon,
.ekotroba-card:hover .ekotroba-card__cta--pair .ekotroba-btn--ghost .ekotroba-btn__icon {
	width: 0;
	margin-inline-start: 0;
	opacity: 0;
}

/*
 * Zalias mygtukas ant zalios kortelės.
 *
 * Ant hover kortele tampa #99D411 — lygiai tokia pat, kaip `primary` fonas,
 * tad „Projektuokite 3D" dingdavo. Baltas tekstas ant sios zalios duoda 1,6:1,
 * o tamsus #4D4D4D — 5,3:1. Todel abu mygtukai lieka tamsaus teksto, o
 * skiriasi uzpildu: `Placiau` pilnas baltas (taip nupiesta Figmoje),
 * „Projektuokite 3D" — kontūrinis. Hierarchija islieka, abu iskaitomi.
 */
.ekotroba-card:hover .ekotroba-card__cta--pair .ekotroba-btn--primary {
	background: transparent;
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.ekotroba-card:hover .ekotroba-card__cta--pair .ekotroba-btn--primary:hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

@media (prefers-reduced-motion: reduce) {
	.ekotroba-card {
		transition: none;
	}
}

/* --------------------------------------------------------- soninis sarasas */
/*
 * Is Figmos: 290 plocio, 1px #EEEEEE bruksnys TIK desineje — tai skirtukas
 * tarp saraso ir tinklelio, o ne remelis aplink. Mobiliajame virsta
 * suskleidziamu sarasu su bruksniu apacioje.
 */

.ekotroba-sidebar {
	flex: 0 0 auto;
	width: var(--wp--custom--sidebar--width);
	padding-inline-end: var(--wp--custom--sidebar--padding-inline-end);
	padding-block-end: var(--wp--custom--sidebar--padding-block-end);
	border-inline-end: 1px solid var(--wp--custom--sidebar--rule); /* token-exempt: plaukelio bruksnys */
}

.ekotroba-sidebar__heading {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--gap--tight);
	margin-block-end: var(--wp--custom--sidebar--gap);
	list-style: none;
	cursor: default;
}

.ekotroba-sidebar__heading::-webkit-details-marker {
	display: none;
}

.ekotroba-sidebar__title {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--s-19);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--heading);
}

.ekotroba-sidebar__rule {
	display: block;
	width: var(--wp--custom--sidebar--rule-width);
	height: var(--wp--custom--sidebar--rule-height);
	background: var(--wp--preset--color--brand);
}

.ekotroba-sidebar__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--sidebar--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ekotroba-sidebar__link {
	display: flex;
	align-items: baseline;
	gap: var(--wp--custom--gap--tight);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--body);
	text-decoration: none;
	transition: color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

/*
 * Ta pati priezastis kaip ir meniu: zalias tekstas ant balto tera 1,78:1.
 * Aktyvu punkta zymi zalias taskas, o hover — zalias bruksnys po tekstu.
 * Pats tekstas lieka iskaitomas.
 */
.ekotroba-sidebar__link:hover,
.ekotroba-sidebar__item.is-active .ekotroba-sidebar__link {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--brand);
	text-decoration-thickness: var(--wp--custom--sidebar--rule-height);
	text-underline-offset: var(--wp--custom--sidebar--underline-offset);

	/*
	 * Bruksnys eina KIAURAI raides, o ne aplenkia ju uodegas.
	 * Numatytasis `auto` prie „g" ir „ų" palieka tarpus, ir vientisa linija
	 * suskyla i atkarpas — atrodo kaip klaida, o ne kaip pabraukimas.
	 */
	text-decoration-skip-ink: none;
}

.ekotroba-sidebar__bullet {
	flex: 0 0 auto;
	width: var(--wp--custom--sidebar--bullet-size);
	height: var(--wp--custom--sidebar--bullet-size);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--brand);
}

@media (max-width: 768px) {
	.ekotroba-sidebar {
		width: auto;
		padding-inline-end: 0;
		padding-block-end: var(--wp--custom--gap--base);
		border-inline-end: 0;
		border-block-end: 1px solid var(--wp--custom--sidebar--rule-mobile); /* token-exempt: plaukelio bruksnys */
	}

	/*
	 * Mobiliajame sarasas suskleidziamas, todel antraste tampa mygtuku ir
	 * gauna rodykle. Desktop\x27e ji visada isskleista ir rodykles nereikia.
	 */
	.ekotroba-sidebar__heading {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-block-end: 0;
		cursor: pointer;
	}

	.ekotroba-sidebar[open] .ekotroba-sidebar__heading {
		margin-block-end: var(--wp--custom--sidebar--gap);
	}

	.ekotroba-sidebar__title {
		font-size: var(--wp--preset--font-size--s-18);
	}

	/*
	 * Rodykle piesiama KAUKE, ne fonu.
	 *
	 * `chevron.svg` nupiestas BALTU bruksniu — jis skirtas breadcrumb'ams ant
	 * tamsaus hero. Fonu ant balto puslapio jis buvo nematomas: mechanizmas
	 * veike, antraste spaudėsi ir rodykle sukosi, tik vartotojas nematė, kad
	 * ten apskritai kazkas yra. Per kauke spalva ateina is tokeno.
	 */
	.ekotroba-sidebar__rule {
		width: var(--wp--custom--button--icon);
		height: var(--wp--custom--button--icon);
		background: var(--wp--preset--color--ink);
		-webkit-mask: url("../img/chevron.svg") no-repeat center / contain;
		mask: url("../img/chevron.svg") no-repeat center / contain;
		transform: rotate(90deg);
		transition: transform var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
	}

	/*
	 * Suskleista — rodykle zemyn, isskleista — aukstyn. Anksciau buvo
	 * `rotate(180deg)`: desinen rodanti rodykle virsdavo kairen rodancia, ir
	 * nei viena, nei kita nereiske nei „atidaryti", nei „uzdaryti".
	 */
	.ekotroba-sidebar[open] .ekotroba-sidebar__rule {
		transform: rotate(-90deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ekotroba-sidebar__link,
	.ekotroba-sidebar__rule {
		transition: none;
	}
}

/* ------------------------------------------------------------------ tekstas */
/*
 * Redaktoriuje surašytas turinys. Klientas rašo iprastas pastraipas,
 * antrastes ir sarasus, o isvaizda ateina is cia — jam nereikia zinoti nei
 * klasiu, nei spalvu.
 */

.ekotroba-prose > * {
	margin-block: 0;
}

.ekotroba-prose > * + * {
	margin-block-start: var(--wp--custom--prose--block-gap);
}

.ekotroba-prose p {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.ekotroba-prose h2,
.ekotroba-prose h3 {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--heading);
}

.ekotroba-prose a {
	color: var(--wp--preset--color--brand-hover);
}
/*
 * Kontaktai tekste: tamsus tekstas su zaliu pabraukimu.
 *
 * `.ekotroba-prose a` yra `brand-hover` (#7FCC28), o tai ant balto duoda
 * 1,79:1. Ta pati priezastis, del kurios meniu ir soninis sarasas zymimi
 * pabraukimu, o ne spalva: telefono numeris turi buti pastebimas is karto,
 * ne atspetas.
 */
.ekotroba-prose a.ekotroba-prose__contact {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--brand);
	text-decoration-thickness: var(--wp--custom--sidebar--rule-height);
	text-underline-offset: var(--wp--custom--sidebar--underline-offset);
	text-decoration-skip-ink: none;
	white-space: nowrap;
}

.ekotroba-prose ul,
.ekotroba-prose ol {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--prose--list-gap);
	padding: 0;
	list-style: none;
}

/*
 * Figmoje kiekvienas punktas prasideda zalia varnele sviesiame apskritime.
 * Piesiama pries teksta, o ne HTML: klientas rašo paprasta sarasa.
 *
 * Varnele deda ABSOLIUCIAI, o ne flex elementu. `display: flex` kiekviena
 * vidini elementa paverčia atskiru stulpeliu, todel `<strong>` su pavadinimu
 * ir po jo einantis sakinys tapdavo dviem skiltimis, o kartu su varnele —
 * trimis. Siaurame ekrane „Be šalčio tiltelių" luzdavo i tris eilutes, o
 * aprašas spausdavosi i likusi trecdali; skaityti buvo sunku.
 *
 * Dabar tekstas teka viena pastraipa, o varnele kabo kaireje. Veikia
 * nepriklausomai nuo to, ar klientas parašė pavadinima paryskintai, ar ne —
 * o tai svarbu, nes saraso turini rašo jis, ne mes.
 */
.ekotroba-prose ul > li {
	position: relative;
	padding-inline-start: calc(var(--wp--custom--prose--check-size) + var(--wp--custom--prose--check-gap));
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.ekotroba-prose ul > li::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: var(--wp--custom--prose--check-size);
	height: var(--wp--custom--prose--check-size);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--tint) url("../img/check.svg") no-repeat center;
}

.ekotroba-prose ol {
	counter-reset: ekotroba-step;
	list-style: decimal;
	padding-inline-start: var(--wp--custom--prose--block-gap);
}

.ekotroba-prose ol > li {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.ekotroba-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--card);
}

/* ------------------------------------------------------- turinio rodykle */

.ekotroba-toc__heading {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--gap--tight);
	margin: 0 0 var(--wp--custom--sidebar--gap);
}

.ekotroba-toc__title {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--s-19);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--heading);
}

.ekotroba-toc__rule {
	display: block;
	width: var(--wp--custom--sidebar--rule-width);
	height: var(--wp--custom--sidebar--rule-height);
	background: var(--wp--preset--color--brand);
}

.ekotroba-toc__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--sidebar--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ekotroba-toc__link {
	display: flex;
	align-items: baseline;
	gap: var(--wp--custom--gap--tight);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--body);
	text-decoration: none;
	transition: color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.ekotroba-toc__link:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--brand);
	text-decoration-thickness: var(--wp--custom--sidebar--rule-height);
	text-underline-offset: var(--wp--custom--sidebar--underline-offset);

	/*
	 * Bruksnys eina KIAURAI raides, o ne aplenkia ju uodegas.
	 * Numatytasis `auto` prie „g" ir „ų" palieka tarpus, ir vientisa linija
	 * suskyla i atkarpas — atrodo kaip klaida, o ne kaip pabraukimas.
	 */
	text-decoration-skip-ink: none;
}

.ekotroba-toc__bullet {
	flex: 0 0 auto;
	width: var(--wp--custom--toc--bullet-size);
	height: var(--wp--custom--toc--bullet-size);
	background: var(--wp--preset--color--brand);
}

/* Antros pakopos antrastes atitraukiamos, kad matytusi hierarchija. */
.ekotroba-toc__item--h3 .ekotroba-toc__link {
	padding-inline-start: var(--wp--custom--gap--base);
}

@media (prefers-reduced-motion: reduce) {
	.ekotroba-toc__link {
		transition: none;
	}
}

/* -------------------------------------------------------- darbo kortele */
/*
 * Tas pats korteles pagrindas, tik be aprašo ir su didesniu pavadinimu.
 */

.ekotroba-card__title--lg {
	font-size: var(--wp--preset--font-size--h-4);
}

.ekotroba-card--work .ekotroba-card__cta {
	justify-content: flex-start;
}

/*
 * Perejus kortele tampa zalia, tad zalias mygtukas joje pasimestu. Balinam ji
 * taip pat, kaip ir `ghost` variantą — kad busena atrodytu vientisa.
 */
.ekotroba-card--work:hover .ekotroba-btn--primary {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------- puslapiavimas */

.ekotroba-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--pagination--gap);
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ekotroba-pagination__item .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--pagination--size);
	height: var(--wp--custom--pagination--size);
	padding-inline: var(--wp--custom--gap--tight);
	border: 1px solid var(--wp--preset--color--line); /* token-exempt: plaukelio remelis */
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--s-17);
	font-weight: 700;
	text-decoration: none;
	transition:
		background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.ekotroba-pagination__item .page-numbers:hover,
.ekotroba-pagination__item .page-numbers.current {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand);
}

.ekotroba-pagination__item .page-numbers.dots {
	border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.ekotroba-pagination__item .page-numbers {
		transition: none;
	}
}