/* ═══════════════════════════════════════════════════════════════════════════
   TRYG FRAFLYTNING — Før/Efter Slider (bare-bones, no section chrome)
   Namespaced under .tba
   ═══════════════════════════════════════════════════════════════════════════ */

.tba{
	--teal-dark:#04211f;
	--teal:#125c54;
	--gold:#fbbf24;
	--gold-dk:#d97706;
	--ink:#04211f;
	--border-light:rgba(4,33,31,0.08);
	--shadow-lg:0 40px 80px -30px rgba(4,33,31,0.32);
	--r-xl:28px; --r-pill:999px;
	--ease:cubic-bezier(.22,1,.36,1);
	font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
	color:var(--ink);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
.tba *,.tba *::before,.tba *::after{box-sizing:border-box}
.tba img{max-width:100%;display:block}
.tba button{font:inherit;cursor:pointer;border:0;background:transparent;padding:0;margin:0}

/* ═══════════════════════════ SLIDER ═══════════════════════════ */
.tba .tba-slider{
	--tba-pos:50%;
	position:relative;
	width:100%;
	border-radius:var(--r-xl);
	overflow:hidden;
	background:#0a3a35;
	box-shadow:var(--shadow-lg);
	border:1px solid var(--border-light);
	user-select:none;
	-webkit-user-select:none;
	touch-action:none;
	cursor:ew-resize;
}

/* aspect ratios */
.tba .tba-ar-16-9{aspect-ratio:16/9}
.tba .tba-ar-3-2{aspect-ratio:3/2}
.tba .tba-ar-4-3{aspect-ratio:4/3}
.tba .tba-ar-1-1{aspect-ratio:1/1}

@supports not (aspect-ratio: 1){
	.tba .tba-slider{min-height:520px}
}

.tba .tba-image{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	pointer-events:none;
	display:block;
}
.tba .tba-after{z-index:1}
.tba .tba-before{
	z-index:2;
	clip-path:inset(0 calc(100% - var(--tba-pos)) 0 0);
	-webkit-clip-path:inset(0 calc(100% - var(--tba-pos)) 0 0);
}

/* placeholder look when no image uploaded (editor UX only) */
.tba .tba-placeholder{
	background:linear-gradient(135deg,#125c54 0%,#04211f 100%);
	display:flex;align-items:center;justify-content:center;
	color:rgba(255,255,255,.7);font-size:14px;font-weight:500;text-align:center;padding:20px
}
.tba .tba-placeholder-b{background:linear-gradient(135deg,#3a2b1a 0%,#04211f 100%)}
.tba .tba-placeholder span{max-width:280px}
.tba .tba-placeholder b{color:#fff}

/* labels */
.tba .tba-label{
	position:absolute;
	top:20px;
	padding:8px 16px;
	background:rgba(4,33,31,0.75);
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
	color:#fff;
	font-weight:600;
	font-size:12px;
	letter-spacing:.14em;
	text-transform:uppercase;
	border-radius:var(--r-pill);
	border:1px solid rgba(255,255,255,.12);
	z-index:4;
	pointer-events:none;
}
.tba .tba-label-b{left:20px}
.tba .tba-label-a{right:20px}

/* Cursor — zero-width column at var(--tba-pos). Line and handle are its children,
   so they physically cannot drift apart no matter how the browser interprets transforms. */
.tba .tba-cursor{
	position:absolute;
	top:0;
	bottom:0;
	left:var(--tba-pos);
	width:0;
	z-index:3;
	pointer-events:none;
}
.tba .tba-line{
	position:absolute;
	top:0;
	bottom:0;
	left:-1.5px;
	width:3px;
	background:#fff;
	box-shadow:0 0 0 1px rgba(0,0,0,.08),0 6px 18px rgba(0,0,0,.25);
	pointer-events:none;
}
.tba .tba-handle{
	position:absolute;
	top:50%;
	left:0;
	transform:translate(-50%,-50%);
	width:56px;
	height:56px;
	border-radius:50%;
	background:transparent;
	border:0;
	padding:0;
	margin:0;
	line-height:1;
	pointer-events:auto;
	touch-action:none;
	display:flex;align-items:center;justify-content:center;
	cursor:ew-resize;
}
.tba .tba-handle-btn{
	width:52px;height:52px;
	border-radius:50%;
	background:#fff;
	color:var(--teal-dark);
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 10px 24px -6px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.1);
	transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.tba .tba-handle:hover .tba-handle-btn,
.tba .tba-handle:focus-visible .tba-handle-btn{transform:scale(1.08);box-shadow:0 14px 30px -6px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.15)}
.tba .tba-handle:focus{outline:none}
.tba .tba-handle:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:50%}
.tba .tba-handle-btn svg{width:22px;height:22px}
.tba .tba-slider.tba-dragging .tba-handle-btn{transform:scale(1.05)}

/* mobile tweaks */
@media(max-width:768px){
	.tba .tba-handle{width:48px;height:48px}
	.tba .tba-handle-btn{width:44px;height:44px}
	.tba .tba-handle-btn svg{width:18px;height:18px}
	.tba .tba-label{font-size:11px;padding:6px 12px;top:14px}
	.tba .tba-label-b{left:14px}
	.tba .tba-label-a{right:14px}
}