/**
 * Game card hover behavior — stretched link + info panel.
 * ----------------------------------------------------------------------
 * Shared by the Game Portal grid and the "More Games" suggestions grid
 * (same .game-card / .dog-ear markup, per game-suggestions.css and
 * tkge_render_game_card() in tk-game-embed.php). The card's base
 * shape/sizing still comes from the theme's .dog-ear class — this file
 * neutralizes just its fold-corner triangle on game cards
 * (.game-card--no-fold, see below) and adds:
 *
 * 1. .game-card__link — an absolutely-positioned "stretched link"
 *    covering the whole card for normal navigation, sitting BELOW the
 *    info button in stacking order (see z-index below) so the button
 *    stays independently clickable without the two fighting over the
 *    click. Markup is now a plain <div>/<a> pair rather than one <a>
 *    wrapping everything, since the info icon is a real, keyboard-
 *    focusable <button> and a <button> nested inside an <a> is invalid
 *    HTML.
 * 2. .game-card__hover-info — a bottom overlay on the thumbnail with the
 *    category name and the info button, replacing the old static "Play"
 *    label (removed from the markup entirely — hover already implies
 *    play).
 *
 * The category badge that used to sit in the thumbnail's top-right
 * corner on hover has been removed entirely (per request) — the
 * category name still shows in the bottom info bar via
 * .game-card__hover-type.
 */
.game-card {
	position: relative;
}

.game-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Deliberately no visible focus ring drawn here — the theme's
	   .dog-ear hover/focus glow (game-card.game-card--no-fold:hover /
	   :focus-visible below) already covers the whole card visually, so
	   this stays a plain, unstyled stretched link. */
}

.game-card__thumb {
	position: relative;
	overflow: hidden;
}

/*
 * .game-card--no-fold — kills the theme's (trikdang-flex) dog-ear fold
 * corner specifically on game thumbnails, so the category badge below
 * isn't competing with it for the same corner. The fold effect itself
 * lives in the theme, not this plugin, and — like virtually every
 * CSS "folded corner" technique — is drawn with a pseudo-element
 * (::before/::after), never real DOM. Neutralizing both pseudo-elements
 * removes the fold triangle while leaving the rest of .dog-ear's box
 * styling (rounding, shadow, sizing) untouched, since that comes from
 * real properties on the element itself, not the pseudo-elements.
 * If your theme's fold happens to use a different technique (an actual
 * nested element rather than ::before/::after), this rule won't catch
 * it — let me know what markup/selector the theme uses and I'll target
 * it directly instead.
 */
.game-card.game-card--no-fold::before,
.game-card.game-card--no-fold::after {
	content: none !important;
	display: none !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
}

/*
 * The theme's .dog-ear hover state also adds its own red glow/box-shadow
 * on :hover — separate from the fold corner above, and not something
 * this plugin ever set. Overridden here with a neutral dark shadow in
 * the site's own night-flight-black tone instead, so hovering a game
 * card still gets a lift/glow, just not a red one. If your theme's hover
 * shadow is actually a `filter: drop-shadow(...)` rather than
 * `box-shadow`, let me know and I'll target that property instead.
 */
.game-card.game-card--no-fold:hover,
.game-card.game-card--no-fold:focus-within {
	box-shadow: 0 10px 24px rgba( 20, 9, 13, 0.35 ) !important;
}

.game-card__hover-info {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.4rem 0.6rem;
	background: linear-gradient( to top, rgba( 20, 9, 13, 0.85 ), rgba( 20, 9, 13, 0 ) );
	color: #f3efe4;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	opacity: 0;
	transform: translateY( 6px );
	transition: opacity 0.18s ease, transform 0.18s ease;
	/* The bar itself stays click-through (pointer-events: none) so it
	   never blocks the stretched link underneath — only the info button
	   inside it (which re-enables pointer-events) is actually clickable. */
	pointer-events: none;
}

.game-card:hover .game-card__hover-info,
.game-card:focus-within .game-card__hover-info {
	opacity: 1;
	transform: translateY( 0 );
}

.game-card__hover-type {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * Info icon button — bottom-right corner, replaces the old (static,
 * non-interactive) heart + like-count display. This one is a real
 * <button>, positioned above the stretched .game-card__link (see its
 * z-index: 1 above vs. this button's z-index: 3) so clicking it opens
 * the info lightbox (game-info-modal.js) instead of navigating to the
 * game page.
 */
.game-card__info-btn {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 243, 239, 228, 0.16 );
	color: #f3efe4;
	cursor: pointer;
	pointer-events: auto;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.game-card__info-btn:hover,
.game-card__info-btn:focus-visible {
	background: #f3efe4;
	color: #14090d;
}

/*
 * Thumbnail performance.
 * ----------------------------------------------------------------------
 * `loading="lazy"` + `decoding="async"` are now set in PHP on every
 * game-card thumbnail (see tkge_render_game_gallery_grid() /
 * tkge_render_game_suggestions()) so the browser can decode images off
 * the main thread and skip network requests for cards below the fold
 * entirely, instead of every thumbnail competing for bandwidth/decode
 * time at once on page load — that competition, not any single image
 * being "slow", was what read as the grid lagging.
 *
 * `contain: content` scopes each card's layout/paint to itself, so one
 * image finishing decode/layout doesn't force the browser to re-check
 * the rest of the grid. The hover transitions above are limited to
 * opacity/transform (both compositor-only), never a property that
 * forces layout or paint, so hovering across a row of cards stays cheap
 * regardless of how many are on screen.
 */
.game-card {
	contain: content;
}

.game-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}