/*
 * Elementor Event Grid widget — maximum-column overrides only
 * (Phase 4A). Loaded only when the widget actually renders
 * (Elementor\Widgets\EventGridWidget::render()), never on a page that
 * only uses [jdx_event_card] — that shortcode's output never carries
 * any of the jdx-events-grid-cols-{desktop,tablet,mobile}-N classes
 * these rules require, so none of them can ever match shortcode
 * output. frontend-event-card.css itself is not modified by this file
 * or referenced by it beyond the class names it already defines
 * (.jdx-events-card-list--grid, --grid-cols-2, --grid-cols-3).
 *
 * Makes an editor's Desktop/Tablet/Mobile "maximum columns" choice
 * behave as effective_columns = min( chosen_max, count-aware natural
 * columns ) — matching [jdx_event_card layout="grid"]'s own v0.2.15
 * low-count behavior exactly, for any chosen maximum (Decision 023).
 *
 * Why this can't be one Elementor add_responsive_control() `selectors`
 * rule: CSS Grid's repeat() requires a literal integer count — it
 * cannot take a computed min() of two values, so a single
 * {{VALUE}}-substituted rule cannot express "cap to whichever is
 * smaller" for every possible editor choice at once. Verified
 * concretely: a naive rule targeting the --grid-cols-3 tier with
 * {{VALUE}}=4 (the Desktop default) would wrongly force a 3-result
 * page from its correct 3 columns up to 4, reintroducing the exact
 * empty-track defect Decision 023 fixed for the shortcode. This file
 * is therefore a small, fully static rule set instead: for each
 * device, and each possible chosen maximum N (1-4), an override for
 * the "4+" natural tier (present even at N=4 — a harmless no-op
 * restatement of that tier's own default) plus, only when N is below
 * a lower tier's own natural value, a matching override for
 * --grid-cols-3 (natural 3) and/or --grid-cols-2 (natural 2).
 *
 * Every selector requires one of the jdx-events-grid-cols-{device}-N
 * classes Elementor\Widgets\EventGridWidget::render() adds to
 * Elementor's own wrapper element via add_render_attribute('_wrapper',
 * ...) — never present on any other page.
 *
 * Desktop rules apply unconditionally (matching Phase 3C's own
 * >=1400px base-rule scope in frontend-event-card.css); Tablet/Mobile
 * rules are wrapped in Phase 3C's own exact 1399px/649px breakpoints —
 * deliberately *not* Elementor's own configured breakpoints, so there
 * is no transition-zone mismatch against the grid rules this widget
 * reuses unmodified. No !important anywhere: every override here has
 * higher specificity (an extra ancestor class, and for the two
 * capping rules per tier, an added :not()) than the frontend-event-
 * card.css rule it needs to win against.
 */

/* ---- Desktop (matches frontend-event-card.css's >=1400px base rule) ---- */

.jdx-events-grid-cols-desktop-1 .jdx-events-card-list--grid:not(.jdx-events-card-list--grid-cols-2):not(.jdx-events-card-list--grid-cols-3) {
	grid-template-columns: repeat( 1, 1fr );
}
.jdx-events-grid-cols-desktop-1 .jdx-events-card-list--grid-cols-3 {
	grid-template-columns: repeat( 1, 1fr );
}
.jdx-events-grid-cols-desktop-1 .jdx-events-card-list--grid-cols-2 {
	grid-template-columns: repeat( 1, 1fr );
}

.jdx-events-grid-cols-desktop-2 .jdx-events-card-list--grid:not(.jdx-events-card-list--grid-cols-2):not(.jdx-events-card-list--grid-cols-3) {
	grid-template-columns: repeat( 2, 1fr );
}
.jdx-events-grid-cols-desktop-2 .jdx-events-card-list--grid-cols-3 {
	grid-template-columns: repeat( 2, 1fr );
}

.jdx-events-grid-cols-desktop-3 .jdx-events-card-list--grid:not(.jdx-events-card-list--grid-cols-2):not(.jdx-events-card-list--grid-cols-3) {
	grid-template-columns: repeat( 3, 1fr );
}

.jdx-events-grid-cols-desktop-4 .jdx-events-card-list--grid:not(.jdx-events-card-list--grid-cols-2):not(.jdx-events-card-list--grid-cols-3) {
	grid-template-columns: repeat( 4, 1fr );
}

/* ---- Tablet (matches frontend-event-card.css's merged 1000-1399px/650-999px range) ---- */

@media ( max-width: 1399px ) {
	.jdx-events-grid-cols-tablet-1 .jdx-events-card-list--grid:not(.jdx-events-card-list--grid-cols-2):not(.jdx-events-card-list--grid-cols-3) {
		grid-template-columns: repeat( 1, 1fr );
	}
	.jdx-events-grid-cols-tablet-1 .jdx-events-card-list--grid-cols-3 {
		grid-template-columns: repeat( 1, 1fr );
	}
	.jdx-events-grid-cols-tablet-1 .jdx-events-card-list--grid-cols-2 {
		grid-template-columns: repeat( 1, 1fr );
	}

	.jdx-events-grid-cols-tablet-2 .jdx-events-card-list--grid:not(.jdx-events-card-list--grid-cols-2):not(.jdx-events-card-list--grid-cols-3) {
		grid-template-columns: repeat( 2, 1fr );
	}
	.jdx-events-grid-cols-tablet-2 .jdx-events-card-list--grid-cols-3 {
		grid-template-columns: repeat( 2, 1fr );
	}

	.jdx-events-grid-cols-tablet-3 .jdx-events-card-list--grid:not(.jdx-events-card-list--grid-cols-2):not(.jdx-events-card-list--grid-cols-3) {
		grid-template-columns: repeat( 3, 1fr );
	}

	.jdx-events-grid-cols-tablet-4 .jdx-events-card-list--grid:not(.jdx-events-card-list--grid-cols-2):not(.jdx-events-card-list--grid-cols-3) {
		grid-template-columns: repeat( 4, 1fr );
	}
}

/* ---- Mobile (matches frontend-event-card.css's <650px range) ---- */

@media ( max-width: 649px ) {
	.jdx-events-grid-cols-mobile-1 .jdx-events-card-list--grid:not(.jdx-events-card-list--grid-cols-2):not(.jdx-events-card-list--grid-cols-3) {
		grid-template-columns: repeat( 1, 1fr );
	}
	.jdx-events-grid-cols-mobile-1 .jdx-events-card-list--grid-cols-3 {
		grid-template-columns: repeat( 1, 1fr );
	}
	.jdx-events-grid-cols-mobile-1 .jdx-events-card-list--grid-cols-2 {
		grid-template-columns: repeat( 1, 1fr );
	}

	.jdx-events-grid-cols-mobile-2 .jdx-events-card-list--grid:not(.jdx-events-card-list--grid-cols-2):not(.jdx-events-card-list--grid-cols-3) {
		grid-template-columns: repeat( 2, 1fr );
	}
	.jdx-events-grid-cols-mobile-2 .jdx-events-card-list--grid-cols-3 {
		grid-template-columns: repeat( 2, 1fr );
	}

	.jdx-events-grid-cols-mobile-3 .jdx-events-card-list--grid:not(.jdx-events-card-list--grid-cols-2):not(.jdx-events-card-list--grid-cols-3) {
		grid-template-columns: repeat( 3, 1fr );
	}

	.jdx-events-grid-cols-mobile-4 .jdx-events-card-list--grid:not(.jdx-events-card-list--grid-cols-2):not(.jdx-events-card-list--grid-cols-3) {
		grid-template-columns: repeat( 4, 1fr );
	}
}