/* writeups.css — HTB writeups section (badges, filter chips, card grid).
   Builds on the --md-* tokens from main.css and the prose styles in blog.css. */

/* ---------- difficulty badges ---------- */

.diff-badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 0.12rem 0.5rem;
	border-radius: var(--shape-full);
	border: 1px solid currentColor;
	white-space: nowrap;
}

.diff-very-easy { color: #56d364; }
.diff-easy      { color: #3fb950; }
.diff-medium    { color: #d29922; }
.diff-hard      { color: #f85149; }
.diff-insane    { color: #bc8cff; }

/* ---------- filter chips ---------- */

.wu-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.wu-chip {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	color: var(--md-on-surface-variant);
	background: var(--md-surface-container-low);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--shape-full);
	padding: 0.3rem 0.9rem;
	cursor: pointer;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
		background var(--dur) var(--ease);
}

.wu-chip:hover {
	color: var(--md-on-surface);
	border-color: var(--md-outline);
}

.wu-chip.is-active {
	color: var(--md-on-primary);
	background: var(--md-primary);
	border-color: var(--md-primary);
}

/* ---------- difficulty groups ---------- */

.wu-group {
	margin-bottom: 2.5rem;
}

.wu-group-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-size: 1rem;
}

.wu-group-count {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	color: var(--md-on-surface-variant);
}

/* ---------- card grid ---------- */

.wu-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 1rem;
}

.wu-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border-radius: var(--shape-lg);
	background: var(--md-surface-container-low);
	box-shadow: var(--elev-1);
	padding: 1.1rem 1.2rem;
	transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}

.wu-card:hover {
	box-shadow: var(--elev-2);
	background: var(--md-surface-container);
	text-decoration: none;
}

.wu-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
}

.wu-card-head h3 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--md-on-surface);
}

.wu-card-sub {
	margin: 0;
	font-size: 0.9rem;
	color: var(--md-on-surface-variant);
}

.wu-card-meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--md-on-surface-variant);
}

.wu-os {
	color: var(--md-on-surface);
}

.wu-os::after {
	content: "·";
	margin-left: 0.6rem;
	color: var(--md-outline);
}

/* ---------- single writeup header ---------- */

.post.writeup .post-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
}