/* *** ADD TO assets/css/styles.css - Organizer Badge Styles *** */

.organizer-badge {
    background: linear-gradient(135deg, var(--accent-warm), #ff8c00);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    margin-top: var(--spacing-xs);
    text-align: center;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
    animation: organizerGlow 2s ease-in-out infinite alternate;
}

@keyframes organizerGlow {
    from { box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3); }
    to { box-shadow: 0 4px 12px rgba(245, 158, 11, 0.6); }
}

/* Participant card modifications for organizer */
.participant-card:has(.organizer-badge) {
    border: 2px solid var(--accent-warm);
    background: linear-gradient(135deg, var(--glass-bg), rgba(245, 158, 11, 0.05));
}

.participant-card:has(.organizer-badge):hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
}


/* ===========================
   ORGANIZER GRID - Always 2 columns horizontally
   =========================== */
.organizers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* Always 2 columns */
    gap: var(--spacing-md);
    justify-content: center;
    max-width: 400px;  /* Limit width to keep them centered */
    margin: 0 auto;
}

/* ===========================
   PARTICIPANTS GRID - Responsive Layout
   =========================== */
.participants-grid {
    display: grid;
    gap: var(--spacing-md);
    justify-content: center;
    max-width: 800px;
    margin: 0 auto;
    
    /* Default: Try to fit all in one row */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* ===========================
   RESPONSIVE BREAKPOINTS FOR PARTICIPANTS
   =========================== */

/* Large screens: 1 row of 6 (if 6 participants) */
@media (min-width: 1024px) {
    .participants-grid {
        grid-template-columns: repeat(6, 1fr);
        max-width: 900px;
    }
}

/* Medium screens: 3 rows of 2 */
@media (max-width: 1023px) and (min-width: 768px) {
    .participants-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 400px;
    }
}

/* Small screens: 2 rows of 3 */
@media (max-width: 767px) and (min-width: 480px) {
    .participants-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 450px;
    }
    
    .organizers-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 300px;
    }
}

/* Very small screens: Stack vertically */
@media (max-width: 479px) {
    .participants-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 300px;
    }
    
    .organizers-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 280px;
    }
}

/* ===========================
   ALTERNATIVE: Dynamic Grid (if you prefer automatic sizing)
   =========================== */
.participants-grid.auto-size {
    /* This will automatically create equal-sized rows */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    
    /* Force specific layouts based on number of items */
    &:has(.participant-card:nth-child(6):last-child) {
        /* If exactly 6 items, prefer 3x2 or 2x3 layout */
        grid-template-columns: repeat(3, 1fr);
        max-width: 500px;
    }
    
    &:has(.participant-card:nth-child(4):last-child) {
        /* If exactly 4 items, use 2x2 layout */
        grid-template-columns: repeat(2, 1fr);
        max-width: 350px;
    }
}

/* ===========================
   CONTAINER ADJUSTMENTS
   =========================== */
.participants-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.organizers-section,
.participants-section {
    margin-bottom: var(--spacing-xl);
}

.organizers-section:last-child,
.participants-section:last-child {
    margin-bottom: 0;
}