/* Game Videos page — media tabs + clip gallery (/{guide}/videos).
   Externalised from the view per review (no inline styles). */
/* Tabs + media share ONE dark panel. Hero and panel both use the site's
   translucent black (see --first-guide-background / the trophy hero) so the
   game artwork stays visible behind the module. */
.video-page.video-list > .video-hero {
	background-color: rgba(0, 0, 0, .8);
}
.video-page.video-list > .video-content {
	background-color: rgba(0, 0, 0, .8);
	color: #fff;
	margin-bottom: 10px;
	padding: 22px 40px 34px;
}
.media-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.6rem; }
.media-tab { display: inline-flex; align-items: center; gap: .45em; padding: .5em .95em; border-radius: 999px; font: 600 .86rem/1 "Inter", sans-serif; color: #a8a3c0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); text-decoration: none; transition: color .15s, background .15s, border-color .15s; }
.media-tab:hover { color: #fff; border-color: rgba(255,255,255,.18); }
.media-tab.is-active { color: #fff; background: var(--maggenta); border-color: transparent; }
.media-tab-ct { font-size: .72rem; font-weight: 700; padding: .05em .5em; border-radius: 999px; background: rgba(255,255,255,.14); }
/* Featured + grid drop their own panel chrome inside the unified panel. */
.video-content > .video-featured { background: none; padding: 0; margin: 0 0 1.8rem; }
.video-content > .gg-grid-wrapper { margin: 0; padding: 0; }
.clip-section--divided { margin-top: 2rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.08); }
.clip-lib-title { font-size: 1.35rem; margin: 0 0 .15rem; color: #fff; }
.clip-lib-count { color: #8a8f98; font-weight: 400; }
.clip-lib-sub { color: #9aa0aa; margin: 0 0 1.2rem; font-size: .9rem; }
.clip-lib-empty { color: #9aa0aa; padding: 1rem 0; margin: 0; }
.clip-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--margin); }
.clip-card { display: flex; flex-direction: column; align-items: flex-start; margin: 0; min-width: 0; }
.clip-poster-link {
	position: relative;
	display: block;
	aspect-ratio: 16/9;
	border-radius: 10px;
	overflow: hidden;
	background: #14101f;
	border: 1px solid rgba(255,255,255,.09);
	width: 100%;
}
.clip-poster-link::after { content: ""; position: absolute; bottom: 6px; right: 7px; width: 58px; height: 11px; background: url(/assets/front/images/logo/gg-logo-wordmark-long.svg) right center / contain no-repeat; opacity: 0.5; pointer-events: none; z-index: 3; }
.clip-poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.clip-poster-link:hover .clip-poster { transform: scale(1.05); }
.clip-card .clip-hover-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.clip-badge { position: absolute; top: 7px; left: 7px; z-index: 2; padding: 1px 6px; font: 700 10px/1.5 Arial, sans-serif; letter-spacing: .05em; color: #fff; background: rgba(0,0,0,.6); border-radius: 4px; pointer-events: none; }
/* Shorts get a white YouTube Shorts icon instead of a text badge (one media-type glyph,
   matching the browse grid). */
.clip-poster-link--short::before { content: ""; position: absolute; top: 8px; left: 8px; z-index: 3; width: 20px; height: 27px; background: url(/assets/front/images/vtype-short.svg) no-repeat center/contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); pointer-events: none; }
/* How long the clip runs, bottom left of the poster: bottom right is the
   wordmark, and this is where a video player writes it. */
.clip-duration { position: absolute; bottom: 7px; left: 7px; z-index: 2; padding: 1px 6px; font: 600 11px/1.5 "Inter", sans-serif; font-variant-numeric: tabular-nums; color: #fff; background: rgba(0,0,0,.72); border-radius: 4px; pointer-events: none; }
.clip-ref { display: flex; align-items: center; gap: var(--half-margin); margin-top: var(--half-margin); text-decoration: none; color: inherit; }
.clip-ref-thumb { width: 52px; height: 30px; object-fit: cover; border-radius: 5px; flex: 0 0 auto; background: #222; }
.clip-ref-title { font-size: .8125rem; line-height: 1.3; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clip-ref:hover .clip-ref-title { color: #fff; }
.clip-viewall { display: inline-block; margin-top: 1.4rem; padding: .6em 1.2em; border-radius: 999px; background: var(--maggenta); color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; }
.clip-viewall:hover { filter: brightness(1.08); }
/* The Clips list pager is gg-grid.css's .gg-pagination, in the .gg-grid-bottom-controls
   wrapper that centers it under the grid, so only the spacing above it is set here.
   The width is reclaimed: on a grid page that wrapper gives up 402px to the right-rail
   ad, and this page carries no rail, so without this the pager centers 201px too far
   left. Two classes plus the element would tie that ad rule, hence the page class. */
.video-list.clip-list .clip-pager { width: 100%; }
.clip-pager { margin-top: var(--dbl-margin); }
.clip-pager .gg-pagination-prevnext > a { color: inherit; text-decoration: none; }
/* Under each card: the guide page the clip is embedded in. A button, not a line
   of small print, with the trailing arrow the design system gives anything that
   navigates. The panel behind it is the same translucent black in both themes,
   so these colours are written out rather than taken from the theme tokens,
   which would turn the button white on white in the light theme. */
.clip-page-btn {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	min-height: 36px;
	margin-top: var(--half-margin);
	padding: .5em 1.1em;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}
.clip-page-btn .gg-icon { font-size: .9em; }
.clip-page-btn:hover { background: var(--maggenta); border-color: var(--maggenta); color: #fff; }
.clip-page-btn:focus-visible { outline: 2px solid var(--maggenta); outline-offset: 2px; }
.clip-page-btn:active { background: var(--btn-red, #ce1e24); border-color: var(--btn-red, #ce1e24); }

/* The pager. Each step is a real link, and the link fills its control: as the
   shared rules leave it, only the arrow glyph itself is clickable, a 9x15 target
   inside a 34x32 button, so most clicks on it did nothing. The shared colours
   follow the theme, which on this always-dark panel reads white on white in the
   light theme, so they are written out here too. Specificity matches the rules in
   gg-grid.css (0,3,1) or these would not apply. */
/* The shared controls wrapper paints a full-width band of --background behind the
   controls on a browse grid. Under this grid it reads as a slab across the
   panel, so only the pager itself shows. */
.clip-pager .gg-grid-controls .gg-grid-controls-inner { background: none; }
.clip-pager .gg-grid-controls .gg-grid-controls-inner > .gg-pagination { display: inline-flex; align-items: stretch; font-size: .875rem; }
.clip-pager .gg-grid-controls .gg-grid-controls-inner > .gg-pagination > div {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border-color: rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .05);
	color: #fff;
	font-size: .875rem;
}
.clip-pager .gg-grid-controls .gg-grid-controls-inner > .gg-pagination > .gg-pagination-pages { padding: 0 1em; color: #fff; font-variant-numeric: tabular-nums; }
.clip-pager .gg-grid-controls .gg-grid-controls-inner > .gg-pagination > .gg-pagination-prevnext { color: rgba(255, 255, 255, .35); }
.clip-pager .gg-grid-controls .gg-grid-controls-inner > .gg-pagination > .gg-pagination-prevnext.enabled { color: #fff; }
.clip-pager .gg-grid-controls .gg-grid-controls-inner > .gg-pagination > .gg-pagination-prevnext.enabled:hover { background: var(--maggenta); }
.clip-pager .gg-pagination-prevnext > a { display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: center; color: inherit; text-decoration: none; }
.clip-pager .gg-pagination-prevnext > a:focus-visible { outline: 2px solid var(--maggenta); outline-offset: -2px; }
@media (max-width: 620px) {
	.video-page.video-list > .video-content { padding-left: 20px; padding-right: 20px; }
	.clip-lib-grid { grid-template-columns: repeat(2, 1fr); gap: var(--half-margin); }
	/* Two columns leave about 170px a card, and the label has to stay on one
	   line: wrapped over two it doubled the height of every card. */
	.clip-page-btn { padding: .5em .85em; font-size: .75rem; white-space: nowrap; }
}