/* ==========================================================================
   Tags — .tag-small, .tag-large and variants
   ========================================================================== */

/* ── Tag small ─────────────────────────────────────────────────────────────── */
.tag-small {
  display: inline-flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  border: 1px solid #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: default;
}
a.tag-small { cursor: pointer; }
a.tag-small:hover { background-color: #fff; color: #1C1B1F; }

.tag-small--dark { border-color: rgba(28,27,31,0.3); color: var(--text-title); }
a.tag-small--dark:hover { background-color: var(--text-title); color: #fff; border-color: var(--text-title); }

.tag-small--filled { background-color: #fff; border-color: #fff; color: var(--text-title); }
a.tag-small--filled:hover { background-color: var(--bg-primary); border-color: var(--bg-primary); }

.tag-small--black { background-color: var(--text-title); border-color: var(--text-title); color: #fff; }
a.tag-small--black:hover { background-color: #000; border-color: #000; }

/* ── Tag large ─────────────────────────────────────────────────────────────── */
.tag-large {
  display: inline-flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  border: 1px solid #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.2px;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: default;
}
a.tag-large { cursor: pointer; }
a.tag-large:hover { background-color: #fff; color: #1C1B1F; }

.tag-large--dark { border-color: rgba(28,27,31,0.3); color: var(--text-title); }
a.tag-large--dark:hover { background-color: var(--text-title); color: #fff; border-color: var(--text-title); }

.tag-large--black { background-color: var(--text-title); border-color: var(--text-title); color: #fff; }
a.tag-large--black:hover { background-color: #000; border-color: #000; }