/* ── ANTI-PATTERNS PAGE ────────────────────────────────────
   Do/don't pair grid with SVG chart examples.
   ──────────────────────────────────────────────────────────── */

/* ── PAIR GRID ────────────────────────────────────────── */
.pairs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 40px; }

.pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; background: var(--border);
}
.half { padding: 16px; }
.dont-half { background: #fdf2f0; }
.do-half   { background: #f0faf4; }
.do-label {
  font-size: var(--type-annotation-size); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--badge-yes); margin-bottom: 6px; display: flex; align-items: center; gap: 4px;
}
.dont-label {
  font-size: var(--type-annotation-size); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--accent-crit); margin-bottom: 6px; display: flex; align-items: center; gap: 4px;
}
.pair-title { font-size: var(--type-heading-panel-size); font-weight: var(--type-heading-panel-weight); color: var(--text-1); margin-bottom: 4px; }
.pair-rule { font-size: var(--type-label-size); color: var(--text-2); line-height: 1.5; margin-bottom: 10px; }
.pair-cite { font-size: var(--type-annotation-size); font-family: var(--font-mono); color: var(--text-3); }

/* ── MEDIUM (640px – 1023px) ─────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {
  .pairs-grid { grid-template-columns: 1fr; }
}

/* ── SMALL (<640px) ──────────────────────────────────────── */
@media (max-width: 639px) {
  .pairs-grid { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; }
  .half { padding: 12px; }
}