/* GC Mods pages (hub, /mods/spotlight/, /mods/best/, list and Spotlight singles).
   Port of the approved mockup's mods.css. Uses the site's tokens and fonts
   only; the shared archive look (ac-*, gc-chip, gc-filter, kicker, card,
   related) comes from the theme and gearchamber-core. Markup: includes/render.php, includes/pages.php. */
:root {
	--gcm-mono: var( --wp--preset--font-family--ibm-plex-mono ), "IBM Plex Mono", monospace;
	--gcm-sora: var( --wp--preset--font-family--sora ), Sora, sans-serif;
}

/* section heads */
.gcm-sechd { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; padding-top: 14px; border-top: 1px solid var( --wp--preset--color--line ); }
.gcm-sechd h2 { margin: 0; font: 700 20px/1.2 var( --gcm-sora ); letter-spacing: -.01em; color: var( --wp--preset--color--text ); }
.gcm-sechd-m { font: 500 11px var( --gcm-mono ); text-transform: uppercase; letter-spacing: .1em; color: var( --wp--preset--color--muted ); }
.gcm-more { margin-left: auto; font: 600 12px var( --gcm-mono ); color: var( --wp--preset--color--accent-text ) !important; text-decoration: none; }
.gcm-sec { margin-bottom: 32px; }
.gcm-empty { margin: 24px 0; color: var( --wp--preset--color--muted ); font-size: 15px; line-height: 1.5; }

/* latest spotlight row */
.gcm-spot { display: grid; grid-template-columns: minmax( 0, 1.25fr ) minmax( 0, 1fr ); background: var( --wp--preset--color--surface ); border: 1px solid var( --wp--preset--color--line ); border-top: 2px solid var( --wp--preset--color--accent ); text-decoration: none !important; color: var( --wp--preset--color--text ); }
.gcm-spot-ph { display: block; position: relative; height: 100%; min-height: 320px; overflow: hidden; }
.gcm-spot-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gcm-spot-bd { padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.gcm-spot-bd h3 { margin: 0; font: 700 26px/1.2 var( --gcm-sora ); letter-spacing: -.015em; }
.gcm-spot-bd p { margin: 0; color: var( --wp--preset--color--muted ); font-size: 15px; line-height: 1.5; }
.gcm-spot-list { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: s; }
.gcm-spot-list li { counter-increment: s; display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var( --wp--preset--color--line ); font: 600 14px/1.3 var( --gcm-sora ); }
.gcm-spot-list li::before { content: counter( s, decimal-leading-zero ); font: 600 11px var( --gcm-mono ); color: var( --wp--preset--color--accent-text ); }
.gcm-sg { order: 2; margin-left: auto; font: 500 10px var( --gcm-mono ); text-transform: uppercase; letter-spacing: .08em; color: var( --wp--preset--color--muted ); }
.gcm-spot-go { margin-top: auto; font: 600 12px var( --gcm-mono ); color: var( --wp--preset--color--accent-text ); }
.gcm-kick { font: 600 10.5px var( --gcm-mono ); text-transform: uppercase; letter-spacing: .1em; color: var( --wp--preset--color--accent-text ); }

/* index cards and notes */
.gcm-top3 { margin: 6px 0 8px; font-size: 13px; line-height: 1.45; color: var( --wp--preset--color--muted ); }
.gcm-top3 span { font: 500 10px var( --gcm-mono ); text-transform: uppercase; letter-spacing: .1em; color: var( --wp--preset--color--text ); margin-right: 6px; }
.gcm-note { margin: 28px 0 0; padding: 16px 18px; border: 1px solid var( --wp--preset--color--line ); background: var( --wp--preset--color--surface ); color: var( --wp--preset--color--muted ); font-size: 14px; line-height: 1.55; }

/* single pages */
.gcm-fresh { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 10px 14px !important; border: 1px solid var( --wp--preset--color--line ); border-left: 3px solid var( --wp--preset--color--good ); background: var( --wp--preset--color--surface ); font: 400 12px var( --gcm-mono ); color: var( --wp--preset--color--muted ); }
.gcm-fresh b { font-weight: 600; color: var( --wp--preset--color--text ); text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; font-size: 11px; }
.gcm-jump { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 0; border-top: 1px solid var( --wp--preset--color--line ); border-bottom: 1px solid var( --wp--preset--color--line ); margin: 24px auto !important; }
.gcm-jump-l { font: 500 10.5px var( --gcm-mono ); text-transform: uppercase; letter-spacing: .1em; color: var( --wp--preset--color--muted ); margin-right: 4px; }
.gcm-jump a { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border: 1px solid var( --wp--preset--color--line ); background: var( --wp--preset--color--surface ); color: var( --wp--preset--color--text ) !important; text-decoration: none !important; font: 600 12.5px var( --gcm-sora ); }
.gcm-jump a span { font: 500 10.5px var( --gcm-mono ); color: var( --wp--preset--color--muted ); }
h2.gcm-cat { margin-top: 40px !important; padding-bottom: 8px; border-bottom: 2px solid var( --wp--preset--color--accent ); display: inline-block; }

/* mod card */
.gcm-mod { display: grid; grid-template-columns: 340px minmax( 0, 1fr ); gap: 0; margin: 18px auto !important; background: var( --wp--preset--color--surface ); border: 1px solid var( --wp--preset--color--line ); }
.gcm-mod:has( .is-video ) { grid-template-columns: 440px minmax( 0, 1fr ); }
.gcm-mod.gcm-noimg { grid-template-columns: minmax( 0, 1fr ); }
.gcm-media { margin: 0 !important; position: relative; align-self: stretch; background: #2b323c; border-right: 1px solid var( --wp--preset--color--line ); display: flex; flex-direction: column; justify-content: center; padding: 0; overflow: hidden; isolation: isolate; }
.gcm-media[style*="--gcm-bg"]::before { content: ""; position: absolute; inset: -28px; z-index: -1; background: var( --gcm-bg ) center / cover no-repeat; filter: blur( 22px ) saturate( 1.15 ) brightness( .75 ); }
.gcm-media > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-block: auto; flex: none; }
.gcm-media.is-card > img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.gcm-media .gc-yt { margin: 0; margin-block: auto; position: relative; flex: none; }
.gcm-media .gc-yt-box { border: 0; }
.gcm-yt-badge { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 7px; background: #1A1F27; color: #EDF0F5; font: 600 10px var( --gcm-mono ); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var( --wp--preset--color--line ); pointer-events: none; }
.gcm-mbody { position: relative; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.gcm-rank { position: absolute; top: 12px; right: 18px; font: 700 34px/1 var( --gcm-sora ); color: var( --wp--preset--color--line ); letter-spacing: -.02em; }
.gcm-row { display: flex; gap: 10px; align-items: center; }
.gcm-game { font: 600 10px var( --gcm-mono ); text-transform: uppercase; letter-spacing: .1em; color: var( --wp--preset--color--accent-text ); }
.gcm-ctag { font: 500 10px var( --gcm-mono ); text-transform: uppercase; letter-spacing: .1em; color: var( --wp--preset--color--muted ); padding: 3px 7px; border: 1px solid var( --wp--preset--color--line ); }
.gcm-name { margin: 2px 0 0 !important; font: 700 20px/1.25 var( --gcm-sora ) !important; letter-spacing: -.01em; padding-right: 60px; }
.gcm-by { margin: 0 !important; font: 400 12.5px var( --gcm-mono ); color: var( --wp--preset--color--muted ); }
.gcm-by a { color: var( --wp--preset--color--text ) !important; }
.gcm-desc { margin: 6px 0 0 !important; font-size: 15px !important; line-height: 1.55 !important; }
.gcm-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var( --wp--preset--color--line ); }
.gcm-pop { font: 400 12px var( --gcm-mono ); color: var( --wp--preset--color--muted ); }
.gcm-pop b { color: var( --wp--preset--color--text ); font-weight: 600; }
.gcm-src { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var( --wp--preset--color--text ); color: var( --wp--preset--color--text ) !important; text-decoration: none !important; font: 600 13px var( --gcm-sora ); }

/* disclaimer */
.gcm-disc { margin: 36px auto !important; padding: 20px 22px; border: 1px solid var( --wp--preset--color--line ); border-left: 3px solid var( --wp--preset--color--mid ); background: var( --wp--preset--color--surface ); }
.gcm-disc h2 { margin: 0 0 8px !important; font: 700 16px var( --gcm-sora ) !important; }
.gcm-disc p { margin: 0 0 8px !important; max-width: none !important; font-size: 14px !important; line-height: 1.55 !important; color: var( --wp--preset--color--muted ); }
.gcm-disc .gcm-disc-c { margin: 0 !important; color: var( --wp--preset--color--text ); }

/* credits line at the bottom of every Mods page */
.gcm-credits { max-width: 100%; margin: 28px auto 0; font: 400 11.5px/1.5 var( --gcm-mono ); color: var( --wp--preset--color--muted ); text-align: left; overflow-wrap: anywhere; }
.ac-main > .gcm-credits { max-width: 1200px; }

/* inside the 672px article column */
.entry-content > .gcm-mod,
.entry-content > .gcm-jump,
.entry-content > .gcm-disc { max-width: 940px !important; }
.entry-content > h2.gcm-cat { max-width: 940px !important; display: block; border-bottom: 0; margin-left: auto !important; margin-right: auto !important; }
.entry-content > h2.gcm-cat::after { content: ""; display: block; width: 48px; height: 2px; margin-top: 8px; background: var( --wp--preset--color--accent ); }
.entry-content > .gcm-fresh { width: 100%; max-width: none !important; box-sizing: border-box; }
/* the site article column is 672px; mod cards and category heads break out to 920px (alignwide-style) */
@media ( min-width: 1000px ) {
	.entry-content > .gcm-mod,
	.entry-content > h2.gcm-cat { width: 920px !important; max-width: none !important; margin-left: -124px !important; margin-right: -124px !important; }
}

@media ( max-width: 700px ) {
	.gcm-spot { grid-template-columns: 1fr; }
	.gcm-mod,
	.gcm-mod:has( .is-video ) { grid-template-columns: 1fr; }
	.gcm-media { border-right: 0; border-bottom: 1px solid var( --wp--preset--color--line ); }
	.gcm-media::before { display: none !important; }
	.gcm-media > img,
	.gcm-media .gc-yt { margin-block: 0; }
	.gcm-mod > .gcm-media.is-card {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}
	.gcm-spot-ph { min-height: 200px; }
}

/* hub: compact strip (latest Spotlight + Best list links) */
.gcm-strip { display: grid; grid-template-columns: minmax( 0, 1.4fr ) minmax( 0, 1fr ); gap: 20px; margin-bottom: 28px; align-items: stretch; }
.gcm-strip:not( :has( .gcm-spot ) ) { grid-template-columns: minmax( 0, 1fr ); }
.gcm-spot-sm { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.2fr ); }
.gcm-spot-sm .gcm-spot-ph { min-height: 150px; }
.gcm-spot-sm .gcm-spot-bd { padding: 18px 20px; }
.gcm-spot-sm .gcm-spot-bd h3 { font-size: 19px; }
.gcm-lists-sm { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var( --wp--preset--color--surface ); border: 1px solid var( --wp--preset--color--line ); }
.gcm-sechd-sm { margin: 0; padding-top: 0; border-top: 0; }
.gcm-sechd-sm h2 { font-size: 15px; }
.gcm-lists-sm-l { display: flex; flex-direction: column; }
.gcm-lists-sm-l a { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var( --wp--preset--color--line ); color: var( --wp--preset--color--text ) !important; text-decoration: none !important; font: 600 13px/1.3 var( --gcm-sora ); }
.gcm-lists-sm-l .gcm-sg { order: 2; margin-left: auto; }
.gcm-more-l { margin-left: 0; margin-top: auto; }

/* The Filter button's CSS lives in gearchamber-core (assets/css/gc-filter-btn.css). */

/* hub: catalogue grid and cards */
.gcm-catgrid { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 18px; }
.gcm-ccard { position: relative; display: flex; flex-direction: column; background: var( --wp--preset--color--surface ); border: 1px solid var( --wp--preset--color--line ); }
.gcm-ccard:hover,
.gcm-ccard:focus-within { border-color: var( --wp--preset--color--accent ); }
.gcm-cc-ph { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var( --wp--preset--color--line ); }
.gcm-cc-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* designed card overlay: the card JPEG is art only, category, name and game are live text */
.gcm-cc-ph,
.gcm-media.is-card { container-type: size; }
/* Phone / stacked: keep 16/9. Horizontal (>=701px): no aspect-ratio — it was
   expanding the 340px column under the text body when align-self:stretch made
   the figure taller than 16:9 (fx 295 / option A). */
.gcm-media.is-card { aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; }
.gcm-media.is-card > img { height: 100%; }
@media ( min-width: 701px ) {
	.gcm-mod > .gcm-media.is-card {
		aspect-ratio: auto;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		height: auto;
		align-self: stretch;
		overflow: hidden;
	}
	.gcm-mod > .gcm-media.is-card > img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		aspect-ratio: auto;
		object-fit: cover;
		margin: 0;
		flex: none;
	}
}
.gcm-ov { position: absolute; inset: 0; display: block; overflow: hidden; pointer-events: none; z-index: 2; }
.gcm-ov-bar { position: absolute; left: 0; top: 0; bottom: 0; width: max( 3px, 1.5% ); background: var( --gcm-ov-col ); z-index: 3; }
.gcm-ov-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 8% 7.5% 8% 9.2%; gap: clamp( 4px, 4cqh, 10px ); box-sizing: border-box; }
.gcm-ov-tag { display: flex; align-items: center; gap: .35em; font-family: var( --gcm-mono ), "IBM Plex Mono", ui-monospace, monospace; font-weight: 700; font-size: clamp( 8px, 5.8cqh, 12px ); letter-spacing: .12em; text-transform: uppercase; line-height: 1; text-shadow: 0 1px 6px rgba( 0, 0, 0, .55 ); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gcm-ov-tag svg { width: 1.45em; height: 1.45em; flex: none; }
.gcm-ov-nm { font-family: var( --gcm-sora ), Sora, system-ui, sans-serif; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; color: #fff; text-shadow: 0 1px 10px rgba( 0, 0, 0, .55 ); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; max-width: 100%; }
.gcm-ov-nm.is-short { font-size: clamp( 15px, 14cqh, 26px ); }
.gcm-ov-nm.is-mid { font-size: clamp( 14px, 11.8cqh, 22px ); }
.gcm-ov-nm.is-long { font-size: clamp( 13px, 10.3cqh, 19px ); }
.gcm-ov-nm.is-xl { font-size: clamp( 12px, 8.9cqh, 17px ); }
.gcm-ov-gm { font-family: var( --gcm-mono ), "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; font-size: clamp( 7px, 4.2cqh, 10px ); letter-spacing: .14em; text-transform: uppercase; color: #c3cad6; text-shadow: 0 1px 6px rgba( 0, 0, 0, .55 ); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcm-cc-bd { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.gcm-cc-bd .gcm-row { flex-wrap: wrap; gap: 8px; }
.gcm-cc-name { margin: 2px 0 0 !important; font: 700 16px/1.3 var( --gcm-sora ) !important; letter-spacing: -.01em; }
.gcm-cc-name a { color: var( --wp--preset--color--text ) !important; text-decoration: none !important; }
.gcm-cc-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.gcm-cc-go { margin-top: auto; padding-top: 8px; font: 600 12px var( --gcm-mono ); color: var( --wp--preset--color--accent-text ); }

/* hub: pager and the "See all <Game> mods" link on Best lists */
.gcm-pager { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 28px 0 0; }
.gcm-pg-a { padding: 9px 14px; border: 1px solid var( --wp--preset--color--text ); color: var( --wp--preset--color--text ) !important; text-decoration: none !important; font: 600 13px var( --gcm-sora ); }
.gcm-pg-a.is-off { opacity: .35; border-color: var( --wp--preset--color--line ); }
.gcm-pg-n { font: 500 11px var( --gcm-mono ); text-transform: uppercase; letter-spacing: .1em; color: var( --wp--preset--color--muted ); }
.gcm-seeall { margin: 16px 0 !important; }
.gcm-seeall .gcm-more { margin-left: 0; font-size: 13px; }

@media ( max-width: 1100px ) {
	.gcm-catgrid { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
	.gcm-strip { grid-template-columns: minmax( 0, 1fr ); }
}
@media ( max-width: 820px ) {
	.gcm-catgrid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}
@media ( max-width: 700px ) {
	.gcm-catgrid { grid-template-columns: minmax( 0, 1fr ); }
	.gcm-spot-sm { grid-template-columns: 1fr; }
}