/* /sudoku-downloads/ ready-made pack pages (includes/printable-pack-page.php) */

.pk-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin: var(--sp-5) 0;
}
.pk-preview img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: #fff;
  display: block;
}
.pk-card h2 { margin: 0 0 4px; font-size: 20px; }
.pk-meta { font-size: 13.5px; color: var(--ink-2); }
.pk-sub { font-size: 14.5px; }
.pk-btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.pk-dl span { font-weight: 400; opacity: .75; margin-left: 6px; font-size: 12.5px; }
.pk-license { font-size: 13px; color: var(--ink-3); margin-top: var(--sp-3); }

.pk-snippet {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font: 13px/1.5 monospace;
  overflow-x: auto;
  white-space: pre-wrap;
}

/* Button-styled links keep white text on the brand background, same rule as .tech-practice .btn. */
.pk-btns .btn-primary,
.pk-btns .btn-primary:hover {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 600px) {
  .pk-card { grid-template-columns: 1fr; }
  .pk-preview img { max-width: 220px; margin: 0 auto; }
}