/*
 * #before-after-2401 — their before/after photos on the homepage (BeforeAfter.astro), after „Kaip dirbame“.
 * The Reels slider's frame (instagram.css): heading centred, the cards below with arrows half outside, 1 card
 * a view on phones, 2 from 36rem, 3 from 56rem. Before Keen Slider loads (and without JS) the row scrolls with
 * scroll-snap at the same card widths. Each card: the "after" photo, the "before" photo over it clipped at
 * --pos, a white seam with the skewed knob, "Prieš" / "Po" tags in the top corners, the caption under it.
 */
#before-after-2401 {
	padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
	--pad: clamp(1rem, 4.5vw, 6.25rem);
	--pv: 1;
	--gap: 16px;
}
#before-after-2401 .cs-container {
	width: 100%;
	max-width: 112.5rem;
	margin: auto;
	padding: 0 var(--pad);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 80rem);
	justify-content: center;
	gap: clamp(2rem, 4vw, 3rem);
}
#before-after-2401 .cs-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
#before-after-2401 .cs-title {
	margin: 0 0 1rem;
}
#before-after-2401 .cs-text {
	max-width: 36rem;
	margin: 0;
}
#before-after-2401 .tb-ba-more {
	justify-self: center;
	margin: 0;
}

/* Arrows on the slider's sides, half outside it */
#before-after-2401 .tb-ba-viewport {
	min-width: 0;
	position: relative;
}
#before-after-2401 .tb-ba-arrow {
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	display: grid;
	place-items: center;
	position: absolute;
	/* the middle of the photo, not of photo + caption */
	top: calc(50% - 2.75rem);
	z-index: 5;
	color: var(--tbInk);
	background-color: #fff;
	box-shadow: 3px 3px 0 0 var(--tbInk);
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s, transform 0.2s;
}
#before-after-2401 .tb-ba-prev {
	left: -1.5rem;
}
#before-after-2401 .tb-ba-next {
	right: -1.5rem;
}
#before-after-2401 .tb-ba-arrow:hover {
	color: #fff;
	background-color: var(--tbGold);
}
#before-after-2401 .tb-ba-arrow:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 0 var(--tbInk);
}
#before-after-2401 .tb-ba-arrow:focus-visible,
#before-after-2401 .tb-ba-caption a:focus-visible {
	outline: 3px solid var(--tbGold);
	outline-offset: 3px;
}

#before-after-2401 .tb-ba-slider {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
#before-after-2401 .tb-ba-slider::-webkit-scrollbar {
	display: none;
}
#before-after-2401 .tb-ba-slide {
	flex: 0 0 calc((100% - var(--gap) * (var(--pv) - 1)) / var(--pv));
	scroll-snap-align: start;
	min-width: 0;
}
/* Keen Slider in charge: it sizes and moves every slide itself */
#before-after-2401 .tb-ba-slider.tb-ba-keen {
	gap: 0;
	overflow: hidden;
	scroll-snap-type: none;
	position: relative;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
#before-after-2401 .tb-ba-keen .tb-ba-slide {
	flex: none;
	width: 100%;
	position: relative;
	overflow: hidden;
}

/* A pair */
#before-after-2401 .tb-ba-card {
	margin: 0;
}
#before-after-2401 .tb-ba-frame {
	aspect-ratio: 3 / 4;
	position: relative;
	overflow: hidden;
	background-color: #f1eeec;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}
#before-after-2401 .tb-ba-img {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	pointer-events: none;
}
#before-after-2401 .tb-ba-before {
	position: absolute;
	inset: 0;
	clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
#before-after-2401 .tb-ba-tag {
	position: absolute;
	top: 0.75rem;
	z-index: 2;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	padding: 0.4375rem 0.625rem 0.375rem;
	background-color: rgba(11, 18, 32, 0.6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	pointer-events: none;
}
#before-after-2401 .tb-ba-tag-before {
	left: 0.75rem;
}
#before-after-2401 .tb-ba-tag-after {
	right: 0.75rem;
	background-color: var(--tbGold);
}

/* The seam: a white line the height of the photo, the knob in the middle. 3rem wide to grab. */
#before-after-2401 .tb-ba-handle {
	width: 3rem;
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	z-index: 3;
	transform: translateX(-50%);
	display: grid;
	place-items: center;
	cursor: ew-resize;
	touch-action: none;
}
#before-after-2401 .tb-ba-handle:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 1px);
	width: 2px;
	background-color: #fff;
	box-shadow: 0 0 6px rgba(11, 18, 32, 0.35);
}
#before-after-2401 .tb-ba-knob {
	width: 3.25rem;
	height: 3.25rem;
	position: relative;
	display: grid;
	place-items: center;
	color: var(--tbInk);
	background-color: #fff;
	box-shadow: 3px 3px 0 0 var(--tbInk);
	transform: skew(-10deg);
	transition: background-color 0.3s, color 0.3s, transform 0.2s;
}
#before-after-2401 .tb-ba-knob svg {
	transform: skew(10deg);
}
#before-after-2401 .tb-ba-handle:hover .tb-ba-knob,
#before-after-2401 .is-dragging .tb-ba-knob {
	color: #fff;
	background-color: var(--tbGold);
}
#before-after-2401 .is-dragging .tb-ba-knob {
	transform: skew(-10deg) scale(1.08);
}
/* A tap on the photo slides the seam there; a drag follows the finger with no lag */
#before-after-2401 .is-jumping .tb-ba-before {
	transition: clip-path 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
#before-after-2401 .is-jumping .tb-ba-handle {
	transition: left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
	#before-after-2401 .is-jumping .tb-ba-before,
	#before-after-2401 .is-jumping .tb-ba-handle {
		transition: none;
	}
}

/* The range input: hidden, for the keyboard and screen readers; its focus shows on the knob */
#before-after-2401 .tb-ba-range {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
#before-after-2401 .tb-ba-range:focus-visible + .tb-ba-handle .tb-ba-knob {
	outline: 3px solid var(--tbGold);
	outline-offset: 3px;
}

#before-after-2401 .tb-ba-caption {
	margin: 0;
	padding: 1rem 0 0;
}
#before-after-2401 .tb-ba-caption a {
	font-family: "Overpass", Arial, sans-serif;
	font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
	font-weight: 800;
	line-height: 1.3em;
	color: var(--headerColor);
	text-decoration: none;
	padding-left: 0.75rem;
	border-left: 3px solid var(--tbGold);
	transition: color 0.3s;
}
#before-after-2401 .tb-ba-caption a:hover {
	color: var(--tbGold);
}

/* Cards a view per width, the same as the Keen breakpoints in BeforeAfter.astro */
@media only screen and (min-width: 36rem) {
	#before-after-2401 {
		--pv: 2;
	}
}
@media only screen and (min-width: 56rem) {
	#before-after-2401 {
		--pv: 3;
		--gap: 20px;
	}
}

/* /musu-darbai/: every pair in a grid (1, 2, then 3 a row), no slider */
#before-after-2401.tb-ba-grid .tb-ba-slider {
	display: grid;
	grid-template-columns: repeat(var(--pv), minmax(0, 1fr));
	gap: clamp(2rem, 3vw, 2.5rem) var(--gap);
	overflow: visible;
	scroll-snap-type: none;
}
#before-after-2401.tb-ba-grid .tb-ba-slide {
	flex: none;
}