/* The product on the marketing pages: a captured panel as a figure
   (Components::MarketingShot), two of them side by side, a panel beside its
   argument, and a row of the product's own chips standing in for an icon.
   Flat single-class rules on the marketing world's own variables; the app's
   tokens stay out, as docs/ui-conventions.md's marketing paragraph says.

   A panel is drawn at the size the app draws it: the img's width attribute
   is its CSS size, and the rule only caps it at the column, never fills the
   column with it. A narrow panel (a muscle list, an open day's guide) stays
   narrow and centred; a wide one (the week's ribbons) shrinks to fit. */

.proof {
  margin: 2rem auto 0;
  width: fit-content;
  max-width: 100%;
}

.proof-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border: 1px solid oklch(45% 0.02 250);
  border-radius: 8px;
  box-shadow: 0 1.5rem 3rem -1.5rem oklch(5% 0.02 250 / 0.9);
  background: white;
}

/* A figure placed from a markdown page sits in a 40rem reading column; a
   wide panel steps out of it to the page's width, still centred on the
   column, so the week's ribbons are not squeezed to a paragraph's measure.
   max-content, not fit-content: fit-content is clamped by the column before
   the max-width above can let the figure grow past it. The centring comes
   from left and the transform alone, so the auto margins come off. */
.proof-breakout {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(var(--container-max), 92vw);
  margin-inline: 0;
}

.proof-caption {
  margin-top: 0.75rem;
  max-width: 40rem;
  margin-inline: auto;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: oklch(78% 0.01 255);
  text-align: center;
}

/* Two panels that prove one sentence between them: stacked on a phone,
   side by side from tablet width, the wider one taking more room. */
.proof-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
  margin: 2rem auto 0;
  max-width: var(--container-max);
}

.proof-pair-wide {
  margin: 0;
}

.proof-pair-narrow {
  margin: 0;
}

/* A panel beside the argument it proves: the words first on a phone, the
   two side by side from tablet width with the picture holding its own. */
.proof-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  margin: 0 auto;
  max-width: var(--container-max);
  text-align: left;
}

.proof-split-copy {
  max-width: 34rem;
}

.proof-split-figure {
  margin: 0;
}

/* The product's own chips in a row where an icon would go on a feature
   card: a fatigue scale, a warning, a verdict, the import formats. */
.fragment-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 48rem) {
  .proof-pair {
    grid-template-columns: 3fr 2fr;
  }

  .proof-split {
    grid-template-columns: 1fr 1fr;
  }

  .proof-split-wide {
    grid-template-columns: 2fr 3fr;
  }
}