/* Driver spotlight - the featured-driver stage.
   Used by Drivers (switchable, with the nav arrows) and Driver. */

.spotlight {
    margin-top: 2.25rem;
    display: grid; grid-template-columns: 1.25fr .85fr; gap: clamp(20px, 3.5vw, 40px);
    background: var(--surface); border: 1px solid var(--border); border-radius: 1rem;
    box-shadow: var(--shadow-lg); padding: clamp(20px, 3vw, 34px); position: relative; overflow: hidden;
}
.spotlight::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--blue), #fff 50%, var(--red)); opacity: .9; }
/* Every driver's card is stacked into one grid cell, so the stage is always as tall as the
   fullest profile and the page never jumps as the carousel moves. The height comes from the
   content rather than a magic number: add a driver with more sponsors and it simply grows, and
   nothing can ever be clipped or need scrolling. Inactive cards keep their space (visibility,
   not display) which is what gives the cell its height; they stay out of the tab order and the
   accessibility tree. */
.spot-stage { display: grid; }
.spot-stage > .spotlight { grid-area: 1 / 1; }
.spotlight.is-off { visibility: hidden; }

/* The stage holds one .spotlight per driver; all but the showing one carry [hidden]. */
.spot-nav { margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.spot-navbtn {
    width: 2.4rem; height: 2.4rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface); color: var(--ink);
    box-shadow: var(--shadow); cursor: pointer; font-size: 1.3rem; line-height: 1;
    display: grid; place-items: center; transition: border-color .15s, color .15s;
}
.spot-navbtn:hover { border-color: var(--blue); color: var(--blue); }
.spot-navbtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.spot-pos { margin: 0; font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--muted); }
.spot-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0; }
.spot-name { margin: .5rem 0 0; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.05; }
.spot-name .num { color: var(--red); }
.spot-stats { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.spot-stat { font-size: .95rem; color: var(--ink-soft); }
.spot-stat b { font-family: var(--font-display); color: var(--ink); font-weight: 700; margin-right: .35rem; font-variant-numeric: tabular-nums; }
.spot-bio { margin: 1rem 0 0; color: var(--ink-soft); white-space: pre-line; font-size: .96rem; }
.spot-chips { margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.spot-chips .lbl { width: 100%; font-family: var(--font-display); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .1rem; }

.spot-link { display: inline-block; margin-top: 1.2rem; font-family: var(--font-display); font-weight: 600; color: var(--blue); border-bottom: 2px solid var(--blue); padding-bottom: 2px; }
.spot-link:hover { color: var(--red); border-color: var(--red); }

.spot-side { display: flex; flex-direction: column; gap: 1rem; }
.spot-badges { display: flex; flex-direction: column; gap: .6rem; }

.spot-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; border-radius: .75rem; border: 1px solid var(--border); background: var(--surface-2); display: block; }

.spot-links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1.2rem 0 0; }
.spot-links .spot-link { margin-top: 0; }