/*
  THE PUBLIC DATA PAGE (/data). Page-scoped (loaded through content_for :head by
  published_counts/index): only arrangement lives here, the hero, card, record list, stat and tile
  are the cataloged components. Tokens only: no literal colours, no inline styles.
  Every block is a deliberate grid of equal columns so no card is left half empty: three columns of
  "how we count" notes and three link tiles on a wide screen, one column on a phone.
*/

.p-data-how,
.p-data-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.p-data-tiles {
  gap: var(--space-4);
}

.p-data-how__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.p-data-how__label {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.p-data-how__text {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* The hero's figure slot holds four stats, laid out two by two so the grid is always full. */
.c-public-hero__figure .c-stat-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* One right edge for every figure: reserve the chevron's width (16px, the icon size) on rows that draw
   no chevron, so the linked rows (Conditions, Biomarkers) do not pull their figure left. The phone
   layout (40rem and below) keeps the figure under the title, where this does not apply. */
@media (min-width: 40.0625rem) {
  [data-published-counts] .c-record-list__item {
    grid-template-columns: auto minmax(0, 1fr) auto var(--space-4);
  }
}

@media (max-width: 48rem) {
  .p-data-how,
  .p-data-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}