/* Shared look for the "Back to portfolio" pill on every live sample (/portfolio/<slug>/).
   scripts/inject-sample-head.mjs links this file into each sample's HTML, so the colour and size
   change here, once, without rebuilding any sample. Position stays in each sample's own CSS,
   because every template needs a different clear spot.
   The `html body a` prefix outranks the samples' own `.reforge-sample` rules, media queries included. */
html body a.reforge-sample {
  border: 1px solid rgb(255 255 255 / 0.24);
  background: linear-gradient(135deg, #912486, #d47300);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 6px 22px rgb(145 36 134 / 0.38), 0 2px 6px rgb(0 0 0 / 0.25);
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.28);
  transition: filter 150ms ease, box-shadow 150ms ease;
}
html body a.reforge-sample:hover {
  background: linear-gradient(135deg, #912486, #d47300);
  filter: brightness(1.1);
  box-shadow: 0 8px 28px rgb(212 115 0 / 0.42), 0 2px 6px rgb(0 0 0 / 0.25);
}
html body a.reforge-sample:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
html body a.reforge-sample .reforge-sample__back {
  font-weight: 600;
}
html body a.reforge-sample .reforge-sample__note {
  color: rgb(255 255 255 / 0.9);
}
/* Desktop and tablet: the samples' 12px/10px pill reads as tiny. Phones keep their own size,
   landscape phones too (844x390): the large pill covered headings there. */
@media (min-width: 768px) and (min-height: 501px) {
  html body a.reforge-sample {
    gap: 2px;
    padding: 8px 20px 9px;
    font-size: 15px;
    line-height: 1.2;
  }
  html body a.reforge-sample .reforge-sample__back {
    font-size: 15px;
  }
  html body a.reforge-sample .reforge-sample__note {
    font-size: 12px;
  }
}