/**
 * IEMA Image Grid block styles.
 *
 * A centred heading over a two-row wall of logos/images (the homepage
 * "Trusted By" wall). Images flow column-major into a fixed number of rows
 * (`--iema-grid-rows`, default 2). On desktop the columns are distributed
 * edge-to-edge; on mobile the same rows become a horizontal, swipeable
 * strip. Section width/padding come from the shared `.iema-section` rules.
 * Enqueued (front end + editor) via `iema_enqueue_image_grid_assets()` in
 * inc/enqueue.php, mtime-versioned for WP Engine's static cache.
 */

.iema-image-grid-block {
	background-color: #ffffff;
}

.iema-image-grid-block .iema-section__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 40px;
}

.iema-image-grid__heading {
	margin: 0;
	color: #002147;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 44px;
	letter-spacing: 0;
	text-align: center;
}

/* Two-row logo strip. Column-major auto-flow keeps a fixed row count and
   lets the columns grow as images are added; overflow-x makes it scroll
   whenever the columns can't all fit (always the case on mobile). */
.iema-image-grid__grid {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	width: 100%;
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--iema-grid-rows, 2), 56px);
	/*
	 * Equal-width columns (count published by render.php) rather than
	 * `max-content`. Content-sized columns let a wide wordmark claim ~300px
	 * while a square mark took 56px, which pushed the final column outside
	 * the container — and because the track scrolls, those logos silently
	 * disappeared instead of wrapping. Equal cells always fit and line the
	 * rows up with each other.
	 */
	grid-template-columns: repeat(var(--iema-grid-cols, 6), minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 40px;
	align-items: center;
	justify-items: center;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	overflow-y: hidden;
}

.iema-image-grid__grid::-webkit-scrollbar {
	display: none;
}

.iema-image-grid__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-width: 0;
	scroll-snap-align: start;
}

.iema-image-grid__item img {
	display: block;
	width: auto;
	height: auto;
	/*
	 * Fill the equal cell but never exceed it. Wide wordmarks are limited by
	 * the cell width, tall marks by the 48px height, so no single logo
	 * dominates the wall. 48px (rather than the row's 56px) leaves optical
	 * breathing room inside each cell.
	 */
	max-width: 100%;
	max-height: 48px;
	object-fit: contain;
}

/* Centred-wrap layout ---------------------------------------------- */
/* An alternative to the fixed-row grid: logos wrap into centred rows
   that reflow by available width (a client wall with uneven rows, e.g.
   6 on top and 4 centred below). Overrides the grid display; the item /
   image rules above still apply. */
.iema-image-grid__grid.iema-image-grid__grid--wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	grid-template-rows: none;
	grid-auto-flow: initial;
	grid-auto-columns: initial;
	column-gap: var(--iema-wrap-gap, 80px);
	row-gap: 40px;
	overflow: visible;
}

.iema-image-grid__grid--wrap .iema-image-grid__item {
	height: 56px;
}

/* Tablet ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.iema-image-grid__grid {
		column-gap: 32px;
	}

	.iema-image-grid__grid.iema-image-grid__grid--wrap {
		column-gap: 56px;
	}
}

/* Mobile — two rows become a horizontal swipeable strip ------------- */
@media (max-width: 780px) {
	.iema-image-grid-block .iema-section__inner {
		row-gap: 40px;
	}

	.iema-image-grid__heading {
		font-size: 32px;
		line-height: 35.2px;
	}

	.iema-image-grid__grid {
		/* Left-align and keep a fixed gap so the columns overflow to the
		   right and can be swiped through, matching the mobile design. */
		justify-content: start;
		column-gap: 32px;
		scrollbar-width: none; /* Firefox — hide scrollbar, keep swipe. */
		/* Restore content-sized, scrollable columns here: equal 1fr columns
		   would squeeze a 7-column wall into unreadable slivers on a phone. */
		grid-template-columns: none;
		grid-auto-columns: max-content;
		overflow-x: auto;
	}

	.iema-image-grid__grid::-webkit-scrollbar {
		display: none; /* WebKit — hide scrollbar, keep swipe. */
	}

	/* Wrap layout stays a centred, wrapping wall on mobile (no swipe);
	   a tighter gap lets it reflow to fewer logos per centred row. */
	.iema-image-grid__grid.iema-image-grid__grid--wrap {
		column-gap: 40px;
		row-gap: 32px;
	}
}