/* Circuit guide: one card per circuit, a venue still with its outline. */
.circuit-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 14px; }
.circuit-card { transition: transform 300ms var(--motion); }
.circuit-card:hover { transform: translateY(-5px); }
.circuit-card:hover .circuit-media { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--coral) 55%, transparent), 0 18px 40px rgb(0 0 0 / .45), 0 0 0 4px color-mix(in srgb, var(--coral) 10%, transparent); }
.circuit-card h3 { margin: 14px 4px 6px; font-size: 18px; }
.circuit-card p { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 4px; font: 600 13px/1.3 Jakarta; color: var(--muted); font-variant-numeric: tabular-nums; }
.circuit-card p span + span::before { content: '·'; margin-right: 12px; color: var(--subtle); }
.circuit-media { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rim); transition: box-shadow 300ms var(--motion); }
.circuit-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--motion), filter 300ms; }
.circuit-card:hover .circuit-media img { transform: scale(1.04); filter: brightness(1.08); }
.circuit-media svg { position: absolute; right: 10px; bottom: 10px; width: 64px; height: 64px; padding: 8px; border-radius: 14px; background: rgb(8 11 13 / .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.circuit-media path { fill: none; stroke: var(--coral); stroke-width: 7; stroke-linejoin: round; }
.circuit-media svg { transition: transform 400ms var(--motion); }
.circuit-card:hover .circuit-media svg { transform: scale(1.12); }
/* The outline draws itself in as the card arrives; the dot laps it on hover. */
.circuit-card.enter path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.circuit-card.is-in path { animation: draw 1.6s var(--motion) forwards; animation-delay: calc(var(--i, 0) * 70ms + 250ms); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.lap-dot { fill: var(--text); opacity: 0; transition: opacity 200ms; filter: drop-shadow(0 0 3px var(--coral)); }
.circuit-card:hover .lap-dot { opacity: 1; }
.circuit-media.is-outline { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #ffffff0d, transparent 70%), var(--surface); }
.circuit-media.is-outline svg { position: static; width: 46%; height: auto; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.circuit-media.is-outline path { stroke-width: 4; }

.notes-grid .more-card { transition: transform 300ms var(--motion), box-shadow 300ms; }
.notes-grid .more-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--coral) 40%, transparent); }
.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.finale-action { margin-top: 28px; }

@media (max-width: 1080px) {
  .circuit-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .notes-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .circuit-list { grid-template-columns: 1fr 1fr; }
}