/*
 * Forces the Oshine [blog] module's masonry into a uniform grid.
 *
 * Why this needs !important, and why there is no settings-based alternative:
 *
 *  - The module has a `masonry_style` att, but it only toggles style3 <-> style8
 *    (oshine-modules/includes/modules/blog.php:57-69). Both are masonry.
 *  - Isotope is initialised without a `layoutMode`, so it defaults to masonry.
 *  - Isotope positions every tile with INLINE styles
 *    (position:absolute; left; top) and sets an inline pixel height on the
 *    container. Inline styles can only be beaten with !important.
 *
 * Isotope still recalculates on resize/filter; it just no longer has any
 * visual effect, because these declarations outrank what it writes.
 *
 * Scoped to the `ak-projekt-grid` body class (see ak_projekt_body_class()), so
 * the other pages using [blog] keep their masonry until asked otherwise.
 */

/* The module offsets the row by the gutter width; the grid owns spacing now. */
body.ak-projekt-grid .portfolio {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.ak-projekt-grid .portfolio-container {
	position: static !important;
	width: auto !important;
	height: auto !important;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/*
 * The container also carries `clearfix`, whose ::before/::after have
 * content:"" — in a grid those become real grid ITEMS and each eat a cell,
 * pushing the first row one column to the right. The float clearing they
 * exist for is irrelevant once the tiles are grid items.
 */
body.ak-projekt-grid .portfolio-container::before,
body.ak-projekt-grid .portfolio-container::after {
	display: none !important;
}

body.ak-projekt-grid .portfolio-container > .element {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
}

/* Fill the row height, so every tile in a row ends flush. */
body.ak-projekt-grid .portfolio-container > .element,
body.ak-projekt-grid .portfolio-container > .element > .element-inner,
body.ak-projekt-grid .portfolio-container > .element .post-content-wrap {
	height: 100%;
}

/* Push the caption down so uneven title lengths do not misalign the images. */
body.ak-projekt-grid .portfolio-container > .element .post-content-wrap {
	display: flex;
	flex-direction: column;
}
body.ak-projekt-grid .portfolio-container > .element .article-details {
	flex: 1 0 auto;
}

/*
 * Beratungsleistung projects have no featured image, so the module renders an
 * empty .post-thumb — a 199px grey placeholder. Drop it entirely; these cards
 * are text-only. The class comes from post_class() on the article.
 *
 * If these posts ever get featured images and should show them, delete this
 * block rather than setting thumbnails and wondering why nothing appears.
 */
body.ak-projekt-grid .element.category-beratungsleistung .post-thumb {
	display: none !important;
}

@media (max-width: 900px) {
	body.ak-projekt-grid .portfolio-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	body.ak-projekt-grid .portfolio-container {
		grid-template-columns: 1fr;
	}
}