/* BSB MECCA — CSS extracted from single-race.php (Session 4) */

/* block 0 */
html, body { background: #F5F3EE !important; }
.sr-wrap { max-width: 860px; margin: 0 auto; padding: 24px 16px 60px; background: #F5F3EE; color: #1A1A1A; font-family: 'DM Sans', sans-serif; min-height: 100vh; }
.sr-breadcrumb { font-family: 'DM Sans', sans-serif; font-size: 13px; color: #888888; margin-bottom: 16px; }
.sr-breadcrumb a { color: #444444; text-decoration: none; }
.sr-breadcrumb a:hover { color: #C8102E; }
.sr-breadcrumb span { margin: 0 6px; opacity: 0.4; }

.sr-header { border-left: 4px solid var(--sr-color, #C8102E); padding-left: 16px; margin-bottom: 28px; }
.sr-meta { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
           color: var(--sr-color, #C8102E); margin-bottom: 6px; }
.sr-title { font-family: 'Playfair Display', Georgia, serif; font-size: 32px; font-weight: 400;
            line-height: 1.1; color: #1A1A1A; margin: 0 0 6px; }
.sr-sub { font-family: 'DM Sans', sans-serif; font-size: 14px; color: #888888; }
.sr-recap { margin-top: 14px; padding: 14px 18px; background: transparent; border-left: 3px solid var(--sr-color, #C8102E); }
.sr-recap p { margin: 0; color: #444444; font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.6; }
.sr-recap a { color: #1A1A1A; text-decoration: none; border-bottom: 1px solid #CCCCCC; }
.sr-recap a:hover { color: var(--sr-color, #C8102E); border-bottom-color: currentColor; }

.sr-table-wrap { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #CCCCCC transparent; }
.sr-table-wrap::-webkit-scrollbar { height: 6px; }
.sr-table-wrap::-webkit-scrollbar-track { background: #F5F3EE; }
.sr-table-wrap::-webkit-scrollbar-thumb { background: #CCCCCC; }
table.sr-table { width: 100%; border-collapse: collapse; font-family: 'DM Sans', sans-serif; font-size: 14px; }
table.sr-table th { padding: 8px 10px; text-align: left; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
                    letter-spacing: 1px; text-transform: uppercase; color: #888888;
                    border-bottom: 2px solid #1A1A1A; white-space: nowrap;
                    background: #F5F3EE; }
table.sr-table td { padding: 9px 10px;
                    background-image: linear-gradient(to right, #1A1A1A 24%, transparent 0%);
                    background-size: 4px 1px; background-repeat: repeat-x; background-position: bottom;
                    color: #1A1A1A; vertical-align: middle; }
table.sr-table tr:last-child td { background-image: none; }
table.sr-table tr:hover td { background-color: rgba(217,80,10,0.04); }
.sr-pos { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 16px; width: 36px; }
.sr-p1 { color: #C8102E; }
.sr-p2 { color: #444444; }
.sr-p3 { color: #888888; }
.sr-num { color: #888888; font-size: 13px; width: 40px; }
.sr-rider { font-family: 'DM Sans', sans-serif; font-weight: 600; }
.sr-rider a { color: inherit; text-decoration: none; }
.sr-rider a:hover { color: var(--sr-color, #C8102E); }
.sr-flag { margin-right: 4px; font-size: 15px; }
.sr-nat { font-size: 11px; color: #888888; width: 40px; }
.sr-bike { font-size: 13px; color: #444444; }
.sr-time { font-size: 13px; color: #444444; font-variant-numeric: tabular-nums; }
.sr-pts { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; color: var(--sr-color, #C8102E); width: 40px; }

.sr-delta { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; width: 36px; text-align: center; font-variant-numeric: tabular-nums; }
.sr-delta-up { color: #10b981; }
.sr-delta-down { color: #ef4444; }
.sr-delta-flat { color: #888888; }
.sr-delta-col { width: 36px; text-align: center; }

.sr-source { margin-top: 20px; font-size: 12px; color: #888888; }
.sr-source a { color: #444444; }
.sr-session-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: #888888;
    margin-top: 4px;
}

/* RELATED RACES */
.sr-related { margin-top: 32px; padding-top: 24px; border-top: 2px solid #1A1A1A; }
.sr-related-title { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700; text-transform: uppercase; color: #1A1A1A; margin-bottom: 12px; letter-spacing: 0.5px; border-bottom: 2px solid #1A1A1A; padding-bottom: 8px; }
.sr-related-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-related-link { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid #CCCCCC; padding: 10px 14px; color: #1A1A1A; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; text-decoration: none; transition: all .12s; }
.sr-related-link:hover { background: rgba(217,80,10,0.04); border-color: #C8102E; color: #1A1A1A; text-decoration: none; }
.sr-related-arrow { font-size: 10px; color: var(--sr-color, #C8102E); font-weight: 800; flex-shrink: 0; }
.sr-related-label { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #888888; }
.sr-related-name { font-weight: 600; color: #1A1A1A; }
.sr-other-sessions { margin-top: 8px; }
.sr-other-sessions-title { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #888888; margin-bottom: 6px; }
.sr-other-sessions-list { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-other-link { display: inline-block; background: transparent; border: 1px solid #CCCCCC; padding: 6px 12px; color: #444444; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; text-decoration: none; transition: all .12s; }
.sr-other-link:hover { background: rgba(217,80,10,0.04); border-color: #C8102E; color: #1A1A1A; text-decoration: none; }

@media(max-width:600px){
    .sr-title { font-size: 24px; }
    .sr-wrap { padding: 16px 12px 48px; }
    table.sr-table { font-size: 13px; min-width: 400px; }
    table.sr-table th, table.sr-table td { padding: 7px 6px; }
    .sr-bike, .sr-nat { display: none; }
    /* Sticky pos + rider on mobile */
    .sr-pos, table.sr-table th:first-child { position: sticky; left: 0; z-index: 2; background: #F5F3EE; }
    .sr-rider, table.sr-table th:nth-child(3) { position: sticky; left: 36px; z-index: 2; background: #F5F3EE; border-right: 1px solid #CCCCCC; }
    table.sr-table th:first-child, table.sr-table th:nth-child(3) { background: #F5F3EE; z-index: 3; }
    .sr-num, table.sr-table th:nth-child(2) { display: none; }
    table.sr-table tr:hover .sr-pos,
    table.sr-table tr:hover .sr-rider { background: rgba(217,80,10,0.04); }
    .sr-related-grid { flex-direction: column; }
}