/**
 * Full-bleed page sections with a boxed inner — same pattern as header/footer.
 */

body.heinz-theme .site-main,
body.heinz-theme #content {
	max-width: none;
	width: 100%;
	margin-inline: 0;
}

.heinz-section,
.e-con.heinz-section {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	background-color: var(--heinz-color-bg);
	padding-block: var(--heinz-space-section);
	--width: 100%;
	--container-max-width: 100%;
	--padding-top: var(--heinz-space-section);
	--padding-right: 0px;
	--padding-bottom: var(--heinz-space-section);
	--padding-left: 0px;
}

.heinz-section--subtle,
.e-con.heinz-section--subtle {
	background-color: var(--heinz-color-bg-subtle);
}

.heinz-section__inner,
.e-con.heinz-section__inner {
	width: 100%;
	max-width: var(--heinz-width-content);
	margin-inline: auto;
	align-self: center;
	box-sizing: border-box;
	--width: 100%;
	--container-max-width: var(--heinz-width-content);
	--padding-top: 0px;
	--padding-right: clamp(1.25rem, 4vw, 2.5rem);
	--padding-bottom: 0px;
	--padding-left: clamp(1.25rem, 4vw, 2.5rem);
}

@media (max-width: 767px) {
	.heinz-section,
	.e-con.heinz-section {
		padding-inline: 1.5rem;
		padding-block: var(--heinz-space-section);
		--padding-top: var(--heinz-space-section);
		--padding-bottom: var(--heinz-space-section);
		--padding-right: 1.5rem;
		--padding-left: 1.5rem;
	}

	.heinz-section__inner,
	.e-con.heinz-section__inner,
	#home-services__grid > .e-con-inner {
		padding-inline: 0;
		--padding-right: 0px;
		--padding-left: 0px;
	}
}

#home-services__grid > .e-con-inner {
	width: 100%;
	max-width: var(--heinz-width-content);
	margin-inline: auto;
	align-self: center;
	box-sizing: border-box;
	background-color: #ffffff14;
	--width: 100%;
	--container-max-width: var(--heinz-width-content);
	--padding-top: 0px;
	--padding-right: clamp(1.25rem, 4vw, 2.5rem);
	--padding-bottom: 0px;
	--padding-left: clamp(1.25rem, 4vw, 2.5rem);
}

@media (min-width: 768px) {
	#home-services__grid > .e-con-inner {
		padding-inline: 0;
		--padding-right: 0px;
		--padding-left: 0px;
		width: calc(100% - 2 * clamp(1.25rem, 4vw, 2.5rem));
		--width: calc(100% - 2 * clamp(1.25rem, 4vw, 2.5rem));
		--container-max-width: calc(100% - 2 * clamp(1.25rem, 4vw, 2.5rem));
	}
}

.elementor-editor-active .heinz-section__inner,
.elementor-edit-area .heinz-section__inner,
.elementor-editor-active #home-services__grid > .e-con-inner,
.elementor-edit-area #home-services__grid > .e-con-inner {
	min-height: 8rem;
}

.service-grid__item .heinz-advanced-title {
	position: relative;
}

.service-grid__item .heinz-advanced-title::after {
	content: "→";
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	color: var(--heinz-color-text);
	font-family: var(--heinz-font-body);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-light);
	line-height: var(--text-xs--line-height);
	pointer-events: none;
	transform: translateX(0);
	transition: transform var(--heinz-btn-transition);
}

.service-grid__item:hover .heinz-advanced-title::after,
.service-grid__item:focus-within .heinz-advanced-title::after {
	transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
	.service-grid__item .heinz-advanced-title::after {
		transition: none;
	}
}

/*
 * Outer + inner 1px lines on an Elementor grid container.
 * Put heinz-grid-border on the grid. Set Elementor Gaps to 0.
 */
.heinz-grid-border,
.e-con.heinz-grid-border {
	box-sizing: border-box;
	padding: 1px;
	background-color: var(--heinz-color-border-faint);
	--gap: 1px 1px;
	--row-gap: 1px;
	--column-gap: 1px;
}

.heinz-grid-border > .e-con,
.heinz-grid-border > .elementor-widget {
	background-color: var(--heinz-color-bg);
}

.heinz-section--subtle .heinz-grid-border > .e-con,
.heinz-section--subtle .heinz-grid-border > .elementor-widget,
.heinz-grid-border--subtle > .e-con,
.heinz-grid-border--subtle > .elementor-widget {
	background-color: var(--heinz-color-bg-subtle);
}