/* Component: pick-card (WB-2026-10-26-05). Semantic --nt- tokens only; lint: scripts/lint-css-values.py --components. */
@layer components {
.nt-pick {
  display: grid; gap: var(--nt-space-m);
  margin-block: var(--nt-space-xl); padding-block: var(--nt-space-l);
  border-block-start: var(--nt-rule-heavy) solid var(--nt-color-structure);
  scroll-margin-block-start: var(--nt-space-xl);
}
@media (min-width: 600px) { .nt-pick { grid-template-columns: 10rem minmax(0, 1fr); } }
.nt-pick__media { max-inline-size: 10rem; }
@media (max-width: 599px) { .nt-pick__media { max-inline-size: 7rem; } }
.nt-pick__photo { display: block; border: var(--nt-rule-hair) solid var(--nt-color-rule); }
.nt-pick__photo img { display: block; inline-size: 100%; block-size: auto; }
.nt-pick__cue { display: block; padding-block-start: var(--nt-space-2xs); font: 400 var(--nt-step--2) / 1.3 var(--nt-font-ui); color: var(--nt-color-ink-3); }
.nt-pick__body { display: grid; gap: var(--nt-space-m); min-inline-size: 0; }
.nt-pick__body p { margin: 0; }
.nt-pick__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nt-space-xs); font: 500 var(--nt-step--1) / 1.3 var(--nt-font-ui); color: var(--nt-color-ink-2); }
.nt-pick__rank { font-variant-numeric: tabular-nums; }
.nt-pick__award { color: var(--nt-color-structure); font-weight: 600; }
.nt-pick__name { font: 600 var(--nt-step-1) / var(--nt-leading-tight) var(--nt-font-display); color: var(--nt-color-ink); text-wrap: balance; }
.nt-pick__price { font: 500 var(--nt-step--1) / 1 var(--nt-font-ui); font-variant-numeric: tabular-nums lining-nums; color: var(--nt-color-ink-2); white-space: nowrap; }
.nt-pick__why { font: 400 var(--nt-step-0) / var(--nt-leading-body) var(--nt-font-display); color: var(--nt-color-ink); }
}