/* Chips and tags (it-340).
 *
 * .mkt-chip — a 44px pill naming something (the industries strip); --brand is the one that links.
 * .mkt-tag  — a small tonal label (Company / Yours / Opened 2×), colored by meaning.
 */

.mkt-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mkt-space-2);
  min-height: var(--mkt-tap);
  padding: 0 var(--mkt-space-4-5);
  border-radius: var(--mkt-radius-pill);
  background: var(--mkt-neutral);
  color: var(--mkt-text-strong);
  font-size: var(--mkt-size-md);
  text-decoration: none;
}

.mkt-chip--brand {
  background: var(--mkt-tint-strong);
  color: var(--mkt-purple-ink);
  font-weight: var(--mkt-weight-semibold);
}

.mkt-chip--brand:hover {
  background: var(--mkt-tint-deep);
  color: var(--mkt-purple-ink);
}

.mkt-chip .mkt-icon {
  width: var(--mkt-icon-sm);
  height: var(--mkt-icon-sm);
  stroke-width: var(--mkt-stroke-bold);
}

.mkt-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mkt-space-2-5);
}

/* The industries strip: a label and its chips. */
.mkt-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mkt-space-4) var(--mkt-space-7);
}

.mkt-strip__label {
  flex: 0 0 auto;
  font-size: var(--mkt-size-md);
  font-weight: var(--mkt-weight-semibold);
  color: var(--mkt-text);
}

.mkt-strip .mkt-chip-row {
  flex: 1 1 var(--mkt-basis-3xl);
}

.mkt-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--mkt-space-1-5);
  padding: var(--mkt-space-1) var(--mkt-space-2);
  border-radius: var(--mkt-radius-pill);
  font-size: var(--mkt-size-3xs);
  font-weight: var(--mkt-weight-bold);
  white-space: nowrap;
  background: var(--mkt-tint-strong);
  color: var(--mkt-purple-ink);
}

.mkt-tag--neutral { background: var(--mkt-neutral); color: var(--mkt-text-strong); }
.mkt-tag--green { background: var(--mkt-green-bg); color: var(--mkt-green); }
.mkt-tag--amber { background: var(--mkt-amber-bg); color: var(--mkt-amber); }
.mkt-tag--blue { background: var(--mkt-blue-bg); color: var(--mkt-blue); }
.mkt-tag--sun { background: var(--mkt-sun-bg); color: var(--mkt-sun); }

.mkt-tag--md {
  padding: var(--mkt-space-1-5) var(--mkt-space-2-5);
  font-size: var(--mkt-size-2xs);
}

/* A status dot before a line of text. */
.mkt-dot {
  width: var(--mkt-dot-sm);
  height: var(--mkt-dot-sm);
  border-radius: 50%;
  background: var(--mkt-green-dot);
  flex: none;
}