/*
 * JGE Engineering: site-wide custom CSS.
 *
 * Loaded on every page after Elementor's styles. Pushing to main deploys it.
 * Prefer changing colours, fonts and spacing in the Elementor kit (content/elementor_library/*kit*.json)
 * so they stay editable in Elementor; use this file for things the kit can't do.
 */

/* ---------------------------------------------------------------- service pages */

/* Main images beside the text: same shape on every page */
.jge-feature-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Photo galleries: even 4:3 tiles with a gentle zoom on hover */
.jge-gallery .gallery-item a {
	display: block;
	overflow: hidden;
	border-radius: 8px;
}
.jge-gallery .gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 0 !important;
	transition: transform 0.35s ease;
}
.jge-gallery .gallery-item a:hover img,
.jge-gallery .gallery-item a:focus-visible img {
	transform: scale(1.05);
}
@media (max-width: 767px) {
	.jge-gallery .gallery-columns-3 .gallery-item,
	.jge-gallery .gallery-columns-4 .gallery-item {
		max-width: 50% !important;
	}
}

/* "Our services" links row: wrap neatly on small screens */
.jge-related .elementor-icon-list-items.elementor-inline-items {
	row-gap: 10px;
}
.jge-related .elementor-icon-list-item a:hover .elementor-icon-list-text {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Links in body text on the service pages (children of Our Services): site colours, not the theme's pink */
.parent-pageid-54 .elementor-widget-text-editor a,
.parent-pageid-54 .elementor-tab-content a {
	color: #333333;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: #AAC637;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.parent-pageid-54 .elementor-widget-text-editor a:hover,
.parent-pageid-54 .elementor-tab-content a:hover {
	color: #7f9625;
}

/*
 * Green buttons (Essential Addons "Winona" hover effect): on hover the text is swapped for a
 * copy that slides in. That copy wasn't given the button's font, so it showed at twice the size
 * (or in Poppins on the header button) and looked like the text zoomed. Match it to the button text.
 */
.eael-creative-button--winona::after {
	font-family: "DM Sans", sans-serif !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
}

/* Home page service cards (4 + 3 layout): centre the second row, make every card the same
   height with the "View more" links lined up at the bottom. site.js matches heights across rows. */
.elementor-section.elementor-element-a11aff2 > .elementor-container {
	justify-content: center !important;
}
.elementor-element-ac9dffc .elementor-widget-wrap,
.elementor-element-a11aff2 .elementor-widget-wrap {
	align-content: stretch;
}
.elementor-element-ac9dffc .elementor-widget-eael-info-box,
.elementor-element-a11aff2 .elementor-widget-eael-info-box {
	height: 100%;
}
.elementor-element-ac9dffc .elementor-widget-eael-info-box > .elementor-widget-container,
.elementor-element-a11aff2 .elementor-widget-eael-info-box > .elementor-widget-container {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.elementor-element-ac9dffc .eael-infobox,
.elementor-element-a11aff2 .eael-infobox {
	flex: 1 1 auto;
}
.elementor-element-ac9dffc .eael-infobox .infobox-content,
.elementor-element-a11aff2 .eael-infobox .infobox-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
.elementor-element-ac9dffc .eael-infobox .infobox-button,
.elementor-element-a11aff2 .eael-infobox .infobox-button {
	margin-top: auto;
}