/* ============================================================
   Homepage (index.php)
   ============================================================ */

.index-hero-card {
    background: linear-gradient(135deg, var(--primary) 0%, #1557b0 100%);
    color: white;
    margin-bottom: 30px;
    border-radius: var(--radius);
}

.index-hero-body {
    padding: 48px 40px;
}

.index-hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.index-hero-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.index-hero-text {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 500px;
}

.index-hero-btn {
    background: white;
    color: var(--primary);
    font-weight: 700;
}

.index-hero-btn:hover {
    background: var(--gray-100);
    color: var(--primary);
}

.index-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.index-tournament-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.index-tournament-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-200);
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

.index-tournament-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.index-tournament-item-content {
    flex: 1;
}

.index-tournament-item-title {
    font-weight: 600;
}

.index-tournament-item-meta {
    font-size: 0.8rem;
    color: var(--gray-500);
}

.index-rankings-list {
    padding: 0;
}

.index-rankings-card-body {
    padding: 0;
}

/* Matches section */
.index-matches-header {
    display: flex;
    gap: 8px;
    align-items: center;
}

.index-matches-search {
    width: auto;
    min-width: 160px;
    font-size: 0.85rem;
}

.index-matches-limit {
    width: auto;
    min-width: 80px;
    font-size: 0.85rem;
}

.match-item-front {
    cursor: default;
}

.match-item-front-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
}

.match-tournament-info {
    min-width: 80px;
    font-size: 0.8rem;
    color: var(--gray-500);
}

.match-tournament-name {
    white-space: nowrap;
}

.match-date-time {
    white-space: nowrap;
}

.match-team-name {
    flex: 1;
    text-align: right;
}

.match-team-name.winner {
    font-weight: 700;
    color: var(--secondary);
}

.match-score-display {
    font-weight: 800;
    color: var(--primary);
    min-width: 60px;
    text-align: center;
}

.match-team-name2 {
    flex: 1;
}

.match-team-name2.winner {
    font-weight: 700;
    color: var(--secondary);
}



.index-pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--gray-200);
}

.index-pagination-info {
    font-size: 0.85rem;
    color: var(--gray-500);
}

.index-pagination-links {
    display: flex;
    gap: 8px;
}

@media (max-width: 768px) {
    .index-two-column {
        grid-template-columns: 1fr;
    }

    .index-hero-body {
        padding: 32px 24px;
    }

    .index-hero-title {
        font-size: 1.5rem;
    }


    .matches-section-card .card-header{
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .matches-section-card .ranking-item{
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

            .matches-section-card .match-badge-container {
    margin: 0 auto;
}

    .matches-section-card .match-item-front-content{
        flex-wrap: wrap;
        justify-content: center;


        .match-tournament-info{
            flex: 1 1 100%;
            justify-content: center;
            text-align: center;
        }


        .match-score-display{
            width: 80px;
            text-align: center;
        }




        .match-team-name,
        .match-team-name2
        {
            text-align: center;

            .team-name-container{
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 4px;
                padding: 0.5rem 0;
            }
        }

    }



}