/* Problem — offset two-column with an off-grid before frame and a bid diagram. */

.problem { padding-block: var(--section-gap); }

.problem__inner {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-sm), minmax(0, 1fr));
  gap: var(--grid-gap);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.problem__title {
  grid-column: 1 / -1;
  max-width: var(--measure-h2);
}

.problem__body { grid-column: 1 / -1; }

.problem__pull {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--border-datum);
  font-family: var(--font-display);
  font-stretch: var(--font-stretch-display);
  font-size: var(--text-h4);
  color: var(--text-primary);
}

.problem__frame {
  grid-column: 1 / -1;
  margin: 0;
}

.bids {
  grid-column: 1 / -1;
  padding: var(--space-lg);
  background: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
}

.bids__list { display: grid; gap: var(--space-sm); }

.bids__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: var(--border-hairline);
  font-family: var(--font-data);
  font-size: var(--text-data);
}

.bids__item--mid .bids__val { color: var(--text-accent); }

.bids__val { font-size: var(--text-h4); font-family: var(--font-display); }

.bids__string { margin-top: var(--space-lg); }

@media (min-width: 900px) {
  .problem__inner { grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); }

  .problem__title { grid-column: 1 / 9; }

  .problem__body {
    grid-column: 6 / 12;
    margin-top: var(--space-2xl);
  }

  .problem__frame {
    grid-row: 2;
    grid-column: 1 / 4;
    margin-left: var(--offgrid-nudge);
    margin-top: var(--space-2xl);
  }

  .bids {
    grid-row: 3;
    grid-column: 1 / 5;
    margin-top: var(--space-2xl);
  }
}