/* ==========================================================================
   About widget — ported from pestcontrolgroupusa_core_old
   (layout.css .about, components.css .about__*, responsive.css about
   rules). Classes are namespaced pcgu-about(__*) to avoid collisions with
   other plugins/themes; rendered output otherwise matches the original
   exactly. Colors/fonts/radii come from the design-system tokens the
   paired theme registers globally — see Global_Design_Tokens_Trait for the
   PHP-side equivalent used by controls.

   Any rule below touching box-shadow on an <a> or height/sizing on an
   <img> that ties in specificity with the theme's global [type=button],
   ".elementor a", or ".elementor img" resets is prefixed with
   ".pcgu-about" (not left as a bare descendant selector) — see the Hero
   and Header widgets' CSS for the full writeup of this recurring
   Elementor/theme specificity collision; every future widget must check
   for it too. ---- */

/* .pcgu-about's padding-top/bottom and .pcgu-about__inner's gap are
   intentionally NOT hardcoded here — both are fully owned by this
   widget's Style tab ("Section > Padding" / "Content / Media Gap")
   whose defaults reproduce the original values exactly, so editing them
   in one place (the Elementor Style tab) is authoritative instead of
   fighting a hardcoded rule here (same convention as Hero/Header). */
.pcgu-about {
	overflow: hidden;
}

/* Flexbox, not CSS Grid: with grid-template-columns the column *sizes*
   (1fr / 0.9fr) belong to the track position, not the element — flipping
   "Media Position" to Left via `order` would have made whichever element
   lands in track 1 take the wider share, silently swapping the intended
   content/media proportions instead of mirroring them. In flexbox,
   flex-grow lives on the element itself (see .pcgu-about__content /
   .pcgu-about__media below), so `order` can move either side left or
   right while each keeps its own width ratio — a true mirror. */
.pcgu-about__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pcgu-about__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--secondary);
}
.pcgu-about__eyebrow-dash {
	display: inline-block;
	height: 2px;
	width: 1.75rem;
	background-color: var(--secondary);
}

.pcgu-about__heading {
	margin-top: 1rem;
	font-size: 1.875rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--foreground);
	font-family: var(--font-display);
}

.pcgu-about__body {
	margin-top: 1.25rem;
	max-width: 34rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--muted-foreground);
}

.pcgu-about__stats {
	margin-top: 2rem;
	display: flex;
	gap: 2.5rem;
}
.pcgu-about__stat {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding-left: 1.25rem;
	border-left: 3px solid var(--secondary);
}
.pcgu-about__stat-value {
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--foreground);
}
.pcgu-about__stat-label {
	max-width: 10rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--muted-foreground);
}

/* .pcgu-about prefix required: this is an <a> tag whose box-shadow ties in
   specificity with the theme's ".elementor a { box-shadow: none }" reset
   (found and documented while building the Hero/Header widgets). */
.pcgu-about .pcgu-about__cta {
	margin-top: 2.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	border-radius: var(--radius-xl);
	background-image: var(--gradient-call);
	padding: 1rem 1.75rem;
	color: var(--primary-foreground);
	font-size: 0.9375rem;
	font-weight: 700;
	box-shadow: var(--shadow-call);
	transition: transform 300ms, filter 300ms;
}
.pcgu-about .pcgu-about__cta:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
}
.pcgu-about .pcgu-about__cta:focus-visible {
	outline: 2px solid var(--secondary);
	outline-offset: 3px;
}
.pcgu-about__cta svg,
.pcgu-about__cta i {
	height: 1.125rem;
	width: 1.125rem;
	font-size: 1.125rem;
	transition: transform 250ms;
}
.pcgu-about__cta:hover svg,
.pcgu-about__cta:hover i {
	transform: translateX(3px);
}

.pcgu-about__media {
	position: relative;
	padding: 1.5rem 2rem 2rem 0;
}
.pcgu-about__blob {
	position: absolute;
	z-index: -10;
	border-radius: 9999px;
	filter: blur(50px);
}
.pcgu-about__blob--a {
	right: -1rem;
	top: -2rem;
	height: 12rem;
	width: 12rem;
	background-color: color-mix(in oklab, var(--accent) 45%, transparent);
}
.pcgu-about__blob--b {
	left: -2rem;
	bottom: -1rem;
	height: 11rem;
	width: 11rem;
	background-color: color-mix(in oklab, var(--secondary) 35%, transparent);
}

.pcgu-about__photo {
	border-radius: var(--radius-2xl);
	background-color: var(--card);
	padding: 0.5rem;
	box-shadow: var(--shadow-elegant);
}
/* .pcgu-about prefix required: ".pcgu-about__photo img" is a two-part
   descendant selector (0,1,1) — an exact specificity TIE with the theme's
   ".elementor img { height:auto; max-width:100% }" reset, which would
   otherwise unpredictably override object-fit/sizing depending on
   stylesheet load order. (0,2,1) resolves it deterministically. */
.pcgu-about .pcgu-about__photo img {
	display: block;
	height: 100%;
	width: 100%;
	border-radius: var(--radius-xl);
	object-fit: cover;
}
.pcgu-about__photo--main {
	position: relative;
	z-index: 1;
	aspect-ratio: 4 / 3.3;
}
.pcgu-about__photo--accent {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	width: 48%;
	aspect-ratio: 4 / 3;
}

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

@media (min-width: 640px) {
	.pcgu-about__heading { font-size: 2.25rem; }
}

@media (min-width: 1024px) {
	.pcgu-about__inner {
		flex-direction: row;
	}
	.pcgu-about__content {
		flex: 1 1 0%;
	}
	.pcgu-about__media {
		flex: 0.9 1 0%;
		min-width: 0;
	}
}