/* ──────────────────────────────────────────────────────────────────────────
   Report list — the "reports, listed and sold" widget
   ──────────────────────────────────────────────────────────────────────────
   A shared object (rendered by app/views/shared/_report_list.html.erb) listing
   the published reports in a scope — a factor, a country, a specialty, a search
   result set, a glossary term — each with its DB-sourced price and an
   entitlement-aware CTA (Read / Download PDF for entitled readers, Buy the PDF
   into checkout otherwise).

   Promoted out of the page-scoped op-card grid the specialty hub used to inline:
   a roster row (title + meta on the left, price + CTA on the right) reads more
   honestly than a card when the point is the price and the purchase. Mirrors the
   sibling op-clinic-list object so the two widgets sit consistently on a page. */

.op-report-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.op-report-list__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--rule-faint);
}
.op-report-list__row:last-child { border-bottom: 0; }

/* The title + meta column. */
.op-report-list__main { flex: 1 1 18rem; min-width: 0; }

.op-report-list__title {
  margin: 0;
  font-family: var(--font-reading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--text);
}

/* The furniture run under the title: country tag, reading time, meta counts. */
.op-report-list__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  margin-top: var(--space-3xs);
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}

/* The country tag — a non-hue place marker, not a score. */
.op-report-list__iso {
  font-family: var(--font-data);
  font-size: var(--text-3xs);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-wide);
}

/* The price + CTA column — the commerce edge of the row. */
.op-report-list__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
}

.op-report-list__price {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}

.op-report-list__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
}