/* ============================================================
   BSB MECCA — CSS extracted from page-circuits.php
   Externalized Session 4 (2026-04-21) for caching across page views.
   ============================================================ */

/* --- block 0 from page-circuits.php --- */
/* Design System v4 — editorial newspaper */
html, body { background: #F5F3EE !important; }

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

/* Hero */
.ci-hero { text-align: center; max-width: 48rem; margin: 0 auto; padding: 2rem 0 2.5rem; }
.ci-kicker { font-family: 'Barlow Condensed', sans-serif; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #C8102E; }
.ci-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.25rem, 4.5vw, 4rem); font-weight: 400; line-height: 1.02; letter-spacing: -0.046875rem; color: #1A1A1A; margin: 0.75rem 0 1rem; }
.ci-dek { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.125rem; color: #444; margin: 0; line-height: 1.4; }

/* ────────────────────────────────────────────
   Iconic Tracks (featured)
   ──────────────────────────────────────────── */
.ci-featured { margin-bottom: 3.5rem; }
.ci-section-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #1A1A1A; margin-bottom: 24px; }
.ci-section-head h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0; color: #1A1A1A; }
.ci-section-aside { font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #888; }

.ci-featured-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.ci-fcard { display: flex; flex-direction: column; text-decoration: none !important; color: #1A1A1A; }
.ci-fcard-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #EFE9DC; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; }
.ci-fcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s; }
.ci-fcard-img .ci-img-gray  { filter: grayscale(1); mix-blend-mode: multiply; }
.ci-fcard-img .ci-img-color { opacity: 0; }
.ci-fcard:hover .ci-fcard-img .ci-img-color { opacity: 1; }
.ci-fcard-flag { font-size: 3.5rem; opacity: 0.45; }
.ci-fcard-country { font-family: 'Barlow Condensed', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #888; }
.ci-fcard-name { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 400; line-height: 1.1; color: #1A1A1A; margin: 4px 0 6px; transition: color .15s; }
.ci-fcard:hover .ci-fcard-name { color: #C8102E; }
.ci-fcard-meta { font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; color: #444; line-height: 1.4; }
.ci-fcard-stat { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; }
.ci-fcard-stat-num { font-family: 'Barlow Condensed', sans-serif; font-size: 1.75rem; font-weight: 800; color: #C8102E; line-height: 1; }
.ci-fcard-stat-lbl { font-family: 'DM Sans', sans-serif; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #888; }

@media (max-width: 900px) { .ci-featured-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ci-featured-grid { grid-template-columns: 1fr; } }

/* ────────────────────────────────────────────
   All Circuits section
   ──────────────────────────────────────────── */
.ci-all { }

/* Championship tabs */
.ci-tabs { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 20px; border-bottom: 1px solid #CCC; padding-bottom: 2px; }
.ci-tab {
    font-family: 'Barlow Condensed', sans-serif; font-size: 0.9375rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: #666;
    background: none; border: none; cursor: pointer;
    padding: 10px 2px; position: relative; transition: color .15s;
}
.ci-tab:hover { color: #C8102E; }
.ci-tab.active { color: #1A1A1A; }
.ci-tab.active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px; background: #C8102E;
}
.ci-tab-count { display: inline-block; margin-left: 6px; font-size: 0.75rem; color: #AAA; font-family: 'DM Sans',sans-serif; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ci-tab.active .ci-tab-count { color: #C8102E; }

/* Filter row */
.ci-filters { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.ci-filters input[type="text"], .ci-filters select {
    background: #fff; border: 1px solid #CCC; color: #1A1A1A;
    padding: 0.5rem 0.75rem; font: 0.875rem/1.4 'DM Sans',sans-serif; outline: none;
}
.ci-filters input[type="text"] { min-width: 220px; flex: 1; max-width: 340px; }
.ci-filters select { min-width: 160px; }
.ci-filters input:focus, .ci-filters select:focus { border-color: #C8102E; }
.ci-count { margin-left: auto; color: #888; font-family: 'Barlow Condensed',sans-serif; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }

/* A-Z nav */
.ci-letter-nav { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px dotted #888; }
.ci-letter-btn {
    font-family: 'Barlow Condensed',sans-serif; font-size: 0.875rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; background: none; border: none;
    color: #666; cursor: pointer; padding: 4px 9px; transition: color .15s;
}
.ci-letter-btn:hover { color: #C8102E; }
.ci-letter-btn.active { color: #C8102E; border-bottom: 2px solid #C8102E; }
.ci-letter-btn.disabled { color: #CCC; pointer-events: none; }

/* Card grid */
.ci-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 32px; }
@media (max-width: 900px) { .ci-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; } }
@media (max-width: 560px) { .ci-grid { grid-template-columns: 1fr; gap: 24px; } }

.ci-card { display: flex; flex-direction: column; text-decoration: none !important; color: #1A1A1A; }
.ci-card--hidden   { display: none; }
.ci-card--filtered { display: none !important; }

.ci-card-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #EFE9DC; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; }
.ci-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s; }
.ci-card-img .ci-img-gray  { filter: grayscale(1); mix-blend-mode: multiply; }
.ci-card-img .ci-img-color { opacity: 0; }
.ci-card:hover .ci-card-img .ci-img-color { opacity: 1; }
.ci-card-flag { font-size: 2.75rem; opacity: 0.4; }

.ci-card-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.ci-card-country { font-family: 'Barlow Condensed',sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #888; }
.ci-card-races   { font-family: 'Barlow Condensed',sans-serif; font-size: 0.8125rem; font-weight: 700; color: #888; white-space: nowrap; letter-spacing: 0.04em; }

.ci-card-name { font-family: 'Playfair Display',serif; font-size: 1.3125rem; font-weight: 400; line-height: 1.2; color: #1A1A1A; margin: 0 0 6px; transition: color .15s; }
.ci-card:hover .ci-card-name { color: #C8102E; }
.ci-card-meta { font-family: 'DM Sans',sans-serif; font-size: 0.8125rem; color: #666; line-height: 1.5; }

/* Load more */
.ci-loadmore-wrap { text-align: center; margin-top: 2.5rem; }
.ci-loadmore {
    font-family: 'Barlow Condensed',sans-serif; font-size: 0.875rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: #C8102E;
    background: none; border: 1px solid #C8102E; padding: 12px 32px; cursor: pointer;
    transition: background .15s, color .15s;
}
.ci-loadmore:hover { background: #C8102E; color: #F5F3EE; }
.ci-showing { margin-top: 12px; font-family: 'DM Sans',sans-serif; font-size: 0.75rem; color: #888; }

.ci-empty { padding: 2.5rem; text-align: center; font-family: 'Playfair Display',serif; font-style: italic; color: #888; }

@media (max-width: 560px) {
    .ci-filters input[type="text"], .ci-filters select { flex: 1 1 100%; max-width: none; min-width: 0; }
    .ci-count { margin-left: 0; width: 100%; }
}