/* Clubprofiel */

.club-head {
    padding-bottom: 8px;
}

.club-head__top {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.club-head__logo {
    width: 88px;
    height: 88px;
    flex: none;
    font-size: 9px;
}

.club-head__body {
    flex: 1 1 auto;
    min-width: 0;
}

.club-head__name {
    font-size: clamp(30px, 3.6vw, 36px);
    margin-bottom: 10px;
}

.club-head__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.club-head__chip {
    display: inline-flex;
    font-family: var(--narrow);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--radius);
    padding: 5px 9px;
}

.club-head__action {
    flex: none;
}

.club-head__description {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-body);
    max-width: 70ch;
    text-wrap: pretty;
}

/* ------------------------------------------------------------------ */
/* Twee kolommen: de lichtingen naast de artikelen                     */
/* ------------------------------------------------------------------ */

.club-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 48px;
    padding-top: 32px;
    padding-bottom: 56px;
}

/* ------------------------------------------------------------------ */
/* Selectie                                                            */
/* ------------------------------------------------------------------ */

.squad {
    display: flex;
    flex-direction: column;
}

.squad-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    transition: background var(--transition);
}

.squad-row:hover {
    background: var(--row-hover);
    color: var(--ink);
}

.squad-row__body {
    min-width: 0;
}

.squad-row__name {
    display: block;
    font-weight: 600;
    font-size: 14.5px;
}

.squad-row__meta {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

.squad-row__tag {
    font-family: var(--narrow);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Rechterkolom                                                        */
/* ------------------------------------------------------------------ */

.club-aside {
    min-width: 0;
}

/* De lucht hoort tússen de blokken, niet erboven: de eerste kop in deze kolom
   moet gelijk lopen met "Lichtingen" links. */
.club-aside > * + * {
    margin-top: 40px;
}

.club-articles {
    display: flex;
    flex-direction: column;
}

.club-article {
    padding: 11px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    transition: background var(--transition);
}

.club-article:hover {
    background: var(--row-hover);
    color: var(--ink);
}

.club-article__title {
    display: block;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
}

.club-article__date {
    display: block;
    font-size: 12px;
    color: var(--text-faint);
    margin-top: 3px;
}

/* ------------------------------------------------------------------ */
/* Mobiel                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 860px) {
    .club-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .club-head__top {
        flex-wrap: wrap;
        gap: 16px;
    }

    .club-head__logo {
        width: 64px;
        height: 64px;
    }

    .club-head__action {
        width: 100%;
    }
}

.club-head__action .follow,
.club-head__action .follow__btn { width: 100%; justify-content: center; }