/*
 * Homepage "Play" tiles (inc/home-games.php): Daily Game Guess + GNP Quiz, directly below the Load More control.
 *
 * Built from the site's own tokens (surface / border / contrast / muted / accent, the radius scale and the 3px accent
 * focus ring) so Light and Dark follow the live theme with no colour of its own.
 *   desktop homepage : two compact horizontal cards side by side (icon, name, one short line, chevron), centred in a
 *                      bounded column so they never stretch across a 1800px content area.
 *   app homepage     : (phones + tablets, the theme's ONE app range GNP_APP_MEDIA - inc/app-breakpoint.php) NO tiles:
 *                      the section is hidden in style.css (the bottom navigation's Games item + /games/ replace it)
 *                      and this stylesheet's homepage <link> carries GNP_DESKTOP_MEDIA, so it is not applied there.
 *   /games/ hub      : (inc/games-hub.php, loaded without a media gate) the same tiles, title-only; in the app layout
 *                      two near-square launch tiles side by side (big icon + name), on tablets in the deck column.
 */

.gnp-home-games-section {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
}

.gnp-home-games {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 46rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.gnp-home-games__item {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.gnp-game-tile {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	height: 100%;
	min-height: 4.5rem;
	padding: 0.85rem 1rem;
	box-sizing: border-box;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	text-decoration: none;
	transition: border-color 160ms ease, transform 160ms ease;
}

.gnp-game-tile:hover {
	border-color: var(--wp--preset--color--accent);
}

.gnp-game-tile:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.gnp-game-tile__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--accent);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
}

.gnp-game-tile__icon svg {
	width: 1.75rem;
	height: 1.75rem;
	display: block;
}

.gnp-game-tile__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.gnp-game-tile__name {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.gnp-game-tile__desc {
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
}

.gnp-game-tile__go {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--wp--preset--color--muted);
}

.gnp-game-tile:hover .gnp-game-tile__go {
	color: var(--wp--preset--color--accent);
}

@media (prefers-reduced-motion: reduce) {
	.gnp-game-tile {
		transition: none;
	}
}

/* App layout (phones + tablets; reached only by the /games/ hub - the app homepage shows no tiles): app-style launch
   tiles. Icon on top, short name below, nothing else. */
@media (max-width: 999.98px), (hover: none) and (pointer: coarse) and (max-width: 1439.98px) {
	.gnp-home-games {
		gap: 0.75rem;
	}

	.gnp-game-tile {
		flex-direction: column;
		justify-content: center;
		gap: 0.6rem;
		min-height: 7.25rem;
		padding: 0.9rem 0.5rem;
		text-align: center;
	}

	.gnp-game-tile__icon {
		width: 3.25rem;
		height: 3.25rem;
	}

	.gnp-game-tile__text {
		flex: 0 0 auto;
		width: 100%;
		align-items: center;
	}

	.gnp-game-tile__name {
		font-size: 0.9375rem;
	}

	.gnp-game-tile__desc,
	.gnp-game-tile__go {
		display: none;
	}

	/* Tablets: the pair sits in the app deck column width (token from assets/css/mobile-article.css). */
	@media (min-width: 600px) {
		.gnp-home-games {
			max-width: var(--gnp-app-deck-max, 37rem);
		}
	}
}

/*
 * The Games hub (/games/, inc/games-hub.php + templates/games-landing.html): the H1 and the same two tiles in their
 * title-only form (the markup carries no description line or chevron). Centred, in the tiles' own bounded column (46rem
 * desktop; the app deck column on tablets, see the app block above), with the site gutter on phones.
 */
.gnp-games-page {
	padding: var(--wp--preset--spacing--50) var(--gnp-gutter, 1rem) var(--wp--preset--spacing--60);
}

.gnp-games-page__title {
	margin: 0 auto 1.5rem;
	text-align: center;
	font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
	line-height: 1.15;
	text-wrap: balance;
}

@media (max-width: 999.98px), (hover: none) and (pointer: coarse) and (max-width: 1439.98px) {
	.gnp-games-page {
		padding-top: 1.25rem;
		padding-bottom: 1.5rem;
	}

	.gnp-games-page__title {
		margin-bottom: 1rem;
	}
}