@if(isset($graduateVideos) && $graduateVideos->isNotEmpty())
    @push('styles_top')
        <style>
            #home-graduate-videos .gv-home-card {
                background: #fff;
                border-radius: 14px;
                overflow: hidden;
                border: 1px solid rgba(31, 59, 100, 0.08);
                box-shadow: 0 6px 26px rgba(15, 30, 60, 0.06);
                transition: transform 0.28s ease, box-shadow 0.28s ease;
                height: 100%;
                display: flex;
                flex-direction: column;
            }
            #home-graduate-videos .gv-home-card:hover {
                transform: translateY(-6px);
                box-shadow: 0 16px 42px rgba(15, 30, 60, 0.12);
            }
            #home-graduate-videos .gv-home-thumb {
                position: relative;
                aspect-ratio: 16 / 9;
                background: linear-gradient(145deg, #0f2044 0%, #1b3d2f 100%);
                overflow: hidden;
            }
            #home-graduate-videos .gv-home-thumb img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            #home-graduate-videos .gv-home-thumb-ph {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: rgba(255,255,255,0.35);
                font-size: 2.5rem;
            }
            #home-graduate-videos .gv-home-play-layer {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(13, 17, 23, 0.38);
                transition: background 0.25s ease;
            }
            #home-graduate-videos .gv-home-card:hover .gv-home-play-layer {
                background: rgba(13, 17, 23, 0.52);
            }
            #home-graduate-videos .gv-home-play-btn {
                width: 58px;
                height: 58px;
                border-radius: 50%;
                background: rgba(255,255,255,0.94);
                color: #0f2044;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.2rem;
                box-shadow: 0 8px 26px rgba(0,0,0,0.28);
                transition: transform 0.25s ease;
            }
            #home-graduate-videos .gv-home-card:hover .gv-home-play-btn {
                transform: scale(1.07);
            }
            #home-graduate-videos .gv-home-meta {
                display: flex;
                justify-content: space-between;
                gap: 10px;
                align-items: flex-start;
                padding: 12px 14px 14px;
            }
            #home-graduate-videos .gv-home-title {
                font-size: 0.95rem;
                line-height: 1.45;
                font-weight: 700;
                color: #0f2044;
                margin: 0;
            }
            #home-graduate-videos .gv-home-dur {
                flex-shrink: 0;
                font-size: 0.74rem;
                font-weight: 600;
                padding: 4px 9px;
                border-radius: 999px;
                background: rgba(15, 32, 68, 0.08);
                color: #0f2044;
            }
            #home-graduate-videos .gv-home-fade {
                animation: gvHomeIn 0.55s ease forwards;
                opacity: 0;
            }
            @keyframes gvHomeIn {
                from { opacity: 0; transform: translateY(12px); }
                to { opacity: 1; transform: translateY(0); }
            }
            #home-graduate-videos .gv-home-actions .btn-all-videos {
                min-width: 220px;
                font-weight: 600;
                border-radius: 10px;
                padding: 12px 28px;
            }
        </style>
    @endpush

    <div id="home-graduate-videos" class="home-graduate-videos-wrap section-premium position-relative reveal-up"
         style="background: linear-gradient(180deg, #faf7f2 0%, #f0ebe0 55%);">
        <div class="container home-sections py-5">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-25">
                <div class="text-center text-md-right mb-15 mb-md-0 flex-grow-1">
                    <h2 class="section-title mb-5">فيديوهات الخريجين</h2>
                    <p class="section-hint mb-0">لمحة سريعة من تجارب الخريجين — اضغط لمشاهدة التفاصيل</p>
                </div>
                <div class="d-flex flex-wrap justify-content-center justify-content-md-start gv-home-actions">
                    <a href="{{ route('graduateVideos.index') }}" class="btn btn-premium btn-all-videos shadow-sm">
                        مشاهدة كل الفيديوهات
                    </a>
                </div>
            </div>

            <div class="row">
                @foreach($graduateVideos as $video)
                    <div class="col-6 col-md-4 mb-20 gv-home-fade">
                        <a href="{{ route('graduateVideos.show', ['graduate_video' => $video]) }}" class="gv-home-card text-reset text-decoration-none d-block">
                            <div class="gv-home-thumb">
                                @if($video->thumbnailUrl())
                                    <img src="{{ $video->thumbnailUrl() }}" alt="{{ $video->title }}" loading="lazy">
                                @else
                                    <div class="gv-home-thumb-ph"><i class="fas fa-video"></i></div>
                                @endif
                                <span class="gv-home-play-layer">
                                    <span class="gv-home-play-btn">
                                        <i class="fas fa-play" style="margin-right: -2px;"></i>
                                    </span>
                                </span>
                            </div>
                            <div class="gv-home-meta">
                                <h3 class="gv-home-title">{{ $video->title }}</h3>
                                @if($video->durationFormatted())
                                    <span class="gv-home-dur">{{ $video->durationFormatted() }}</span>
                                @endif
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>

        </div>
    </div>
@endif