/* Shared primitives - anything used by two or more pages.
   Editing this file affects the whole site, so say so in the PR. Page-only rules belong in
   pages/<page>.css instead. Grouped: section, cards, buttons, stats, badges, facts,
   dot list, utilities. */

/* ---------- Section rhythm ---------- */
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-alt { background-color: var(--surface); border-top: 1px solid var(--border); }

[id] { scroll-margin-top: 5.5rem; }
.section-title { font-size: clamp(1.7rem, 4.2vw, 2.3rem); letter-spacing: -.015em; color: var(--ink); }
/* A heading below a .section-title, inside the same section. No speedbar rule - one per section. */
.section-subtitle { margin-top: 2.75rem; font-size: 1.4rem; letter-spacing: -.01em; color: var(--ink); }
/* The speedbar motif, reused as a title rule so every section header carries the brand.
   Two solid bands, no white gap - a light band would vanish against the light theme's bg. */
.section-title::after, .carousel-title::after {
    content: ""; display: block; width: 3.5rem; height: 5px; margin-top: .85rem;
    background: linear-gradient(90deg, var(--blue) 0 50%, var(--red) 50%);
    transform: skewX(-18deg); transform-origin: left;
}
.section-lede { margin: 1rem 0 0; max-width: 44rem; color: var(--muted); }

.section-more { margin: 1.75rem 0 0; font-family: var(--font-display); font-weight: 600; }
.section-more a { color: var(--blue); border-bottom: 2px solid var(--blue); padding-bottom: 2px; }
.section-more a:hover { color: var(--red); border-color: var(--red); }
.section-body { margin: 1.25rem 0 0; max-width: 46rem; color: var(--ink-soft); text-wrap: pretty; }
.footnote { margin: 1.5rem 0 0; max-width: 46rem; font-size: .82rem; color: var(--muted); text-wrap: pretty; }

/* ---------- Cards ---------- */
.card-grid { margin-top: 2.25rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.card { border: 1px solid var(--border); border-radius: .85rem; background-color: var(--surface); padding: 1.2rem; box-shadow: var(--shadow); }
.card-dark { background-color: var(--surface-2); }
.card h3 { margin-top: .5rem; color: var(--ink); font-size: 1rem; }
.card-note { margin: .7rem 0 0; font-size: .85rem; color: var(--ink-soft); }
.card-note strong { font-family: var(--font-display); color: var(--ink); }
.empty { margin-top: 2.25rem; border: 1px dashed var(--border); border-radius: .85rem; background-color: var(--surface); padding: 1.5rem; color: var(--muted); }

/* ---------- Buttons ---------- */
.cta-row { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .875rem; justify-content: center; }
.cta {
    display: inline-block; border-radius: .6rem; padding: .8rem 1.6rem;
    font-family: var(--font-display); font-weight: 600; letter-spacing: .02em;
    border: 1px solid transparent; cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, transform .15s ease, box-shadow .15s ease;
}
.cta:hover, .cta:focus-visible { transform: translateY(-2px); }
.cta-solid { background-color: var(--red); color: #fff; box-shadow: 0 6px 18px var(--pole-glow); }
.cta-solid:hover, .cta-solid:focus-visible { background-color: color-mix(in srgb, var(--red) 85%, #000); box-shadow: 0 12px 26px var(--pole-glow); }
.cta-ghost { border-color: var(--border); color: var(--ink); background-color: color-mix(in srgb, var(--surface) 70%, transparent); }
.cta-ghost:hover, .cta-ghost:focus-visible { border-color: var(--blue); color: var(--blue); box-shadow: var(--shadow); }

/* Busy: set by the data-busy script in site.js while a form posts. The button keeps its colour
   (it is working, not disabled) and stops reacting to hover, with a spinner before the label. */
[data-busy][aria-busy="true"] { cursor: progress; pointer-events: none; transform: none; }
[data-busy][aria-busy="true"]::before {
    content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .6em; vertical-align: -.15em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: rlag-spin .7s linear infinite;
}
@keyframes rlag-spin { to { transform: rotate(360deg); } }

.cta-row-start { justify-content: flex-start; margin-top: 2.25rem; }

/* ---------- Stats band ---------- */
.stats { border-block: 1px solid var(--border); background-color: var(--surface); }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding-block: 2.5rem; text-align: center; }
/* Hairline between columns, like a timing screen. */
.stats-grid > div + div { border-left: 1px solid var(--border); }
.stat-value { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 5.2vw, 3rem); line-height: 1.1; color: var(--blue); font-variant-numeric: tabular-nums; }
.stat-label { margin: .25rem 0 0; font-size: .82rem; color: var(--muted); }

/* ---------- Chips and badges ---------- */
.chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: .35rem .8rem; font-size: .82rem; color: var(--ink); }
/* A team runs the car; a sponsor pays for it. The outlined chip is what tells them apart at a glance. */
.chip-team { background: transparent; border-color: var(--blue); color: var(--blue); font-weight: 600; }

.badge { display: flex; align-items: baseline; gap: .5rem; background: var(--blue); color: #fff; border-radius: .55rem; padding: .5rem .8rem; }
.badge .k { font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.badge .v { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-left: auto; }
.afr-flag { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--muted); font-weight: 600; }

/* American Formula Driver Development. The flag mark is dark-on-white artwork with no dark
   variant, so it keeps a white chip behind it and reads the same in both themes. */
.afd-badge {
    display: inline-flex; align-items: center; gap: .45rem;
    background: #fff; border: 1px solid var(--border); border-radius: 999px;
    padding: .3rem .7rem .3rem .35rem;
    font-family: var(--font-display); font-weight: 700; font-size: .72rem;
    letter-spacing: .04em; color: #14171F; line-height: 1.2; text-align: left;
}
.afd-badge img { width: 1.5rem; height: auto; display: block; border-radius: 2px; }
/* The spotlight badge links through to the AFD program section; it must not look like prose. */
a.afd-badge { text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
a.afd-badge:hover, a.afd-badge:focus-visible { border-color: var(--red); box-shadow: 0 0 0 2px rgba(0,0,0,.06); }
.afd-badge-sm { gap: .3rem; padding: .18rem .5rem .18rem .24rem; font-size: .64rem; letter-spacing: .08em; }
.afd-badge-sm img { width: 1.05rem; }
.roster-grid .afd-badge { align-self: flex-start; margin: .1rem 0; }
/* On the spotlight it sits directly under the driver's name, ahead of her stats. */
.spot-name + .afd-badge { margin-top: .7rem; }

/* ---------- Fact cards ---------- */
.fact-grid { margin-top: 2.25rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.fact { border: 1px solid var(--border); border-left: 4px solid var(--red); border-radius: .85rem; background: var(--surface); padding: 1.15rem 1.25rem; }
.fact-value { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--red); font-variant-numeric: tabular-nums; }
.fact-label { margin: .5rem 0 0; font-size: .82rem; color: var(--muted); text-wrap: pretty; }

/* ---------- Dotted prose list ---------- */
/* The dotted prose list. Shared with .dotlist rather than copied, so there is one source of truth. */
.product-details ul, .dotlist { margin: .9rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; font-size: .88rem; color: var(--ink-soft); }
.dotlist { max-width: 46rem; } /* match .section-body, the prose it sits among */
.product-details li, .dotlist li { position: relative; padding-left: 1.1rem; }
.product-details li::before, .dotlist li::before {
    content: ""; position: absolute; left: 0; top: .6em;
    width: .4rem; height: .4rem; border-radius: 50%; background: var(--blue);
}

/* ---------- Utilities ---------- */
/* Visually hidden, still announced. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}