/* 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: #cfd2da; 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); }
.clip-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.8rem; }
.clip-page-btn { padding: .5em 1.1em; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #e6e8ee; text-decoration: none; font-size: .88rem; }
.clip-page-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.clip-page-btn.is-disabled { opacity: .35; pointer-events: none; }
.clip-page-info { color: #9aa0aa; font-size: .85rem; }
@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; }
}