/*
 * Category tiles on the home page.
 *
 * Ships with the block rather than with the theme: the render callback emits
 * these class names, so a theme that does not know them would leave the block
 * unstyled. Colours and sizes are theme.json tokens — the contract is written
 * down in docs/design/block-css-contract.md.
 */

/* ----------------------------------------------------------------- tiles ---- */
.gsl-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--30);
}

.gsl-tile {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--40);
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.12s, transform 0.12s;
}

.gsl-tile:hover {
	border-color: var(--wp--preset--color--brand);
	transform: translateY(-1px);
}

/* Wide tiles are a desktop device: on phones a wide tile is a whole row, so
   the phone has its own, shorter list (is-wide-m, see the media block). */
@media (min-width: 641px) {
	.gsl-tile.is-wide {
		grid-column: span 2;
	}
}

.gsl-tile__text b {
	display: block;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
}

.gsl-tile__text .gsl-num {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-top: 3px;
}

/* ------------------------------------------------------------- narrower ---- */
@media (max-width: 1080px) {
	.gsl-tiles {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Two columns on a 390px phone leave a tile 174px wide, and after the 52px
   photo the name gets 82 - «нержавіючої» is 105 and breaks in half. The photo
   and the type give the word room instead: 44px and the label size put the
   longest section name on one line. */
@media (max-width: 640px) {
	.gsl-tile {
		gap: 10px;
		padding: var(--wp--preset--spacing--30);
	}

	.gsl-tile__ph,
	.gsl-tile__em {
		width: 44px;
		height: 44px;
	}

	.gsl-tile__text b {
		font-size: var(--wp--preset--font-size--label);
	}
}

@media (max-width: 640px) {
	.gsl-tiles {
		grid-template-columns: repeat(2, 1fr);
		/* Room for the sticky header and the filter bar when «Згорнути»
		   scrolls the grid back into view. */
		scroll-margin-top: 150px;
	}

	.gsl-tile.is-wide-m {
		grid-column: span 2;
	}
}

/* v2: the tile joins the shadow-card family; hover rings it in brand teal
   instead of tinting the border. */
.gsl-tile {
	border: 0;
	background: var(--wp--preset--color--base);
	box-shadow: 0 2px 10px color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
	transition: box-shadow 0.12s, transform 0.12s;
}

.gsl-tile:hover {
	outline: 2px solid var(--wp--preset--color--brand);
	transform: translateY(-2px);
}

/* v2b: the pictogram square. Pastel grounds rotate by position, exactly the
   prototype's four washes. */
.gsl-tile {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* A grid column is minmax(auto, 1fr), so its floor is the widest word inside
   it: «нержавіючої» plus the 52px pictogram measured 190px, the column grew
   past its 1fr share, and on a 390px phone the right-hand tile hung six pixels
   off the screen — «перевір відступи у каталозі» (owner, 22.09.2026). The tile
   is allowed to shrink and the long name to break instead. */
.gsl-tile {
	min-width: 0;
}

.gsl-tile__text {
	min-width: 0;
	/* `anywhere` would also shrink the column to one letter and chop
	   «нержавіюч|ої» in half; `break-word` breaks only a word that really
	   does not fit, and the soft hyphen shows where it happened. */
	overflow-wrap: break-word;
	hyphens: auto;
}

.gsl-tile__em {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: var(--wp--custom--radius--medium);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wp--preset--font-size--x-large, var(--wp--preset--font-size--large));
	background: var(--wp--preset--color--brand-wash);
}

.gsl-tiles > :nth-child(4n+2) .gsl-tile__em {
	background: var(--wp--preset--color--cream);
}

.gsl-tiles > :nth-child(4n+3) .gsl-tile__em {
	background: var(--wp--preset--color--surface);
}

.gsl-tiles > :nth-child(4n) .gsl-tile__em {
	background: var(--wp--preset--color--hairline);
}

/* v3: реальне фото категорії замість емодзі (перехід зі старого сайту). */
.gsl-tile__ph {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: var(--wp--custom--radius--small);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.gsl-tile__ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* v4 — every section reachable from the home (owner, 19.09; research 13).
   Phones show the first N tiles and fold the rest behind a real button; the
   desktop shows them all, so the button never exists there. The fold applies
   only where a script can undo it: without scripting every tile stays shown. */
.gsl-tiles-box {
	display: block;
}

.gsl-tiles__more {
	display: none;
}

@media (max-width: 640px) and (scripting: enabled) {
	.gsl-tiles-box:not(.is-open) .gsl-tile.is-extra {
		display: none;
	}

	.gsl-tiles__more {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		width: 100%;
		min-height: 44px;
		margin-top: var(--wp--preset--spacing--30);
		padding: 0 var(--wp--preset--spacing--40);
		border: 1px solid var(--wp--preset--color--border-strong);
		border-radius: var(--wp--custom--radius--pill);
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--brand-text);
		font: inherit;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		cursor: pointer;
	}

	.gsl-tiles__more-txt {
		display: inline;
	}

	.gsl-tiles__more svg {
		transition: transform 0.2s ease;
	}

	.gsl-tiles-box.is-open .gsl-tiles__more svg {
		transform: rotate(180deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gsl-tiles__more svg {
		transition: none;
	}
}



/* v5 — the photo grows to 64px on wide screens (owner, 23.09). At 52 the tile
   read as a list row: a thumbnail and a lot of white. At 64 the photo is
   recognisable before the name is read (the 19.09 measurement put the floor
   for telling branches apart at 48 — this is that with margin). The tile's
   padding gives the pixels back, so the block is no taller than before. The
   phone keeps its 44 from v4.1: there the name needs the width more. */
@media (min-width: 641px) {
	.gsl-tile__ph,
	.gsl-tile__em {
		width: 64px;
		height: 64px;
	}

	.gsl-tile {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}
}



/* v6 — the words under the count (owner, 23.09; Baymard «provide full
   scope»): three subsections after the number, so the one thing on the
   photo does not stand for the whole shelf. Wide screens only — on a phone
   the tile has room for the name and the number, nothing more. */
.gsl-tile__subs {
	display: none;
}

@media (min-width: 641px) {
	.gsl-tile__subs {
		display: inline;
	}

	.gsl-tile__text .gsl-num {
		line-height: 1.35;
	}
}

/* The phone keeps the subsection count on a wide tile («9 підрозділів») —
   the names above are hidden there, and the number is the next best word
   for breadth. Wide screens have the names and drop the number. */
.gsl-tile__kids {
	display: none;
}

@media (max-width: 640px) {
	.gsl-tile__kids {
		display: inline;
	}
}

/* v6.1 — the phone's photo grows 44 → 56px (owner, 23.09): at 44 any photo is
   a coloured blob (NN/g), at 56 the thing on it can be told. Measured on the
   stand at 390px: the longest names («нержавіючої», «виготовлення») still
   break between words, not inside them; the block grows by 16px. */
@media (max-width: 640px) {
	.gsl-tile__ph,
	.gsl-tile__em {
		width: 56px;
		height: 56px;
	}
}

/* v7 — one height for every half-width tile on a phone (owner, 28.09.2026,
   «давай вирівнювати»). The names that came back from Prom run one to three
   lines, and a grid row is only as tall as its own tallest name, so the rows
   stepped 84 / 89 / 98 and the photos sat at three different levels. 98 is
   the three-line name plus the count, measured on the stand at 390px; the
   shorter tiles centre inside it, so every photo lands on one line. */
@media (max-width: 640px) {
	.gsl-tile:not(.is-wide-m) {
		box-sizing: border-box;
		min-height: 98px;
	}
}