/* f1gures - site-specific overrides for deployment (not prototype) */
html, body { margin: 0; padding: 0; background: var(--bg-1); min-height: 100%; }
body { font-family: var(--f-body, 'Barlow', system-ui, sans-serif); }
.f1-app { min-height: 100vh; }

/* Anchor versions of nav items keep the same look */
.nav-items a.nav-item, .nav-dropdown a, .botnav a.botnav-item { text-decoration: none; }
a { color: inherit; }

/* Replaces the <image-slot> custom element from the prototype */
.image-placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 6px, rgba(255,255,255,.04) 6px 12px),
    var(--bg-3);
  border: 1px solid var(--line-1);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 11px; color: var(--fg-4);
  letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
  padding: 20px;
}

/* Desktop / mobile chrome split */
.nav-desktop  { display: flex; }
.botnav-mobile { display: none; }
.topbar-mobile { display: none; }

@media (max-width: 720px) {
  .nav-desktop  { display: none; }
  .botnav-mobile { display: flex; }
  .topbar-mobile { display: flex; }
  .page { padding: 16px 14px 24px; }
  .page-title { font-size: 28px !important; }
}

.topbar-mobile {
  position: sticky; top: 0; z-index: 50;
  height: 48px; background: rgba(8, 8, 10, 0.95);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-1);
  align-items: center; padding: 0 14px; gap: 10px;
}
.topbar-mobile .topbar-logo { font-size: 18px; flex-shrink: 0; }
.topbar-mobile .nav-season { padding: 4px 10px; font-size: 11px; flex-shrink: 0; }

/* ──────────────────────────────────────────────────────────
   Additional utilities & responsive page-specific layouts
   needed for the deployed multi-page version (the prototype
   used inline styles for these things).
   ────────────────────────────────────────────────────────── */

.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-auto-card    { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-auto-circuit { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4, .grid-5,
  .grid-auto-card, .grid-auto-circuit { grid-template-columns: 1fr; }
  .grid-7 { grid-template-columns: repeat(2, 1fr); }
  .grid-driver-stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* HOME - hero (next race + sessions side-by-side on desktop) */
.hero-grid {
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.hero-title { font-size: 56px; margin-bottom: 6px; }
.hero-meta {
  display: flex; align-items: center; gap: 10px;
  color: var(--fg-2); margin-bottom: 16px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .hero-grid { padding: 16px; grid-template-columns: 1fr; gap: 20px; }
  .hero-title { font-size: 38px !important; }
}

/* RACE DETAIL - header */
.race-hero { padding: 20px; }
.race-hero-title { font-size: 44px; }
@media (max-width: 720px) {
  .race-hero { padding: 16px; }
  .race-hero-title { font-size: 30px !important; }
}

/* DRIVER PROFILE - header */
.driver-hero {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 20px;
  padding: 20px;
  align-items: center;
}
.driver-hero-name { font-size: 56px; }
.driver-hero-pos  { font-size: 64px; }
@media (max-width: 720px) {
  .driver-hero { grid-template-columns: 1fr; padding: 16px; }
  .driver-hero-name { font-size: 36px !important; }
  .driver-hero-pos  { font-size: 48px; }
  .driver-hero-right { text-align: left !important; }
}

/* CIRCUIT DETAIL - header */
.circuit-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
}
.circuit-title { font-size: 42px; margin-bottom: 8px; }
.circuit-map   { width: 100%; height: 280px; display: block; }
@media (max-width: 720px) {
  .circuit-hero { grid-template-columns: 1fr; }
  .circuit-title { font-size: 32px !important; }
  .circuit-map   { height: 200px; }
}

/* Recharts dark-theme overrides */
.recharts-cartesian-axis-tick text {
  fill: var(--fg-3) !important;
  font-family: var(--f-mono) !important;
  font-size: 11px !important;
}
.recharts-cartesian-grid line { stroke: var(--line-1) !important; }
.recharts-tooltip-wrapper { outline: none !important; }
.recharts-default-tooltip {
  background: var(--bg-3) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 0 !important;
  font-family: var(--f-mono) !important;
  font-size: 12px !important;
}
.recharts-tooltip-label {
  color: var(--fg-2) !important;
  font-family: var(--f-display) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}
.recharts-legend-item-text {
  color: var(--fg-2) !important;
  font-family: var(--f-display) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Mobile responsive overrides for SSR'd Astro islands.
   The home/calendar/circuits/standings screens use useIsMobile() to swap
   inline gridTemplateColumns between desktop and mobile, but Astro SSR
   has no `window` so prerender always emits the desktop grid. On real
   phones that's what gets shipped first - and stays visible until React
   hydrates (sometimes seconds on slow networks, never if JS fails). These
   selectors override the inline desktop grid styles below 720px so the
   prerendered HTML works on mobile without depending on hydration. */
@media (max-width: 720px) {
  .grid[style*="repeat(3,"],
  .grid[style*="repeat(5,"],
  .grid[style*="repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
  }
  .panel > div[style*="grid-template-columns:1fr 1fr"],
  .panel > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
    gap: 20px !important;
  }
  .t-display[style*="font-size:56px"],
  .t-display[style*="font-size: 56px"] {
    font-size: 38px !important;
  }
}

/* ─── Drivers / Teams listing pages ──────────────────────────── */
.listing-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.listing-controls input[type="search"],
.listing-controls select {
  padding: 6px 10px;
  border: 1px solid var(--line-1);
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--fg-1);
  font-size: 14px;
}
.listing-controls input[type="search"] { flex: 1; min-width: 160px; }
.sort-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.sort-btn {
  padding: 4px 10px;
  border: 1px solid var(--line-1);
  border-radius: 4px;
  background: none;
  color: var(--fg-2);
  font-size: 12px;
  cursor: pointer;
}
.sort-btn.active { border-color: var(--accent); color: var(--accent); }
.result-count { font-size: 12px; color: var(--fg-3); margin-bottom: 14px; }
.drivers-grid,
.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 720px) {
  .drivers-grid,
  .teams-grid { grid-template-columns: 1fr; }
}
.listing-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line-1);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.listing-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.listing-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.listing-driver-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.listing-driver-photo-fallback {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-3);
  flex-shrink: 0;
}
.listing-card-name { font-size: 15px; font-weight: 600; line-height: 1.2; }
.listing-card-sub { font-size: 12px; color: var(--fg-3); }
.listing-stats { display: flex; gap: 16px; font-size: 12px; }
.listing-stats .lbl { color: var(--fg-3); margin-right: 3px; }
.listing-stats .val { font-weight: 600; }
.listing-team-bar { width: 4px; border-radius: 2px; align-self: stretch; flex-shrink: 0; }
.pagination {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 32px;
}
.page-btn {
  padding: 5px 11px;
  border: 1px solid var(--line-1);
  border-radius: 4px;
  background: none;
  color: var(--fg-2);
  font-size: 13px;
  cursor: pointer;
}
.page-btn.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.page-btn:disabled { opacity: 0.4; cursor: default; }