/*
 * The reviews page.
 *
 * The home page shows four member trades as proof and moves on. This is the
 * whole wall: every member, the chart they posted, where those charts come
 * from, and what they are not.
 *
 * Two measures are in play on purpose. The page measure carries the hero, the
 * lead exhibit and the closing sections; the wall runs narrower, because the
 * screenshots are 500px wide at source and the page measure would upscale
 * every one of them.
 */

.reviews {
  background: var(--sg-ground);
}

.reviews .reviews-band {
  background: var(--sg-sunk);
  border-block: 1px solid var(--sg-line);
}

/* Hero -------------------------------------------------------------------- */

.reviews .reviews-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.5rem, 4.5vw, 4rem) clamp(2.25rem, 4vw, 3.5rem);
}

.reviews .reviews-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

.reviews .reviews-hero__title {
  margin-top: 1rem;
  max-width: 20ch;
}

.reviews .reviews-hero__lead {
  max-width: 50ch;
}

.reviews .reviews-hero__side {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

/* Three numbers on hairlines. Three cards would be the reflex and would say
   less: these are one set, not three claims. */
.reviews .reviews-stats {
  margin: 0;
}

.reviews .reviews-stat {
  padding-block: 0.875rem;
  border-top: 1px solid var(--sg-line);
}

.reviews .reviews-stat:last-child {
  border-bottom: 1px solid var(--sg-line);
}

.reviews .reviews-stat dt {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: var(--sg-track-display);
  line-height: 1.1;
  color: var(--sg-ink);
}

.reviews .reviews-stat dd {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--sg-soft);
}

/* The tape ---------------------------------------------------------------- */

/*
 * A trading tape, carrying members instead of instruments: rows of equal width
 * divided by hairlines, figures aligned, the whole thing scrolling sideways
 * rather than wrapping when the screen is narrow.
 *
 * It was built on a shared quote-board component, on the assumption that a live
 * market band would run above the header one day. That band is not being built
 * — licensing the right to show quotes publicly costs more than the band is
 * worth — so the component has left the design system and its rules live here,
 * where the only thing that uses them is.
 */
.reviews .reviews-tape {
  display: flex;
  border-block: 1px solid var(--sg-line);
  background: var(--sg-raised);
  overflow-x: auto;
  scrollbar-width: none;
}

.reviews .reviews-tape::-webkit-scrollbar {
  display: none;
}

.reviews .reviews-tape__row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.55rem;
  flex: 1 1 auto;
  padding: 0.7rem 1.25rem;
  border-right: 1px solid var(--sg-line);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.reviews .reviews-tape__row b {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--sg-body);
}

.reviews .reviews-tape__row span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sg-up-text);
}

.reviews .reviews-tape__label {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding: 0.7rem 1.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sg-soft);
  white-space: nowrap;
}

/* The lead exhibit --------------------------------------------------------- */

.reviews .reviews-lead {
  display: grid;
  grid-template-columns: 500px minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: center;
}

/* `figure` carries a 40px inline margin by default, which was taking 80px off
   a track sized to the screenshots' native 500px and quietly shrinking them. */
.reviews .reviews-lead .sg-shot {
  margin: 0;
}

.reviews .reviews-lead__say {
  margin: 0;
  font-size: clamp(1.375rem, 1rem + 1.4vw, 1.875rem);
  line-height: 1.24;
  letter-spacing: var(--sg-track-tight);
  font-weight: 600;
  color: var(--sg-ink);
  max-width: 21ch;
  text-wrap: balance;
}

/* The quotation marks are set here rather than in the copy, so what is stored
   is what the member wrote and nothing else. Same on the wall below. */
.reviews .reviews-lead__say::before {
  content: '\201C';
}

.reviews .reviews-lead__say::after {
  content: '\201D';
}

.reviews .reviews-lead__gloss {
  margin: 1.25rem 0 0;
  max-width: 44ch;
  font-size: 0.9375rem;
  color: var(--sg-body);
}

.reviews .reviews-by {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.625rem 0 0;
}

.reviews .reviews-by > img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.reviews .reviews-by__who {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sg-ink);
  line-height: 1.25;
}

.reviews .reviews-by__meta {
  font-size: 0.78rem;
  color: var(--sg-soft);
}

.reviews .reviews-by__pl {
  margin-left: auto;
  padding: 0.4rem 0.8rem;
  border-radius: var(--sg-radius-pill);
  background: var(--sg-up);
  color: var(--sg-up-ink);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* The wall ----------------------------------------------------------------- */

.reviews .reviews-wrap {
  max-width: calc(1000px + var(--sg-gutter) * 2);
}

/*
 * Columns rather than a grid: the quotes are different lengths and the
 * screenshots different heights, and columns let each post be the height it
 * needs instead of the height of its tallest neighbour.
 */
.reviews .reviews-wall {
  margin: 0;
  padding: 0;
  list-style: none;
  column-count: 2;
  column-gap: 1.75rem;
}

.reviews .reviews-post {
  break-inside: avoid;
  margin-bottom: 1.75rem;
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius-lg);
  background: var(--sg-raised);
  overflow: hidden;
}

.reviews .reviews-post__fig {
  margin: 0;
}

.reviews .reviews-post__chart {
  display: block;
  width: 100%;
  height: auto;
  border-block: 1px solid var(--sg-line);
  /* The screenshots are charts on white. Named rather than inherited, so a
     future dark skin does not put a white chart on a dark card by accident. */
  background: oklch(1 0 0);
}

.reviews .reviews-post__quote {
  margin: 0;
  padding: 1.125rem 1.25rem 1.25rem;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--sg-body);
}

.reviews .reviews-post__quote::before {
  content: '\201C';
}

.reviews .reviews-post__quote::after {
  content: '\201D';
}

/* The tag names a course only where the member named it themselves. */
.reviews .reviews-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0 1.25rem 1.125rem;
  padding: 0.3125rem 0.6875rem;
  border-radius: var(--sg-radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.reviews .reviews-tag svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.reviews .reviews-tag--starter {
  background: var(--sg-starter-dim);
  color: var(--sg-starter-text);
}

.reviews .reviews-tag--traderpro {
  background: var(--sg-trpro-dim);
  color: var(--sg-trpro-text);
}

/* Where they come from ------------------------------------------------------ */

.reviews .reviews-room {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: clamp(2rem, 5vw, 3.75rem);
  align-items: center;
}

.reviews .reviews-room__body {
  margin: 1.125rem 0 0;
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--sg-body);
}

.reviews .reviews-room .sg-btn {
  margin-top: 1.75rem;
}

/*
 * A pile of the posts themselves, rather than a mock of an interface we would
 * have to invent. Absolute so the three overlap; the container carries the
 * height, because absolute children contribute none.
 */
.reviews .reviews-pile {
  position: relative;
  height: 340px;
}

.reviews .reviews-pile__card {
  position: absolute;
  display: block;
  border: 1px solid var(--sg-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--sg-raised);
  box-shadow: var(--sg-shadow);
}

.reviews .reviews-pile__card img {
  display: block;
  width: 100%;
  height: auto;
}

.reviews .reviews-pile__card--back {
  width: 74%;
  left: 0;
  top: 0;
  transform: rotate(-3deg);
}

.reviews .reviews-pile__card--mid {
  width: 67%;
  right: 3%;
  top: 10%;
  transform: rotate(2.5deg);
}

.reviews .reviews-pile__card--front {
  width: 81%;
  left: 11%;
  bottom: 0;
  transform: rotate(-0.6deg);
}

.reviews .reviews-pile__bar {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.5625rem 0.75rem;
  border-bottom: 1px solid var(--sg-line);
}

.reviews .reviews-pile__bar img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.reviews .reviews-pile__bar > span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sg-ink);
}

.reviews .reviews-pile__bar b {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sg-up-text);
}

/* What these are, and what they are not -------------------------------------- */

.reviews .reviews-truths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reviews .reviews-truths li {
  padding-top: 1rem;
  /* A rule across the top, not a stripe down the side: it separates three
     equals rather than decorating three cards. */
  border-top: 2px solid var(--sg-ink);
}

.reviews .reviews-truths h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: var(--sg-track-tight);
}

.reviews .reviews-truths p {
  margin: 0.5625rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--sg-body);
}

.reviews .reviews-truths__foot {
  margin: 1.875rem 0 0;
  font-size: 0.8125rem;
  color: var(--sg-soft);
}

/* Close ----------------------------------------------------------------------- */

.reviews .reviews-close {
  padding-block: clamp(3.25rem, 6vw, 5.25rem);
  text-align: center;
}

.reviews .reviews-close__lead {
  margin-inline: auto;
  max-width: 48ch;
}

.reviews .reviews-close__go {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.875rem;
}

.reviews .reviews-close__note {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--sg-soft);
}

/* Narrow ----------------------------------------------------------------------- */

@media (max-width: 999px) {
  .reviews .reviews-lead {
    grid-template-columns: minmax(0, 1fr);
  }

  .reviews .reviews-room {
    grid-template-columns: minmax(0, 1fr);
  }

  .reviews .reviews-pile {
    height: 300px;
  }

  .reviews .reviews-truths {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
}

@media (max-width: 859px) {
  .reviews .reviews-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .reviews .reviews-hero__side {
    max-width: 320px;
  }

  /*
   * One column below this width. Two columns of 500px screenshots on a phone
   * would shrink every chart to the point where the trade it shows — the only
   * reason the chart is there — stops being legible.
   */
  .reviews .reviews-wall {
    column-count: 1;
  }
}