/* static/css/competitions.css */

.page-header { display: flex; justify-content: space-between; align-items: flex-end; margin: 32px 0 40px; flex-wrap: wrap; gap: 16px; }
.page-header h1 { font-size: 2.5rem; font-weight: 900; color: var(--tbg-text); margin: 0 0 4px; }
.page-header p { color: var(--tbg-text-muted); font-size: 1rem; margin: 0; }

.total-count { background: linear-gradient(135deg, #79FFC0, #21F28B); color: #03150B; padding: 6px 16px; border-radius: var(--tbg-radius-pill); font-size: 0.85rem; font-weight: 800; }

.competition-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.competition-card { position: relative; background: var(--bg-card); border-radius: var(--tbg-radius-md); padding: 20px; text-decoration: none; color: inherit; border: 1px solid var(--tbg-border); transition: var(--tbg-transition); overflow: hidden; display: flex; flex-direction: column; gap: 16px; min-height: 180px; }
.competition-card:hover { transform: translateY(-6px); border-color: var(--neon-mint); box-shadow: var(--tbg-shadow-hover); }

.comp-card-top { display: flex; justify-content: center; align-items: center; height: 72px; flex-shrink: 0; }
.comp-logo { max-height: 64px; max-width: 100%; object-fit: contain; }
.comp-logo-placeholder { font-size: 2.75rem; line-height: 1; opacity: 0.9; }

.comp-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.comp-card-body h3 { font-size: 1rem; font-weight: 800; color: var(--tbg-text); margin: 0; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.comp-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; }
.comp-region { font-size: 0.75rem; color: var(--tbg-text-muted); font-weight: 600; text-transform: uppercase; }

.comp-type-chip { font-size: 0.65rem; font-weight: 800; padding: 3px 10px; border-radius: var(--tbg-radius-pill); text-transform: uppercase; letter-spacing: 0.05em; }

.type-league        { background: rgba(33, 242, 139, .14); color: var(--neon-mint); }
.type-continental   { background: rgba(97, 255, 177, .09); color: #9BFFD0; }
.type-international { background: rgba(255, 255, 255, .07); color: #F1FFF7; }
.type-cup           { background: rgba(13, 90, 55, 0.4); color: #DFFFEF; }

@media (max-width: 768px) {
    .page-header h1 { font-size: 1.9rem; }
    .competition-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; max-width: 1100px; margin: 0 auto; }
    .competition-card { padding: 16px; min-height: 160px; }
    .comp-card-top { height: 60px; }
    .comp-logo { max-height: 52px; }
    .comp-logo-placeholder { font-size: 2.25rem; }
    .comp-card-body h3 { font-size: 0.9rem; }
}

@media (max-width: 480px) {
    .competition-grid { grid-template-columns: repeat(2, 1fr); }
    .comp-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* --- GLASS GLOW FOR COMPETITION CARDS --- */
.competition-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--tbg-border);
    border-radius: var(--tbg-radius-md);
    overflow: visible; /* Important: allows the glow to spill outside */
}

/* The Glow Effect */
.competition-card::after {
    content: "";
    position: absolute;
    inset: -2px; /* Slightly larger than the card */
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(33, 242, 139, 0.2), transparent 50%, rgba(97, 255, 177, 0.1));
    z-index: -1; /* Pushes it behind the card */
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: blur(10px); /* Makes it a soft glow */
}

/* Hover State */
.competition-card:hover {
    border-color: var(--neon-mint);
    transform: translateY(-4px);
}

.competition-card:hover::after {
    opacity: 1; /* Reveals the glow on hover */
}