/* Circuit cards (apexguide.py circuit_cards): the landing page, /circuits, /trackdays and /sim-racing. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); display: grid; min-width: 0; }
.card.live { grid-column: 1 / -1; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); text-decoration: none; transition: border-color .2s; }
.card.live:hover { border-color: rgba(245,196,0,.6); }
/* the whole card opens the lap; the buttons sit above that link so "More info" can go elsewhere */
.card.live { position: relative; }
.card.live > a.cover { position: absolute; inset: 0; z-index: 0; }
.card.live .go a, .card.live h3 a { position: relative; z-index: 1; }
.card.live h3 a { color: inherit; text-decoration: none; }
.card.live h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.card.live .art { background: var(--surface-2); display: grid; place-items: center; padding: 20px; border-right: 1px solid var(--line); }
/* photo from the circuit's "More info" article, darkened under the track map */
.card.live .art { position: relative; overflow: hidden; pointer-events: none; }
.card.live .art .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.card.live .art .photo.on { opacity: 1; }
.card.live .art .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,16,19,.55), rgba(13,16,19,.72)); opacity: 0; transition: opacity .5s; }
.card.live .art .photo.on + .shade { opacity: 1; }
.card.live .art svg { position: relative; z-index: 1; }
.card.live .art svg { width: 100%; max-width: 240px; aspect-ratio: 1 / 1; overflow: visible; }
.card.live .art .tarmac { fill: none; stroke: #39424a; stroke-width: 5; stroke-linejoin: round; }
.card.live .art .trail { fill: none; stroke: var(--flag); stroke-width: 1.3; stroke-linejoin: round; }
.card.live .body { padding: 22px 24px; display: grid; gap: 14px; align-content: start; }
.chip { display: inline-flex; align-items: center; gap: 6px; width: max-content; font-family: var(--display); font-stretch: 90%; font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; }
.chip.ready { background: var(--throttle); color: var(--ink); }
.chip.ready::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.chip.soon { border: 1px solid var(--line); color: var(--muted); }
.card.live .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.layouts { border: 1px solid rgba(245,196,0,.6); color: var(--flag); }
.card h3 { margin: 0; font-family: var(--display); font-stretch: 75%; font-weight: 900; font-style: italic; text-transform: uppercase; line-height: .95; }
.card.live h3 { font-size: 40px; }
.card.live h3 span { color: var(--flag); }
.card .where { color: var(--muted); font-size: 15px; margin-top: -8px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.stats div { display: grid; gap: 2px; }
.stats dt { order: 2; }
.stats dd { margin: 0; font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.card .blurb { margin: 0; max-width: 62ch; color: var(--text); opacity: .86; }
.card .go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.card .go .size { color: var(--muted); font-size: 14px; }
/* Catalog circuit cards, as in the iPhone app: the photo fills the card, chips top left, outline top right,
   name, stats and buttons on an ink fade at the bottom. Two per row; the round + button swaps the stats for the blurb.
   Scoped to #grid because the track days page reuses this markup with its own layout. */
#grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#grid .card.live { grid-column: auto; grid-template-columns: none; display: flex; flex-direction: column; justify-content: flex-end; min-height: 440px; overflow: hidden; isolation: isolate; }
#grid .card.live .art { position: absolute; inset: 0; z-index: -1; padding: 0; border: 0; display: block; }
#grid .card.live .art .shade { background: linear-gradient(180deg, rgba(13,16,19,.15), rgba(13,16,19,.3) 30%, rgba(13,16,19,.85) 62%, rgba(13,16,19,.97)); }
#grid .card.live .art svg { position: absolute; top: 8px; right: 8px; width: 112px; max-width: none; }
#grid .card.live .art .tarmac { stroke: rgba(13,16,19,.6); }
#grid .card.live .chips { position: absolute; top: 14px; left: 16px; right: 128px; }
#grid .card.live .body { padding: 18px 20px 20px; gap: 12px; }
#grid .card.live h3 { font-size: 34px; }
#grid .card.live .stats dd { font-size: 20px; }
#grid .card.live .go { flex-wrap: nowrap; gap: 10px; }
#grid .card.live .go .btn { padding: 11px 14px; font-size: 13px; }
#grid .card.live .go .btn.primary { flex: 1; justify-content: center; }
#grid .card.live .info { position: relative; z-index: 1; margin-left: auto; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: rgba(13,16,19,.5); color: var(--text); display: grid; place-items: center; padding: 0; cursor: pointer; }
#grid .card.live .info svg { width: 16px; height: 16px; transition: transform .2s; }
#grid .card.live .info[aria-expanded="true"] svg { transform: rotate(45deg); }
#grid .card.live .info:hover, #grid .card.live .info[aria-expanded="true"] { border-color: var(--flag); color: var(--flag); }
#grid .card.live .more { display: grid; gap: 10px; }
#grid .card.live .more[hidden] { display: none; }
#grid .card.live .more .size { color: var(--muted); font-size: 14px; }
#grid .card.live.open .stats { display: none; }
@media (max-width: 860px) {
  .card.live { grid-template-columns: 1fr; }
  .card.live .art { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px; }
  .card.live .art svg { max-width: 200px; }
  #grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .card.live h3 { font-size: 34px; }
  .card.live .body { padding: 18px 16px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #grid .card.live .go { gap: 8px; }
  #grid .card.live .go .btn { padding: 10px; font-size: 11.5px; gap: 6px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .card.live { transition: none; } }