/*
 * 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;
	}
}


/* v8 — the phone lists the sections in one column (owner, 09.10.2026,
   «давай Б2»). Measured on the stand at 390 px against fourteen shops: the
   name was 11 px (the `label` token, chosen on 19.09 so that «нержавіючої»
   fit the 84 px text column of a half-width tile) while the count under it
   was 12.5 — the secondary line outranked the name — and every shop measured
   sets its section names at 12–16 px, median 14; the live Prom storefront of
   gsl.com.ua lists its groups in one column at 14 bold. One column gives the
   name 256 px, so the longest section («Фурнітура для біжутерії з нержавіючої
   сталі») runs to two lines instead of four, and the name takes the `medium`
   token. The photo keeps 56, so a row is 72 px, and eight rows before the
   fold (`collapse` 8 in front-page.html) stand where ten half-width tiles
   stood: 632 px against 601. A wide-mobile tile spanned two columns; in a
   one-column grid that span would open a second, implicit column, so it is
   released. Исследования/34-назви-розділів-телефон-09.10.html. */
@media (max-width: 640px) {
	.gsl-tiles {
		grid-template-columns: 1fr;
		gap: 8px;
	}

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

	.gsl-tile,
	.gsl-tile:not(.is-wide-m) {
		min-height: 0;
		padding: 8px 12px;
		gap: 12px;
	}

	.gsl-tile__text b {
		font-size: var(--wp--preset--font-size--medium);
		line-height: 1.25;
	}

	.gsl-tile__text .gsl-num {
		margin-top: 1px;
		line-height: 1.3;
	}
}


/* v9 — the phone's section tiles in the layout the owner chose from three
   (09.10.2026: «сделай переключатель … потом один оставим»; chosen
   16.10.2026, the switch and the other two gone). It mixes the list and the
   squares the way Sindtex and Moyo build their section grids: three squares
   per row, the photo filling the square's width over a centred 14px name,
   and a section whose name would not fit two such lines (`is-short`,
   render.php: up to 23 characters) as a full-width row with a 72px photo
   instead. Eight tiles stand before the fold in 536px. `dense` lets a later
   square fill the gap a lone square leaves before a row, so the grid has no
   holes. `:root` keeps these above the v8 list rules they replace. */
@media (max-width: 640px) {
	:root .gsl-tiles {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-flow: dense;
		gap: 8px;
	}

	:root .gsl-tile:not(.is-short) {
		grid-column: 1 / -1;
		padding: 8px 12px;
	}

	:root .gsl-tile:not(.is-short) .gsl-tile__ph,
	:root .gsl-tile:not(.is-short) .gsl-tile__em {
		width: 72px;
		height: 72px;
	}

	:root .gsl-tile.is-short {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		padding: 6px 6px 10px;
		text-align: center;
	}

	:root .gsl-tile.is-short .gsl-tile__ph,
	:root .gsl-tile.is-short .gsl-tile__em {
		width: 100%;
		height: 96px;
	}

	/* The square is a little wider than the photo; the box turns white so the
	   contained picture (shot on white) has no grey bands beside it. */
	:root .gsl-tile.is-short .gsl-tile__ph {
		background: var(--wp--preset--color--base);
	}

	:root .gsl-tile.is-short .gsl-tile__ph img {
		object-fit: contain;
	}

	:root .gsl-tile.is-short .gsl-tile__text b {
		font-size: var(--wp--preset--font-size--base);
		line-height: 1.2;
	}

	:root .gsl-tile.is-short .gsl-tile__kids {
		display: none;
	}
}