/**
 * GravityView — Card Grid System (Standalone)
 *
 * CSS Grid-based multi-column card layout for List, Layout Builder, and DIY Views.
 * This file is enqueued independently of Theme when grid_columns > 1.
 * Theme imports this via a `.gv-themed` wrapper for scoped usage.
 *
 * Uses `--gv-grid-columns` and `--gv-grid-gap` custom properties (set per-View).
 *
 * @package   GravityView
 * @license   GPL2
 * @since     TBD
 */

// =========================================================
// View template wrappers — ensure children stretch full width
// =========================================================
.gv-card-grid [class*="gv-template-"] {
	display: grid;
}

// =========================================================
// Grid containers — List, Layout Builder, DIY
// =========================================================
.gv-card-grid .gv-list-multiple-container,
.gv-card-grid .gv-layout-builder-multiple-container,
.gv-card-grid .gv-diy-multiple-container {
	display: grid;
	grid-template-columns: repeat(var(--gv-grid-columns, 1), 1fr);
	gap: var(--gv-grid-gap, 24px);
	align-items: var(--gv-grid-align, stretch);
}

// =========================================================
// Widgets & non-entry elements — span all columns
// =========================================================
.gv-card-grid .gv-list-multiple-container > .gv-widgets-header,
.gv-card-grid .gv-list-multiple-container > .gv-widgets-footer,
.gv-card-grid .gv-list-multiple-container > .gv-no-results,
.gv-card-grid .gv-layout-builder-multiple-container > .gv-widgets-header,
.gv-card-grid .gv-layout-builder-multiple-container > .gv-widgets-footer,
.gv-card-grid .gv-layout-builder-multiple-container > .gv-no-results,
.gv-card-grid .gv-diy-multiple-container > .gv-widgets-header,
.gv-card-grid .gv-diy-multiple-container > .gv-widgets-footer,
.gv-card-grid .gv-diy-multiple-container > .gv-no-results {
	grid-column: 1 / -1;
}

// =========================================================
// Neutralize legacy .gv-grid float-based rules
// =========================================================
.gv-card-grid .gv-widgets-header,
.gv-card-grid .gv-widgets-footer {
	display: block;

	&::before,
	&::after {
		display: none;
	}

	.gv-grid-row {
		&::before,
		&::after {
			display: none;
		}
	}

	[class*="gv-grid-col-"] {
		display: flex;
		flex-direction: column;
		gap: var(--gv-space-4, 16px);
	}

	.gv-widget-search .gv-grid {
		display: flex;
		flex-direction: column;
		gap: var(--gv-space-3, 12px);

		> .gv-grid-row {
			width: 100%;
		}
	}
}

// =========================================================
// Card cells — flex column for equal-height alignment
// =========================================================
.gv-card-grid .gv-list-multiple-container > .gv-list-view,
.gv-card-grid .gv-layout-builder-multiple-container > .gv-layout-builder-view--entry,
.gv-card-grid .gv-diy-multiple-container > .gv-diy-view {
	display: flex;
	flex-direction: column;
}

// When columns > 1, gap handles spacing instead of margin
.gv-card-grid [style*="--gv-grid-columns"] > .gv-list-view,
.gv-card-grid [style*="--gv-grid-columns"] > .gv-layout-builder-view--entry,
.gv-card-grid [style*="--gv-grid-columns"] > .gv-diy-view {
	margin-block-end: 0;
}

// Push list view footer to bottom of equal-height cards
.gv-card-grid .gv-list-multiple-container > .gv-list-view .gv-list-view-footer {
	margin-block-start: auto;
}

// Equal height OFF: disable the push
.gv-card-grid [style*="--gv-grid-align"] > .gv-list-view .gv-list-view-footer {
	margin-block-start: 0;
}

// =========================================================
// Responsive breakpoints
// =========================================================
@media screen and (max-width: 1024px) {
	.gv-card-grid .gv-list-multiple-container,
	.gv-card-grid .gv-layout-builder-multiple-container,
	.gv-card-grid .gv-diy-multiple-container {
		grid-template-columns: repeat(var(--gv-grid-columns-lg, var(--gv-grid-columns, 1)), 1fr);
	}
}

@media screen and (max-width: 768px) {
	.gv-card-grid .gv-list-multiple-container,
	.gv-card-grid .gv-layout-builder-multiple-container,
	.gv-card-grid .gv-diy-multiple-container {
		grid-template-columns: repeat(var(--gv-grid-columns-md, var(--gv-grid-columns, 1)), 1fr);
	}
}

@media screen and (max-width: 640px) {
	.gv-card-grid .gv-list-multiple-container,
	.gv-card-grid .gv-layout-builder-multiple-container,
	.gv-card-grid .gv-diy-multiple-container {
		grid-template-columns: 1fr;
	}
}
