/* Clip (self-hosted GIF replacement) detail page: /{guide}/clips/{slug}.
   Externalised from the view per review (no inline styles). */
.clip-detail .clip-media,
.clip-detail .clip-related { margin: 0; padding: 20px; background: var(--background); }
/* Sections are divided by a hairline in the theme's border color, not by a gap:
   a gap showed the page's dark ground as a black band in light mode. */
.clip-detail .video-referenced.clip-source,
.clip-detail .clip-related { margin-top: 0; border-top: 1px solid var(--subbackground); background: var(--background); }
/* video.css colors these headings for a dark page; follow the theme instead. */
.clip-detail .video-referenced-label,
.clip-detail .clip-related-heading { color: var(--text); }
.clip-detail .video-referenced-ctx { color: var(--subtext); }
.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; }
/* The clip's details: the design system's data table in its left-header layout (an
   8px frame, a quiet header band, a one-pixel rule round every cell, cells at
   --half-margin). markup.css paints .gg-table in fixed dark colors; here the
   surfaces follow the site theme tokens, so the table reads in light mode too. */
.clip-detail .clip-details { max-width: 480px; margin: var(--margin) auto 0; background: var(--background); border: 1px solid var(--subbackground); border-radius: 8px; overflow: hidden; }
.clip-detail .clip-details > table { width: 100%; margin: 0; border-collapse: collapse; }
/* Selectors reach down to the cells so they outrank markup.css's left-header table
   rules, which paint the header column in fixed dark-theme colors (white on light). */
.clip-detail .gg-table.clip-details > table > tbody > tr > th,
.clip-detail .gg-table.clip-details > table > tbody > tr > td { padding: var(--half-margin); border: 1px solid var(--subbackground); color: var(--text); text-align: left; vertical-align: middle; }
.clip-detail .gg-table.clip-details > table > tbody > tr:first-child > * { border-top: 0; }
.clip-detail .gg-table.clip-details > table > tbody > tr:last-child > * { border-bottom: 0; }
.clip-detail .gg-table.clip-details > table > tbody > tr > th { width: 36%; border-left: 0; background: rgba(127, 127, 127, .12); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--subtext); }
.clip-detail .gg-table.clip-details > table > tbody > tr > td { border-right: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.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: var(--subtext); }
@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; }
}