/*
 * TIMTIM – Populiariausios tvoros (centrinė karuselė)
 * © 2026 TimTim | www.timtim.lt | timonas@timtim.lt
 */

/* ── Sekcija ──────────────────────────────────────────────── */
.timtim-pop {
	background: #f2f2f2;
	border-radius: 24px;
	overflow: hidden;
	padding: 24px 0;
	position: relative;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
}

/*
 * Ta pati apsauga kaip karuselis.css/atsiliepimai.css – Oxygen/Breakdance
 * flex konteineriai numatytai turi min-width:auto ir gali priversti visą
 * puslapį būti platesnį už telefono ekraną.
 */
.oxy-container:has(.timtim-pop),
.oxy-container-shortcode:has(.timtim-pop),
.section-container:has(.timtim-pop) {
	min-width: 0 !important;
	max-width: 100% !important;
}

/* ── Karuselės scena ──────────────────────────────────────── */
.timtim-pop-stage {
	position: relative;
	width: 100%;
	height: clamp(240px, 28vw, 420px);
	overflow: hidden;
	/* Paslėpta iki JS pozicionuoja skaidres (neleidžia "flash" visoms krūvoje) */
	opacity: 0;
	transition: opacity 0.3s ease;
}

.timtim-pop-stage--ready {
	opacity: 1;
}

/* ── Takelis ──────────────────────────────────────────────── */
.timtim-pop-track {
	position: relative;
	width: 100%;
	height: 100%;
}

/* ── Skaidrė ──────────────────────────────────────────────── */
.timtim-pop-slide {
	position: absolute;
	left: 50%;
	top: 0;
	height: 100%;
	width: 42%;
	transform: translateX(calc(-50% + 0px)) scale(1);
	transform-origin: center center;
	transition:
		transform 0.55s cubic-bezier(0.42, 0, 0.18, 1),
		opacity   0.45s ease;
	will-change: transform, opacity;
}

.timtim-pop-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	pointer-events: none;
	border-radius: 12px;
}

.timtim-pop-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #d8d8d8, #c2c2c2);
	border-radius: 12px;
}

/* ── Rodyklių mygtukai ────────────────────────────────────── */
.timtim-pop-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	z-index: 10;
	line-height: 0;
}

.timtim-pop-nav--prev { left: 6%; }
.timtim-pop-nav--next { right: 6%; }

.timtim-pop-nav svg {
	display: block;
	width: 56px;
	height: 56px;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12));
	transition: filter 0.2s ease, transform 0.2s ease;
}

.timtim-pop-nav:hover svg {
	filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.22));
	transform: scale(1.06);
}

.timtim-pop-nav:active svg {
	transform: scale(0.92);
}

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

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

/* ── Planšetė (≤900px) ────────────────────────────────────── */
@media (max-width: 900px) {
	.timtim-pop {
		border-radius: 18px;
		padding: 20px 0;
	}

	.timtim-pop-stage {
		height: clamp(200px, 36vw, 320px);
	}

	.timtim-pop-slide {
		width: 56%;
	}

	.timtim-pop-nav svg {
		width: 46px;
		height: 46px;
	}

	.timtim-pop-nav--prev { left: 4%; }
	.timtim-pop-nav--next { right: 4%; }
}

/* ── Telefonas (≤560px) ───────────────────────────────────── */
/* Dizainas pagal maketą: didelė centrinė tvora per beveik visą
   plotį, šoninės tvoros matomos tik siauromis juostelėmis prie
   kraštų, rodyklės uždėtos ant šoninių juostelių. */
@media (max-width: 560px) {
	.timtim-pop {
		border-radius: 14px;
		padding: 16px 0;
	}

	.timtim-pop-stage {
		height: clamp(190px, 58vw, 280px);
	}

	.timtim-pop-slide {
		width: 88%;
	}

	.timtim-pop-nav svg {
		width: 44px;
		height: 44px;
	}

	.timtim-pop-nav--prev { left: 5%; }
	.timtim-pop-nav--next { right: 5%; }
}