/**
 * Glansco Projects Grid + before/after comparison slider styles.
 */

.glansco-projects {
	padding: 96px 0;
}

.glansco-projects__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.glansco-projects-grid {
	display: grid;
	gap: 32px;
}

.glansco-projects-grid--cols-2 {
	grid-template-columns: repeat( 2, 1fr );
}

.glansco-projects-grid--cols-3 {
	grid-template-columns: repeat( 3, 1fr );
}

@media ( max-width: 768px ) {
	.glansco-projects-grid {
		grid-template-columns: 1fr !important;
	}
}

.glansco-project-card {
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.06 );
	border-radius: 16px;
	overflow: hidden;
}

.glansco-project-card__body {
	padding: 20px 24px 24px;
}

.glansco-project-card__title {
	font-family: var( --glansco-font-heading, "Segoe UI", sans-serif );
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0 0 8px;
}

.glansco-project-card__desc {
	font-family: var( --glansco-font-body, "Segoe UI", sans-serif );
	color: #5b6b68;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}

/* --- Before/after comparison slider ---------------------------------- */

.glansco-before-after__frame {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	/* Dragging the handle repaints two <img> elements every frame; isolating
	   this in its own compositor layer keeps that repaint from touching the
	   rest of the page's layout/paint. */
	will-change: contents;
}

.glansco-before-after__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Clip-path (not width/overflow) drags the "after" reveal: it only
	   changes what's painted, never triggers layout, so dragging stays
	   smooth even on low-end devices. */
	will-change: clip-path;
}

.glansco-before-after__label {
	position: absolute;
	top: 12px;
	background: rgba( 17, 17, 17, 0.65 );
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 12px;
	border-radius: 999px;
	pointer-events: none;
}

.glansco-before-after__label--before {
	left: 12px;
}

.glansco-before-after__label--after {
	right: 12px;
}

.glansco-before-after__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
	background: #fff;
	transform: translateX( -50% );
	cursor: ew-resize;
	/* Prevents the browser's native touch-scroll/zoom gestures from
	   competing with the drag on mobile. */
	touch-action: none;
}

.glansco-before-after__handle:focus-visible {
	outline: 2px solid var( --glansco-color-accent, #f5a623 );
	outline-offset: 2px;
}

.glansco-before-after__handle-grip {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	color: var( --glansco-color-secondary, #111 );
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.25 );
}

.glansco-before-after__handle-grip svg {
	width: 20px;
	height: 20px;
}