/* 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: 1.1rem; }
.clip-card { 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); }
.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; }
.clip-ref { display: flex; align-items: center; gap: .55rem; margin-top: .5rem; 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: .8rem; line-height: 1.25; 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. */
.clip-ref-page { display: inline-block; margin-top: .3rem; font-size: .75rem; color: var(--subtext); }
.clip-ref-page:hover { color: var(--text); }
@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: .7rem; }
}