/**
 * TIMTIM – Video vitrina
 * © 2026 TimTim | www.timtim.lt
 */

.timtim-vitrina {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #dfe6ea; /* švelnus dangaus tonas kol kraunasi */
	isolation: isolate;
	/* 16:9 desktop; mobile perjungiama žemiau esančiu @media */
	aspect-ratio: var(--tt-ratio, 16 / 9);
}

/* Desktop – ribojam maksimalų aukštį, kad labai plačiuose ekranuose
   sekcija netaptų nepatogiai aukšta (video/nuotrauka apkarpoma per object-fit). */
@media (min-width: 768px) {
	.timtim-vitrina {
		max-height: 950px;
	}
}

/* Mobile – beveik kvadratinė proporcija (dizaino sprendimas; breakpoint'as
   767px turi sutapti su MOBILE_MQ reikšme video-vitrina.js faile). */
@media (max-width: 767px) {
	.timtim-vitrina {
		aspect-ratio: 1 / 0.9;
	}
}

/* ---------------------------------------------------------------------------
 * Sluoksniai: still nuotrauka (ramybės būsena) apačioje + du video (dvigubas
 * buferis) virš jos. Animacijai pasibaigus video peršviesėjimu pranyksta ir
 * lieka still nuotrauka – kadrai turi sutapti, tada perėjimas nematomas.
 * ------------------------------------------------------------------------- */
.timtim-v-still-wrap,
.timtim-v-still,
.timtim-v-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.timtim-v-still-wrap {
	z-index: 0;
}

.timtim-v-still {
	z-index: 0;
}

.timtim-v-video {
	z-index: 1;
	opacity: 0;
	/* 250ms turi sutapti su FADE_MS reikšme video-vitrina.js faile */
	transition: opacity 250ms ease;
}

.timtim-v-video--active {
	opacity: 1;
	z-index: 2;
}

/* Ką tik pakeistas video: lieka VISIŠKAI nepermatomas po nauju sluoksniu,
   kol naujasis peršviesėjimu atsiranda virš jo. Kitaip abiem sluoksniams
   blėstant vienu metu pro juos akimirkai prasišviečia apačioje esanti
   still nuotrauka (blyksnis keičiant tvorą). Klasę nuima JS po perėjimo. */
.timtim-v-video--below {
	opacity: 1;
	z-index: 1;
	transition: none;
}

/* ---------------------------------------------------------------------------
 * Mygtukų juosta (pagal Figma – balta piliulė viršuje, centre)
 * ------------------------------------------------------------------------- */
.timtim-v-controls {
	position: absolute;
	top: clamp(16px, 4vw, 40px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;

	display: flex;
	align-items: center;
	gap: 8px;

	max-width: calc(100% - 24px);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;

	background: #fff;
	border-radius: 999px;
	padding: 8px 14px;
	box-shadow: 0 6px 24px rgba(2, 3, 3, 0.14);
}

.timtim-v-controls::-webkit-scrollbar {
	display: none;
}

/* Viena grupė (etiketė + jos mygtukai) – savo flex eilutė. Desktop'e visos
   grupės eina vienoje bendroje eilutėje (žr. .timtim-v-controls); mobile
   bloke šie div'ai sudėliojami vienas po kito (žr. @media žemiau). */
.timtim-v-group {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.timtim-v-group-label {
	color: #50575e;
	font-size: 15px;
	white-space: nowrap;
	padding-left: 6px;
}

/* Skirtukas tarp tvoros ir vartų grupių */
.timtim-v-divider {
	flex: none;
	width: 1px;
	height: 26px;
	margin: 0 8px;
	background: #e0e0e0;
}

.timtim-v-btn {
	appearance: none;
	border: 0;
	margin: 0;
	cursor: pointer;
	white-space: nowrap;

	font: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	color: #020303;

	background: #f1f1f1;
	border-radius: 999px;
	padding: 12px 22px;

	transition: background-color 200ms ease, color 200ms ease;
}

.timtim-v-btn:hover:not(.timtim-v-btn--active) {
	background: #e4e4e4;
}

.timtim-v-btn:focus-visible {
	outline: 2px solid #020303;
	outline-offset: 2px;
}

.timtim-v-btn--active {
	background: #020303;
	color: #fff;
}

/* Vartų tipas, kurio video ši tvora (dar) neturi */
.timtim-v-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
 * Mobilūs įrenginiai – mygtukai dviem eilutėm (Tvora: viršuje, Vartai: apačioje),
 * etikečių stulpelis vienodo pločio, kad abiejų eilučių mygtukai prasidėtų
 * toje pačioje vietoje (pagal dizaino maketą). Kiekviena grupė (.timtim-v-group)
 * yra savo <div>, todėl perjungus konteinerį į flex-direction:column, plotis
 * automatiškai atsiskaičiuoja pagal PLATESNĘ eilutę (o ne siauriausią mygtuką,
 * kaip būtų su vienu bendru flex-wrap sąrašu).
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.timtim-v-controls {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 10px;
		border-radius: 20px;
		padding: 14px 18px;
	}

	.timtim-v-group-label {
		min-width: 64px;
		padding-left: 0;
	}

	/* Grupės jau atskiruose <div>'uose po vieną eilutėje – linijos skirtukas
	   tarp jų nebereikalingas. */
	.timtim-v-divider {
		display: none;
	}
}

@media (max-width: 600px) {
	.timtim-v-controls {
		gap: 6px;
		row-gap: 8px;
		padding: 10px 14px;
	}

	.timtim-v-group-label {
		font-size: 13px;
		min-width: 56px;
	}

	.timtim-v-btn {
		font-size: 13px;
		padding: 10px 16px;
	}
}

/* ---------------------------------------------------------------------------
 * Sumažintas judesys – paslepiam perėjimų animaciją
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.timtim-v-video {
		transition: none;
	}
}