/*
  COMPARISON PAGES (compare-human): the hub /compare and the one-on-one /compare/:vendor. Page-scoped
  (loaded through content_for :head by comparisons/index and comparisons/show), so only arrangement
  and reading comfort live here; the card, hero, button, comparison table, window shot and sign-up
  prompt are the cataloged components. Tokens only: no literal colours, no inline styles.
  The reading column is capped (u-prose, 45rem) so paragraphs never run full bleed; the tables and
  cards use the page width.
*/

.p-compare {
  --p-compare-measure: 68ch;
  --p-compare-name: 10rem;
}

.p-compare__prose {
  max-width: var(--p-compare-measure);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/*
  Prose cards span the full container width like every other card, so card edges line up down the
  page. Inside, a prose card is a deliberate two-column GRID of distinct blocks (never flowing CSS
  columns, so no paragraph splits). Each block keeps a readable measure (the .p-compare__prose cap)
  and the grid gap absorbs the slack. Both blocks start at the same top; one column below 48rem.
*/
.p-compare-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-10);
  align-items: start;
}

.p-compare-split > .p-compare__prose > :first-child {
  margin-top: 0;
}

/* Sources run in two columns when there are four or more. */
.p-compare__sources--cols {
  columns: 2 24rem;
  column-gap: var(--space-10);
}

.p-compare__sources--cols li {
  break-inside: avoid;
}

.p-compare__prose p {
  text-wrap: pretty;
}

.p-compare__prose > * + * {
  margin-top: var(--space-4);
}

.p-compare__h2 {
  color: var(--color-text-strong);
  font: var(--weight-semibold) var(--text-xl)/1.3 var(--font-display);
  margin: 0;
}

.p-compare__h3 {
  color: var(--color-text-strong);
  font: var(--weight-semibold) var(--text-base)/1.4 var(--font-display);
  margin: var(--space-6) 0 0;
}

.p-compare__lede {
  max-width: var(--measure-lede);
  margin: 0;
}

.p-compare__best {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
}

.p-compare__list {
  margin: 0;
  padding-left: var(--space-5);
  max-width: var(--p-compare-measure);
}

.p-compare__list li + li {
  margin-top: var(--space-3);
}

.p-compare__scope {
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  max-width: var(--p-compare-measure);
}

.p-compare__sources {
  margin: 0;
  padding-left: var(--space-5);
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
}

.p-compare__sources svg {
  display: inline;
  vertical-align: -2px;
}

.p-compare__sources li + li {
  margin-top: var(--space-2);
}

/* In-page contents on the one-on-one page: a quiet row of anchors. */
.p-compare-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.p-compare-toc a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 2px;
}

/* "How to choose": each question is a bordered cell. The cells of a row are the same height (grid
   stretch), and inside a cell the answer is a two-column definition grid: a vendor-name column of
   one fixed width and a value column, so names and values line up within a cell and, because every
   cell uses the same name width, from one cell to the next. The scope note, when there is one, is
   pinned to the foot of its cell so the cells read as deliberate rather than ragged. Two columns on a
   wide page; one column below 48rem. */
.p-compare-choose {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: choose;
}

.p-compare-choose__item {
  counter-increment: choose;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
}

.p-compare-choose__q {
  margin: 0;
  color: var(--color-text-strong);
  font: var(--weight-semibold) var(--text-base)/1.4 var(--font-display);
}

.p-compare-choose__q::before {
  content: counter(choose) ". ";
  color: var(--color-text-muted);
}

.p-compare-choose__a {
  margin: 0;
  font-size: var(--text-sm);
}

.p-compare-choose__row {
  display: grid;
  grid-template-columns: var(--p-compare-name) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}

.p-compare-choose__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.p-compare-choose__row dt {
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}

.p-compare-choose__row dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.p-compare-choose__row--none dt {
  font-weight: var(--weight-medium);
  color: inherit;
}

.p-compare-choose__item .p-compare__scope {
  max-width: none;
  margin-top: auto;
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 3px solid var(--color-border-strong);
}

/* The two "choose when" lists sit side by side on a wide page, stacked below 48rem. */
.p-compare-choose-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
}

/* A card per competitor on the hub. */
.p-compare-vendors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-compare-vendor {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  font-size: var(--text-sm);
}

.p-compare-vendor p {
  margin: 0;
}

.p-compare-vendor__name {
  margin: 0;
  font: var(--weight-semibold) var(--text-lg)/1.3 var(--font-display);
}

.p-compare-vendor__more {
  margin-top: auto !important;
  padding-top: var(--space-3);
}

/* Product screenshots in the "what Pharma Observatory is" section. */
.p-compare-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: var(--space-6);
}

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

.p-compare-shot figcaption {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: var(--p-compare-measure);
}

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

  .p-compare-choose,
  .p-compare-choose-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phones: the name sits above its value rather than squeezing the value into a sliver. */
@media (max-width: 30rem) {
  .p-compare-choose__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-0-5);
  }
}