/* Block produkt/hands_on „Selbst ausprobiert“ (template-parts/products/hands-on.php, produktcheck/hands-on.php):
   the same block in the Bestenliste place and in the Produktcheck. Dashed empty state only in the Produktcheck. */
.handson { border: 2px dashed var(--line); border-radius: var(--r-lg); padding: 18px 16px; display: grid; gap: 8px; background: var(--bg); }
.handson .badge-s { justify-self: start; background: var(--sunk); border-color: var(--line); color: var(--ink-3); }
.handson h3 { font-size: 17px; font-weight: 800; }
.handson p { font-size: 15px; color: var(--ink-2); }
.handson.done { border-style: solid; border-color: var(--ink); background: var(--surface); }
.handson.done .pill { justify-self: start; }
.handson-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.handson-photos img { width: 100%; height: auto; border-radius: var(--r); }
.handson-text p { font-size: 15px; line-height: 1.6; color: var(--ink); }
.handson-text p + p { margin-top: 10px; }
.handson-text strong { font-weight: 600; }
.handson .author-mini { margin-block: 2px 4px; }
/* Findings: the Produktcheck datasheet rows (pages/produktcheck.css .ds), repeated here for the Bestenliste. */
.handson .ds { display: grid; margin: 0; border-top: 1px solid var(--line); }
.handson .ds div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.handson .ds dt { font-size: 13px; color: var(--ink-2); }
.handson .ds dd { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.handson .ds dd small { display: block; font-family: var(--f-body); font-weight: 400; font-size: 12px; color: var(--ink-3); }

@container page (min-width: 900px) {
  .handson-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}