/**
 * blocks/work-archive/work-archive.css — MUNKÁINK lista (a bundle work-page-éből).
 * Cím + 2 szűrőfül (kategória-archívum linkek) + 3 oszlopos projektkártya-rács.
 */

.work-archive { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.work-archive__head { padding: var(--space-9) 0 var(--space-6); }
.work-archive__title {
	font-family: var(--font-display); font-weight: var(--w-bold);
	font-size: clamp(2.25rem, 0.4rem + 4.7vw, 4.5rem); letter-spacing: -0.03em;
	line-height: 0.98; margin: 0 0 var(--space-6);
}
.work-archive__filterbar {
	display: flex; gap: var(--space-3); flex-wrap: wrap;
	border-top: 1px solid var(--line); padding-top: var(--space-5);
}
.work-archive__filter {
	font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: lowercase;
	background: transparent; border: 1px solid var(--border); color: var(--fg-muted);
	padding: 8px 16px; cursor: pointer; border-radius: 0; white-space: nowrap; text-decoration: none;
	transition: all var(--dur-fast) var(--ease);
}
.work-archive__filter:hover { border-color: var(--ink); color: var(--ink); }
/* aktív fül: a kategória színe (családi = piros, egyéb = kék) — inline háttérrel */

.work-archive__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8) var(--space-6);
	padding: 0 0 var(--space-9);
}
.work-archive__empty {
	font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--fg-muted);
	padding: var(--space-7) 0 var(--space-9);
}

/* --- projektkártya --- */
.project-card { display: block; cursor: pointer; text-decoration: none; color: inherit; }
.project-card__img { overflow: hidden; }
.project-card__img .mph { width: 100%; aspect-ratio: 4 / 3; }
.project-card__img .mph-img { transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease); }
.project-card:hover .project-card__img .mph-img.is-loaded { transform: scale(1.04); }
.project-card__dot { width: 11px; height: 11px; flex: none; display: inline-block; }
.project-card__title {
	font-family: var(--font-display); font-weight: var(--w-semi); font-size: var(--text-xl);
	letter-spacing: -0.01em; margin: var(--space-4) 0 0; color: var(--ink);
	transition: color var(--dur-fast) var(--ease);
	display: flex; align-items: center; gap: 9px;
}
.project-card:hover .project-card__title { color: var(--yellow-press); }

@media (max-width: 760px) {
	.work-archive__head { padding-top: 24px; }
	.work-archive__grid { grid-template-columns: 1fr; gap: var(--space-7); }
}