@if($topChampionships->count() || $allChampionships->count())
<style>
    .champs-section { margin: 25px 0; }
    .champs-section h2 { font-size: 20px; margin-bottom: 12px; color: #131521; }
    .champs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
    .champ-item { background:#fff; border-radius:10px; padding:14px 10px; text-align:center;
        box-shadow:0 2px 6px rgba(0,0,0,.08); text-decoration:none; color:#222; transition:.2s; }
    .champ-item:hover { transform:translateY(-3px); box-shadow:0 6px 14px rgba(0,0,0,.12); }
    .champ-item img { width:52px; height:52px; object-fit:contain; margin-bottom:8px; }
    .champ-item span { display:block; font-size:13px; font-weight:600; line-height:1.35; }
</style>

@if($topChampionships->count())
<div class="champs-section">
    <h2>🏆 أهم البطولات</h2>
    <div class="champs-grid">
        @foreach($topChampionships as $champ)
            <a href="{{ route('championships.show', $champ) }}" class="champ-item">
                <img src="{{ $champ->logo }}" alt="{{ $champ->name }}" loading="lazy">
                <span>{{ $champ->name }}</span>
            </a>
        @endforeach
    </div>
</div>
@endif

@if($allChampionships->count())
<div class="champs-section">
    <h2>📋 كل البطولات</h2>
    <div class="champs-grid">
        @foreach($allChampionships as $champ)
            <a href="{{ route('championships.show', $champ) }}" class="champ-item">
                <img src="{{ $champ->logo }}" alt="{{ $champ->name }}" loading="lazy">
                <span>{{ $champ->name }}</span>
            </a>
        @endforeach
    </div>
</div>
@endif
@endif