/* ============================================================================
   REVIEWS — the leaderboard. Six owners, ranked, plus the marques we work on.
   The quote is the content. Rank, monogram, medal and date are chrome, and
   chrome stays quiet: only the podium is allowed to carry colour.
   ========================================================================= */

/* ---------------------------------------------------------------- head */
.reviews__intro {
  display: flex;
  flex: 1 1 380px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  max-width: 620px;
}

.reviews__score {
  --cut: 16px;
  flex: 0 0 auto;
  min-width: 264px;
}
.reviews__score-body {
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
  padding: var(--sp-5) var(--sp-6);
}
.reviews__score-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.reviews__score-num {
  line-height: 1;
}
.reviews__score-max {
  font-family: var(--f-hud);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-faint);
}
.reviews__score-note {
  color: var(--text-faint);
}

/* ---------------------------------------------------------------- board */
.reviews__board {
  display: grid;
  gap: var(--sp-4);
  list-style: none;
}

.reviews__row {
  --cut: 16px;
}
/* hover is a STATE: the hairline warms, the row steps out of the stack */
.reviews__row:hover,
.reviews__row:focus-within {
  --panel-line: linear-gradient(
    150deg,
    color-mix(in oklab, var(--cy) 46%, transparent),
    color-mix(in oklab, var(--vi) 24%, transparent) 55%,
    color-mix(in oklab, var(--mg) 38%, transparent)
  );
  transform: translateX(5px);
}

.rvw__body {
  position: relative; /* the #1 row hangs its .brackets here, not on the panel */
  display: grid;
  grid-template-columns: minmax(92px, auto) 58px minmax(190px, 1fr) minmax(0, 2.1fr) auto;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
}
/* #1 only. --c is declared on the pseudo itself, so the pseudo is the target. */
.rvw__body.brackets::after {
  --c: var(--go);
}

/* ------------------------------------------------------------- rank cell */
.rvw__pos {
  display: grid;
  justify-items: start;
  gap: var(--sp-2);
}
.rvw__rank {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 2.8vw, 3rem);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.rvw__hash {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-ghost);
}
.rvw__num {
  color: var(--text-ghost);
  transition: color var(--t) var(--ease-out);
}
.reviews__row:hover .rvw__num {
  color: var(--text-faint);
}

/* the podium — the only earned colour in the section */
.reviews__row[data-rank="1"] .rvw__num,
.reviews__row[data-rank="1"]:hover .rvw__num {
  color: var(--go);
  filter: drop-shadow(0 0 14px color-mix(in oklab, var(--go) 45%, transparent));
}
/* silver = the chrome gradient, clipped to the glyph */
.reviews__row[data-rank="2"] .rvw__num,
.reviews__row[data-rank="2"]:hover .rvw__num {
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* bronze isn't a token — mix it from gold and red */
.reviews__row[data-rank="3"] .rvw__num,
.reviews__row[data-rank="3"]:hover .rvw__num {
  color: color-mix(in oklab, var(--go-dim) 74%, var(--rd));
}

/* --------------------------------------------------------------- monogram */
.rvw__mono {
  --cut: 8px;
  width: 58px;
  height: 58px;
  flex: none;
}
.rvw__mono span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}

/* --------------------------------------------------------------- identity */
.rvw__id {
  display: grid;
  justify-items: start;
  gap: 6px;
  min-width: 0;
}
.rvw__name {
  font-size: var(--fs-h3);
  letter-spacing: 0.01em;
}
.rvw__car {
  font-family: var(--f-hud);
  font-size: var(--fs-hud);
  font-weight: 600;
  letter-spacing: var(--track-hud);
  line-height: 1.4;
  color: var(--text-faint);
}
.rvw__chip {
  margin-top: var(--sp-1);
}

/* ------------------------------------------------------------------ quote */
.rvw__quote {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
  padding-left: var(--sp-5);
  border-left: 1px solid var(--line);
}
.rvw__mark {
  width: 16px;
  height: 16px;
  color: var(--text-ghost);
}
.rvw__quote p {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-soft);
}

/* ------------------------------------------------------------------- meta */
.rvw__meta {
  display: grid;
  justify-items: end;
  gap: var(--sp-2);
}
.rvw__date {
  font-family: var(--f-hud);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-hud);
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- brands */
.reviews__brands {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--line);
}
.reviews__brands-title {
  justify-self: center;
}
.reviews__ticker {
  padding-block: var(--sp-4);
  border-block: 1px solid var(--line);
}
/* marque names are type, never logos — we have no rights to the logos */
.reviews__brand {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-ghost);
  transition: color var(--t-fast) var(--ease-out);
}
.reviews__brand:hover {
  color: var(--text);
}
.reviews__brands-note {
  justify-self: center;
  color: var(--text-ghost);
  text-align: center;
}

/* ============================================================== responsive */

/* the quote drops to its own row before it gets too narrow to read */
@media (max-width: 1180px) {
  .rvw__body {
    grid-template-columns: minmax(92px, auto) 58px minmax(0, 1fr) auto;
    align-items: start;
    row-gap: var(--sp-4);
  }
  .rvw__id,
  .rvw__meta {
    align-self: center;
  }
  /* .rvw__quote precedes .rvw__meta in the DOM, so a full-width quote left to
     auto-placement pushes the meta down into a third row and strands it under
     the rank column. Both get explicit cells — the identity row stays intact. */
  .rvw__meta {
    grid-column: 4;
    grid-row: 1;
  }
  .rvw__quote {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-left: 0;
    padding-top: var(--sp-4);
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* stacked card — the rank number stays, it is the whole idea */
@media (max-width: 760px) {
  .reviews__score {
    min-width: 0;
    width: 100%;
  }
  .rvw__body {
    grid-template-columns: auto 1fr;
    column-gap: var(--sp-4);
    padding: var(--sp-5);
  }
  .rvw__pos {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }
  .rvw__mono {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .rvw__id {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .rvw__quote {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .rvw__meta {
    grid-column: 1 / -1;
    grid-row: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
  }
  .reviews__row:hover,
  .reviews__row:focus-within {
    transform: none; /* nothing nudges under a thumb */
  }
}

@media (max-width: 460px) {
  .rvw__body {
    padding: var(--sp-4);
  }
  .rvw__mono {
    display: none; /* the monogram is the first thing that can go */
  }
  .reviews__score-body {
    padding: var(--sp-5);
  }
}