/**
 * blocks/works/works.css — Főoldal MUNKÁINK (a bundle .works szekciója, BEM-re skálázva).
 * Divider + cím + 2 színkódolt kategória-teaser, amelyek a taxonómia-archívumokra visznek.
 */

.works {
	max-width: var(--container); margin: 0 auto;
	padding: var(--space-9) var(--gutter) var(--space-9);
}
.works__head {
	display: flex; align-items: baseline; justify-content: space-between;
	border-top: 2px solid var(--ink); padding-top: var(--space-6); margin-bottom: var(--space-7);
}
.works__title {
	margin: 0; font-family: var(--font-display); font-weight: var(--w-bold);
	font-size: var(--text-2xl); letter-spacing: -0.015em;
	display: inline-flex; align-items: center; gap: 14px;
}
.works__title::before { content: ""; width: 16px; height: 16px; flex: none; display: inline-block; background: var(--red); }
/* Négyzet színe adminból (a heading-blokk „Négyzet színe" választója → is-sq-<szín> osztály).
   Az első szelektor a fronton (osztály a címen), a második a szerkesztőben (osztály a blokk-wrapperen). */
.works__title.is-sq-red::before,    .is-sq-red .works__title::before    { background: var(--red); }
.works__title.is-sq-blue::before,   .is-sq-blue .works__title::before   { background: var(--blue); }
.works__title.is-sq-yellow::before, .is-sq-yellow .works__title::before { background: var(--yellow); }
.works__title.is-sq-ink::before,    .is-sq-ink .works__title::before    { background: var(--ink); }

.works__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-7); }

.work-cat { display: block; cursor: pointer; text-decoration: none; color: inherit; }
.work-cat__img { overflow: hidden; }
.work-cat__img .mph { width: 100%; aspect-ratio: 4 / 3; }
.work-cat__img .mph-img { transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease); }
.work-cat:hover .work-cat__img .mph-img.is-loaded { transform: scale(1.03); }
.work-cat__row { display: flex; align-items: center; gap: 12px; margin-top: var(--space-5); }
.work-cat__dot { width: 11px; height: 11px; flex: none; display: inline-block; }
/* A négy brandszín — adminból választható (mondrian/work-cat „Pont színe"). */
.work-cat__dot--red { background: var(--red); }
.work-cat__dot--blue { background: var(--blue); }
.work-cat__dot--yellow { background: var(--yellow); }
.work-cat__dot--ink { background: var(--ink); }
.work-cat__name {
	font-family: var(--font-display); font-weight: var(--w-semi); font-size: var(--text-xl);
	letter-spacing: -0.01em; color: var(--ink); transition: color var(--dur-fast) var(--ease);
}
.work-cat__arrow {
	margin-left: auto; font-family: var(--font-mono); font-size: 17px; color: var(--fg-subtle);
	transition: transform var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.work-cat:hover .work-cat__name { color: var(--yellow-press); }
.work-cat:hover .work-cat__arrow { transform: translateX(6px); color: var(--yellow-press); }
.work-cat__desc { font-family: var(--font-body); font-size: 16px; color: var(--fg-muted); margin: 8px 0 0; max-width: 40ch; }

@media (max-width: 760px) {
	.works { padding-top: 0; padding-bottom: var(--space-8); }
	.works__grid { grid-template-columns: 1fr; gap: var(--space-7); }
}