{if:$cid_count!=0}
{block:vod_cate cid="1" n="18"}

<div class="section-wrap pt-3">
    <div class="section-header">
        <div class="flex flex-col gap-3 w-full">
            <div class="flex items-center justify-between gap-3">
                <h2 class="section-header-title flex-shrink-0">{$data['cate']['name']}</h2>
                <a href="{$data['cate']['url']}" class="btn-more flex-shrink-0">
                    <span>更多</span>
                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"></path></svg>
                </a>
            </div>
            <div class="hidden md:flex flex-wrap items-center gap-x-2 gap-y-2">
                {loop:$data['cate']['sonlist'] $c}
                <a href="{$c.url}" class="flex items-center cursor-pointer bg-[var(--bg-overlay)]/30 px-3 py-1.5 rounded-md hover:bg-[var(--bg-overlay)] transition-colors duration-300 whitespace-nowrap">
                    <span class="text-sm hover:text-[var(--color-primary)] transition-colors duration-300 text-white">{h:$c.name}</span>
                </a>
                {/loop}
            </div>
        </div>
    </div>
    <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-5 gap-y-2 py-2">
        {loop:$data['videolist'] $v}  
        <div class="flex flex-col items-center transform hover:-translate-y-1 transition-all duration-300 animate-on-scroll">
    <div class="video-card relative w-full aspect-[530/726] group my-2 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500">
        {if:!empty($v['remarks'])}<div class="badge-quality">{h:$v.remarks}</div>{/if}
        <a class="absolute inset-0 flex rounded-lg group-hover:z-10" href="{$v.url}">
            <img decoding="async" alt="{h:$v.name}" loading="lazy" class="rounded-lg w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="{$v.pic}">
            <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex flex-col justify-between opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <div class="flex justify-end p-2">
                    <div class="bg-black/60 rounded-md p-1 max-w-full backdrop-blur-sm">
                        <p class="text-xs truncate text-white">{h:$v.remarks}</p>
                    </div>
                </div>
                <div class="bg-gradient-to-t from-black/95 via-black/80 to-transparent w-full px-2 py-3">
                    <div class="flex flex-col overflow-hidden">
                        <h3 class="antialiased text-sm font-bold text-white mb-1 line-clamp-2">{h:$v.name}</h3>
                        <div class="vod-tags flex flex-row flex-wrap gap-1 py-1">
                            <span class="antialiased rounded-md bg-white/10 text-xs text-[var(--text-secondary)] px-2 py-0.5">{h:$v.year}</span>
                            <span class="antialiased rounded-md bg-white/10 text-xs text-[var(--text-secondary)] px-2 py-0.5">{h:$v.area}</span>
                        </div>
                        <div class="flex overflow-hidden mt-1">
                            <span class="antialiased text-xs text-[var(--text-tertiary)] line-clamp-2">{h:$v.blurb}</span>
                        </div>
                    </div>
                </div>
                <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                    <div class="rounded-full bg-[var(--color-primary)] w-12 h-12 flex items-center justify-center shadow-lg transform scale-90 group-hover:scale-100 transition-transform duration-300">
                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="play" class="svg-inline--fa fa-play " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="font-size: 24px; color: var(--bg-base);">
                            <path fill="currentColor" d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"></path>
                        </svg>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <span class="text-center text-sm mx-1 mt-2 text-[var(--text-secondary)] hover:text-[var(--color-primary)] transition-colors duration-300" style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%;">{h:$v.name}</span>
</div>
        {/loop}
    </div>
</div>

{/block}
{/if}