/* the public clubs list (/clubs) and a club's own page; the search and filters come from pros.css */

.bi-clubs-check {
    margin-top: 12px;
    font-size: 0.92rem;
}

.bi-clubs-map {
    height: 300px;
    margin-bottom: 18px;
    border: 1px solid var(--bi-border);
    border-radius: 14px;
    z-index: 0;
}

.bi-clubs-map.is-small {
    height: 260px;
}

.bi-clubs-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bi-clubs-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--bi-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--bi-shadow);
}

.bi-clubs-row-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.bi-clubs-row-icon {
    display: grid;
    flex: 0 0 42px;
    height: 42px;
    place-items: center;
    color: var(--bi-blue);
    border: 2px solid var(--bi-blue);
    border-radius: 9px;
    font-size: 1.2rem;
    transform: rotate(-6deg);
}

.bi-clubs-row h2 {
    margin: 0 0 2px;
    font-size: 1.15rem;
    font-weight: 700;
}

.bi-clubs-row h2 a {
    color: var(--bi-deep-navy);
    text-decoration: none;
}

.bi-clubs-row h2 a:hover {
    text-decoration: underline;
}

.bi-clubs-row-place {
    margin: 0;
    color: var(--bi-muted);
    font-size: 0.9rem;
}

.bi-clubs-row-place .bi {
    margin-right: 4px;
    color: var(--bi-blue);
}

.bi-clubs-next {
    display: grid;
    margin: 0 0 6px;
    line-height: 1.25;
}

.bi-clubs-next span {
    color: var(--bi-blue);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bi-clubs-next small {
    color: var(--bi-muted);
}

.bi-clubs-next.is-unknown {
    color: var(--bi-muted);
    font-size: 0.92rem;
}

.bi-clubs-days {
    display: flex;
    gap: 3px;
    margin: 0;
}

.bi-clubs-days span {
    width: 26px;
    padding: 2px 0;
    color: #b3c3d8;
    border-radius: 5px;
    background: #f3f7fc;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.bi-clubs-days span.is-on {
    color: #fff;
    background: var(--bi-navy);
}

.bi-clubs-faces {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: var(--bi-muted);
    text-decoration: none;
}

.bi-clubs-faces img,
.bi-clubs-faces span {
    width: 34px;
    height: 34px;
    margin-right: -8px;
    border: 2px solid #fff;
    border-radius: 50%;
    object-fit: cover;
}

.bi-clubs-faces span {
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: var(--bi-navy);
    font-size: 0.72rem;
    font-weight: 700;
}

.bi-clubs-faces small {
    flex-basis: 100%;
    margin-top: 4px;
}

.bi-clubs-row-links {
    display: grid;
    gap: 4px;
    justify-items: end;
    font-size: 0.9rem;
}

.bi-clubs-row-links .bi-secondary-button {
    margin-bottom: 4px;
}

/* a club's own page */

.bi-club-page .bi-account-eyebrow a {
    color: inherit;
}

.bi-club-hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    margin-top: 16px;
}

.bi-club-hero-link {
    color: #fff;
    font-weight: 700;
}

.bi-club-hero-link:hover {
    color: #d8ecff;
}

.bi-club-hero-meta {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
}

.bi-club-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.bi-club-grid .bi-panel {
    margin-bottom: 20px;
}

.bi-club-grid h2 {
    margin-bottom: 14px;
    font-size: 1.45rem;
}

.bi-club-sub {
    margin: 4px 0 8px;
    color: var(--bi-plum);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bi-club-upcoming {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.bi-club-upcoming li {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    background: linear-gradient(100deg, #e5f5ff, #edf8ff);
    font-size: 0.9rem;
}

.bi-club-date {
    color: var(--bi-deep-navy);
    font-weight: 700;
}

.bi-club-date small {
    margin-right: 5px;
    color: var(--bi-blue);
    font-weight: 700;
    text-transform: uppercase;
}

.bi-club-week {
    width: 100%;
    border-collapse: collapse;
}

.bi-club-week th,
.bi-club-week td {
    padding: 9px 10px;
    border-top: 1px solid #e3eef9;
    vertical-align: top;
}

.bi-club-week th {
    width: 120px;
    color: var(--bi-deep-navy);
}

.bi-club-time {
    white-space: nowrap;
    font-weight: 700;
}

.bi-club-notes {
    color: var(--bi-muted);
    font-size: 0.88rem;
}

.bi-club-caveat,
.bi-club-note {
    margin: 12px 0 0;
    color: var(--bi-muted);
    font-size: 0.88rem;
}

/* the homepage's pro cards, wrapping here rather than scrolling */
.bi-club-pro-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 80px;
    overflow: visible;
    margin-top: 0;
    margin-bottom: 14px;
}

.bi-club-nearby ul {
    display: grid;
    gap: 10px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.bi-club-nearby li {
    display: grid;
}

.bi-club-nearby li a {
    font-weight: 700;
}

.bi-club-nearby small {
    color: var(--bi-muted);
}

.bi-club-nearby-next {
    color: var(--bi-blue) !important;
}

.bi-club-yours {
    background: linear-gradient(135deg, #f3f9ff, #f7f2fb);
}

@media (max-width: 1100px) {
    .bi-clubs-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .bi-clubs-row-links {
        grid-auto-flow: column;
        justify-items: start;
        align-items: center;
        justify-content: start;
        gap: 14px;
    }

    .bi-clubs-row-links .bi-secondary-button {
        margin-bottom: 0;
    }
}

@media (max-width: 991.98px) {
    .bi-club-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bi-club-pro-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .bi-clubs-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .bi-club-pro-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}