/* ==========================================================================
   IndiePump — Registered Games grid
   --------------------------------------------------------------------------
   Built on the tokens in ip-theme.css, so the grid follows the dark/light
   toggle without a second set of rules.
   ========================================================================== */

.ipsp-games {
	margin: 0 auto;
	padding: 8px 0 32px;
	color: var(--ip-text);
}

/*
 * Betheme's header on indiepump.com is position:fixed and 118px tall, and the
 * site has no subheader — every other page clears it with padding baked into
 * its BeBuilder section. A shortcode dropped into raw page content has no such
 * section, so when the grid is the first thing on the page it clears the
 * header itself. Embedded further down a page, this does not apply.
 */
.ipsp-games:first-child { padding-top: 150px; }

@media (max-width: 1024px) {
	.ipsp-games:first-child { padding-top: 110px; }
}

.ipsp-games__heading {
	margin: 0 0 6px;
	color: var(--ip-heading);
}

/*
 * The colour rules below are written as `.ipsp-games .x` rather than `.x`.
 * The dark-mode reset in ip-theme.css matches bare elements
 * (`[data-ip-theme="dark"] p`, specificity 0,1,1), which outranks a lone class
 * (0,1,0) and would repaint every muted line at full brightness. Two classes
 * (0,2,0) puts these back in charge.
 */
.ipsp-games .ipsp-games__count {
	margin: 0 0 22px;
	color: var(--ip-text-muted);
	font-size: 15px;
}

.ipsp-games .ipsp-games__count strong { color: var(--ip-accent); }

.ipsp-grid {
	display: grid;
	/*
	 * auto-fill with a floor, capped by the shortcode's column count. The
	 * minmax floor is what stops a 6-column setting from producing unreadable
	 * 140px cards on a laptop.
	 */
	grid-template-columns: repeat(auto-fill, minmax(clamp(210px, 22vw, 300px), 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1200px) {
	.ipsp-grid { grid-template-columns: repeat(var(--ipsp-cols, 4), 1fr); }
}

/* Betheme's global list styling adds bullets and margins to any ul. */
.ipsp-grid > li { margin: 0; padding: 0; list-style: none; }
.ipsp-grid > li::before { content: none; }

/*
 * The card sets display:flex, which would otherwise beat the hidden attribute.
 * A card hides itself if its key art fails to load at runtime — the URL passed
 * the extension check but the host returned an error.
 */
.ipsp-grid > li[hidden] { display: none !important; }

.ipsp-card {
	display: flex;
	border-radius: 14px;
	overflow: hidden;
	background: var(--ip-surface);
	border: 1px solid var(--ip-border);
	box-shadow: var(--ip-shadow);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ipsp-card:hover,
.ipsp-card:focus-within {
	transform: translateY(-4px);
	border-color: var(--ip-accent);
	box-shadow: 0 14px 34px rgba(4, 6, 62, .18);
}

[data-ip-theme="dark"] .ipsp-card:hover,
[data-ip-theme="dark"] .ipsp-card:focus-within {
	box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}

.ipsp-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-decoration: none !important;
	color: inherit !important;
}

.ipsp-card__link:focus-visible {
	outline: 2px solid var(--ip-accent);
	outline-offset: 2px;
}

/* -- Media -------------------------------------------------------------- */

.ipsp-card__media {
	position: relative;
	display: block;
	/* Steam header art is 460x215; reserving the box prevents layout shift. */
	aspect-ratio: 460 / 215;
	background: var(--ip-surface-2);
	overflow: hidden;
}

.ipsp-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
	border-radius: 0;
	transition: transform .35s ease;
}

.ipsp-card:hover .ipsp-card__img { transform: scale(1.05); }

.ipsp-games .ipsp-card__badge {
	position: absolute;
	left: 10px;
	bottom: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--ip-accent-strong);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.6;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}

/* -- Body --------------------------------------------------------------- */

.ipsp-card__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 14px 16px 16px;
	flex: 1 1 auto;
}

.ipsp-games .ipsp-card__title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ip-heading);
}

.ipsp-games .ipsp-card__studio {
	display: block;
	font-size: 13px;
	color: var(--ip-text-muted);
}

.ipsp-games .ipsp-card__pitch {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ip-text-muted);
}

.ipsp-card__genres {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: auto;
	padding-top: 10px;
}

.ipsp-games .ipsp-card__genre {
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid var(--ip-border);
	background: var(--ip-surface-2);
	font-size: 11px;
	line-height: 1.6;
	color: var(--ip-text-muted);
	white-space: nowrap;
}

/* -- Footer ------------------------------------------------------------- */

.ipsp-games__footer { margin: 28px 0 0; text-align: center; }

.ipsp-games__cta {
	display: inline-block;
	padding: 12px 26px;
	border-radius: 999px;
	background: var(--ip-accent-strong);
	color: #ffffff !important;
	font-weight: 700;
	text-decoration: none !important;
	transition: background-color .2s ease, transform .15s ease;
}

.ipsp-games__cta:hover {
	background: var(--ip-accent-strong-hover);
	transform: translateY(-2px);
	color: #ffffff !important;
}

/* Rendered outside .ipsp-games, so it earns its specificity from the tag. */
p.ipsp-empty {
	padding: 20px;
	border: 1px dashed var(--ip-border);
	border-radius: 12px;
	color: var(--ip-text-muted);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.ipsp-card,
	.ipsp-card__img,
	.ipsp-games__cta { transition: none; }
	.ipsp-card:hover { transform: none; }
	.ipsp-card:hover .ipsp-card__img { transform: none; }
	.ipsp-games__cta:hover { transform: none; }
}