/**********************************/
/* Video/Event/Contest Grid widget */
/**********************************/

.pw-content-grid-wrap {
	border-radius: 25px;
	margin-bottom: 100px;
}

/* Widget background — solid --primary-accent, optionally topped with a
   repeating background-arrow.png/background-tear-drop.png pattern, set via
   the widget's "Widget background" field. */
.pw-content-grid-wrap.pw-widget-bg-no-shape,
.pw-content-grid-wrap.pw-widget-bg-tear-drop,
.pw-content-grid-wrap.pw-widget-bg-arrow {
	padding: 0px 25px;
	overflow-x: clip;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.pw-content-grid-wrap.pw-widget-bg-no-shape .pw-content-grid-container,
.pw-content-grid-wrap.pw-widget-bg-tear-drop .pw-content-grid-container,
.pw-content-grid-wrap.pw-widget-bg-arrow .pw-content-grid-container {
	background-color: var(--primary-accent);
	border: 2px solid #000000;
	border-radius: 25px;
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 35px var(--content-margin)!important;
}
.pw-content-grid-wrap.pw-widget-bg-tear-drop .pw-content-grid-container,
.pw-content-grid-wrap.pw-widget-bg-arrow .pw-content-grid-container {
	background-repeat: repeat;
}
.pw-content-grid-wrap.pw-widget-bg-tear-drop .pw-content-grid-container {
	background-image: url(../../../images/background-tear-drop.png);
}
.pw-content-grid-wrap.pw-widget-bg-arrow .pw-content-grid-container {
	background-image: url(../../../images/background-arrow.png);
}

/* Header — optional badge pill above the (optionally shown) title, both
   centered, matching the "LIVE"/"COMMUNITY" reference designs. */
.pw-content-grid-header {
	text-align: center;
	margin-bottom: 24px;
}
/* Reclaim the wrap's 25px side padding for the header/grid on mid-size screens.
   Lower bound stops at 640px: below that the phone layout (see the < 640px
   block near the end of this file) wants the full container padding as a
   gutter, not a negative margin that pulls cards past the container edge. */
@media (min-width: 640px) and (max-width: 1650px) {
	.pw-widget-bg-no-shape .pw-content-grid-header,
	.pw-widget-bg-no-shape .pw-content-grid,
	.pw-widget-bg-tear-drop .pw-content-grid-header,
	.pw-widget-bg-tear-drop .pw-content-grid,
	.pw-widget-bg-arrow .pw-content-grid-header,
	.pw-widget-bg-arrow .pw-content-grid {
		margin-left:-25px;
		margin-right:-25px;
	}
}
.pw-content-grid-header-badge {
	display: inline-block;
	margin-bottom: 20px;
	padding: 0.4rem 1.1rem;
	border-radius: 999px;
	color: #FFFFFF;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.pw-content-grid-heading {
	font-weight: 700;
	/* Fluid scale, deliberately larger than the slider headings (verticalSlider.css
	   .pw-feature-slider-heading, horizontalSlider.css .pw-shorts-widget-heading,
	   clamp(2rem, 4vw, 3.25rem)) to carry the echo shadow below. */
	font-size: clamp(2.835rem, 5.265vw, 4.455rem);
	line-height: 1.1;
	margin: 0;

	/* Stacked "echo" outlines stepping straight down from the text, each fading
	   further into the background */
	--echo-fill-color: var(--body-bg); /* inside of each echo: must match the background behind the heading */
	--echo-outline-color: currentColor;
	--echo-spacing: calc(max(2px, 0.025em) + 1px); /* vertical step between echoes */
	--echo-outline-width: max(1px, 0.01em);

	--echo-1-outline-color: color-mix(in oklab, var(--echo-outline-color) 50%, var(--echo-fill-color));
	--echo-2-outline-color: color-mix(in oklab, var(--echo-outline-color) 30%, var(--echo-fill-color));
	--echo-3-outline-color: color-mix(in oklab, var(--echo-outline-color) 15%, var(--echo-fill-color));

	--echo-1-offset: var(--echo-spacing);
	--echo-2-offset: calc(var(--echo-spacing) * 2);
	--echo-3-offset: calc(var(--echo-spacing) * 3);

	/* Earlier shadows paint on top. Each echo is a background-filled copy of the text,
	   outlined by ink copies nudged a line-width left, right, down and down-diagonally */
	text-shadow:
		/* Echo 1 */
		0 var(--echo-1-offset) 0 var(--echo-fill-color),
		var(--echo-outline-width) var(--echo-1-offset) 0 var(--echo-1-outline-color),
		calc(var(--echo-outline-width) * -1) var(--echo-1-offset) 0 var(--echo-1-outline-color),
		0 calc(var(--echo-1-offset) + var(--echo-outline-width)) 0 var(--echo-1-outline-color),
		var(--echo-outline-width) calc(var(--echo-1-offset) + var(--echo-outline-width)) 0 var(--echo-1-outline-color),
		calc(var(--echo-outline-width) * -1) calc(var(--echo-1-offset) + var(--echo-outline-width)) 0 var(--echo-1-outline-color),

		/* Echo 2 */
		0 var(--echo-2-offset) 0 var(--echo-fill-color),
		var(--echo-outline-width) var(--echo-2-offset) 0 var(--echo-2-outline-color),
		calc(var(--echo-outline-width) * -1) var(--echo-2-offset) 0 var(--echo-2-outline-color),
		0 calc(var(--echo-2-offset) + var(--echo-outline-width)) 0 var(--echo-2-outline-color),
		var(--echo-outline-width) calc(var(--echo-2-offset) + var(--echo-outline-width)) 0 var(--echo-2-outline-color),
		calc(var(--echo-outline-width) * -1) calc(var(--echo-2-offset) + var(--echo-outline-width)) 0 var(--echo-2-outline-color),

		/* Echo 3 */
		0 var(--echo-3-offset) 0 var(--echo-fill-color),
		var(--echo-outline-width) var(--echo-3-offset) 0 var(--echo-3-outline-color),
		calc(var(--echo-outline-width) * -1) var(--echo-3-offset) 0 var(--echo-3-outline-color),
		0 calc(var(--echo-3-offset) + var(--echo-outline-width)) 0 var(--echo-3-outline-color),
		var(--echo-outline-width) calc(var(--echo-3-offset) + var(--echo-outline-width)) 0 var(--echo-3-outline-color),
		calc(var(--echo-outline-width) * -1) calc(var(--echo-3-offset) + var(--echo-outline-width)) 0 var(--echo-3-outline-color);
}
/* Widget backgrounds sit the heading on --primary-accent instead of the page */
.pw-content-grid-wrap.pw-widget-bg-no-shape .pw-content-grid-heading,
.pw-content-grid-wrap.pw-widget-bg-tear-drop .pw-content-grid-heading,
.pw-content-grid-wrap.pw-widget-bg-arrow .pw-content-grid-heading {
	--echo-fill-color: var(--primary-accent);
}

/**********************************/
/* Category filter header         */
/**********************************/
/* Only applied when the widget's "Category Filter" is enabled — the default
   header stays centered (see .pw-content-grid-header above). Here the title +
   pills go left and the optional ad column sits right, per the reference. */
.pw-content-grid-header-filtered {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	text-align: left;
}
.pw-content-grid-header-filtered .pw-content-grid-header-main {
	flex: 1 1 auto;
	min-width: 0;
}
.pw-content-grid-header-filtered .pw-content-grid-heading {
	margin-bottom: 36px;
}

/* Ad column — sized to the 300x250 the field description calls for, but
   allowed to shrink rather than squeeze the pills on narrow viewports. */
.pw-content-grid-header-ad {
	flex: 0 0 auto;
	max-width: 300px;
}
.pw-content-grid-header-ad img,
.pw-content-grid-header-ad iframe {
	max-width: 100%;
	display: block;
}

.pw-content-grid-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.pw-content-grid-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border: none;
	border-radius: 999px;
	background-color: var(--tertiary-accent);
	color: var(--body-text);
	font-family: var(--body-font);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.pw-content-grid-pill:hover {
	background-color: color-mix(in srgb, var(--tertiary-accent) 92%, black);
}
.pw-content-grid-pill.pw-is-active {
	background-color: var(--primary-accent);
	color: var(--body-text);
}
.pw-content-grid-pill-count {
	color: var(--body-secondary-text);
	font-weight: 500;
}
.pw-content-grid-pill.pw-is-active .pw-content-grid-pill-count {
	color: inherit;
	opacity: .75;
}

/* Overflow pills are rendered but hidden until "+ N more" is clicked, so
   expanding costs no extra request (see postEventContestGrid.js). */
.pw-content-grid-pill.pw-is-overflow {
	display: none;
}
.pw-content-grid-filters.pw-filters-expanded .pw-content-grid-pill.pw-is-overflow {
	display: inline-flex;
}
/* An overflow pill selected while expanded must stay visible if the list is
   collapsed again — otherwise the active filter disappears from the header.
   (The server already omits .pw-is-overflow for a pill active on page load;
   this covers the same pill becoming active via an AJAX swap.) */
.pw-content-grid-pill.pw-is-overflow.pw-is-active {
	display: inline-flex;
}

.pw-content-grid-pill-more {
	padding: 12px 8px;
	border: none;
	background: none;
	color: var(--body-secondary-text);
	font-family: var(--body-font);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}
.pw-content-grid-pill-more:hover {
	color: var(--body-text);
	text-decoration: underline;
}

/* Grid dims briefly while a filter/page request is in flight. */
.pw-content-grid-wrap.pw-is-loading .pw-content-grid {
	opacity: .45;
	pointer-events: none;
	transition: opacity .2s ease;
}

.pw-content-grid-empty {
	grid-column: 1 / -1;
	padding: 48px 0;
	text-align: center;
	color: var(--body-secondary-text);
}

/* Under 1024px there isn't room for a side-by-side ad column, so the header
   stacks and the ad moves above the badge/title/pills, centered. order:-1
   reorders visually without moving it out of .pw-content-grid-header in the
   markup (where it stays a sibling of -header-main). */
@media (max-width: 1023px) {
	.pw-content-grid-header-filtered {
		flex-direction: column;
		align-items: stretch;
	}
	.pw-content-grid-header-filtered .pw-content-grid-header-ad {
		order: -1;
		align-self: center;
		margin-bottom: 24px;
		max-width: 100%;
	}
}

/**********************************/
/* Pagination                     */
/**********************************/
.pw-content-grid-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 48px;
}
.pw-content-grid-pages {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

.pw-content-grid-page,
.pw-content-grid-page-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 48px;
	height: 48px;
	padding: 0 14px;
	border: none;
	border-radius: 12px;
	background-color: var(--tertiary-accent);
	color: var(--body-text);
	font-family: var(--body-font);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease;
	/* Page controls are <a> now, so the link defaults have to be neutralised;
	   the current page and the disabled Prev/Next ends are <span>. */
	text-decoration: none;
}
.pw-content-grid-page:hover,
.pw-content-grid-page:focus,
.pw-content-grid-page-nav:hover,
.pw-content-grid-page-nav:focus {
	color: var(--body-text);
	text-decoration: none;
}
.pw-content-grid-page:hover:not(.pw-is-active),
.pw-content-grid-page-nav:hover:not(.pw-is-disabled) {
	background-color: color-mix(in srgb, var(--tertiary-accent) 92%, black);
}
.pw-content-grid-page.pw-is-active {
	background-color: var(--primary-accent);
	cursor: default;
}
.pw-content-grid-page-nav.pw-is-disabled {
	opacity: .45;
	cursor: default;
}
.pw-content-grid-page-nav svg {
	width: 18px;
	height: 18px;
}

.pw-content-grid-page-gap {
	min-width: 32px;
	text-align: center;
	color: var(--body-secondary-text);
	font-weight: 700;
}

@media (max-width: 740px) {
	.pw-content-grid-pagination {
		flex-wrap: wrap;
		justify-content: center;
	}
	/* Prev/Next drop to a full-width row under the numbers so the page links
	   never get squeezed below tap-target size. */
	.pw-content-grid-pages {
		order: -1;
		width: 100%;
	}
	.pw-content-grid-page-nav span {
		display: none;
	}
}

.pw-content-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
}

/* "List Ad Position" ad — always occupies a full row of its own, wherever it
   lands. Server-rendered as the last grid child; postEventContestGrid.js moves
   it up to sit under row N once the fluid column count resolves (see
   positionListAd() there and renderListAd() in contentGridRenderer.php). */
.pw-content-grid-ad {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pw-content-grid-ad:empty {
	display: none;
}
.pw-content-grid-ad img,
.pw-content-grid-ad iframe {
	max-width: 100%;
	height: auto;
}

.pw-content-grid-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.pw-content-grid-card-link:hover {
	color: var(--body-text);
}
/* Wraps the clipped media box AND the badge/play/duration/sticker overlays as
   siblings — overlays must NOT be inside .pw-content-grid-media itself, or
   its overflow:hidden (needed for object-fit:cover cropping) clips them. */
.pw-content-grid-media-wrap {
	position: relative;
}

.pw-content-grid-media {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background-color: #e4e4e7;
}
.pw-content-grid-type-event .pw-content-grid-media,
.pw-content-grid-type-contest .pw-content-grid-media {
	outline: 2px solid #000000;
	border: 3px solid #FFFFFF;
}

/* Cards used to be <article>s and picked up position:relative from the
   theme's global article rule — kept now they're plain <div>s */
.pw-content-grid-card { position: relative; }

/* Video/News posts grid — square cards */
.pw-content-grid-type-post .pw-content-grid-media {
	aspect-ratio: 1 / 1;
}

.pw-content-grid-media .pw-slide-poster,
.pw-content-grid-media .pw-slide-video {
	position: absolute; inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Hover preview — video sits over the poster, hidden until hover/focus (JS
   starts/stops playback, see assets/js/widgets/postEventContestGrid.js). */
.pw-content-grid-media .pw-slide-video {
	opacity: 0;
	/* Out of the accessibility tree while it can't be seen */
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
}
.pw-content-grid-card:hover .pw-slide-video,
.pw-content-grid-card:focus-within .pw-slide-video {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* The platform's global frontend.css carries `a[href]:hover img { opacity: .75 }`.
   The whole card is wrapped in an <a>, so pointing at it instantly dims the
   poster (and the corner stickers) with no transition — which reads as a flash
   as the preview video then fades in over the top. Hold them at full opacity;
   the crossfade to .pw-slide-video is the only thing that should change here.
   featureVideoSlider.css and horizontalSlider.css already do this for stickers.

   Specificity note: the card class is in the selector on purpose. Global's
   `a[href]:hover img` is (0,2,2), so `.pw-content-grid-card-link:hover img`
   at (0,2,1) would lose — the extra class makes it (0,3,1). */
.pw-content-grid-card .pw-content-grid-card-link:hover img {
	opacity: 1;
}

.pw-content-grid-card-title {
	margin: 12px 0 0;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
}

.pw-content-grid-card-location {
	margin: 2px 0 0;
	font-size: 0.85rem;
	opacity: 0.7;
}

/* Event/Contest date pill — same pill mechanics as .pw-slide-duration
   (horizontalSlider.css/verticalSlider.css), moved to the top-left corner. */
.pw-content-grid-date {
	position: absolute;
	top: 0.85rem; left: 0.85rem;
	display: inline-flex; align-items: center; gap: 0.4rem;
	padding: 0.35rem 0.7rem 0.35rem 0.55rem;
	background-color: #00000040;
	color: #FFFFFF;
	border-radius: 999px;
	font-size: 0.78rem; font-weight: 700;
	z-index: 5;
	backdrop-filter: blur(8px);
}
.pw-content-grid-date svg { width: 20px; height: 20px; fill: none; stroke: currentColor; }

/* Video posts (Posts mode) — play button, duration pill, and stickers,
   same setup as shortsVideoSlider.php's card (horizontalSlider.css). Scoped
   to .pw-content-grid-media-wrap (a sibling of the clipped .pw-content-grid-media
   box, not a descendant) so corner stickers can overhang the card edges
   instead of being clipped by the media box's overflow:hidden. */
.pw-content-grid-media-wrap .pw-slide-play-btn {
	position: absolute;
	top: 50%; left: 50%;
	overflow: hidden;
	width: 48px; height: 48px;
	border-radius: 999px;
	background-color: #000000B3;
	border: 2px solid #FFFFFF;
	pointer-events: none;
	transform: translate(-50%, -50%);
	display: flex; align-items: center; justify-content: center;
	z-index: 4;
}
.pw-content-grid-media-wrap .pw-slide-play-btn svg { width: 18px; height: 18px; fill: #FFFFFF !important; margin-left: 2px; }

.pw-content-grid-media-wrap .pw-slide-duration {
	position: absolute;
	bottom: 0.85rem; left: 0.85rem;
	display: inline-flex; align-items: center; gap: 0.4rem;
	padding: 0.35rem 0.7rem 0.35rem 0.55rem;
	background-color: #00000040;
	color: #FFFFFF;
	border-radius: 999px;
	font-size: 0.78rem; font-weight: 700;
	z-index: 3;
	backdrop-filter: blur(8px);
}
.pw-content-grid-media-wrap .pw-slide-duration svg { width: 12px; height: 12px; fill: currentColor; }

.pw-content-grid-media-wrap .pw-slide-sticker {
	position: absolute;
	width: clamp(36px, 22%, 56px);
	aspect-ratio: 1 / 1;
	object-fit: contain;
	z-index: 6;
	translate: -50% -50%;
	filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
	pointer-events: auto;
	/* Stated rather than assumed: .pw-slide-sticker is shared markup, and a
	   sibling widget's stylesheet loading on the same page has hidden these
	   before (featureVideoSlider.css used to set scale:0 on the bare class,
	   leaving grid stickers visible only while the card's own :hover rule scaled
	   them back). Grid stickers are always on. */
	scale: 1;
	rotate: 0deg;
	transition: scale .25s cubic-bezier(.34, 1.56, .64, 1), rotate .25s cubic-bezier(.34, 1.56, .64, 1);
}
.pw-content-grid-card:hover .pw-slide-sticker { scale: 1.1; rotate: 4deg; }

/* When a sticker is a link, .pw-slide-sticker is the <a> (a non-replaced
   element, so width/object-fit above don't constrain it) — make the <a> the
   sized block and fix the inner <img> to fill it, same as horizontalSlider.css. */
.pw-content-grid-media-wrap a.pw-slide-sticker { display: block; }
.pw-content-grid-media-wrap a.pw-slide-sticker img { width: 56px; height: 56px; object-fit: contain; display: block; }

.pw-content-grid-more {
	display: inline-flex;
	margin-top: 24px;
}

/* Higher specificity than .pw-fs-card-cta's own inline-flex so the button
   becomes a block-level box centered within .pw-content-grid-wrap. */
.pw-content-grid-more.pw-fs-card-cta {
	display: flex;
	width: fit-content;
	margin: 24px auto 0;
}

/* "View All" / "See More" button — same setup as the Vertical Slider's
   "Read More" CTA (verticalSlider.css .pw-fs-card-cta*), duplicated here so
   this widget doesn't depend on that widget's CSS also being loaded. */
.pw-fs-card-cta {
	align-self: flex-start;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border-radius: 8px;
	border: 2px solid #000000;
	background: #fff;
	color: #111;
	text-decoration: none;
	text-transform: uppercase;
	transition: border-radius 300ms cubic-bezier(.62, .16, .13, 1.01);
}
.pw-fs-card-cta:hover {
	border-radius: 100px;
	color: #111;
}
.pw-fs-card-cta-label {
	padding: 0.7rem 1.1rem;
	border-radius: 6px;
	font-size: 0.95rem;
	line-height: 1;
	font-weight: 700;
	white-space: nowrap;
	transition: border-radius 300ms cubic-bezier(.62, .16, .13, 1.01);
}
.pw-fs-card-cta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 6px;
	flex-shrink: 0;
	transition: border-radius 300ms cubic-bezier(.62, .16, .13, 1.01);
}
.pw-fs-card-cta:hover .pw-fs-card-cta-icon { border-radius: 100px; }
.pw-fs-card-cta-icon-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border: 2px solid #000000;
	border-radius: inherit;
	background: radial-gradient(165% 165% at 50% -65%,
		transparent 72%, rgba(0,0,0,.20) 73%, rgba(0,0,0,.20) 100%);
}
.pw-fs-card-cta-arrow {
	width: 1.1rem;
	height: 1.1rem;
	color: #fff;
}

/* ── Phones (< 640px) ── single centred column ──
   The fluid columns could still resolve to 2 cramped tracks in the 540–640px
   band, and the container's percentage gutter (--content-margin, 6%) falls
   below 25px on narrow phones. Force one column, guarantee a 25px minimum
   gutter on both sides of the card, and centre the content. The mid-size
   negative-margin rule above is bounded to >= 640px, so nothing pulls the
   header/grid past the container padding here. */
@media (max-width: 639.98px) {
	.pw-content-grid-wrap.pw-widget-bg-no-shape .pw-content-grid-container,
	.pw-content-grid-wrap.pw-widget-bg-tear-drop .pw-content-grid-container,
	.pw-content-grid-wrap.pw-widget-bg-arrow .pw-content-grid-container {
		padding-left: max(25px, var(--content-margin)) !important;
		padding-right: max(25px, var(--content-margin)) !important;
	}
	/* minmax(0, 1fr), never a bare 1fr: `1fr` is `minmax(auto, 1fr)`, whose auto
	   minimum is the widest grid child's min-content size. One fixed-width child
	   — a 728x90 leaderboard in the List Ad slot is the usual one — therefore
	   stretches the single track well past the container, and justify-items:
	   center below then centres every card in that over-wide track, pushing them
	   off the right edge of the screen. A 0 minimum pins the track to the
	   container instead and lets the ad be the only thing that overflows. */
	.pw-content-grid {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
	}
	.pw-content-grid-card {
		width: 100%;
		max-width: 460px;
		/* Same reason: a card must never contribute a min-content width of its
		   own to the track (a long unbreakable title, a wide embed). */
		min-width: 0;
	}
	/* full-bleed rows keep spanning the track rather than shrinking to content */
	.pw-content-grid-ad,
	.pw-content-grid-empty {
		justify-self: stretch;
		min-width: 0;
	}
	/* A creative wider than a phone (that same 728x90) can't be made to fit, so
	   contain it: it centre-crops inside the grid rather than spilling out and
	   giving the whole page a horizontal scroll. */
	.pw-content-grid-ad {
		overflow: hidden;
	}
	.pw-content-grid-card-title,
	.pw-content-grid-card-location {
		text-align: center;
	}
	/* Prev / numbers / Next back on one row: the <= 740px block above stacks the
	   arrows under the numbers, which is a lot of vertical space for two
	   icon-only buttons. The numbers still wrap inside their own flexible
	   column, so a long range ("1 2 3 … 34 35 36") folds onto a second line
	   between the arrows rather than pushing the row off-screen — the 48px tap
	   targets that stacking was protecting stay 48px. */
	.pw-content-grid-pagination {
		flex-wrap: nowrap;
		justify-content: center;
		gap: 8px;
	}
	.pw-content-grid-pages {
		order: 0;
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}
	.pw-content-grid-page-nav {
		flex: 0 0 auto;
	}

	/* The filtered header is left-aligned on wider screens because it shares the
	   row with the ad column; with that column stacked above (see the < 1024px
	   block) there's nothing left to align to, so badge, title and pills all
	   centre together. */
	.pw-content-grid-header-filtered {
		text-align: center;
	}
	.pw-content-grid-filters {
		justify-content: center;
	}
}