/*
 * BE Page Head — ported from reference site.css (base "page head" block; no later
 * version block touches .crumbs / .phead / .pstats). Shared helpers it relies on
 * (.pad, .wrap, .eyebrow, .muted, h1 reset) are scoped here so the widget does not
 * depend on the site layer. Style controls write the --be-ph-* properties.
 */

.elementor-widget-be-page-head .pad {
	padding-left: var(--gl);
	padding-right: var(--gr);
}

.elementor-widget-be-page-head .wrap {
	max-width: var(--maxw);
	margin: 0 auto;
}

/* Breadcrumbs */
.elementor-widget-be-page-head .crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--be-ph-crumbs-gap, 8px);
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--be-ph-crumbs, var(--soft));
	padding-top: var(--be-ph-crumbs-top, 28px);
	justify-content: var(--be-ph-justify, flex-start);
}

.elementor-widget-be-page-head .crumbs a {
	color: inherit;
	text-decoration: none;
	transition: color .2s;
}

.elementor-widget-be-page-head .crumbs a:hover {
	color: var(--be-ph-crumbs-hover, var(--text));
}

/* Head grid */
.elementor-widget-be-page-head .phead {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) auto;
	gap: var(--be-ph-row-gap, 24px) var(--be-ph-col-gap, 48px);
	align-items: var(--be-ph-align, end);
	padding-block: var(--be-ph-pt, 26px) var(--be-ph-pb, 40px);
	text-align: var(--be-ph-text-align, left);
}

.elementor-widget-be-page-head .phead .eyebrow {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--be-ph-eyebrow, var(--soft));
}

.elementor-widget-be-page-head .phead .be-ph-title {
	margin: var(--be-ph-title-gap, 12px) 0 0;
	padding: 0;
	font-family: inherit;
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.02em;
	text-wrap: balance;
	color: var(--be-ph-title, var(--text));
}

.elementor-widget-be-page-head .phead > div > .be-ph-title:first-child {
	margin-top: 0;
}

.elementor-widget-be-page-head .phead p.muted {
	max-width: var(--be-ph-lead-w, 44em);
	margin: var(--be-ph-lead-gap, 16px) 0 0;
	margin-inline: var(--be-ph-lead-mx, 0);
	font-size: 14px;
	line-height: 1.7;
	color: var(--be-ph-lead, var(--muted));
}

.elementor-widget-be-page-head .phead p.muted:first-child {
	margin-top: 0;
}

.elementor-widget-be-page-head .phead p.muted a {
	color: inherit;
	text-decoration: underline;
}

/* Stats */
.elementor-widget-be-page-head .pstats {
	display: flex;
	justify-content: var(--be-ph-justify, flex-start);
	gap: var(--be-ph-stats-gap, 36px);
}

.elementor-widget-be-page-head .pstats > div + div {
	border-left: 1px solid var(--be-ph-divider, transparent);
	padding-left: var(--be-ph-divider-pad, 0px);
}

.elementor-widget-be-page-head .pstats b {
	display: block;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.7;
	color: var(--be-ph-stat-value, inherit);
}

.elementor-widget-be-page-head .pstats small {
	font-size: 10px;
	line-height: 1.7;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--be-ph-stat-label, var(--soft));
}

@media (max-width: 760px) {
	.elementor-widget-be-page-head .phead {
		grid-template-columns: 1fr;
	}
}