/* The four institutional requirements. First tint band under the photograph.
   Laid out as the source document has them: a two by two grid of cards, each
   with its label on the left and a marker on the right. */
.standards {
  background: var(--paper-warm);
  padding: clamp(48px, 7vh, 88px) 0;
  border-bottom: 1px solid var(--rule);
}

.standards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 780px;
  margin: 0 auto;
}

/* Cards, not buttons. The source document picks one of the four out in the
   accent, which is the shape of a selector, but nothing sits behind them: its
   own comment describes them as cards "without description box". All four are
   therefore given the same weight at rest, which is also the more honest
   reading of four requirements that rank equally.

   They do highlight under the cursor, which the document also does. Nothing is
   pressable, so the cursor stays the default arrow rather than a pointer: the
   highlight is there to let a reader pick one out of the grid as they read, not
   to promise that clicking does something. */
.standard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 15px 20px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--paper);
  transition: background 0.2s, color 0.2s;
}

/* Inverts rather than shifting a shade. On a tint band the alternatives are all
   too quiet to register: a lighter fill is barely distinguishable from the
   white card, and a heavier border reflows the row unless it is faked. */
.standard:hover { background: var(--accent); }
.standard:hover .standard-label { color: var(--on-accent); }
.standard:hover .standard-dot { background: var(--on-accent); }

.standard-label {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--ink);
  min-width: 0;
}

/* Takes --accent rather than --accent-bright. The bright teal is what the
   document uses, but it measures 2.24:1 on a white card and reads as washed
   out beside a label at 12:1. */
.standard-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

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