/* Lexington Brief - card grid: merged cards stay in one column, sources stacked, no holes.
   Load AFTER app.css and typography.css, together with masonry.js:
     <link rel="stylesheet" href="/static/grid-fix.css?v=1">
     <script src="/static/masonry.js?v=1" defer></script>

   How it works: rows become 4px units. masonry.js measures each card and tells the grid how
   many units tall it is, so every card sits directly under the one above it in its column.
   Column count is NOT set here, so any responsive column rules in app.css keep working. */

.grid {
  grid-auto-rows: 4px;
  row-gap: 0;                 /* vertical spacing moves to card margin so spans measure it */
  grid-auto-flow: row dense;
  align-items: start;         /* cards keep their natural height instead of stretching */
}
.grid .card {
  margin-bottom: 12px;
  grid-row-end: span 40;      /* placeholder until masonry.js measures; never left at this value */
}
.grid .card--multi { grid-column: auto; }   /* undo the full-width span */
.grid .load-more   { grid-column: 1 / -1; }

/* Stack the outlet rows */
.grid .card .coverage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* Lead headline sized for a single column (typography.css sized it for full width) */
.grid .card:has(.coverage a + a) h3 {
  font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);
  line-height: 1.15;
}