.cl-dir{position:relative;padding:clamp(72px,9vw,120px) 0;background:linear-gradient(180deg,#0a0c10,#0d0f14)}
.cl-dir-head{margin-bottom:28px}
.cl-sports{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 14px;margin-bottom:18px;scrollbar-width:thin;scroll-snap-type:x proximity;mask-image:linear-gradient(90deg,#000 92%,transparent)}
.cl-sport{flex:0 0 auto;scroll-snap-align:start;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:4px 16px 4px 4px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:var(--text-2);font:700 13px var(--f-ui);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,background .3s,color .3s}
.cl-sport .cl-glyph{width:42px;height:42px;font-size:15px;color:var(--text-2)}
.cl-sport:hover{border-color:rgba(255,255,255,.2);color:var(--text)}
.cl-sport.is-on{border-color:rgba(184,140,255,.55);background:rgba(184,140,255,.06);color:var(--text)}
.cl-sport.is-on .cl-glyph{color:#d8c2ff}
.cl-filter{display:grid;grid-template-columns:repeat(3,1fr) 1.3fr auto;gap:12px;align-items:end;padding:18px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.10)}
.cl-filter label{display:grid;gap:6px;min-width:0}
.cl-filter label span{font:700 11px var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cl-filter select,.cl-filter input{width:100%;height:48px;padding:0 14px;border-radius:10px;background:#0c1422;border:1px solid rgba(255,255,255,.12);color:var(--text);font:500 15px var(--f-body);outline:0;transition:border-color .25s}
.cl-filter select:focus,.cl-filter input:focus{border-color:rgba(208,250,0,.6)}
.cl-filter-go{height:48px;justify-content:center}
.cl-results{position:relative;margin-top:26px}
.cl-results-bar{display:none}
.cl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cl-card{position:relative;display:flex;gap:14px;padding:18px;border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.09);transition:border-color .35s,transform .5s var(--ease-out)}
.cl-card:hover{border-color:rgba(184,140,255,.45);transform:translateY(-3px)}
.cl-card[hidden]{display:none}
.cl-card-mono{flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);font:800 16px var(--f-display);color:var(--text);letter-spacing:.04em}
.cl-card-body{flex:1;min-width:0}
.cl-card h3{margin:2px 0 4px;font:700 17px/1.25 var(--f-body)}
.cl-card-body>p{margin:0 0 12px;color:var(--muted);font-size:13px}
.cl-card-body>p i{color:var(--muted);margin-right:4px}
.cl-card dl{display:flex;gap:22px;margin:0}
.cl-card dt{font:700 10px var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:#7f879c}
.cl-card dd{margin:2px 0 0;font:600 14px var(--f-body)}
.cl-card dd i{color:var(--text-2);margin-right:4px}
.cl-card-view{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.22);color:var(--text);font:800 12px var(--f-ui);letter-spacing:.12em;text-transform:uppercase;transition:background .25s}
.cl-card-view:hover{background:rgba(255,255,255,.08)}
.cl-card-locked{filter:blur(5px);opacity:.45;pointer-events:none;user-select:none}
.arena-anim .cl-card{opacity:0;transform:translateY(24px)}
.arena-anim .cl-grid.is-in .cl-card{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--k)*55ms)}
.arena-anim .cl-grid.is-in .cl-card-locked{opacity:.45}
.cl-lock{position:relative;margin:-190px auto 0;max-width:460px;text-align:center;padding:30px 24px;border-radius:18px;background:rgba(6,13,23,.86);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);z-index:2}
.cl-lock h3{margin:14px 0 6px;font:800 22px var(--f-display);letter-spacing:.14em;text-transform:uppercase}
.cl-lock p{margin:0 0 18px;color:var(--text-2)}
.cl-lock-ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cl-empty{text-align:center;color:var(--muted);padding:24px}
.cl-pager{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:40px;color:var(--muted);font-size:14px}
.cl-pager p{margin:0}
.cl-pager div{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cl-pager a{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,255,255,.1);color:var(--text-2);font:700 14px var(--f-ui);grid-auto-flow:column;gap:6px}
.cl-pager a.is-on{border-color:rgba(184,140,255,.6);color:#fff}
@media (max-width:1023px){.cl-filter{grid-template-columns:1fr 1fr}.cl-filter-go{grid-column:span 2}.cl-grid{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.cl-filter{grid-template-columns:1fr;padding:14px}.cl-filter-go{grid-column:auto}.cl-grid{grid-template-columns:1fr}.cl-card{padding:16px 16px 68px}.cl-card-locked:nth-child(n+9){display:none}.cl-lock{margin-top:-200px}.cl-pager{justify-content:center;text-align:center}.cl-pager div{justify-content:center}}

.cl-empty a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
/* promo cards (from city-v3 aside.cv-promo, toned down) */
.cl-promos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.cv-promo{padding:24px 24px 22px;border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(13,15,20,.95) 60%);border:1px solid rgba(255,255,255,.12);position:relative;overflow:hidden}
.cv-promo-alt{border-color:rgba(184,140,255,.28)}
.cv-promo-k{font:700 11px var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:#b88cff;margin:0 0 8px}
.cv-promo h3{font:800 26px/1.05 var(--f-display);text-transform:uppercase;color:#fff;margin:0 0 12px}
.cv-promo p{color:#c7cdd8;margin:0 0 16px}
.cv-promo ul{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px}
.cv-promo li{color:#dfe3ea;padding-left:24px;position:relative}
.cv-promo li::before{content:"\2713";position:absolute;left:0;color:#d0fa00;font-weight:800}
.cv-promo-btn{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:999px;background:#d0fa00;color:#0b0f13;font:800 15px var(--f-body);text-decoration:none;position:relative;z-index:1}
.cv-promo-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.cv-promo-link{display:inline-flex;align-items:center;min-height:46px;margin-left:14px;color:var(--text-2);font:600 14px var(--f-body);text-decoration:underline;text-underline-offset:3px;position:relative;z-index:1}
@media (max-width:767px){.cl-promos{grid-template-columns:1fr}}

/* CU-02: organisation type badge (College | University) on a directory card. */
.cl-card-kind{display:inline-block;margin-left:.5rem;padding:.1rem .5rem;border-radius:999px;font:600 .72rem/1.4 "Barlow",sans-serif;letter-spacing:.04em;text-transform:uppercase;background:rgba(208,250,0,.16);color:inherit;vertical-align:middle}