/*
 * The category tiles (inc/category-tiles.php), on FLOOR.md (c).
 *
 * Every value is a theme token or a ratio: no hex, no font name, no store. The
 * grid is declared once with no media query above 600, so a tile drops a column
 * before it goes under its minimum. Below 600 it becomes a sideways rail that
 * shows 3.5 tiles, so the buyer can see there is more.
 */

.st-tiles {
	--st-tile-min: 140px;
	--st-tile-gap: 1rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--st-tile-min), 100%), 1fr));
	gap: var(--st-tile-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-tile {
	margin: 0;
	padding: 0;
}

.st-tile__link {
	display: block;
	text-decoration: none;
	color: var(--wp--preset--color--ti-fg);
	transition: opacity 200ms ease;
}

.st-tile__link:hover,
.st-tile__link:focus-visible {
	opacity: 0.75;
}

/* The box a garment is photographed against: 1/1, over the store's panel. */
.st-tile__art {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--wp--custom--st-panel, var(--wp--preset--color--ti-bg-alt));
	border-radius: var(--wp--custom--st-radius, 2px);
}

.st-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 400ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.st-tile__link:hover .st-tile__img {
	transform: scale(1.02);
}

/* The label sits UNDER the tile (FLOOR-PATTERNS S5), never on the photograph: a
   wash over the art fades the hem of every garment. Two lines at most, so a
   long name wraps on a phone instead of being cut off. */
.st-tile__label {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
	margin-top: 0.5rem;
	text-align: center;
	font-family: var(--wp--preset--font-family--space-mono);
	font-size: var(--wp--preset--font-size--xs, 12px);
	line-height: 1.4;
	letter-spacing: var(--wp--custom--st-track, 0.12em);
	text-transform: var(--wp--custom--st-case, uppercase);
}

@media (max-width: 599.98px) {
	.st-tiles {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - 2 * var(--st-tile-gap)) / 3.5);
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.st-tiles::-webkit-scrollbar {
		display: none;
	}

	.st-tile {
		scroll-snap-align: start;
	}

	/* An 84px tile fits "ACCESSORIES" in 12px mono only without tracking. */
	.st-tile__label {
		letter-spacing: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.st-tile__link,
	.st-tile__img {
		transition: none;
	}

	.st-tile__link:hover .st-tile__img {
		transform: none;
	}
}