/* ==========================================================================
   Process widget — ported from pestcontrolgroupusa_core_old
   (components.css .process__* , layout.css .process/__timeline/__list/
   __viewport/__track/__desktop-only, responsive.css process breakpoints,
   animations.css .js-process-step / __number / __line initial states).
   Classes are namespaced pcgu-process(__*); rendered output otherwise
   matches the original exactly. The mobile drag/autoplay carousel and
   desktop scroll-reveal timeline are both driven by assets/js/process.js
   (ported/generalized from process-carousel.js + process-timeline.js).
   ---- */

.pcgu-process {
	position: relative;
	overflow: hidden;
}

.pcgu-process__blob {
	position: absolute;
	z-index: 0;
	border-radius: 9999px;
	filter: blur(60px);
	pointer-events: none;
}
.pcgu-process__blob--a {
	left: -4rem;
	top: -2rem;
	height: 16rem;
	width: 16rem;
	background-color: color-mix(in oklab, var(--secondary) 18%, transparent);
}
.pcgu-process__blob--b {
	right: -6rem;
	bottom: -4rem;
	height: 18rem;
	width: 18rem;
	background-color: color-mix(in oklab, var(--accent) 22%, transparent);
}

.pcgu-process .container {
	position: relative;
	z-index: 1;
}

/* ---- Shared step card (rendered once in the mobile carousel, once in
   the desktop timeline) ---- */

.pcgu-process__step {
	position: relative;
	z-index: 1;
	scroll-snap-align: start;
	border-radius: var(--radius-2xl);
	border: 1px solid var(--border);
	background-color: var(--card);
	padding: 1.5rem;
	box-shadow: var(--shadow-lift);
	transition: transform 300ms, box-shadow 300ms, border-color 300ms;
}
.pcgu-process__step:hover {
	transform: translateY(-6px);
	border-color: color-mix(in oklab, var(--secondary) 40%, var(--border));
	box-shadow: var(--shadow-elegant);
}
.pcgu-process__number {
	position: absolute;
	top: -1.25rem;
	left: 1.375rem;
	z-index: 2;
	display: grid;
	place-items: center;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 9999px;
	background-image: var(--gradient-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--primary-foreground);
	box-shadow: 0 0 0 5px var(--card), var(--shadow-elegant);
}
.pcgu-process__icon-circle {
	margin-top: 0.875rem;
	display: grid;
	place-items: center;
	height: 2.75rem;
	width: 2.75rem;
	border-radius: var(--radius-xl);
	background-color: color-mix(in oklab, var(--secondary) 12%, transparent);
	color: var(--secondary);
	transition: background-color 300ms, color 300ms;
}
.pcgu-process__icon-circle svg {
	height: 1.375rem;
	width: 1.375rem;
}
.pcgu-process__step:hover .pcgu-process__icon-circle {
	background-color: var(--secondary);
	color: #fff;
}
.pcgu-process__title {
	margin-top: 1rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--foreground);
}
.pcgu-process__body {
	margin-top: 0.25rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--muted-foreground);
}

/* ---- Mobile drag/autoplay carousel ---- */

.pcgu-process__viewport {
	position: relative;
	z-index: 1;
	margin-top: 3rem;
	padding: 1.5rem 0.25rem 1.25rem;
	margin-inline: -0.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.pcgu-process__viewport::-webkit-scrollbar {
	display: none;
}
.pcgu-process__viewport.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}
.pcgu-process__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	gap: 1.25rem;
	padding-inline: 0.25rem;
}

.pcgu-process__dots {
	margin-top: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
}
/* The theme's reset.css styles every [type=button]/button element with a
   bordered, padded, rounded-rectangle look (background-color, border,
   border-radius, padding all at the same (0,1,0) specificity as a bare
   ".pcgu-process__dot" selector, so it silently wins on source order) —
   these dots need the widget wrapper prefixed on every state to reliably
   beat that reset, matching the same fix used on Header/Services buttons. */
.pcgu-process .pcgu-process__dot {
	height: 0.625rem;
	width: 0.625rem;
	border-radius: 9999px;
	border: none;
	background-color: var(--border);
	padding: 0;
	transition: background-color 200ms, transform 200ms, width 200ms;
}
.pcgu-process .pcgu-process__dot:hover,
.pcgu-process .pcgu-process__dot:focus {
	background-color: color-mix(in oklab, var(--secondary) 50%, var(--border));
}
.pcgu-process .pcgu-process__dot.is-active {
	width: 1.75rem;
	background-color: var(--secondary);
}

/* ---- Desktop GSAP scroll-reveal timeline ---- */

.pcgu-process__desktop-only {
	display: none;
}
.pcgu-process__timeline {
	position: relative;
	margin-top: 3.5rem;
}
.pcgu-process__line {
	display: none;
	position: absolute;
	top: 0;
	left: 10%;
	right: 10%;
	height: 2px;
	transform-origin: left center;
	background-image: linear-gradient(to right, transparent, var(--border) 8%, var(--border) 92%, transparent);
}
.pcgu-process__list {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 3rem;
	column-gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Entrance states for the desktop timeline's GSAP scroll-reveal (see
   assets/js/process.js) — only applied to the .js-process-step / -number
   / -line elements, matching the original where the mobile carousel's
   plain step/number never fade in. */
.js-process-step {
	opacity: 0;
	transform: translateY(24px);
}
.js-process-number {
	transform: scale(0);
}
.js-process-line {
	transform: scaleX(0);
}

/* ---- Responsive — exact original breakpoints (sm:640 / lg:1024) ---- */

@media (min-width: 640px) {
	.pcgu-process__mobile-carousel { display: none; }
	.pcgu-process__desktop-only { display: block; }
	.pcgu-process__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.pcgu-process__list { grid-template-columns: repeat(5, 1fr); }
	.pcgu-process__line { display: block; }
}