/* Per-model used pages (/used/bemer-pro/, /used/bemer-3000/).
   These pages load the marketplace stack (tokens, chrome, theme, marketplace)
   and never site.css, whose .card/.pill/.price/.btn/.faq/.cta-band rules clash
   with the listing cards. This file adds only what that stack lacks: a prose
   column, the answer-first opening size, the byline row, and editorial pieces
   ported from site.css under their site-wide class names (none of them exist
   in marketplace.css). Tokens only; no new colours or fonts. */

/* ---------- head ---------- */
/* Balanced lines so a long H1 or band title never leaves one word on its own line */
.page-head h1, .page-head .eyebrow, .guide-section-head h2, .cta-band__title { text-wrap: balance; }
.page-lede.mp-lede { font-size: 18px; line-height: 1.6; color: var(--ink-1); }
.mp-meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0;
  font: 500 var(--fs-micro)/1.4 var(--umb-font); letter-spacing: var(--tracking-micro);
  text-transform: uppercase; color: var(--ink-3);
}
.mp-meta b { font-weight: 700; color: var(--ink-2); }

/* ---------- sections and prose (800px reading column, WIDTH-AUDIT app standard) ---------- */
.mp-section { margin-top: 44px; }
.mp-prose { max-width: var(--ed-column); }
.mp-prose p, .mp-prose li { font: 400 16px/1.7 var(--umb-font); color: var(--ink-2); }
.mp-prose p { margin: 0 0 14px; }
.mp-prose ul, .mp-prose ol { margin: 0 0 14px; padding-left: 22px; }
.mp-prose li { margin-bottom: 6px; }
.mp-prose li b, .mp-prose p b { color: var(--ink-1); }
.mp-prose h3 { margin: 26px 0 8px; font: 700 19px/1.3 var(--umb-font-display); color: var(--umb-heading); }
.mp-prose a { color: var(--umb-accent); text-decoration: underline; text-underline-offset: 2px; }
.mp-prose a:hover { color: var(--umb-accent-strong); }
.mp-prose > :last-child { margin-bottom: 0; }

/* The chart card sets the row height; the note beside it keeps its own */
.guide-grid.mp-history { align-items: start; }

/* ---------- listing strip ---------- */
.strip-meta { margin: 0 0 6px; }
.strip-all { margin-top: 18px; }
/* Reserve roughly one card's height so the sections below do not jump when the cards land */
@media (min-width: 920px) {
  .model-strip .grid { min-height: 540px; }
  /* An empty, stale or error panel is short; the reserved height would leave it a mostly blank box */
  .model-strip .grid:has(> .state-panel) { min-height: 0; }
}

/* ---------- parts table: the price guide's table card, with ticks ---------- */
.guide-table-wrap:focus-visible { outline: 2px solid var(--umb-accent); outline-offset: -2px; }
.guide-table tbody th { font: 500 15px/1.4 var(--umb-font); color: var(--ink-1); }
.guide-table td.mp-yes { color: var(--color-good); font-weight: 700; }
.guide-table td.mp-no { color: var(--umb-ink-4); }
.guide-table .mp-sub { display: block; margin-top: 2px; font: 400 13px/1.35 var(--umb-font); color: var(--ink-3); }
.mp-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--umb-gap); align-items: start; }

/* ---------- callout, caution (site.css 345-371) ---------- */
.callout {
  background: var(--surface-card); border: 1px solid var(--color-border);
  border-radius: var(--r-card-lg); box-shadow: var(--shadow-card); padding: 18px 22px; margin: 22px 0 0;
}
.callout p { margin: 0 0 10px; font: 400 15.5px/1.65 var(--umb-font); color: var(--ink-2); }
.callout p:last-child { margin-bottom: 0; }
.callout .callout__title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; font: 700 17px/1.35 var(--font-display); color: var(--ink-1); }
.callout__badge {
  display: inline-flex; align-items: center; padding: 4px 8px; border-radius: var(--r-badge);
  background: var(--color-orange-text); color: #fff; font: 700 10.5px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
}

/* ---------- product figure (site.css 529-548) ---------- */
.product-figure {
  margin: 0; background: var(--surface-card); border: 1px solid var(--color-border);
  border-radius: var(--r-card-lg); box-shadow: var(--shadow-card); padding: 14px 14px 12px; text-align: center;
}
.product-figure__media { display: block; padding: 18px; background: var(--grad-media); border-radius: var(--r-input); box-shadow: inset 0 0 0 1px rgba(51,101,138,.12); }
.product-figure__media img { display: block; height: auto; max-width: 100%; max-height: 260px; margin: 0 auto; object-fit: contain; }
.product-figure figcaption { margin-top: 10px; font: 400 14px/1.5 var(--font-ui); color: var(--ink-3); }

/* ---------- link cards to the other models (site.css 211-250) ---------- */
.card-grid { display: grid; gap: 16px; margin: 0; }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.link-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
  padding: 22px 20px; background: var(--surface-card); border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-steel); border-radius: var(--r-card);
  box-shadow: var(--shadow-card-soft); color: var(--color-steel); text-decoration: none;
  transition: transform var(--ease-fast), box-shadow var(--ease-fast), border-color var(--ease-fast);
}
.link-card--plain { border-top-width: 1px; border-top-color: var(--color-border); border-radius: var(--r-card-lg); padding: 22px; }
.link-card:hover, .link-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-top-color: var(--color-orange); text-decoration: none; }
.link-card--plain:hover, .link-card--plain:focus-visible { border-color: var(--color-orange); }
.link-card__icon {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  background: var(--grad-icon); box-shadow: var(--shadow-icon-inset); border-radius: var(--r-card); color: var(--color-steel);
}
.link-card__icon svg { width: 20px; height: 20px; }
.link-card__kicker { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--color-steel); }
.link-card__kicker::before { content: ""; width: 5px; height: 5px; background: var(--color-orange); border-radius: var(--r-pill); }
.link-card__title { font: 700 var(--fs-card-title)/1.35 var(--font-display); color: var(--ink-1); }
.link-card__text { font: 400 14.5px/1.55 var(--font-ui); color: var(--ink-3); flex: 1 1 auto; }
.link-card__arrow { font: 700 14px/1 var(--font-ui); color: var(--color-blue); }

/* ---------- responsive (breakpoints as marketplace.css / site.css) ---------- */
@media (max-width: 1023.98px) {
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .mp-split { grid-template-columns: minmax(0, 1fr); }
}
/* The key-figures skeleton (marketplace.css, REVIEW 7.14) at this page's taller
   finished heights: its tile labels and note run longer than the price guide's */
#guide-stats { --skel-h: 254px; }
@media (min-width: 375px) and (max-width: 1023.98px) { #guide-stats { --skel-h: 239px; } }
@media (min-width: 600px) and (max-width: 1023.98px) { #guide-stats { --skel-h: 196px; } }
@media (max-width: 919.98px) {
  .mp-section { margin-top: 36px; }
  .page-lede.mp-lede { font-size: 17px; }
  .product-figure { max-width: 420px; }
}
@media (max-width: 639.98px) {
  .card-grid--3 { grid-template-columns: minmax(0, 1fr); }
  /* Three cards on a phone: a fourth stacked card pushes the buying guide a screen further
     down. Tablets (640 to 919px) show two cards per row, so all four fit in two rows. */
  .model-strip .grid > .card:nth-child(4) { display: none; }
}