/* Driver record page - Pages/Driver.cshtml.
   The identity band, the two-column body and the nine-rung climb rail. */

.record-head { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.record-head::before {
    content: ""; position: absolute; inset: -70% -10% auto; height: 240%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(40% 50% at 22% 58%, color-mix(in srgb, var(--red) 24%, transparent), transparent 70%),
        radial-gradient(38% 48% at 80% 42%, color-mix(in srgb, var(--blue) 20%, transparent), transparent 70%);
}
.record-head::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: repeating-linear-gradient(104deg,
        transparent 0 54px, color-mix(in srgb, var(--ink) 6%, transparent) 54px 56px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 50%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 50%, transparent);
}
.record-head-inner {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem);
    padding-block: clamp(1.75rem, 4vw, 3rem);
}
.record-photo {
    width: clamp(6rem, 14vw, 9.5rem); aspect-ratio: 1; flex: none; object-fit: cover; object-position: top;
    border-radius: 1rem; background: var(--surface-2);
    border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.record-id { flex: 1 1 18rem; min-width: 0; }
.record-name { margin: .7rem 0 0; font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.02; letter-spacing: -.02em; }
.record-name .num { color: var(--red); margin-left: .4em; }
.record-tags { margin-top: .85rem; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.record-actions { margin-top: 1.35rem; }
.record-actions .cta { padding: .65rem 1.3rem; font-size: .95rem; }

.record-body { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.record-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 64rem) { .record-grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } }
.record-bio { margin: 1.25rem 0 0; max-width: 46rem; color: var(--ink-soft); white-space: pre-line; text-wrap: pretty; }
.record-main .section-title { font-size: clamp(1.4rem, 3vw, 1.8rem); }
.record-main .section-title.spaced { margin-top: 3rem; }
.record-main .tiers { margin-top: 1.75rem; }

.record-actions .cta-icon { display: inline-flex; align-items: center; gap: .5rem; }

/* Race videos: below the story and ladder (the record body's bottom padding is the gap above),
   with the same room again above the footer. Cards, thumbnails and the owner banner are
   components/video-card.css. */
.vsection { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.vsection-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; }
.vsection-head .section-title { font-size: clamp(1.4rem, 3vw, 1.8rem); }
.vfilters { display: flex; flex-wrap: wrap; gap: .5rem; }
.vfilters a {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 1rem;
    border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
    font-size: .88rem; font-weight: 500; color: var(--ink);
}
.vfilters a span { color: var(--muted); }
.vfilters a:hover { border-color: var(--blue); }
.vfilters a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }
.vfilters a[aria-current] span { color: inherit; opacity: .75; }

.vfeature {
    margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1.75rem;
    padding: 1rem; border: 1px solid var(--border); border-radius: 1rem;
    background: var(--surface); box-shadow: var(--shadow);
}
.vfeature > .vthumb { flex: 999 1 32rem; min-width: 0; }
.vfeature-body { flex: 1 1 17rem; min-width: 0; display: flex; flex-direction: column; gap: .75rem; padding: .5rem .5rem .5rem 0; }
.vfeature-title { font-size: clamp(1.3rem, 2.6vw, 1.65rem); line-height: 1.15; }
.vfeature-desc { margin: 0; color: var(--ink-soft); font-size: .95rem; white-space: pre-line; }
.vfeature .section-more { margin-top: auto; }
.vsection .empty { margin-top: 1.75rem; }

.record-side { display: grid; gap: 2.5rem; }
.side-block > h2 { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.side-block .spot-chips { margin-top: 1rem; }
.side-note { margin: .85rem 0 0; font-size: .85rem; color: var(--ink-soft); }

/* The nine rungs, with this driver's position marked. Reached rungs are solid, the season's own
   rungs carry the brand blue, and everything above is hollow - the climb that is left. */
.ladder-rail { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.rail-item {
    position: relative;
    display: grid; grid-template-columns: 1.5rem 1.6rem minmax(0, 1fr) auto;
    align-items: center; column-gap: .7rem; padding-block: .45rem;
}
.rail-line { position: absolute; top: 0; bottom: 0; left: .7rem; width: 2px; background: var(--border); }
.rail-item:first-child .rail-line { top: 50%; }
.rail-item:last-child .rail-line { bottom: 50%; }
.rail-mark {
    position: relative; z-index: 1; justify-self: center;
    width: .7rem; height: .7rem; border-radius: 50%;
    background: var(--bg); box-shadow: 0 0 0 2px var(--border);
}
.rail-step { font-family: var(--font-display); font-weight: 700; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rail-label { font-size: .84rem; color: var(--muted); }

.rail-below .rail-mark { background: var(--muted); box-shadow: 0 0 0 2px var(--muted); }
.rail-below .rail-step, .rail-below .rail-label { color: var(--ink-soft); }

.rail-racing .rail-mark { background: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 28%, transparent); }
.rail-racing .rail-step, .rail-racing .rail-label { color: var(--ink); font-weight: 600; }
.rail-now {
    font-family: var(--font-display); font-size: .6rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent);
    border-radius: .3rem; padding: .15rem .45rem;
}
/* The top rung is the point of the whole site - mark it in brand red even while it is out of reach. */
.ladder-rail .rail-item:last-child .rail-mark { box-shadow: 0 0 0 2px var(--red); }
.ladder-rail .rail-item:last-child .rail-step, .ladder-rail .rail-item:last-child .rail-label { color: var(--red); }
.ladder-rail .rail-item:last-child.rail-racing .rail-mark { background: var(--red); }