/*
  Reusable component patterns — Kirill Bush / in-buro.com

  Depends on design-tokens.css (must be linked first). These are patterns
  that repeat across case studies (numbered process steps, etc.) and were
  previously re-drawn by hand per page. Building here so they're edited
  once, in code, instead of re-exported from Figma per case study.
*/

/* ---- Step badge: numbered circle used for process steps (1-5, A-E, ...) ---- */
.step-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 175px;
}
.step-badge-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(27, 30, 36, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-size: 27.79px;
  font-weight: 600;
  letter-spacing: 0.77px;
  color: var(--black);
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  flex-shrink: 0;
}
.step-badge-circle.on-dark {
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--white);
}
.step-badge-label {
  font-size: 13px;
  line-height: 1.2;
  color: var(--black-72);
  text-align: center;
}
.step-badge-label.on-dark {
  color: var(--white-72);
}

/* ---- Pill: rounded outline tag used for interview questions / task lists ---- */
.pill {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 20px;
  padding: 12px 40px 12px 16px;
  font-family: var(--font-body-brand), 'Inter', sans-serif;
  font-size: 13.2px;
  color: var(--white);
  line-height: 20px;
  letter-spacing: 0.2px;
}
.pill.on-light {
  border-color: rgba(27, 30, 36, 0.24);
  color: var(--black);
}
.pill.rounded-full {
  border-radius: 39px;
}