/* ═══════════════════════════════════════════════════════════════════════════
   CLUBS & ORGANISATIONS — the public index

   ═══════════════════════════════════════════════════════════════════════════ */
body { overflow-x: clip; }

/* ── Hero ── */
.ot-hero__bg { position:absolute; inset:-15%; background-size:cover; background-position:center; background-repeat:no-repeat; transform:scale(1.04); transition:transform 8s ease-out; will-change:transform; }
.ot-hero__bg.ready { transform:scale(1); }

/* ── Filter bar ── */
.filter-bar { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.filter-bar__label { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-4); margin-right:.25rem; white-space:nowrap; }
.filter-pill { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; padding: .36rem .85rem .24rem; border-radius:100px; color:var(--ink-3); background: var(--emerald-xdim); transition:color .2s,background .2s; white-space:nowrap; }
.filter-pill:hover { color:var(--emerald); background:var(--emerald-dim); }
.filter-pill.active { background:var(--emerald-dim); color:var(--emerald); }

/* ── Club grid ── */
.club-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.5rem; margin-top:2rem; }

/* ── Club card ── */
.club-card {
    display:flex; flex-direction:column;
    background:var(--bg-card); border:1px solid transparent;
    border-radius:var(--radius-lg); overflow:hidden; text-decoration:none;
    transition:border-color .25s, transform .25s, box-shadow .25s;
}
.club-card:hover { transform:translateY(-4px); box-shadow:0 16px 44px rgba(0,0,0,.4); }
.club-card__head {
    position:relative; background:var(--bg-3);
    padding:1.5rem 1.25rem 1rem;
    display:flex; align-items:center; gap:1rem;
}
.club-card__logo {
    width:56px; height:56px; border-radius:var(--radius); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    color:var(--emerald); font-size:1.4rem; overflow:hidden;
}
.club-card__logo img { width:100%; height:100%; object-fit:contain; display:block; }
.club-card__info { flex:1; min-width:0; }
.club-card__name { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:.2rem; transition:color .2s; }
.club-card:hover .club-card__name { color:var(--emerald-lt); }
.club-card__type { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--emerald); }
.club-card__member-badge {
    position:absolute; top:.75rem; right:.75rem;
    font-family:var(--font-mono); font-size:.52rem; letter-spacing:.1em; text-transform:uppercase;
    padding:.2rem .6rem; border-radius:100px;
    border:1px solid var(--emerald-rule); color:var(--emerald); background:var(--emerald-dim);
}
.club-card__body { padding:1rem 1.25rem; flex:1; }
.club-card__summary { font-size:.82rem; color:var(--ink-3); line-height:1.7; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.club-card__footer { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.25rem; background:var(--bg-2); }
.club-card__cta { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--emerald); display:flex; align-items:center; gap:.35rem; }
.club-card__location { font-family:var(--font-mono); font-size:.58rem; color:var(--ink-4); display:flex; align-items:center; gap:.3rem; }

/* ── Empty state ── */
.clubs-empty { text-align:center; padding:5rem 1rem; font-family:var(--font-mono); color:var(--ink-4); }
.clubs-empty i { font-size:2.5rem; margin-bottom:1rem; display:block; }
.clubs-empty p { font-size:.75rem; letter-spacing:.08em; }

/* ── Breadcrumb ── */
.art-breadcrumb { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); margin-bottom:1.25rem; }
.art-breadcrumb a { color:var(--ink-3); text-decoration:none; transition:color .15s; }
.art-breadcrumb a:hover { color:var(--emerald); }
.art-breadcrumb__sep { color:var(--ink-4); }

/* ── The heading above the grid ── */
.clubs-head { border-bottom: 1px solid var(--rule); }
.clubs-head__eyebrow {
    font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--emerald); margin-bottom: .35rem;
}
.clubs-head__count {
    font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em;
    color: var(--ink); margin: 0;
}
/* ── The signpost back to /community/ ──
   The same shape as .comm-join on the Community page, so the two pages point at
   each other with one component. */
.clubs-community {
    display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
    margin-top: 2rem; padding: 1.25rem 1.5rem;
    background: var(--bg-2); border-radius: var(--radius-lg);
}
.clubs-community__text {
    flex: 1; min-width: 220px; margin: 0;
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
    color: var(--ink-2);
}
.clubs-community__text i { color: var(--emerald); flex-shrink: 0; }
/* --emerald measures 4.04:1 on the ivory ground; --emerald-drk gives 7.30. */
html[data-theme="light"] .clubs-community__text i { color: var(--emerald-drk); }

/* .btn-ghost's --ink-2 label composites to 4.43:1 on this --bg-2 strip in light
   theme. --ink, as .ot-hero .btn-ghost already does; hover is untouched. */
html[data-theme="light"] .clubs-community .btn-ghost:not(:hover) { color: var(--ink); }