/* === Custom Colors === */
.bg-pink { background-color: #ec008c !important; }
.text-pink { color: #ec008c !important; }

/* === Thumbnail Grid (Masonry) === */
.grid::after { content:''; display:block; clear:both; }
.grid-sizer, .grid-item, .thumbs { width: 25%; }
.grid-item, .thumbs { float:left; aspect-ratio:1/1.6; overflow:hidden; }

@media (max-width:575px)  { .grid-sizer, .grid-item, .thumbs { width:50%; } }
@media (min-width:1400px) { .grid-sizer, .grid-item, .thumbs { width:20%; } }

/* Related grid */
.grid-more::after { content:''; display:block; clear:both; }
.grid-sizer-more, .grid-item-more { width:25%; }
.grid-item-more { float:left; aspect-ratio:1/1.6; overflow:hidden; }

@media (max-width:575px)  { .grid-sizer-more, .grid-item-more { width:50%; } }
@media (min-width:1400px) { .grid-sizer-more, .grid-item-more { width:20%; } }

/* Video grid */
.grid-video::after { content:''; display:block; clear:both; }
.grid-sizer-video, .grid-item-video { width:25%; }
.grid-item-video { float:left; }

@media (max-width:575px)  { .grid-sizer-video, .grid-item-video { width:50%; } }
@media (min-width:1400px) { .grid-sizer-video, .grid-item-video { width:20%; } }

/* === Thumbnail Card === */
.thumb-wrap {
    position: relative;
    overflow: hidden;
    background: #1a1a2e;
    aspect-ratio: 1/1.6;
}
.thumb-wrap img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
    transition: transform .3s;
}
.thumb-wrap:hover img { transform: scale(1.03); }

/* Main link covers entire card */
.thumb-link {
    display: block; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 25%, transparent 65%, rgba(0,0,0,.5) 100%);
    text-decoration: none;
}
.thumb-link .thumb-title {
    position: absolute; top: 8px; left: 8px; right: 8px;
    color: #fff; font-size: .85rem; line-height: 1.15;
    text-shadow: 1px 1px 3px rgba(0,0,0,.7);
}
.thumb-link .thumb-count {
    position: absolute; bottom: 8px; right: 8px;
    font-size: .75rem;
}

/* Badges — OUTSIDE the <a>, float above it */
.thumb-badges {
    position: absolute; bottom: 8px; left: 8px; z-index: 2;
    display: flex; flex-wrap: wrap; gap: 3px;
}
.thumb-badges a { text-decoration: none; }

/* === Album Photo Grid (float like thumbnails) === */
.photo-grid::after { content:''; display:block; clear:both; }
.photo-grid-sizer, .photo-grid > .grid-item { width: 25%; }
.photo-grid > .grid-item { float:left; aspect-ratio:1/1.6; overflow:hidden; }
.photo-grid > .grid-item a { display:block; width:100%; height:100%; }
.photo-grid > .grid-item img {
    width: 100%; height: 100%; display: block;
    object-fit: cover; cursor: zoom-in;
}

@media (max-width:575px)  { .photo-grid-sizer, .photo-grid > .grid-item { width:50%; } }
@media (min-width:1400px) { .photo-grid-sizer, .photo-grid > .grid-item { width:20%; } }

/* === Video Player + Side Ad === */
.video-row { display: flex; gap: 4px; }
.video-player-wrap { flex: 1; height: 500px; background: #000; min-width: 0; }
.video-player-wrap video, .video-player-wrap .fluid_video_wrapper { width: 100%; height: 100%; }
.video-side-ad { flex: 0 0 300px; height: 500px; display: flex; align-items: center; justify-content: center; background: #1a1a2e; }

@media (max-width:991px) {
    .video-row { flex-direction: column; }
    .video-side-ad { flex: none; width: 100%; height: auto; min-height: 250px; }
}
@media (max-width:575px) {
    .video-player-wrap { height: 250px; }
}
@media (min-width:576px) and (max-width:991px) {
    .video-player-wrap { height: 350px; }
}

/* === Video Thumb === */
.vid-thumb { position:relative; display:block; background:#000; text-decoration:none; overflow:hidden; }
.vid-thumb img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.vid-play {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:50px; height:50px; border-radius:50%;
    background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center;
}
.vid-play::after {
    content:''; display:block;
    border-style:solid; border-width:10px 0 10px 18px;
    border-color:transparent transparent transparent #fff;
    margin-left:3px;
}
.vid-meta { padding:4px 8px; height:28px; overflow:hidden; }
.vid-meta a { color:#000; text-decoration:none; font-size:.85rem; }

/* === Video Carousel (horizontal scroll) === */
.scroll-row { display:flex; overflow-x:auto; gap:2px; -webkit-overflow-scrolling:touch; }
.scroll-row::-webkit-scrollbar { height:4px; }
.scroll-row::-webkit-scrollbar-thumb { background:#ec008c; border-radius:2px; }
.scroll-item { flex:0 0 260px; }
@media (max-width:575px) { .scroll-item { flex:0 0 220px; } }

/* === Section Label === */
.section-label {
    display:inline-block;
    padding:6px 14px; margin-left:-10px;
    border-radius:0 .375rem 0 0;
    font-weight:600;
}

/* === Loading === */
.loading-area { display:flex; justify-content:center; gap:8px; padding:1rem 0; }

/* === Misc === */
body { top:0 !important; }
.sort-btns { display:flex; justify-content:center; gap:4px; padding:.5rem 0; }
/* Cursor pointer on clickable elements */
.thumb-wrap, .thumb-link, .photo-grid .grid-item a { cursor: pointer; }