/* Series Library hubs (/series/ and /series/<group>/). Markup from blocks/series-hub and inc/series.php. */
.wp-block-gtam-series-hub { --s-pad: max(16px, calc((100% - 1280px) / 2)); margin: 0; }
.wp-block-gtam-series-hub .gtam-icon { display: inline-flex; flex: none; width: 1.05em; height: 1.05em; }
.wp-block-gtam-series-hub .gtam-icon svg { width: 100%; height: 100%; }

/* Hero */
.gtam-shero { position: relative; overflow: hidden; padding: var(--wp--preset--spacing--60) var(--s-pad) var(--wp--preset--spacing--50); background: radial-gradient(120% 140% at 85% 10%, color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent), transparent 55%), var(--wp--preset--color--ink); color: var(--wp--preset--color--text-invert); }
.gtam-shero__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--wp--preset--spacing--50); align-items: center; max-width: 1280px; margin: 0 auto; }
.gtam-shero__crumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--text-invert-muted); }
.gtam-shero__crumbs a { color: inherit; }
.gtam-shero__crumbs a:hover { color: var(--wp--preset--color--accent); }
.gtam-shero__kicker { margin: 0 0 .25rem; color: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gtam-shero h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1; text-transform: uppercase; color: inherit; }
.gtam-shero__intro { max-width: 62ch; margin: var(--wp--preset--spacing--30) 0 0; font-size: var(--wp--preset--font-size--md); line-height: 1.6; color: var(--wp--preset--color--text-invert); opacity: .9; }
.gtam-shero__also { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: var(--wp--preset--spacing--30) 0 0; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--text-invert-muted); }
.gtam-shero__also a { padding: .3rem .7rem; border: 1px solid rgb(255 255 255 / .25); border-radius: 999px; color: var(--wp--preset--color--text-invert); text-decoration: none; }
.gtam-shero__also a:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.gtam-shero__stats { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--wp--preset--spacing--40) 0 0; padding: 0; list-style: none; }
.gtam-shero__stats li { display: flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: var(--wp--custom--radius--sm, 4px); background: rgb(255 255 255 / .07); font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--text-invert-muted); }
.gtam-shero__stats b { font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--text-invert); font-weight: 700; }
.gtam-shero__stats .gtam-icon { color: var(--wp--preset--color--accent); }
.gtam-shero__fan { position: relative; width: calc(150px + (var(--n) - 1) * 62px); height: 245px; margin-right: 1rem; }
.gtam-shero__fan span { position: absolute; top: 0; left: calc(var(--i) * 62px); width: 150px; transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 5deg)) translateY(calc(var(--i) * 4px)); transform-origin: 50% 120%; z-index: calc(10 - var(--i)); }
.gtam-shero__fan img { display: block; width: 100%; height: auto; aspect-ratio: 480/592; object-fit: cover; border-radius: 4px; box-shadow: 0 10px 28px rgb(0 0 0 / .6); outline: 1px solid rgb(255 255 255 / .12); }

/* Series switcher */
.gtam-sswitch { padding: 0 var(--s-pad); background: var(--wp--preset--color--charcoal); box-shadow: 0 1px 0 rgb(0 0 0 / .3); }
.gtam-sswitch ul { display: flex; gap: .25rem; max-width: 1280px; margin: 0 auto; padding: .5rem 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.gtam-sswitch ul::-webkit-scrollbar { display: none; }
.gtam-sswitch a { display: flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 .85rem; border-radius: 999px; white-space: nowrap; color: var(--wp--preset--color--text-invert-muted); font-size: var(--wp--preset--font-size--sm); font-weight: 600; text-decoration: none; }
.gtam-sswitch a:hover { color: var(--wp--preset--color--text-invert); background: rgb(255 255 255 / .08); }
.gtam-sswitch a[aria-current] { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); }
.gtam-sswitch small { font-size: .8em; opacity: .7; }

/* Body and filters */
.gtam-sbody { max-width: 1280px; margin: 0 auto; padding: 0 16px var(--wp--preset--spacing--70); }
.gtam-ssection { margin-top: var(--wp--preset--spacing--60); }
.gtam-ssection__head { margin: 0 0 var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--xxl); text-transform: uppercase; }
.gtam-sfind { gap: .75rem; }
.gtam-sfind__row { display: flex; gap: .75rem; align-items: baseline; }
.gtam-sfind__label { flex: none; width: 3.5rem; font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--text-muted); }

/* Game cards */
.gtam-sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 34rem), 1fr)); gap: var(--wp--preset--spacing--40); }
.gtam-sgrid.is-single { grid-template-columns: minmax(0, 52rem); }
.gtam-scard.gtam-mapcard { display: grid; grid-template-columns: 180px minmax(0, 1fr); grid-template-areas: "cover head" "cover body"; grid-template-rows: auto 1fr; column-gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--30); border-top-width: 4px; background: var(--wp--preset--color--paper-2); }
.gtam-scard.gtam-mapcard[hidden] { display: none; }
.gtam-scard__cover { grid-area: cover; align-self: start; display: block; border-radius: 4px; overflow: hidden; box-shadow: 0 4px 14px rgb(0 0 0 / .18); background: #14161b; }
.gtam-scard__cover img { display: block; width: 100%; height: auto; aspect-ratio: 480/592; object-fit: cover; transition: transform .2s; }
.gtam-scard:hover .gtam-scard__cover img { transform: scale(1.03); }
.gtam-scard__head { grid-area: head; display: grid; gap: .35rem; align-content: start; }
.gtam-scard__body { grid-area: body; display: grid; gap: .65rem; align-content: start; margin-top: .75rem; }
.gtam-scard__facts { margin: 0; font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--text-muted); }
.gtam-scard h3 { margin: 0; font-size: var(--wp--preset--font-size--xl); line-height: 1.15; }
.gtam-scard h3 a { color: inherit; text-decoration: none; }
.gtam-scard h3 a:hover { text-decoration: underline; text-decoration-color: var(--gtam-game-accent, var(--wp--preset--color--accent)); }
.gtam-scard__badges { display: flex; flex-wrap: wrap; gap: .35rem; margin: .1rem 0 0; }
.gtam-scard__badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--wp--preset--color--line) 55%, transparent); font-size: var(--wp--preset--font-size--xs); font-weight: 600; }
.gtam-scard__badge.is-done { background: color-mix(in srgb, var(--wp--preset--color--success) 16%, transparent); color: #1f5c39; }
.gtam-scard__badge.is-soon { background: color-mix(in srgb, var(--wp--preset--color--warning) 20%, transparent); color: #6b450e; }
.gtam-scard__plat { display: flex; gap: .4rem; align-items: baseline; margin: 0; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text-muted); }
.gtam-scard__plat .gtam-icon { position: relative; top: .15em; }
.gtam-scard__topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .35rem; margin: 0; padding: 0; list-style: none; }
.gtam-scard__topics a { display: flex; gap: .5rem; align-items: center; min-height: 44px; height: 100%; box-sizing: border-box; padding: .35rem .55rem; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--sm, 4px); background: var(--wp--preset--color--paper); color: inherit; font-size: var(--wp--preset--font-size--sm); font-weight: 600; line-height: 1.2; text-decoration: none; }
.gtam-scard__topics a:hover { border-color: var(--gtam-game-accent, var(--wp--preset--color--accent)); background: #fff; }
.gtam-scard__topics a > .gtam-icon { color: var(--wp--preset--color--text-muted); }
.gtam-scard__topics span { display: grid; }
.gtam-scard__topics small { font-weight: 400; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text-muted); }
.gtam-scard__topics.is-pages { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.gtam-scard__refs { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; margin: 0; font-size: var(--wp--preset--font-size--sm); }
.gtam-scard__refs > span { display: inline-flex; gap: .35rem; align-items: center; font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--text-muted); }
.gtam-scard__refs a { display: inline-flex; align-items: center; min-height: 32px; color: inherit; text-decoration-color: var(--wp--preset--color--line); text-underline-offset: 3px; }
.gtam-scard__refs a:hover { text-decoration-color: currentColor; }
.gtam-scard__cta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .2rem 0 0; }
.gtam-scard__go { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: var(--wp--custom--radius--sm, 4px); background: var(--wp--preset--color--ink); color: var(--wp--preset--color--text-invert); font-weight: 700; font-size: var(--wp--preset--font-size--sm); text-decoration: none; box-shadow: inset 4px 0 0 var(--gtam-game-accent, var(--wp--preset--color--accent)); }
.gtam-scard__go::after { content: " \2192"; white-space: pre; }
.gtam-scard__go:hover { background: var(--wp--preset--color--graphite); }
.gtam-scard__hub { font-size: var(--wp--preset--font-size--sm); font-weight: 600; color: inherit; }
.gtam-scard .gtam-mapcard__jump a { justify-content: flex-start; }
.gtam-scard a:focus-visible, .gtam-sswitch a:focus-visible, .gtam-stile:focus-visible, .gtam-snext a:focus-visible, .gtam-squick a:focus-visible, .gtam-stable button:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

/* Library tiles on /series/ */
.gtam-stiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--wp--preset--spacing--30); }
.gtam-stile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--wp--preset--spacing--30); align-items: center; padding: var(--wp--preset--spacing--30); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--sm, 4px); background: var(--wp--preset--color--paper-2); color: inherit; text-decoration: none; transition: transform .15s, border-color .15s; }
.gtam-stile:hover { transform: translateY(-2px); border-color: var(--wp--preset--color--accent); }
.gtam-stile__covers { display: flex; width: 120px; }
.gtam-stile__covers img { width: 64px; height: auto; aspect-ratio: 480/592; object-fit: cover; border-radius: 3px; box-shadow: 0 2px 8px rgb(0 0 0 / .25); }
.gtam-stile__covers img + img { margin-left: -36px; }
.gtam-stile__body { display: grid; gap: .2rem; }
.gtam-stile strong { font-size: var(--wp--preset--font-size--lg); }
.gtam-stile__games { font-size: var(--wp--preset--font-size--sm); }
.gtam-stile__nums { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text-muted); }

/* Side by side table */
.gtam-stable__scroll { overflow-x: auto; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--sm, 4px); background: var(--wp--preset--color--paper-2); }
.gtam-stable__scroll:focus-visible { outline: 2px solid var(--wp--preset--color--accent); }
.gtam-stable table { width: 100%; min-width: 760px; margin: 0; border-collapse: collapse; font-size: var(--wp--preset--font-size--sm); }
.gtam-stable caption { padding: .7rem .9rem; text-align: left; font-weight: 600; color: var(--wp--preset--color--text-muted); caption-side: top; }
.gtam-stable th, .gtam-stable td { padding: .5rem .75rem; border: 0; border-top: 1px solid var(--wp--preset--color--line); text-align: left; vertical-align: middle; }
.gtam-stable thead th { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--text-invert); font-size: var(--wp--preset--font-size--xs); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.gtam-stable thead button { display: inline-flex; gap: .3rem; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.gtam-stable__arrow { font-family: Arial, sans-serif; }
.gtam-stable__arrow::after { content: "\2195\FE0E"; opacity: .45; }
.gtam-stable [aria-sort="ascending"] .gtam-stable__arrow::after { content: "\2191\FE0E"; opacity: 1; color: var(--wp--preset--color--accent); }
.gtam-stable [aria-sort="descending"] .gtam-stable__arrow::after { content: "\2193\FE0E"; opacity: 1; color: var(--wp--preset--color--accent); }
.gtam-stable .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.gtam-stable thead .is-num button { justify-content: flex-end; }
.gtam-stable thead th:first-child { position: sticky; left: 0; z-index: 2; }
.gtam-stable tbody th { position: sticky; left: 0; z-index: 1; background: var(--wp--preset--color--paper-2); box-shadow: inset 4px 0 0 var(--gtam-game-accent, var(--wp--preset--color--accent)); white-space: nowrap; }
.gtam-stable tbody th a { display: flex; gap: .6rem; align-items: center; color: inherit; font-weight: 700; text-decoration: none; }
.gtam-stable tbody th a:hover span { text-decoration: underline; }
.gtam-stable tbody th img { width: 30px; height: auto; aspect-ratio: 480/592; object-fit: cover; border-radius: 2px; }
.gtam-stable tbody tr:hover > * { background: #fff; }
.gtam-stable td a { color: inherit; font-weight: 600; text-decoration-color: var(--wp--preset--color--line); text-underline-offset: 3px; }
.gtam-stable td a:hover { text-decoration-color: currentColor; }
.gtam-stable td.is-top { font-weight: 800; }
.gtam-stable td.is-top a { padding: .1rem .4rem; border-radius: 3px; background: color-mix(in srgb, var(--wp--preset--color--accent) 24%, transparent); font-weight: 800; text-decoration: none; }
.gtam-stable td.is-empty { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--xs); }
.gtam-stable .is-wide { min-width: 11rem; }
.gtam-stable__note { margin: .6rem 0 0; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text-muted); }

/* Where to next */
.gtam-snext { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--40); }
.gtam-snext__series { display: flex; gap: .7rem; align-items: center; padding: .5rem; border-radius: var(--wp--custom--radius--sm, 4px); background: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--text-invert); text-decoration: none; transition: transform .15s; }
.gtam-snext__series:hover { transform: translateY(-2px); }
.gtam-snext__series img { width: 52px; height: auto; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: 3px; }
.gtam-snext__series span { display: grid; }
.gtam-snext__series small { color: var(--wp--preset--color--text-invert-muted); }
.gtam-squick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--wp--preset--spacing--30); margin: 0; padding: 0; list-style: none; }
.gtam-squick a { display: flex; gap: .75rem; align-items: center; height: 100%; box-sizing: border-box; padding: .8rem 1rem; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--sm, 4px); background: var(--wp--preset--color--paper-2); color: inherit; text-decoration: none; }
.gtam-squick a:hover { border-color: var(--wp--preset--color--accent); }
.gtam-squick .gtam-icon { width: 1.5rem; height: 1.5rem; color: #b45f1d; }
.gtam-squick span { display: grid; }
.gtam-squick small { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--xs); }

@media (prefers-reduced-motion: reduce) {
	.gtam-scard__cover img, .gtam-stile, .gtam-snext__series { transition: none; }
	.gtam-scard:hover .gtam-scard__cover img, .gtam-stile:hover, .gtam-snext__series:hover { transform: none; }
}
@media (max-width: 900px) {
	.gtam-shero__inner { grid-template-columns: minmax(0, 1fr); }
	.gtam-shero__fan { display: none; }
}
@media (max-width: 600px) {
	.gtam-shero { padding-top: var(--wp--preset--spacing--50); }
	.gtam-shero__intro { font-size: var(--wp--preset--font-size--sm); }
	.gtam-shero__stats li { padding: .35rem .6rem; }
	.gtam-shero__stats b { font-size: var(--wp--preset--font-size--md); }
	.gtam-sfind__row { display: grid; gap: .35rem; }
	.gtam-sfind__row .gtam-maphub__quick { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; }
	.gtam-sfind__row .gtam-maphub__quick button { flex: none; }
	.gtam-scard.gtam-mapcard { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "cover head" "body body"; column-gap: .9rem; }
	.gtam-scard h3 { font-size: var(--wp--preset--font-size--lg); }
	.gtam-scard__topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gtam-scard__topics.is-pages { grid-template-columns: minmax(0, 1fr); }
	.gtam-scard__go { flex: 1 1 auto; justify-content: center; }
	.gtam-stable .is-wide { display: none; }
	.gtam-stable table { min-width: 620px; }
}
