/*
 * TIMTIM – Projektų Karuselė
 * © 2026 TimTim | www.timtim.lt | timonas@timtim.lt
 */

/* ── Pagrindas ────────────────────────────────────────────── */
.timtim-karuselis {
	position: relative;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding-bottom: 48px;   /* vieta taškeliams apačioje */
	user-select: none;
	-webkit-user-select: none;
	/* overflow:visible leidžia rodyklėms išlipti iš kraštų */
	overflow: visible;
	box-sizing: border-box;
}

/* ── Viewport (slepia skaidres) ───────────────────────────── */
.timtim-k-viewport {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

/*
 * Oxygen/Breakdance flex konteineriai (pvz. .oxy-container,
 * .oxy-container-shortcode), į kuriuos įdėta karuselė, numatytai turi
 * min-width:auto (flexbox spec numatytoji reikšmė) – tai reiškia, kad
 * jie ATSISAKO susitraukti siauriau už savo turinio min-content plotį.
 * Telefone šis "grindų" plotis būna didesnis už ekraną, todėl visas
 * konteineris (o su juo ir visas puslapis) tampa platesnis už
 * viewport'ą. :has() apriboja pataisymą TIK tiems konteineriams, kurie
 * tiesiogiai ar netiesiogiai apgaubia mūsų karuselę – kitų Oxygen
 * elementų svetainėje tai nepaliečia.
 */
.oxy-container:has(.timtim-karuselis),
.oxy-container-shortcode:has(.timtim-karuselis),
.section-container:has(.timtim-karuselis) {
	min-width: 0 !important;
	max-width: 100% !important;
}

/* ── Takelis ──────────────────────────────────────────────── */
.timtim-k-track {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	transition: transform 0.55s cubic-bezier(0.42, 0, 0.18, 1);
	will-change: transform;
}

/* ── Skaidrė ──────────────────────────────────────────────── */
.timtim-k-slide {
	flex: 0 0 calc((100% - 48px) / 3);
	min-width: 0;
	position: relative; /* stretched-link reikalavimas */
}

/* ── Nuotrauka ────────────────────────────────────────────── */
.timtim-k-img-wrap {
	display: block;
	overflow: hidden;
	border-radius: 12px;
	aspect-ratio: 4 / 3;
	background: #e9e9e9;
	position: relative;
	z-index: 0;
}

/*
 * position:absolute + inset:0 ištraukia <img> iš normalaus srauto,
 * todėl jos NATŪRALUS (natural/intrinsic) plotis nebeprisideda prie
 * jokio protėvio (grid/flex/auto pločio konteinerio) dydžio
 * skaičiavimo. Be šito, kai kurie Oxygen konteineriai skaičiuoja savo
 * plotį pagal vaizdo natūralų dydį (pvz. 1024px) ir tempia visą
 * karuselę per telefono ekrano kraštą.
 */
.timtim-k-img,
.timtim-k-img--placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s cubic-bezier(0.42, 0, 0.18, 1);
}

.timtim-k-slide:hover .timtim-k-img {
	transform: scale(1.04);
}

.timtim-k-img--placeholder {
	background: linear-gradient(135deg, #d8d8d8 0%, #c2c2c2 100%);
}

/* ── Tekstas ──────────────────────────────────────────────── */
.timtim-k-info {
	padding: 18px 0 0;
	position: relative;
	z-index: 0;
}

/* ── Nuoroda + stretched-link ─────────────────────────────── */
.timtim-k-title {
	display: block;
	font-size: 1.375rem;
	font-weight: 700;
	color: #020303;
	text-decoration: none;
	line-height: 1.3;
	margin: 0 0 6px;
	transition: color 0.2s ease;
}

.timtim-k-title:hover,
.timtim-k-title:focus {
	color: #C7893A;
	outline: none;
}

/* Pseudo-elementas uždengamas ant viso .timtim-k-slide */
.timtim-k-stretched-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	cursor: pointer;
}

/* ── Kaina ────────────────────────────────────────────────── */
.timtim-k-price {
	margin: 0;
	font-size: 0.9375rem;
	color: #444;
	line-height: 1.4;
	position: relative;
	z-index: 0;
}

.timtim-k-price-prefix { margin-right: 4px; }
.timtim-k-price-value  { font-weight: 600; }
.timtim-k-price-suffix { margin-left: 2px; }

/* ── Rodyklių mygtukai ────────────────────────────────────── */
/*
 * Rodyklės pozicionuojamos ant viewport kraštų (ne neigiamos reikšmės),
 * kad veiktų tiek siauruose, tiek plotuose konteineriuose.
 * top: 50% of viewport = 50% of image height (image ~= full viewport height
 * before text), bet skaičiuojame nuo viewport viršaus.
 */
.timtim-k-btn {
	position: absolute;
	/* Vertikali centracija: 50% viewport aukščio.
	   Viewport height ~= image height kol nėra teksto eilutės. */
	top: 0;
	height: 100%;
	display: flex;
	align-items: center;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	z-index: 2;
	line-height: 0;
	/* Atimame dots aukštį, kad centras būtų ties nuotrauka, ne tekstu */
	padding-bottom: 48px;
}

.timtim-k-btn--prev { left: 20px; }
.timtim-k-btn--next { right: 20px; }

.timtim-k-btn svg {
	display: block;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.14));
	width: 62px;
	height: 62px;
	flex-shrink: 0;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.timtim-k-btn:hover svg {
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.24));
	transform: scale(1.04);
}

.timtim-k-btn:active svg {
	transform: scale(0.93);
}

.timtim-k-btn:focus-visible {
	outline: 2px solid #C7893A;
	outline-offset: 4px;
	border-radius: 50%;
}

.timtim-k-btn[disabled] {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Taškeliai ────────────────────────────────────────────── */
.timtim-k-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 20px;
}

/* !important reikalingas, nes daugelis temų turi globalų button reset'ą */
.timtim-k-dot {
	display: inline-block !important;
	flex-shrink: 0 !important;
	box-sizing: border-box !important;
	width: 16px !important;
	height: 4px !important;
	min-width: 16px !important;
	min-height: 4px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 2px !important;
	background: rgba(52, 53, 53, 0.4) !important;
	cursor: pointer !important;
	vertical-align: middle !important;
	line-height: 0 !important;
	font-size: 0 !important;
	overflow: hidden !important;
	transition:
		width            0.35s cubic-bezier(0.42, 0, 0.18, 1),
		background-color 0.35s ease !important;
}

.timtim-k-dot--active {
	width: 52px !important;
	background: #C7893A !important;
}

.timtim-k-dot:focus-visible {
	outline: 2px solid #C7893A;
	outline-offset: 4px;
	border-radius: 3px;
}

/* ── Tuščia būsena ────────────────────────────────────────── */
.timtim-tuscia {
	text-align: center;
	color: #888;
	padding: 40px 0;
	font-size: 1rem;
}

/* ── Planšetė ir telefonas (≤1024px) ─────────────────────────
 * Rodyklės pašalinamos – naršymas tik pirštu (swipe, jau įgyvendinta
 * JS faile) arba taškeliais. Liesti ekranai retai naudojami su pelės
 * rodyklėmis, o mygtukai tik užimdavo vietą ir kirto kortelių turinį
 * siaurame ekrane.
 */
@media (max-width: 1024px) {
	.timtim-k-btn {
		display: none;
	}
}

/* ── Planšetė (≤1024px) – 2 kortelės ───────────────────────
 * !important čia sąmoningai: TIMTIM "CSS redaktorius" (pasirinktinis
 * CSS) yra išvedamas <head> PO šio failo, tad bet kokia sena/pamiršta
 * .timtim-k-slide taisyklė ten (be media query) kitaip nutildytų visus
 * responsyvumo lūžio taškus visiems ekranams vienodai.
 */
@media (max-width: 1024px) {
	.timtim-k-slide {
		flex: 0 0 calc((100% - 24px) / 2) !important;
		max-width: calc((100% - 24px) / 2) !important;
	}
}

/* ── Telefonas (≤640px) – 1 kortelė + kitos peek ──────────── */
@media (max-width: 640px) {
	.timtim-k-slide {
		/* Rodoma pirma kortelė beveik pilnu pločiu, o antra
		   matoma per pusę – nurodo, kad galima slinkti toliau. */
		flex: 0 0 64% !important;
		max-width: 64% !important;
	}

	.timtim-k-track {
		gap: 16px;
	}

	.timtim-k-title {
		font-size: 1.0625rem;
	}
}

@media (max-width: 400px) {
	.timtim-k-slide {
		flex: 0 0 72% !important;
		max-width: 72% !important;
	}
}


/* ktitle-hidden v2: tekstas lieka išdėstyme (kad karuselė neprarastų pločio), bet nematomas ir be aukščio */
.timtim-karuselis .timtim-k-info { padding: 0 !important; height: 0 !important; overflow: visible; }
.timtim-karuselis .timtim-k-title {
	color: transparent !important;
	margin: 0 !important;
	user-select: none;
	-webkit-user-select: none;
}
.timtim-karuselis .timtim-k-title:hover,
.timtim-karuselis .timtim-k-title:focus { color: transparent !important; }
.timtim-karuselis .timtim-k-price { display: none; }