/* One full-width surface, with the same near-black at both page boundaries. */
.driver-profile-page > .top {
  background: var(--bg);
  border-bottom: 0;
}
.driver-profile-page .profile-hero {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  border-bottom: 0;
}
.driver-profile-page .profile-hero.has-paint { padding: 36px 0 56px; }
.driver-profile-page .profile-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, var(--bg) 8%, #101e18 48%, #1b3224 100%);
  /* Feather the shared surface, never the individual content containers. */
  -webkit-mask-image: linear-gradient(180deg, transparent, #0008 12%, #000 30%, #000e 55%, #0007 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #0008 12%, #000 30%, #000e 55%, #0007 78%, transparent);
}
.driver-profile-page .paint-hero-shell,
.driver-profile-page .driver-showcase-intro {
  position: relative;
  isolation: isolate;
}
.driver-profile-page .has-paint .driver-showcase-intro {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  column-gap: 28px;
  align-items: start;
}
.driver-profile-page .has-paint .profile-back { margin-bottom: 26px; }
.driver-profile-page .has-paint h1 {
  margin: 14px 0 18px;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  font-size: clamp(3.4rem, 6.5vw, 6.5rem);
  text-shadow: 0 2px 16px #0c1513b3;
}
.driver-profile-page .has-paint h1 .accent { display: inline-block; white-space: nowrap; }
.driver-profile-page .has-paint .driver-identity { margin: 0; min-width: 0; grid-column: 1; grid-row: 1; }
.driver-profile-page .has-paint .driver-identity > div { min-width: 0; overflow-wrap: anywhere; }
.driver-profile-page .driver-avatar { flex-shrink: 0; }
.driver-profile-page .has-paint .driver-identity p { margin: 5px 0; }
.driver-profile-page .has-paint .paint-hero-shell > p { margin-top: 20px; font-size: 1rem; }

/* Larger sizes extend left and upward, beneath the identity rather than over it. */
.driver-profile-page .has-paint .paint-hero-shell > :is(.profile-back, .eyebrow, h1) {
  position: relative;
  z-index: 2;
}
/* Keep the uploaded colors intact; feather only the area behind the identity. */
.driver-profile-page .driver-paint-layer[hidden] { display: none; }
.driver-profile-page .driver-paint-layer {
  --car-overlap: clamp(0, calc((var(--car-display-scale, 1) - 1.6) * 1.25), 1);
  --car-inline-scale: clamp(.5, var(--car-display-scale, 1), 1.6);
  position: relative;
  z-index: 0;
  grid-column: 2;
  grid-row: 1 / span 3;
  justify-self: end;
  align-self: start;
  width: min(
    calc(100% + 50% * var(--car-overlap)),
    calc(66% + 21.25% * var(--car-inline-scale) + 50% * var(--car-overlap)),
    calc((320px + 140px * var(--car-overlap)) * var(--paint-ratio, 1.7778))
  );
  margin: calc(8px - var(--car-overlap) * clamp(36px, 5vw, 72px)) 0 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.driver-profile-page .driver-paint-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  --car-fade: linear-gradient(90deg,
    rgb(0 0 0 / calc(.94 - .54 * var(--car-overlap))) 0%,
    rgb(0 0 0 / calc(1 - .30 * var(--car-overlap))) 18%,
    rgb(0 0 0 / calc(1 - .08 * var(--car-overlap))) 36%,
    #000 55%);
  -webkit-mask-image: var(--car-fade);
  mask-image: var(--car-fade);
}
.driver-profile-page .driver-paint-layer img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.driver-profile-page .driver-paint-viewport.is-framed img {
  position: absolute;
  width: var(--paint-image-width);
  max-width: none;
  left: var(--paint-image-left);
  top: var(--paint-image-top);
}
.driver-profile-page .driver-paint-layer figcaption {
  flex: 0 0 auto;
  align-self: flex-end;
  max-width: 100%;
  padding: 8px 0 0;
  color: #b6cdaf;
  font: 600 .8rem/1.5 Inter, Arial, sans-serif;
  letter-spacing: .025em;
  text-align: right;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.driver-profile-page .driver-paint-layer figcaption:empty { display: none; }
.driver-profile-page .has-paint .driver-showcase-intro > :not(.driver-paint-layer) { position: relative; z-index: 1; }
.driver-profile-page .has-paint .driver-identity { text-shadow: 0 2px 8px var(--bg); }

/* Keep the original emblems, reduced from 82px to 72px in the featured row. */
.driver-profile-page .has-paint .achievement-row { gap: 10px; flex-wrap: wrap; }
.driver-profile-page .has-paint .achievement-row > .achievement-badge > summary,
.driver-profile-page .has-paint .hof-badge.profile-hof-badge { width: 72px; height: 72px; min-height: 72px; }
.driver-profile-page .has-paint .achievement-row .achievement-symbol { font-size: 1.35rem; }
.driver-profile-page .has-paint .achievement-row .achievement-caption { max-width: 57px; font-size: .54rem; }
.driver-profile-page .has-paint .achievement-all { margin-top: 18px; }
.driver-profile-page .has-paint .driver-showcase-intro > .achievement-row { grid-column: 1; grid-row: 2; max-width: 440px; margin: 20px 0 0; }
.driver-profile-page .has-paint .driver-showcase-intro > .achievement-all { grid-column: 1; grid-row: 3; min-width: 0; }

/* Lift every containing layer while badge details are visible. The popup's own
   z-index cannot escape the isolated profile/car layers or equal-level siblings. */
.driver-profile-page :is(.profile-hero, .paint-hero-shell, .driver-showcase-intro, .driver-showcase-card):has(.achievement-badge:is([open], :hover, :focus-within)) {
  position: relative;
  z-index: 3;
}
.driver-profile-page .driver-showcase-intro > :is(.achievement-row, .achievement-all):has(.achievement-badge:is([open], :hover, :focus-within)) {
  position: relative;
  z-index: 3;
}
.driver-profile-page .achievement-badge:is([open], :hover, :focus-within) {
  z-index: 3;
}

/* Cards follow the whole identity/car area, including user-selected car scaling. */
.driver-profile-page .has-paint .driver-personal {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  align-items: start;
  gap: 14px;
  margin-top: 24px;
}
.driver-profile-page .has-paint .driver-personal > div { padding: 18px; }
.driver-profile-page .has-paint .driver-personal h2 { margin-bottom: 12px; line-height: 1.15; }
.driver-profile-page .has-paint .driver-personal p { font-size: 1rem; }
.driver-profile-page .has-paint .driver-showcase-card { grid-column: 1 / -1; }
.driver-profile-page .has-paint .driver-socials { align-items: flex-start; gap: 8px; }
.driver-profile-page .has-paint .driver-socials a { display: inline-flex; max-width: 100%; padding: 9px 12px; }
.driver-profile-page .has-paint .driver-socials a span { min-width: 0; overflow-wrap: anywhere; }
.driver-profile-page .has-paint + .profile-section { padding-top: 44px; }

@media (min-width: 1101px) {
  .driver-profile-page .has-paint .driver-personal:has(.driver-about-card):has(.driver-favorites-card):has(.driver-style-card):has(.driver-connect-card) {
    grid-template-columns: 1.05fr 1.4fr 1.05fr .8fr;
  }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .driver-profile-page .has-paint .driver-showcase-intro { column-gap: 20px; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .driver-profile-page .has-paint .driver-personal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .driver-profile-page .profile-hero.has-paint { padding: 28px 0 40px; }
  .driver-profile-page .has-paint .profile-back { margin-bottom: 22px; }
  .driver-profile-page .has-paint h1 { width: 100%; font-size: clamp(2.6rem, 11vw, 5rem); }
  .driver-profile-page .has-paint .driver-showcase-intro { grid-template-columns: minmax(0, 1fr); }
  .driver-profile-page .has-paint .driver-paint-layer {
    --car-overlap: 0;
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    margin: 24px 0 0;
  }
  .driver-profile-page .driver-paint-viewport { -webkit-mask-image: none; mask-image: none; }
  .driver-profile-page .driver-paint-layer figcaption { align-self: center; max-width: 100%; text-align: center; padding-top: 6px; }
  .driver-profile-page .has-paint .driver-showcase-intro > .achievement-row { grid-row: 3; max-width: none; margin-top: 24px; }
  .driver-profile-page .has-paint .driver-showcase-intro > .achievement-all { grid-row: 4; }
  .driver-profile-page .has-paint .driver-personal { margin-top: 24px; }
}
@media (max-width: 640px) {
  .driver-profile-page .has-paint .driver-personal { grid-template-columns: minmax(0, 1fr); }
  .driver-profile-page .has-paint .achievement-row { gap: 8px; }
  .driver-profile-page .has-paint .achievement-row > .achievement-badge > summary,
  .driver-profile-page .has-paint .hof-badge.profile-hof-badge { width: 68px; height: 68px; min-height: 68px; }
}

/* Only the expanded collection leaves the identity column. Row four keeps it
   below the unchanged three-row car area, regardless of the car's dimensions. */
.driver-profile-page .has-paint .driver-showcase-intro > .achievement-all[open] {
  grid-column:1 / -1;
  grid-row:4;
  justify-self:start;
  width:100%;
  max-width:1100px;
  min-width:0;
}