/* Circuits page styles (lean, builds on base.css) */

.hero-circuits {
  background: radial-gradient(1200px 400px at 20% 0%, rgba(0,212,255,0.08), transparent 60%),
              radial-gradient(1000px 400px at 80% 10%, rgba(230,57,70,0.08), transparent 60%),
              linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  padding: var(--space-24) 0 var(--space-12);
  position: relative;
}
.hero-inner {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); align-items: center;
}
.hero-content p { color: var(--color-text-secondary); }
.hero-search { display: flex; gap: var(--space-4); margin: var(--space-6) 0; flex-wrap: wrap; }
.hero-search .input { min-width: 260px; flex: 1; }
.hero-ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero-media img { border-radius: var(--radius-2xl); box-shadow: var(--shadow-2xl); border: 1px solid var(--color-neutral-800); }

@media (max-width: 992px) {
  .hero-inner { grid-template-columns: 1fr; }
}

.section { padding: var(--space-16) 0; }
.section-alt { background: var(--color-bg-secondary); }
.section-header { margin-bottom: var(--space-8); }
.section-header p { max-width: 70ch; }

.toc { position: sticky; top: 0; z-index: var(--z-sticky); background: rgba(10,10,10,0.9); backdrop-filter: blur(6px); border-top: 1px solid var(--color-neutral-800); border-bottom: 1px solid var(--color-neutral-800); }
.toc-list { display: flex; gap: var(--space-6); overflow-x: auto; padding: var(--space-3) 0; }
.toc-list a { color: var(--color-neutral-300); white-space: nowrap; }
.toc-list a:hover { color: var(--color-text-primary); }

.tracks-grid .card-media { margin: -var(--space-6) -var(--space-6) var(--space-4); overflow: hidden; }
.tracks-grid img { width: 100%; height: auto; display: block; }

.form-grid { display: grid; gap: var(--space-4); }
.form-actions { display: flex; gap: var(--space-4); align-items: center; }

.table-responsive { width: 100%; overflow-x: auto; }
.table-responsive table { width: 100%; }
.table-responsive th, .table-responsive td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--color-neutral-800); }

.comparison-form .comparison-actions { display: flex; align-items: end; gap: var(--space-4); }

/* Utility tweaks */
.mt-8 { margin-top: var(--space-8); }
.gap-6 { gap: var(--space-6); }

/* Focus ring for custom components inside cards */
.card .tour-launch:focus-visible,
.card a.btn:focus-visible { box-shadow: 0 0 0 4px rgba(0,212,255,0.15); }