/**
 * Section — Competitions Grid
 *
 * A responsive grid, not a carousel: the mobile "~1.2 cards visible"
 * treatment is native CSS scroll-snap on a horizontally-scrolling grid
 * track, not a JS carousel widget — no arrows, no dot indicators, no
 * script driving the scroll position. From the tablet breakpoint up it
 * becomes an ordinary wrapping grid.
 *
 * Layout revision: from 640px up, column count is no longer a fixed
 * repeat(N, 1fr) per breakpoint. With a fixed track count, a row with
 * fewer cards than columns still reserves every column's width — one
 * card in a 4-column repeat(4, 1fr) row sits at exactly 1/4 the
 * container width with the remaining 3/4 left as dead, structurally
 * "empty grid" space beside it, not ordinary page background. repeat(
 * auto-fit, minmax(...)) instead creates only as many tracks as there
 * are cards (auto-fit collapses unpopulated tracks to zero rather than
 * reserving them), each capped at a fixed max rather than stretching
 * to fill the row, and justify-content: start packs populated tracks
 * from the left — any leftover row width becomes ordinary trailing
 * space, never a phantom empty column. At typical content widths this
 * still lands on ~4 columns at desktop and ~2 at tablet, matching the
 * original brief, but as a consequence of card size and container
 * width rather than a hardcoded count — which is what makes it behave
 * correctly regardless of how many cards there actually are.
 *
 * competition-card.php itself is unmodified — this file only styles
 * the track it sits in.
 *
 * Second layout pass: results-count's own bottom margin tightened
 * further (space-5 -> space-3), alongside the same further tightening
 * on competitions-header.css/competitions-filters.css's section
 * padding — title/filters/results/grid were still reading as too
 * loosely spaced after the first pass.
 *
 * Third pass: [data-ec-competitions-results] is the fixed element an
 * AJAX-intercepted filter click (competitions.js) replaces wholesale —
 * empty state, results count, grid and Load More button all live
 * inside it (views/patterns/competitions-results.php). .is-loading is
 * a brief, deliberately understated cue during the fetch, not a
 * spinner — "should feel instant" argues for barely-there feedback,
 * not a loading state that draws attention to a network round trip.
 */

.ec-competitions-grid-section {
	padding-top: 0;
}

[data-ec-competitions-results].is-loading {
	opacity: 0.6;
	transition: opacity 120ms var(--ec-ease-standard);
}

.ec-competitions-results-count {
	font-family: var(--ec-font-family-base);
	font-size: var(--ec-font-size-body-sm);
	color: var(--ec-color-text-secondary);
	margin: 0 0 var(--ec-space-3);
}

.ec-competitions-grid {
	display: grid;
	grid-auto-flow: column;
	/* Reverted to its original 82% (2026-08-19) — an earlier pass this
	   same day raised this to 88% believing it was the value governing
	   the desktop cards under review, but this rule only ever applies
	   below the 640px breakpoint; every desktop screenshot reviewed
	   today was actually rendered by the unmodified @media (min-width:
	   640px) rule below. Left exactly as it was before today, per
	   explicit instruction — the real desktop width change is in that
	   640px block's own minmax(), not here. */
	/* Mobile rail — the card's shared rail tokens
	   (patterns/competition-card.css, 2026-10-02), identical to the
	   Homepage's, replacing this page's own earlier 82% strip. */
	grid-auto-columns: var(--ec-competition-rail-column);
	gap: var(--ec-competition-rail-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--ec-competition-rail-bleed);
	margin: 0 calc(var(--ec-competition-rail-bleed) * -1);
	padding: var(--ec-space-2) var(--ec-competition-rail-bleed);
}

.ec-competitions-grid > * {
	scroll-snap-align: start;
}

/* This is the rule that actually governs the desktop cards under
   review today — the base rule above only applies below this
   breakpoint. Widened (2026-08-19), card-width review: minmax()
   15.5rem-20rem (248-320px) -> 21rem-27rem (336-432px), calibrated
   against .ec-section's real available width (max-width 1440px, 24px
   side padding -> 1392px) with this rule's own 1024px+ gap
   (--ec-space-6, 32px): auto-fit's column count is decided by the
   MINIMUM track size, and 21rem forces 3 columns at that width
   instead of the previous 4 (floor((1392+32)/(336+32)) = 3), each
   free to grow up to the new 27rem max — meaningfully more width per
   card, giving the lower half of the card (title, buttons, countdown)
   more room, without a fixed px value that would only be exactly
   right at 1440px. This same rule also governs the tablet range
   (640-1023px, no separate breakpoint exists for it) — raising the
   minimum does mean tablet may now show one fewer column near the top
   of that range than before; not requested to be preserved
   separately, and this is the one rule Aaron explicitly named to
   change. Mobile (<640px, the block above) is untouched. */
/* Card tracks come from the Competition Card's own width contract
   (--ec-competition-card-min, patterns/competition-card.css, 2026-10-01)
   — the same size family in every context. */
@media (min-width: 640px) {
	.ec-competitions-grid {
		grid-auto-flow: row;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ec-competition-card-min)), 1fr));
		overflow-x: visible;
		scroll-snap-type: none;
		margin: 0;
		padding: 0;
	}
}

@media (min-width: 1024px) {
	.ec-competitions-grid {
		gap: var(--ec-space-6);
	}
}

.ec-competitions-load-more {
	display: flex;
	justify-content: center;
	margin-top: var(--ec-space-8);
}