/*
 * mt-catgrid.css: homepage category grid (HOME-021), "További termékek" row and NONOX brand box.
 * Enqueued by mu-plugins/mt-catgrid.php on the front page only. Source: fooldal-2026-10/1_design/_build/mockup.src.html
 * sections 4/b, 4/d, 4/e (owner OK 2026-10-11; revision with Zoli's 8 cells), ported to the live theme:
 *   - colours, type and spacing only from theme presets and --mt-* tokens (DS-01 no new colours, DS-02 type scale,
 *     DS-03 4 px spacing scale); the mockup's raw px values are mapped to the nearest token (list: p2b/BUILD.md);
 *   - breakpoints from the DS04-09 scale (600 · 781 · 860 · 1023);
 *   - the live prose rules that leak into post content are reset here with selectors that outrank them:
 *       .wp-block-post-content h2/h3:not(:first-child) { margin-top } (0,2,1)
 *       .wp-block-post-content img { border-radius; box-shadow; height: auto } (0,1,1)   (only the NONOX logo is an <img>)
 *       .wp-block-post-content li { margin-bottom: 8px } (0,1,1)
 *   - NEVER style .mt-cat-tile here: it is the HOME-017 scroll-in hook (mt.js), on the cells, the "További" items and the
 *     NONOX card. The theme's old tile CSS is scoped to div.mt-cats / a.mt-cat-tile (the DE/SK front pages).
 *   - .mt-brand-card / .mt-brand-list / .mt-brand-logo come from style.css (the NONOX brand page) and are reused, not copied.
 * Only the 120 ms state changes move; prefers-reduced-motion turns them off. Hover tints only on devices that hover.
 */

/* ── Grid ("alkatrész-szekrény"): one ruled grid, one cell per category ───────────── */
ul.mt-cats {
	box-sizing: border-box;
	list-style: none;
	margin-inline: 0;
	margin-bottom: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));   /* equal tracks: a long title can't widen its column (DS04-08) */
	border-top: 1px solid var(--wp--preset--color--border);
}
.mt-cats > .mt-catcell {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	margin: 0;   /* prose li */
	padding: var(--mt-space-6);
	border-bottom: 1px solid var(--wp--preset--color--border);
	border-left: 1px solid var(--wp--preset--color--border);
	transition: background-color var(--mt-dur-fast) var(--mt-ease);
}
.mt-cats > .mt-catcell:nth-child(4n + 1) { border-left: 0; }   /* open outer edges, inner rules only */
.mt-catcell > .mt-catcell__img {   /* <svg><use> from mt-catgrid/pictograms.svg; its path is fill="currentColor" (DS05-12) */
	display: block;
	flex: none;
	width: 88px;
	height: 88px;
	margin: 0 0 var(--mt-space-4) -6px;   /* -6px: optical, the drawing's own margin in its 285 box (not a spacing step) */
	color: var(--wp--preset--color--primary);
}
.mt-cats .mt-catcell > .mt-catcell__title {
	margin: 0;   /* prose h3:not(:first-child) */
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;   /* a heading and a label at once: 1.2 sits in both Blueprint ranges (headings 1.1–1.3, labels 1.0–1.2) */
	overflow-wrap: normal;   /* break only at the config's soft hyphens: „Épület-|vasalatok" */
	hyphens: manual;
}
.mt-catcell .mt-catcell__link {
	color: var(--wp--preset--color--heading);
	text-decoration-line: none;   /* owner 2026-11-12: the titles are plain labels; the whole cell is the link, the underline shows on hover / focus */
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;   /* one line weight in the section: the underlines match the 1 px rules */
	text-underline-offset: 0.25em;
	transition: color var(--mt-dur-fast) var(--mt-ease), text-decoration-color var(--mt-dur-fast) var(--mt-ease);
}
.mt-catcell .mt-catcell__link::after {   /* stretched link: the whole cell clicks through the title */
	content: "";
	position: absolute;
	inset: 0;
}
.mt-catcell > .mt-catcell__desc {
	margin: var(--mt-space-2) 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	hyphens: none;   /* the soft hyphens only act on phones (below) */
}
.mt-catcell > .mt-catcell__shop {   /* a UI label: line height 1.2, and a 44 px tap area at every width (Blueprint p4, p7) */
	position: relative;
	z-index: 1;   /* above the stretched link */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: auto;   /* bottom of the cell: in one row the "Webshop" links line up */
	margin-bottom: calc(-1 * var(--mt-space-3));   /* the tap area reaches into the cell padding instead of growing the cell */
	padding: 0 var(--mt-space-4) 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	color: var(--wp--preset--color--muted);
	text-decoration: underline;   /* currentColor: next to the muted description the underline is its only link cue */
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	transition: color var(--mt-dur-fast) var(--mt-ease);
}
.mt-catcell > .mt-catcell__shop:focus-visible {
	color: var(--wp--preset--color--primary);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}
.mt-catcell__shop .screen-reader-text {   /* in case the core class isn't styled on the page */
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
/* Focus: a 2 px primary ring on the cell's inner edge (the stretched link's box); hover look on focus too. */
.mt-catcell .mt-catcell__link:focus-visible { outline: none; color: var(--wp--preset--color--primary); text-decoration-line: underline; }
.mt-catcell .mt-catcell__link:focus-visible::after { outline: 2px solid var(--wp--preset--color--primary); outline-offset: -2px; }
.mt-cats > .mt-catcell:has(.mt-catcell__link:focus-visible) { background-color: var(--mt-blue-tint); }
/* Hover only on the title link's area (not above the small "Webshop"), and only where the device really hovers. */
@media (hover: hover) {
	.mt-cats > .mt-catcell:has(.mt-catcell__link:hover) { background-color: var(--mt-blue-tint); }
	.mt-catcell .mt-catcell__link:hover { color: var(--wp--preset--color--primary); text-decoration-line: underline; }
	.mt-catcell > .mt-catcell__shop:hover { color: var(--wp--preset--color--primary); }
}
@media (max-width: 1023px) {
	ul.mt-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mt-cats > .mt-catcell:nth-child(4n + 1) { border-left: 1px solid var(--wp--preset--color--border); }
	.mt-cats > .mt-catcell:nth-child(2n + 1) { border-left: 0; }
}
@media (max-width: 600px) {   /* owner 2026-11-12 (restyle A): phones get rows, pictogram left, title + text right, like the "További" rows */
	ul.mt-cats { grid-template-columns: minmax(0, 1fr); }
	.mt-cats > .mt-catcell {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		column-gap: var(--mt-space-4);
		align-items: start;
		padding: var(--mt-space-4) 0;   /* rows run edge to edge: the pictograms stand on the section's edge */
	}
	.mt-cats > .mt-catcell:nth-child(n) { border-left: 0; }   /* outranks the ≤1023 column rules */
	.mt-catcell > .mt-catcell__img { grid-row: 1 / span 3; width: 56px; height: 56px; margin: 0; }   /* 56 px: DS05-Q 6; no optical nudge on the section edge (the rope drawing fills its box) */
	.mt-catcell > .mt-catcell__title,
	.mt-catcell > .mt-catcell__desc,
	.mt-catcell > .mt-catcell__shop { grid-column: 2; }
	.mt-cats .mt-catcell > .mt-catcell__title { font-size: var(--wp--preset--font-size--medium); }
	.mt-catcell > .mt-catcell__desc {   /* owner 2026-10-11: the description shows on phones too (body text: line height 1.5) */
		margin-top: var(--mt-space-1);
		hyphens: manual;
	}
	.mt-catcell > .mt-catcell__shop { justify-self: start; margin-top: 0; }
}
/* Two title size steps only (large / medium), as DS02-05 set for the old tile labels: at 320 px a long title breaks at its
   soft hyphen („Rozsda-mentes", „Anya-csavarok", „Épület-vasalatok"), the mockup's own behaviour, instead of a third step. */

/* ── "További termékek": a secondary row, direct links, the same line language at a smaller scale ─── */
.mt-cats + .mt-moreprod {
	box-sizing: border-box;
	margin-top: var(--mt-space-11);
}
.mt-moreprod > .mt-moreprod__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--mt-space-1) var(--mt-space-3);
	margin: 0 0 var(--mt-space-3);
}
.mt-moreprod__head > .mt-moreprod__title {
	margin: 0;   /* first child of its head, so the prose h3 rule doesn't reach it */
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
	color: var(--wp--preset--color--heading);
}
.mt-moreprod__head > .mt-moreprod__note {   /* a sentence, so body text: 1.5 */
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}
.mt-moreprod > .mt-moreprod__list {
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--wp--preset--color--border);
}
.mt-moreprod__list > .mt-moreprod__item {
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--mt-space-3);
	min-width: 0;
	margin: 0;   /* prose li */
	padding: var(--mt-space-3) var(--mt-space-6);   /* side padding = the cells': the icons stand on the pictograms' edge */
	border-bottom: 1px solid var(--wp--preset--color--border);
	border-left: 1px solid var(--wp--preset--color--border);
	transition: background-color var(--mt-dur-fast) var(--mt-ease);
}
.mt-moreprod__list > .mt-moreprod__item:first-child { border-left: 0; }
.mt-moreprod__item > .mt-moreprod__img {   /* <svg><use>, like the cells */
	flex: none;
	display: block;
	width: 40px;
	height: 40px;
	margin: 0;
	color: var(--wp--preset--color--primary);
}
.mt-moreprod__item > .mt-moreprod__text { min-width: 0; }
.mt-moreprod__text > .mt-moreprod__link {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;   /* UI label (Blueprint p4: 1.0–1.2); the whole item is its tap area */
	color: var(--wp--preset--color--heading);
	text-decoration-line: none;   /* plain labels like the cell titles; underline on hover / focus */
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	hyphens: manual;
	transition: color var(--mt-dur-fast) var(--mt-ease), text-decoration-color var(--mt-dur-fast) var(--mt-ease);
}
.mt-moreprod__text > .mt-moreprod__link::after { content: ""; position: absolute; inset: 0; }
.mt-moreprod__text > .mt-moreprod__dest {
	display: block;
	margin-top: var(--mt-space-1);
	font-size: var(--mt-font-size-xs);
	line-height: 1.2;   /* one-line metadata (a destination / domain) = a label */
	color: var(--wp--preset--color--muted);
}
.mt-moreprod__text > .mt-moreprod__link:focus-visible { outline: none; color: var(--wp--preset--color--primary); text-decoration-line: underline; }
.mt-moreprod__text > .mt-moreprod__link:focus-visible::after { outline: 2px solid var(--wp--preset--color--primary); outline-offset: -2px; }
.mt-moreprod__list > .mt-moreprod__item:has(.mt-moreprod__link:focus-visible) { background-color: var(--mt-blue-tint); }
@media (hover: hover) {
	.mt-moreprod__list > .mt-moreprod__item:has(.mt-moreprod__link:hover) { background-color: var(--mt-blue-tint); }
	.mt-moreprod__text > .mt-moreprod__link:hover { color: var(--wp--preset--color--primary); text-decoration-line: underline; }
}
@media (max-width: 781px) {
	.mt-moreprod__text > .mt-moreprod__link { font-size: var(--wp--preset--font-size--small); }   /* DS02-05: 14 up to 782 px */
}
@media (min-width: 601px) and (max-width: 860px) {   /* 3 narrow cells: the icon above the name, like the big cells */
	.mt-moreprod__list > .mt-moreprod__item { flex-direction: column; align-items: flex-start; gap: var(--mt-space-2); }
	.mt-moreprod__item > .mt-moreprod__img { width: 32px; height: 32px; }
}
@media (max-width: 600px) {
	.mt-moreprod > .mt-moreprod__list { grid-template-columns: minmax(0, 1fr); }
	.mt-moreprod__list > .mt-moreprod__item { border-left: 0; padding: var(--mt-space-3) 0; gap: var(--mt-space-4); }   /* edge to edge, like the cell rows */
	.mt-moreprod__item > .mt-moreprod__img { width: 32px; height: 32px; margin-right: var(--mt-space-6); }   /* 32 + 24 = the cells' 56 px track: names line up with the titles */
}

/* ── NONOX brand box: one brand card (a brand, not a product category), after the eco band ────── */
.mt-nonox {
	box-sizing: border-box;
	background: var(--wp--preset--color--base);
	padding: var(--mt-space-16) var(--wp--style--root--padding-right) 0 var(--wp--style--root--padding-left);   /* the magazine below brings its own top padding */
}
.mt-nonox > .mt-nonox__inner {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
}
.mt-nonox .mt-nonox__card {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--mt-space-11);
	align-items: center;
	padding: var(--mt-space-8);
}
.mt-nonox__text > .mt-eyebrow { margin: 0; }
.mt-nonox .mt-nonox__text > .mt-nonox__title {
	margin: var(--mt-space-2) 0 0;   /* prose h2:not(:first-child) */
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
}
.mt-nonox__text > .mt-nonox__lead {
	margin: var(--mt-space-3) 0 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
	color: var(--wp--preset--color--body);
}
.mt-nonox__text > .mt-brand-list { margin-top: var(--mt-space-4); }
.mt-nonox__text > .mt-nonox__more { margin: var(--mt-space-1) 0 0; }   /* + the 44 px tap area's own space ≈ the 16 px rhythm */
.mt-nonox__more > a {   /* a UI label: line height 1.2, 44 px tap area (Blueprint p4, p7) */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	line-height: 1.2;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	transition: color var(--mt-dur-fast) var(--mt-ease);
}
.mt-nonox__more > a:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; border-radius: 2px; }
@media (hover: hover) {
	.mt-nonox__more > a:hover { color: var(--wp--preset--color--heading); }
}
.mt-nonox .mt-nonox__logo { margin: 0; width: 100%; justify-self: center; }
.mt-nonox .mt-nonox__logo img { border-radius: 0; box-shadow: none; }   /* prose img: the trademark plate keeps its square corners */
@media (max-width: 1023px) {
	.mt-nonox .mt-nonox__card { grid-template-columns: minmax(0, 1fr); gap: var(--mt-space-6); padding: var(--mt-space-6); }
	.mt-nonox .mt-nonox__logo { order: -1; max-width: 300px; justify-self: start; }   /* phones: the brand mark first */
}
@media (max-width: 781px) {
	.mt-nonox { padding-top: var(--mt-space-12); }
}

@media (prefers-reduced-motion: reduce) {
	.mt-cats > .mt-catcell,
	.mt-catcell .mt-catcell__link,
	.mt-catcell > .mt-catcell__shop,
	.mt-moreprod__list > .mt-moreprod__item,
	.mt-moreprod__text > .mt-moreprod__link,
	.mt-nonox__more > a { transition: none; }
}