/* Hero image (same behavior as leagues page, isolated here) */
.hero-banner {
    margin: 0;
}

    .hero-banner img {
        display: block;
        width: 100%;
        height: auto;
    }

/* Page spacing */
#join-public-challenges {
    margin: 62px 62px 0; /* keep site-wide margin; full-width section */
    padding: 0;
}

    /* Title + top-right actions */
    #join-public-challenges .header-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 16px;
    }

    #join-public-challenges .header-actions {
        white-space: nowrap;
    }

    /* ===== Use CSS GRID to guarantee 2x2 placement ===== */
    #join-public-challenges .public-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(320px, 520px)); /* two columns */
        gap: 24px;
        width: 100%;
        padding: 0 16px;
        justify-content: center; /* center the two columns in the full width */
    }

    /* Each card fills its grid cell and stretches to equal row height */
    #join-public-challenges .public-card {
        width: 100%;
        max-width: 520px;
    }

        #join-public-challenges .public-card .card {
            height: 100%;
        }

/* Responsive: collapse to one column */
@media (max-width: 992px) {
    #join-public-challenges {
        margin: 40px 24px 0;
    }

        #join-public-challenges .public-cards {
            grid-template-columns: minmax(280px, 1fr);
        }
}

@media (max-width: 768px) {
    #join-public-challenges .card-body .d-flex {
        gap: 12px;
    }

    #join-public-challenges {
        margin: 32px 16px 0;
    }
}