/**
 * IMAN Design Projects – Gallery Grid
 * 
 * This block flattens the internal HTML structure of each .plura-wp-post
 * to allow all images (featured + gallery) to be displayed in a unified grid.
 * Uses `display: contents` on inner wrappers to make their children behave
 * as direct children of the grid container.
 */

.plura-wp-posts[data-type="iman_project"] :is(
	.plura-wp-post,
	.plura-wp-post-meta,
	.plura-wp-post-meta-item,
	.plura-wp-post-meta-item-value,
	.iman-project-gallery
) {
	display: contents;
}

/**
 * Responsive Grid Layout for IMAN Projects
 * 
 * 1 column on small screens, 2 on tablets, 3 on desktops+.
 */

.plura-wp-posts[data-type="iman_project"] {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 600px) {
	.plura-wp-posts[data-type="iman_project"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.plura-wp-posts[data-type="iman_project"] {
		grid-template-columns: repeat(3, 1fr);
	}
}

/**
 * Ensure images fill grid cells properly
 */
.plura-wp-posts[data-type="iman_project"] img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}