/* ==========================================================================
   Common Pests widget — ported from pestcontrolgroupusa_core_old
   (components.css .common-pests__chip/__icon, layout.css .common-pests__grid
   and (dot)cta-row, responsive.css common-pests breakpoints). Classes are
   namespaced pcgu-common-pests(__*) to avoid collisions with other
   plugins/themes; rendered output otherwise matches the original exactly.
   Shares .section-head*, .js-reveal, .cta-call, .icon-circle and .pulse-ring
   with other widgets — see shared.css, not duplicated here.

   None of this widget's own elements are <a>/<img>/<button> (the call CTA
   reuses shared.css's already-hardened ".cta-call.cta-call" selector), so
   the Elementor/theme global-reset specificity collision documented in
   Hero/Header/About/Services doesn't need a fresh fix here. ---- */

.pcgu-common-pests {
	background-color: color-mix(in oklab, var(--muted) 40%, transparent);
}

.pcgu-common-pests__grid {
	margin-top: 2.5rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

.pcgu-common-pests__chip {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-radius: var(--radius-xl);
	border: 1px solid var(--border);
	background-color: var(--card);
	padding: 0.875rem 1rem;
	box-shadow: var(--shadow-lift);
	transition: transform 300ms, border-color 300ms;
}
.pcgu-common-pests__chip:hover {
	transform: translateY(-2px);
	border-color: color-mix(in oklab, var(--secondary) 40%, transparent);
}
.pcgu-common-pests__icon {
	display: grid;
	place-items: center;
	height: 2.25rem;
	width: 2.25rem;
	border-radius: var(--radius-md);
	background-color: color-mix(in oklab, var(--secondary) 10%, transparent);
	color: var(--secondary);
	font-size: 1rem;
	flex-shrink: 0;
}
.pcgu-common-pests__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--foreground);
}

.pcgu-common-pests__cta-row {
	margin-top: 2.5rem;
	display: flex;
	justify-content: center;
}

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

@media (min-width: 640px) {
	.pcgu-common-pests__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
	.pcgu-common-pests__grid { grid-template-columns: repeat(4, 1fr); }
}