/* Compare galleries: original first, new versions after (see /assets/js/gallery.js). */
.sg { position: relative; min-width: 0; }
.sg-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sg-track::-webkit-scrollbar { display: none; }
.sg-track:focus-visible { outline: 2px solid var(--accent, #c8f04b); outline-offset: -2px; }
.sg-slide { position: relative; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.sg-slide > .work-media, .sg-slide > .concept-media { width: 100%; }
.sg-label { position: absolute; right: 12px; top: 12px; z-index: 2; pointer-events: none; display: inline-block; padding: 4px 9px; border-radius: 999px; font-size: .66rem; font-weight: 600; letter-spacing: .04em; line-height: 1.3; color: var(--text-light, #f4f1ea); background: rgba(14,16,13,.72); backdrop-filter: blur(8px); max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-slide[data-new] .sg-label { color: #10120e; background: rgba(200,240,75,.92); }
.sg-nav { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: none; align-items: center; gap: 2px; padding: 2px 4px; border-radius: 999px; background: rgba(14,16,13,.7); backdrop-filter: blur(8px); }
.sg-on .sg-nav { display: flex; }
.sg-arrow { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #f4f1ea; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.sg-arrow:disabled { opacity: .35; cursor: default; }
.sg-arrow:not(:disabled):hover { background: rgba(255,255,255,.12); }
.sg-dots { display: flex; align-items: center; }
.sg-dot { width: 18px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.sg-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(244,241,234,.45); transition: background .2s, transform .2s; }
.sg-dot[aria-current="true"]::before { background: var(--accent, #c8f04b); transform: scale(1.25); }
.sg-arrow:focus-visible, .sg-dot:focus-visible, .ugc-vtab:focus-visible { outline: 2px solid var(--accent, #c8f04b); outline-offset: 1px; }
/* UGC tiles: Original / New tabs over the top-right of the video. */
.ugc-vers, .tpl-ugc-media[data-versions] { position: relative; }
.ugc-ver[hidden] { display: none !important; }
.ugc-vtabs { position: absolute; top: 8px; right: 8px; z-index: 4; display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(14,16,13,.74); backdrop-filter: blur(8px); }
.ugc-vtab { min-height: 28px; padding: 3px 10px; border: 0; border-radius: 999px; background: transparent; color: #f4f1ea; font: inherit; font-size: .7rem; font-weight: 600; letter-spacing: .02em; cursor: pointer; }
.ugc-vtab[aria-pressed="true"] { background: var(--accent, #c8f04b); color: #10120e; }
@media (min-width: 900px) { .ugc-vtab { min-height: 24px; padding: 2px 8px; font-size: .64rem; } }
@media (prefers-reduced-motion: reduce) { .sg-track { scroll-behavior: auto; } .sg-dot::before { transition: none; } }
/* Home concept cards carry a caption chip bottom-left, so their controls sit top-left. */
.concept .sg-nav { top: 10px; left: 10px; right: auto; bottom: auto; }
/* /templates/ tiles are narrow: smaller tabs, kept clear of the wordmark row. */
.tpl-ugc-media .ugc-vtabs { top: auto; bottom: 8px; left: 8px; right: auto; padding: 2px; }
.tpl-ugc-media .ugc-vtab { min-height: 24px; padding: 2px 8px; font-size: .62rem; }