/*
 * Apex Events — layout.css
 * Grids and gaps Elementor's style panel can't set reliably (it drops the two-value "gap" shorthand),
 * and the responsive grids used on the Home, Services, Products and Events pages.
 *
 * Note: these rules win over the matching Elementor settings, so to change e.g. the card grid
 * spacing, edit it here rather than in Elementor.
 */

/* ---------- Home page ---------- */

/* Selected projects: number, title and details in each row. */
html body .elementor .apex-home-projects article {
	column-gap: 40px;
	row-gap: 12px;
}

@media (max-width: 767px) {
	html body .elementor .apex-home-projects article {
		column-gap: 16px;
		row-gap: 8px;
	}
}

/* Our services: three cards side by side, wrapping on narrow screens. */
html body .elementor .apex-home-service-grid {
	column-gap: 64px;
	row-gap: 24px;
}

html body .elementor .apex-home-service-grid > .apex-home-service-card {
	flex: 1 1 300px;
}

/* Apex in numbers. */
html body .elementor .apex-numbers-grid {
	gap: 20px;
}

/* Hire & supply: 18 products in 3 / 2 / 1 columns. */
html body .elementor .apex-home-product-list {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 48px;
	row-gap: 0;
}

@media (max-width: 1024px) {
	html body .elementor .apex-home-product-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
	}
}

@media (max-width: 767px) {
	html body .elementor .apex-home-product-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Inner pages (Services, Products, Events) ---------- */

/* Intro row: heading column, then the paragraph. */
html body .elementor .apex-page-intro {
	column-gap: 80px;
	row-gap: 16px;
}

/* Services page blocks: two equal columns, content vertically centred. */
html body .elementor .apex-service-block {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 88px;
	row-gap: 32px;
	align-items: center;
}

html body .elementor .apex-service-block > * {
	max-width: none !important;
	width: auto;
	min-width: 0;
}

/* Every other block has its dark panel on the right. */
html body .elementor .apex-service-block-reversed > .apex-service-media {
	order: 2;
}

@media (max-width: 1024px) {
	html body .elementor .apex-service-block {
		column-gap: 48px;
	}
}

/* Phones: one column, dark panel first. */
@media (max-width: 767px) {
	html body .elementor .apex-service-block {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}

	html body .elementor .apex-service-block-reversed > .apex-service-media {
		order: 0;
	}
}

/* Products and Events: equal-width cards in 3 / 2 / 1 columns; cards in a row share the tallest height. */
html body .elementor .apex-card-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	align-items: stretch;
}

html body .elementor .apex-card-grid > * {
	min-width: 0;
}

@media (max-width: 1024px) {
	html body .elementor .apex-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (max-width: 767px) {
	html body .elementor .apex-card-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}