/* BSB MECCA — CSS extracted from page-social.php (Session 4) */

/* block 0 */
/* ── Remove dark body override ─────────────────────────────────────────── */
html, body { background: #F5F3EE !important; }

.sl-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px 4rem; font-family: 'DM Sans', -apple-system, system-ui, sans-serif; color: #1A1A1A; }

/* ── Article Hero (centred, per spec v4) ───────────────────────────────── */
.sl-hero { text-align: center !important; max-width: 48rem; margin: 0 auto; padding: 2rem 0 3rem; }
.sl-hero-section { font-family: 'Barlow Condensed', sans-serif; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid #1A1A1A; padding-bottom: 0.1rem; display: inline-block; margin-bottom: 0.75rem; }
.sl-hero-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.5rem, 4.5vw, 4rem); font-weight: 400; line-height: 1.0; letter-spacing: -0.046875rem; color: #1A1A1A; margin: 0.75rem 0 1rem; text-align: center !important; }
.sl-hero-dek { font-family: 'DM Sans', sans-serif; font-size: 1.125rem; font-style: italic; color: #444444; margin: 0 auto; line-height: 1.4; text-align: center; }

/* ── Platform tabs ─────────────────────────────────────────────────────── */
.sl-tabs { display: flex; gap: 0; margin-bottom: 0; border-bottom: 1px solid #1A1A1A; }
.sl-tab { padding: 0.75rem 1.25rem; border: none; background: none; color: #888888; font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: all .15s; position: relative; }
.sl-tab:hover { color: #1A1A1A; }
.sl-tab.active { color: #1A1A1A; }
.sl-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: #C8102E; }

/* ── Leaderboard table ─────────────────────────────────────────────────── */
.sl-table-wrap { overflow-x: auto; }
table.sl-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
table.sl-table th { padding: 0.75rem 0.75rem; text-align: left; font-family: 'DM Sans', sans-serif; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #888888; border-bottom: 1px solid #1A1A1A; white-space: nowrap; }
table.sl-table td { padding: 0.75rem 0.75rem; vertical-align: middle; background-image: linear-gradient(to right, #1A1A1A 24%, transparent 0%); background-position: bottom; background-size: 4px 1px; background-repeat: repeat-x; }
table.sl-table tr:last-child td { background-image: none; }
table.sl-table tr:hover td { background-color: rgba(0,0,0,0.015); }

.sl-rank { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.125rem; width: 36px; color: #888888; }
.sl-rank-1 { color: #C8102E; }
.sl-rank-2 { color: #444444; }
.sl-rank-3 { color: #888888; }

.sl-rider { display: flex; align-items: center; gap: 0.75rem; }
.sl-rider-photo { width: 36px !important; height: 36px !important; max-width: 36px !important; max-height: 36px !important; border-radius: 50%; object-fit: cover; background: #EFE9DC; flex-shrink: 0; filter: grayscale(1); transition: filter .3s; }
.sl-rider:hover .sl-rider-photo { filter: grayscale(0); }
.sl-rider-name { font-weight: 600; color: #1A1A1A; }
.sl-rider-name a { color: inherit; text-decoration: none; }
.sl-rider-name a:hover { color: #C8102E; }
.sl-handle { font-size: 0.6875rem; color: #888888; }

.sl-count { font-family: 'Barlow Condensed', sans-serif; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1rem; color: #1A1A1A; }

/* ── Score + Tier badges ───────────────────────────────────────────────── */
.sl-score { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1rem; color: #1A1A1A; }
.sl-tier { display: inline-block; width: 1.5rem; height: 1.5rem; text-align: center; line-height: 1.5rem; font-size: 0.6875rem; font-weight: 800; margin-left: 0.375rem; }
.sl-tier-S { background: #C8102E; color: #F5F3EE; }
.sl-tier-A { background: #1A1A1A; color: #F5F3EE; }
.sl-tier-B { background: #EFE9DC; color: #1A1A1A; }
.sl-tier-C { background: #F5F3EE; color: #888888; border: 1px solid #CCCCCC; }
.sl-tier-D { background: transparent; color: #CCCCCC; border: 1px solid #CCCCCC; }

/* ── Premium gate ──────────────────────────────────────────────────────── */
.sl-premium { position: relative; }
.sl-premium-blur { filter: blur(6px); pointer-events: none; user-select: none; }
.sl-premium-cta-wrap { margin-top: 2rem; text-align: center; }
.sl-premium-cta { display: inline-block; border: 2px solid #C8102E; padding: 2rem 3rem; text-align: center; max-width: 28rem; }
.sl-premium-badge { font-family: 'Barlow Condensed', sans-serif; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #C8102E; margin-bottom: 0.75rem; }
.sl-premium-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; font-weight: 400; color: #1A1A1A; margin-bottom: 0.5rem; }
.sl-premium-text { font-size: 0.875rem; color: #444444; line-height: 1.5; margin-bottom: 1.25rem; }
.sl-premium-btn { display: inline-block; background: #C8102E; color: #F5F3EE; padding: 0.625rem 1.75rem; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; transition: background .15s; }
.sl-premium-btn:hover { background: #B84008; color: #F5F3EE; text-decoration: none; }

.sl-platform-hidden { display: none; }

@media(max-width:768px) {
    .sl-hero-title { font-size: clamp(2rem, 7vw, 3rem); }
    .sl-tabs { overflow-x: auto; }
    .sl-tab { padding: 0.625rem 1rem; font-size: 0.75rem; white-space: nowrap; }
    table.sl-table { font-size: 0.8125rem; }
    table.sl-table th, table.sl-table td { padding: 0.5rem; }
    .sl-rider-photo { width: 28px; height: 28px; }
}