/* ==========================================================================
   ortoto-child / assets/tvarumas.css
   Puslapis: /tvarumas/
   Kraunamas tik tame puslapyje (zr. functions.php).

   Visi kintamieji turi atsargines reiksmes -- veikia ir jei tokenu
   pavadinimai kitokie. Suradus tikruosius, uztenka istrinti fallback'us.
   ========================================================================== */

.oto-tvar {
	--tvar-ink:        #1F1F1F;
	--tvar-geltona:    var(--ortoto-geltona,   #F6B319);
	--tvar-terakota:   var(--ortoto-terakota,  #E2947E);
	--tvar-turkis:     var(--ortoto-turkis,    #4F9AAD);
	--tvar-cream:      var(--ortoto-cream,     #FFF8E7);
	--tvar-antraste:   var(--ortoto-font-heading, var(--ortoto-font-display, "LunchBox", sans-serif));
	--tvar-tekstas:    var(--ortoto-font-body, "Ubuntu", sans-serif);
	--tvar-r:          var(--ortoto-radius-lg, 20px);
}

/* ------------------------------------------------------- 1. Bendra ------- */

.oto-tvar__vidus {
	width: min(100% - 2rem, 1200px);
	margin-inline: auto;
}

/* VISOS antrastes -- LunchBox. Ubuntu lieka tik pastraipoms. */
.oto-tvar h1,
.oto-tvar h2,
.oto-tvar h3 {
	font-family: var(--tvar-antraste);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 var(--ortoto-space-4, 1rem);
	text-wrap: balance;
}

.oto-tvar h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
.oto-tvar h3 { font-size: clamp(1.4rem,  1.1rem + 1.4vw, 2rem); }

.oto-tvar p {
	font-family: var(--tvar-tekstas);
	font-size: var(--ortoto-body, 1.0625rem);
	line-height: 1.6;
	margin: 0 0 var(--ortoto-space-4, 1rem);
}
.oto-tvar p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- 2. Ivadine sekcija ---- */

.oto-tvar__ivadas {
	background-color: var(--tvar-cream);
	padding-block: var(--ortoto-space-10, 4rem);
	text-align: center;
}
.oto-tvar__ivadas p {
	max-width: 62ch;
	margin-inline: auto;
	text-wrap: pretty;
}

/* --------------------------------------- 3. Trys iliustraciju blokai ----- */
/* Desktope tekstas guli ant paveikslelio tuscioje zonoje.
   Mobiliajame -- po paveiksleliu, sekcijos fonas testia paveikslelio fona,
   todel siules nesimato. */

.oto-tvar__blokas {
	position: relative;
	overflow: hidden;
}

.oto-tvar__img {
	display: block;
	width: 100%;
	height: auto;
}

.oto-tvar__turinys {
	padding: var(--ortoto-space-6, 1.5rem) var(--ortoto-space-4, 1rem) var(--ortoto-space-8, 2rem);
	color: var(--tvar-ink);
}
.oto-tvar__turinys h3,
.oto-tvar__turinys p { color: var(--tvar-ink); }

/* Fonai -- tos pacios spalvos kaip paveiksleliuose */
.oto-tvar__blokas--saule   { background-color: var(--tvar-geltona);  }
.oto-tvar__blokas--ratas   { background-color: var(--tvar-terakota); }
.oto-tvar__blokas--pakuote { background-color: var(--tvar-turkis);   }

/* Mobilus: kilimelis nenuslysta is kadro */
@media (max-width: 782px) {
	.oto-tvar__img {
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}
	.oto-tvar__blokas--saule   .oto-tvar__img { object-position: 70% 50%; }
	.oto-tvar__blokas--ratas   .oto-tvar__img { object-position: 30% 50%; }
	.oto-tvar__blokas--pakuote .oto-tvar__img { object-position: 65% 50%; }
}

/* Desktopas: tekstas ant paveikslelio */
@media (min-width: 783px) {
	.oto-tvar__turinys {
		position: absolute;
		padding: 0;
	}
	.oto-tvar__blokas--saule   .oto-tvar__turinys { left: 8%;  bottom: 10%; width: 34%; }
	.oto-tvar__blokas--ratas   .oto-tvar__turinys { left: 60%; bottom: 14%; width: 34%; }
	.oto-tvar__blokas--pakuote .oto-tvar__turinys { left: 8%;  bottom: 10%; width: 34%; }
}

/* --------------------------------------------- 4. Kokybe pirmiausia ------ */

.oto-tvar__kokybe {
	background-color: var(--tvar-cream);
	padding-block: var(--ortoto-space-10, 4rem);
	text-align: center;
}
.oto-tvar__kokybe p { max-width: 68ch; margin-inline: auto; }

.oto-tvar__kokybe figure {
	margin: var(--ortoto-space-6, 1.5rem) 0;
}
.oto-tvar__kokybe img {
	display: block;
	width: 100%;
	max-width: 720px;
	height: auto;
	margin-inline: auto;
	border-radius: var(--tvar-r);
}

/* ------------------------------------------------- 5. Dvi kolonos -------- */

.oto-tvar__duo {
	padding-block: var(--ortoto-space-10, 4rem);
}
.oto-tvar__duo .oto-tvar__vidus {
	display: grid;
	gap: var(--ortoto-space-8, 2rem);
	align-items: center;
}

@media (min-width: 783px) {
	.oto-tvar__duo .oto-tvar__vidus {
		grid-template-columns: 1fr 1fr;
		gap: var(--ortoto-space-12, 5rem);
	}
	/* Nuotrauka kaireje, tekstas desineje */
	.oto-tvar__duo--foto-kaire .oto-tvar__duo-media { order: 1; }
	.oto-tvar__duo--foto-kaire .oto-tvar__duo-tekstas { order: 2; }
}

.oto-tvar__duo-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--tvar-r);
}
/* Made-in-EU yra PNG su permatomu fonu -- be radius ir be fono */
.oto-tvar__duo-media--permatomas img { border-radius: 0; }

/* ------------------------------------------------------ 6. Poziniai ------ */
/* Ikona + parasas. Parasai -- Ubuntu Bold, nes jie funkciniai, ne antrastiniai. */

.oto-tvar__poziniai {
	display: grid;
	gap: var(--ortoto-space-5, 1.25rem);
	margin-top: var(--ortoto-space-6, 1.5rem);
	padding: 0;
	list-style: none;
}

.oto-tvar__pozinis {
	display: flex;
	align-items: center;
	gap: var(--ortoto-space-4, 1rem);
}

.oto-tvar__pozinis svg {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	color: var(--tvar-ink);
}

.oto-tvar__pozinis span {
	font-family: var(--tvar-tekstas);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.3;
}

/* ---------------------------------------------------------- 7. CTA ------- */

.oto-tvar__cta {
	background-color: var(--tvar-cream);
	padding-block: var(--ortoto-space-10, 4rem);
	text-align: center;
}

.oto-tvar__cta a {
	display: inline-block;
	padding: var(--ortoto-space-3, 0.75rem) var(--ortoto-space-8, 2rem);
	font-family: var(--tvar-tekstas);
	font-weight: 700;
	font-size: var(--ortoto-body, 1.0625rem);
	text-decoration: none;
	color: var(--tvar-ink);
	background-color: var(--tvar-geltona);
	border-radius: var(--ortoto-radius-sm, 8px);
	transition: background-color 0.15s ease;
}
.oto-tvar__cta a:hover { background-color: var(--ortoto-geltona-tamsi, #E0A012); }

/* ------------------------------------------------- 8. Prieinamumas ------- */

@media (prefers-reduced-motion: reduce) {
	.oto-tvar * { transition: none !important; }
}