/**
 * Shared "Stock image" disclosure pill — applied to article thumbnails
 * whose image came from the stock image Library (see ticket MHD-???).
 *
 * Spec verbatim:
 *   - Position: bottom-right of the thumbnail image, inside the bounds.
 *   - Style: very small, subtle, semi-transparent. White text on dark
 *     translucent background. Recessive, NOT a category-tag treatment.
 *   - Visibility: always visible (not hover-only); mobile + desktop.
 *
 * The pill's host card MUST be position: relative (or otherwise establish
 * a positioning context). Every landing / insights card today already is
 * because they layer overlay badges and gradients on the same background-
 * image surface.
 */

.stock-image-pill {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.38);
  color: rgba(255, 255, 255, 0.78);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  pointer-events: none;
  white-space: nowrap;
  /* Sit above gradient overlays / dark scrims but below interactive
     overlays like badges (which carry their own z-index). */
  z-index: 2;
  /* Mild text shadow for readability over visually busy mining imagery
     without making the pill feel like a badge. */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* For very small thumbnails (e.g. sidebar trending rows) the spec allows
   reducing the inset to 4px and bumping font-size to 10px only if needed
   for legibility. Pages can opt in by setting a modifier class. */
.stock-image-pill.is-small {
  right: 4px;
  bottom: 4px;
  font-size: 10px;
}