/**
 * File: portfolio-grid-override.css
 *
 * Purpose:
 * Force Salient "portfolio-items" (no-masonry / isotope) grids to use a stable flex layout
 * that does NOT rely on floats or `clear` rules.
 *
 * Why:
 * Float + clear-based grids break when items have different heights (common here due to
 * variable titles/locations and inline min-heights). Flex removes the need for clears.
 *
 * Key decision:
 * We DO NOT use `gap` because it can conflict with Isotope sizing/rounding.
 * Instead, we create the "gap" using margins on the inner wrapper (Salient-friendly).
 *
 * Notes:
 * - Enqueue this stylesheet AFTER all theme/plugin CSS so it wins.
 * - This targets only `.row.portfolio-items.no-masonry.isotope-activated` grids.
 * - If you need this only on a specific page/template, prefix selectors with a body class.
 */

/* -------------------------------------------------------------- */
/* 1) Convert the portfolio grid row to flex */
/* -------------------------------------------------------------- */

.row.portfolio-items.no-masonry.isotope-activated {
	display: flex !important;
	flex-wrap: wrap !important;

	/* Create space for the inner-wrap margins ("gap") */
	margin-left: -10px !important;
	margin-right: -10px !important;

	/* Keep heights consistent where possible */
	align-items: stretch !important;
}

/* -------------------------------------------------------------- */
/* 2) Disable ALL float/clear logic from Salient and custom CSS */
/* -------------------------------------------------------------- */

.row.portfolio-items.no-masonry.isotope-activated > .col {
	/* Kill float grid */
	float: none !important;

	/* Override any theme/portfolio clear rules (incl nth-child clears) */
	clear: none !important;

	/* Remove padding-based gutters (we use inner-wrap margin instead) */
	padding: 0 !important;
	margin: 0 !important;
	margin-bottom: 20px !important;

	/* Ensure consistent sizing */
	box-sizing: border-box !important;
}

/*
 * Your existing CSS applies:
 * body .portfolio-items[data-gutter="10px"] .col { padding: 10px; }
 * This MUST be neutralised for this flex layout.
 */
body .row.portfolio-items.no-masonry.isotope-activated[data-gutter="10px"] > .col {
	padding: 0 !important;
}

body .portfolio-items:not(.carousel) .col.animated-in .inner-wrap {
	height: auto;
}

/* -------------------------------------------------------------- */
/* 3) Recreate the gutter safely using inner margins ("gap") */
/* -------------------------------------------------------------- */

.row.portfolio-items.no-masonry.isotope-activated > .col > .inner-wrap {
	/* This is the effective "gap" (10px each side) */
	margin: 10px !important;
}

/* -------------------------------------------------------------- */
/* 4) Column widths (stable, no gap math) */
/* -------------------------------------------------------------- */

/* 4 columns */
.row.portfolio-items.no-masonry.isotope-activated[data-col-num="cols-4"] > .col.span_3 {
	flex: 0 0 25% !important;
	max-width: 25% !important;
}

/* 3 columns */
@media (max-width: 1199px) {
	.row.portfolio-items.no-masonry.isotope-activated[data-col-num="cols-4"] > .col.span_3 {
		flex: 0 0 33.3333% !important;
		max-width: 33.3333% !important;
	}
}

/* 2 columns */
@media (max-width: 999px) {
	.row.portfolio-items.no-masonry.isotope-activated[data-col-num="cols-4"] > .col.span_3 {
		flex: 0 0 50% !important;
		max-width: 50% !important;
	}
}

/* 1 column */
@media (max-width: 690px) {
	.row.portfolio-items.no-masonry.isotope-activated[data-col-num="cols-4"] > .col.span_3 {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

/* -------------------------------------------------------------- */
/* 5) Safety: ensure no legacy clearfix pseudo-elements interfere */
/* -------------------------------------------------------------- */

.row.portfolio-items.no-masonry.isotope-activated::before,
.row.portfolio-items.no-masonry.isotope-activated::after {
	content: none !important;
}