/* ==========================================================================
   tool-chip.css — a named tool with its logo, used in piece metadata.

   The logo is painted as a mask filled with currentColor, not as an <img>,
   so a single monochrome file works in both themes and needs no duplicate
   light/dark artwork. Files live in assets/img/tools/ (see the README there).

   Adding a tool: drop a monochrome mark in assets/img/tools/, then add one
   selector to the list at the bottom of this file. SVG or PNG both work —
   only the alpha channel is read either way.
   ========================================================================== */

.tool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}

/* Hidden by default so a browser without mask support shows a clean text-only
   chip rather than a solid currentColor rectangle. */
.tool-chip__logo {
  display: none;
  flex: none;
  width: var(--tool-logo-size, 1.15rem);
  height: var(--tool-logo-size, 1.15rem);
}

/* Comes down with the company marks on a phone. Note this trims width, not
   height: a chip is as tall as its text plus padding, and the logo is already
   smaller than that, so shrinking it does not reclaim vertical space. */
@media (max-width: 48rem) {
  .tool-chips { --tool-logo-size: 1rem; }
}

@media (max-width: 30rem) {
  .tool-chips { --tool-logo-size: 0.9rem; }
}

@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  .tool-chip__logo {
    display: block;
    background-color: currentColor;
    -webkit-mask: var(--tool-logo) center / contain no-repeat;
            mask: var(--tool-logo) center / contain no-repeat;
  }
}

/* --- The tools themselves ------------------------------------------------- */
.tool-chip__logo[data-tool="unreal-engine"] {
  --tool-logo: url("/assets/img/tools/unreal-engine.svg");
}
.tool-chip__logo[data-tool="blender"] {
  --tool-logo: url("/assets/img/tools/blender.png");
}
.tool-chip__logo[data-tool="maya"] {
  --tool-logo: url("/assets/img/tools/maya.png");
}
.tool-chip__logo[data-tool="houdini"] {
  --tool-logo: url("/assets/img/tools/houdini.png");
}