/* Gallery (Part 6) */
.gallery-header { padding: 96px 0 40px; }
.gallery-header .body { max-width: 720px; margin-top: 16px; }
.live-line { margin: 20px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 767px) { .gallery-header { padding: 56px 0 24px; } }

.reel-section { padding-bottom: 48px; }
.reel-grid > * { min-width: 0; }
.reel-grid { display: grid; grid-template-columns: 8fr 4fr; gap: 24px; align-items: stretch; }
.reel-player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; }
.reel-player .ph { position: absolute; inset: 0; border-radius: 0; border: 0; }
.reel-player .play-icon { width: 72px; height: 72px; cursor: pointer; border: 0; }
.reel-panel { display: flex; flex-direction: column; gap: 12px; }
.reel-panel .h2 { margin: 0; }
.reel-panel .body, .reel-panel .small { margin: 0; }
.reel-switch { margin-top: auto; padding-top: 8px; }
.reel-switch .pill { min-height: 40px; padding: 6px 14px; font-size: 14px; }
@media (max-width: 1023px) { .reel-grid { grid-template-columns: 1fr; } }

.filter-bar { position: sticky; top: var(--nav-h); z-index: 80; background: var(--fv-surface); border-bottom: 1px solid var(--fv-border); padding: 12px 0; }
.filter-inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filter-inner .pill { min-height: 40px; padding: 6px 14px; font-size: 14px; }
.filter-inner .divider { width: 1px; height: 28px; background: var(--fv-border); }
.f-tag .select { height: 40px; min-width: 220px; }
.f-count { margin: 0 0 0 auto; }
.filters-btn { display: none; }
@media (max-width: 767px) {
  .filter-inner { flex-wrap: nowrap; }
  #f-type { flex: 1; min-width: 0; }
  .filter-inner .divider, .day-pills, .f-tag, .f-count { display: none !important; }
  .filters-btn { display: inline-flex; flex: none; }
}
.sheet .pills { margin: 8px 0 20px; }

.grid-section { padding-top: 32px; }
.new-pill { position: sticky; top: calc(var(--nav-h) + 76px); z-index: 70; display: flex; margin: 0 auto 16px; }
.masonry { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 8px; gap: 0 16px; grid-auto-flow: dense; }
.masonry > li { margin-bottom: 16px; }
@media (max-width: 1023px) { .masonry { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .masonry { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .masonry { gap: 0 8px; } .masonry > li { margin-bottom: 8px; } }

.m-card { display: block; width: 100%; padding: 0; border: 1px solid var(--fv-border); border-radius: var(--radius); background: var(--fv-surface); overflow: hidden; cursor: pointer; text-align: left; position: relative; transition: transform .2s var(--ease), border-color .2s; }
.m-card .media { position: relative; overflow: hidden; }
.m-card .media .ph { position: absolute; inset: 0; border: 0; border-radius: 0; transition: transform .3s var(--ease); }
.m-card .media .ph::after { display: none; }
.m-card:hover .media .ph, .m-card:focus-visible .media .ph { transform: scale(1.02); }
.m-card:hover, .m-card:focus-visible { border-color: var(--fv-surface-2); }
.m-card .scrim { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 12px 12px; background: linear-gradient(0deg, rgba(0,0,0,.85), transparent); opacity: 0; transition: opacity .2s; font-size: 14px; display: grid; gap: 2px; }
.m-card .scrim .cap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.m-card:hover .scrim, .m-card:focus-visible .scrim { opacity: 1; }
.m-card .chip.cc { position: absolute; top: 10px; left: 10px; font-size: 12px; }
.m-card.replay:hover { transform: translateY(-2px); }
.m-card.replay .media .tag { position: absolute; top: 10px; left: 10px; background: rgba(10,10,10,.7); }
.m-card .r-info { padding: 14px 16px 16px; display: grid; gap: 6px; }
.m-card .r-info .h3 { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-card .watch { color: var(--fv-orange); font-weight: 600; font-size: 14px; opacity: 0; transition: opacity .2s; }
.m-card.replay:hover .watch, .m-card.replay:focus-visible .watch { opacity: 1; }
.skeleton .ph { animation: shimmer 1.2s ease-in-out infinite alternate; }
@keyframes shimmer { to { opacity: .5; } }

.load-more { display: grid; justify-items: center; gap: 8px; margin-top: 32px; }
.empty-card { max-width: 560px; margin: 24px auto; text-align: center; display: grid; justify-items: center; gap: 16px; padding: 40px 32px; }
.empty-card .body { margin: 0; }
.takedown { text-align: center; margin: 40px 0 0; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 320; background: rgba(10,10,10,.96); display: grid; grid-template-columns: 1fr 360px; }
.lb-stage { position: relative; display: grid; place-items: center; padding: 64px 72px; min-height: 0; }
.lb-media { position: relative; max-height: 90vh; max-width: 100%; height: 100%; width: 100%; display: grid; place-items: center; }
.lb-media .ph { width: auto; height: auto; max-height: 80vh; max-width: 100%; }
.lb-media .ph.r-16x9 { width: 100%; aspect-ratio: 16 / 9; max-height: 80vh; }
.lb-media .ph.r-4x5 { height: 80vh; aspect-ratio: 4 / 5; }
.lb-media .ph.r-9x16 { height: 80vh; aspect-ratio: 9 / 16; }
.lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--fv-border); background: var(--fv-surface); color: #fff; cursor: pointer; font-size: 20px; display: grid; place-items: center; z-index: 2; }
.lb-btn:hover { border-color: var(--fv-orange); }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb-pos { position: absolute; top: 24px; left: 24px; }
.lb-info { background: var(--fv-surface); border-left: 1px solid var(--fv-border); padding: 72px 24px 24px; overflow-y: auto; display: grid; align-content: start; gap: 14px; }
.lb-info p { margin: 0; }
.lb-info .btn { justify-self: start; }
@media (max-width: 1023px) {
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lb-stage { padding: 64px 8px 16px; }
  .lb-media .ph.r-4x5, .lb-media .ph.r-9x16 { height: 60vh; }
  .lb-info { border-left: 0; border-top: 1px solid var(--fv-border); padding: 16px; max-height: 40vh; }
  .lb-info.collapsed > :not(.lb-toggle):not(.lb-caption) { display: none; }
  .lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; }
}
.lb-toggle { display: none; }
@media (max-width: 1023px) { .lb-toggle { display: inline-flex; justify-self: start; } }
.m-card .media { position: relative; }
.m-card .media .ph-img { transition: transform .3s var(--ease); }
.m-card:hover .media .ph-img, .m-card:focus-visible .media .ph-img { transform: scale(1.02); }
.lb-img { max-height: 80vh; max-width: 100%; width: auto; height: auto; border-radius: 12px; object-fit: contain; }
.lb-img.r-4x5, .lb-img.r-9x16 { height: 80vh; }
.lb-img.r-16x9 { width: 100%; }
@media (max-width: 1023px) { .lb-img.r-4x5, .lb-img.r-9x16 { height: 60vh; } }

.gallery-video-thumbnail { display: block; width: 100%; height: 100%; object-fit: cover; }
.lb-video { display: block; width: 100%; max-width: 100%; max-height: 78vh; object-fit: contain; background: #000; }
@media (max-width: 767px) { .lb-video { max-height: 64vh; } }