/* Badge: a pill with an icon and a short label (25 Sept 2026).
   Reusable anywhere a project, service or page needs its facts at a glance:
   sector, scope, platform, technology. First used on the case study headers.

   Markup:
     <ul class="badges">
       <li class="badge"><svg class="badge__icon" viewBox="0 0 24 24" aria-hidden="true">...</svg>Mobile</li>
     </ul>
   Icons: 24px stroke icons (Lucide style, stroke-width 1.75), inherit the
   text colour. The label carries the meaning; the icon is decorative.
   On a dark or photographic ground add .badges--on-dark to the list.
   14px text (the site's floor for labels), sentence case, never caps. */
.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.badge {
  display: inline-flex; align-items: center; gap: .4375rem;
  min-height: 2rem; padding: .3125rem .8125rem .3125rem .625rem;
  border: 1px solid var(--ed-line, #d8dce1); border-radius: 999px;
  background: var(--surface, #fff); color: var(--ed-ink, #121417);
  font-size: .875rem; font-weight: 500; line-height: 1.2; white-space: nowrap;
}
.badge__icon { flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: var(--brand, #0052f8); }

.badges--on-dark .badge {
  border-color: rgb(255 255 255 / .22); background: rgb(255 255 255 / .1); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.badges--on-dark .badge__icon { color: #fff; opacity: .85; }