/* General container styles for trending sections */
.trending-cards-container {
    margin-top: 50px;
    margin-bottom: 50px;
}

.trending-section {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.trending-section h4 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #00aaff;
}

/* Flexbox wrapper for cards/commanders */
.cards-wrapper, .commander-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Card styles shared across sections */
.card, .commander-card {
    background-color: #333;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    width: 200px;
    text-align: center;
    transition: transform 0.3s ease;
}

.card:hover, .commander-card:hover {
    transform: translateY(-10px);
}

.card-name-emphasis, .commander-name-emphasis {
    font-weight: bold;
    background-image: linear-gradient(135deg, #a2e7ee 0%, #a2e7ee 33.33%, #7bc0e8 66.67%, #4196e0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.card img, .commander-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    border: 1px solid #a2e7ee;
    margin-bottom: 10px;
}

.card .card-info, .commander-info {
    padding: 15px;
}

.card .card-info h3, .commander-info h3 {
    font-size: 1.2em;
    margin: 10px 0;
    color: #00aaff;
}

.card .card-info p, .decks-count {
    font-size: 1em;
    margin: 5px 0;
    color: #bbb;
}

/* Button styles (commented out for now) */
/*
.card .card-info .buttons, .commander-info .buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.card .card-info .buttons button, .commander-info .buttons button {
    background-color: #00aaff;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    padding: 10px;
    font-size: 1em;
    transition: background-color 0.3s;
}

.card .card-info .buttons button:hover, .commander-info .buttons button:hover {
    background-color: #0088cc;
}
*/

/* Responsive design for both sections */
@media (max-width: 768px) {
    .cards-wrapper, .commander-container {
        flex-direction: column;
        align-items: center;
    }

    .card, .commander-card {
        width: 80%;
    }
    
        /* Hide the 5th card on small screens to maintain a clean layout */
    .user-card:nth-child(5) {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .card, .commander-card {
        width: 45%;
    }
}

@media (min-width: 1025px) {
    .card, .commander-card {
        width: 200px; /* Fix width for cards */
    }
}

/* ---- Top Users Section ---- */
.top-users-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

/* Ensure you have a wrapper for the user section */
#usersWrapper, #patreonWrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    justify-content: center; /* Center the grid content */
    gap: 20px;
    padding: 20px;
}

/* Style for each user card */
.user-card {
    text-align: center;
    color: white; /* Adjust color as needed */
}

/* Wrapper for profile image to create circle and shadow effect */
.profile-image-wrapper {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 100px; /* Adjust size as needed */
    height: 100px; /* Adjust size as needed */
    margin: 0 auto 10px; /* Center the image and add bottom margin */
}

/* Style for the profile image */
.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Style for the user info */
.user-info {
    text-align: center;
}

.user-info h3 {
    margin: 10px 0 5px;
    font-size: 1.2em;
    white-space: nowrap; /* Prevent text wrap */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ellipsis for long names */
}

.user-info p {
    margin: 0;
    font-size: 1em;
}

/* Style for the sub copy */
.sub-copy {
    text-align: center;
    margin-top: 20px;
    color: white;
    margin-bottom: 20px;
    padding: 0 20px;
}

.sub-copy a {
    color: #a2e7ee;
    text-decoration: underline;
}

.sub-copy a:hover {
    text-decoration: underline;
}

/* Responsive design adjustments */
@media (max-width: 600px) {
    #usersWrapper, #patreonWrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .user-card:nth-child(5) {
        grid-column: span 2;
        justify-self: center;
    }
}

/* Aligning user cards evenly */
@media (min-width: 601px) and (max-width: 1024px) {
    #usersWrapper, #patreonWrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1025px) {
    #usersWrapper, #patreonWrapper {
        grid-template-columns: repeat(5, 1fr);
    }
}