/* Clip (self-hosted GIF replacement) detail page — /{guide}/videos/clips/{slug}.
   Externalised from the view per review (no inline styles). */
.clip-detail .clip-media,
.clip-detail .clip-related { margin: 20px 0 0; padding: 20px; background: var(--background); }
.clip-detail .clip-media { margin-top: 0; }
.clip-detail .clip-player-wrap { margin: 0; }
.clip-detail .clip-player { position: relative; width: 100%; max-width: 900px; margin: 0 auto; background: #000; border-radius: 10px; overflow: hidden; line-height: 0; }
.clip-detail .clip-player > video,
.clip-detail .clip-player .v-vlite video { display: block; width: 100%; height: 100%; }
.clip-detail .clip-player .v-vlite { width: 100%; --vlite-colorPrimary: #ff4d8d; }
.clip-detail .clip-player .clip-wm { position: absolute; top: 8px; right: 10px; width: 96px; height: 17px; background: url(/assets/front/images/logo/gg-logo-wordmark-long.svg) right center / contain no-repeat; opacity: 0.5; pointer-events: none; z-index: 2; }
.clip-detail .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-title-tag { display: inline-block; vertical-align: middle; margin-left: .5rem; padding: .12em .5em; font: 700 .5em/1.4 Arial, sans-serif; letter-spacing: .06em; color: #fff; background: var(--maggenta); border-radius: 5px; }
.clip-stats { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem .65rem; margin: 1.2rem 0 0; padding: 0; }
.clip-stats li { display: flex; flex-direction: column; gap: 2px; padding: .5rem .8rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; min-width: 84px; }
.clip-stat-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.5); }
.clip-stat-val { font-size: .92rem; font-weight: 600; color: #fff; }
.clip-detail .clip-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.clip-detail .clip-card { margin: 0; min-width: 0; }
.clip-detail .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-detail .clip-poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.clip-detail .clip-poster-link:hover .clip-poster { transform: scale(1.05); }
.clip-detail .clip-card .clip-hover-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.clip-detail .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; }
.clip-detail .clip-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .45rem; font-size: .82rem; line-height: 1.3; color: #cfd2da; }
@media (max-width: 620px) {
	.clip-detail .clip-media, .clip-detail .clip-related { padding: 14px; }
	.clip-detail .clip-lib-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
}