/* The lab on the home page: one row for each model, with its number, its
   name and one line on what it shows. */

.lab-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.lab-strip a {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 1rem;
  align-items: baseline;
  column-gap: 1rem;
  padding: 1.15rem 1.3rem;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}

.lab-strip a:hover, .lab-strip a:focus-visible { background: var(--paper); }

.lab-n {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.lab-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.35;
}

.lab-what {
  grid-column: 2;
  margin-top: 0.3rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
}

/* The mark stands beside the name. */
.lab-go {
  grid-row: 1;
  grid-column: 3;
  font-family: var(--font-mono);
  color: var(--muted);
  transition: transform 0.18s ease, color 0.18s ease;
}

.lab-strip a:hover .lab-name, .lab-strip a:focus-visible .lab-name { color: var(--accent-strong); }

.lab-strip a:hover .lab-go, .lab-strip a:focus-visible .lab-go {
  color: var(--accent-strong);
  transform: translateX(3px);
}

/* Reduced motion keeps the mark still. */
@media (prefers-reduced-motion: reduce) {
  .lab-go { transition: none; }
  .lab-strip a:hover .lab-go, .lab-strip a:focus-visible .lab-go { transform: none; }
}