/* Driver card - the roster tile.
   Used by the Drivers roster grid and the Index carousel. The second .roster-grid pass
   re-lays the card out as a row and MUST stay after the first - identical selectors, so
   source order is the only thing deciding it. */

.roster-grid { margin-top: 2.25rem; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.driver-card { background: var(--surface); border: 1px solid var(--border); border-radius: .9rem; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .12s ease, box-shadow .12s ease, border-color .12s; }
/* On the roster a card selects the spotlight above instead of navigating, so it is a <button> and
   needs the UA styling reset that an <a> never had. The landing page still uses <a>. */
button.driver-card { font: inherit; color: inherit; text-align: left; padding: 0; cursor: pointer; appearance: none; }
a.driver-card:hover, button.driver-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--blue); }
button.driver-card[aria-pressed="true"] { border-color: var(--red); box-shadow: 0 0 0 2px var(--pole-glow), var(--shadow); }
/* Square: the symmetric ratio, and the same box the record photo, ladder avatars and the
   helmet fallback already use. flex: none + min-height: 0 stop the column flex parent from
   resizing it; the img is absolute so its intrinsic height can never feed back into the box. */
.driver-media { display: block; position: relative; width: 100%; aspect-ratio: 1 / 1; flex: none; min-height: 0; background: var(--surface-2); }
.driver-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
/* The landing-page carousel keeps the photo on top, so the number sits over it. */
.driver-media .driver-num { position: absolute; bottom: .5rem; right: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.driver-body { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.driver-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); line-height: 1.15; }
.driver-meta { font-size: .8rem; color: var(--muted); }
.driver-series { font-size: .8rem; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Roster tiles read as a record: the detail on the left, a small fixed photo pinned right.
   The photo is full-bleed, so its height is the card's height - and grid rows only equalise
   within a row, which left the photos at anything from 104x119 to 104x150. grid-auto-rows: 1fr
   sizes every row to the tallest card, so every photo is the same box. It is minmax(auto, 1fr),
   so a card can still grow past it rather than overflow. */
.roster-grid { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); grid-auto-rows: 1fr; }
.roster-grid .driver-card { flex-direction: row; align-items: stretch; }
.roster-grid .driver-body { flex: 1 1 auto; min-width: 0; gap: .3rem; }
.roster-grid .driver-media { flex: 0 0 6.5rem; width: 6.5rem; aspect-ratio: auto; align-self: stretch; }
.roster-grid .driver-name .driver-num { color: var(--red); margin-left: .3rem; }
.driver-facts { display: flex; flex-wrap: wrap; gap: .15rem .7rem; font-size: .76rem; color: var(--muted); }
.driver-facts b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.driver-team { font-size: .78rem; font-weight: 600; color: var(--blue); }
.driver-sponsors { font-size: .76rem; color: var(--muted); }
.driver-sponsors b { color: var(--ink); font-weight: 700; }

/* Landing-page cards are links; roster cards are buttons that swap the spotlight. Neither is a
   prose link, so the interior-page underline convention must not reach them. */
a.driver-card:focus-visible, button.driver-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }