.ogg-gallery { padding:32px 20px; font-family:system-ui,Arial,sans-serif; color:#fff; }
.ogg-filter { margin-bottom:18px; display:flex; gap:8px; flex-wrap:wrap; }
.ogg-filter-btn { background:#eee;border:0;padding:8px 12px;border-radius:6px;cursor:pointer; color:#222;}
.ogg-filter-btn.active { background:var(--ogg-primary); color:#fff; }

.ogg-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap:16px; }
.ogg-item { cursor:pointer; }
.ogg-thumb { position:relative; aspect-ratio:16/9; background-size:cover; background-position:center; border-radius:10px; overflow:hidden; transition:transform .25s ease, filter .25s ease; }
.ogg-thumb::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.28) 100%); }
.ogg-item:hover .ogg-thumb{ transform:scale(1.03); filter:brightness(1.05); }
.ogg-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px;height:64px;border-radius:50%; border:0;background:rgba(0,0,0,0.55); color:#fff; font-size:22px; display:flex;align-items:center;justify-content:center; }
.ogg-title { margin-top:8px; font-size:14px; color:#fff; }

/* lightbox */
.ogg-lightbox-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.88); display:flex; align-items:center; justify-content:center; z-index:999999; }
.ogg-lightbox-frame { width:90%; max-width:1100px; aspect-ratio:16/9; background:#000; position:relative; border-radius:8px; overflow:hidden; }
.ogg-lightbox-close { position:absolute; right:12px; top:12px; z-index:2; background:rgba(0,0,0,.4); color:#fff; border:0;padding:10px;border-radius:6px; cursor:pointer; }

/* load more */
.ogg-loadmore-wrap { text-align:center; margin-top:18px; }
.ogg-loadmore { background:var(--ogg-primary); color:#fff; padding:10px 18px; border:0; border-radius:8px; cursor:pointer; }

/* responsive tweaks */
@media (max-width:480px){ .ogg-play{ width:48px;height:48px; font-size:18px; } }