/* =====================================================================
   work-grid.css
   The category chip row and the project tile grid. Filtering and
   "load more" are added later by work-grid.js on this same markup —
   for now every chip is a real link to that category's archive page,
   and every project shows at once.
   ===================================================================== */

.work-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-6);
}

.work-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-xs);
	color: var(--ink);
	background: var(--surface);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-pill);
	padding: 0.5rem 0.95rem;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--duration) var(--ease);
}
.work-chip:hover {
	border-color: var(--chip-color, var(--ink));
}
.work-chip.is-current {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}
.work-chip .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	box-shadow: 0 0 0 1px rgba(17, 22, 43, 0.25);
}

.work-grid {
	display: grid;
	gap: var(--space-6) var(--space-5);
	grid-template-columns: 1fr;
}
@media (min-width: 600px) {
	.work-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 960px) {
	.work-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.work-tile-art {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--surface);
}
.work-tile-art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.work-tile-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.work-tile h3 {
	font-size: var(--text-lg);
	margin-top: var(--space-3);
}
.work-tile h3 a {
	color: var(--ink);
	text-decoration: none;
}
.work-tile h3 a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.work-tile-cat {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--text-xs);
	color: var(--muted);
	margin-top: var(--space-1);
}
.work-tile-cat .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
	box-shadow: 0 0 0 1px rgba(17, 22, 43, 0.25);
}

.work-more-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-6);
}
.work-more-row[hidden] {
	display: none;
}