/* ub/category-tiles: 2 columns up to 1023 px, then as many as fit (4 categories: 4 in a row).
   Motion (view.js marks the tiles below the first screen): they rise and their icon draws its lines,
   once; the tile lifts on hover. Only with motion allowed (reduced motion, html[data-ub-motion="off"]). */

.wp-block-ub-category-tiles .ub-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 1024px) {
	.wp-block-ub-category-tiles .ub-tiles { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}
.ub-tile { display: flex; margin: 0; }
.ub-tile__link {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "icon go" "name name" "meta meta";
	align-content: start;
	gap: 0.5rem 1rem;
	inline-size: 100%;
	padding: clamp(1rem, 0.75rem + 1vw, 1.5rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.ub-tile__icon {
	grid-area: icon;
	display: grid;
	place-items: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent);
	color: var(--wp--preset--color--primary);
}
.ub-tile__svg { inline-size: 2rem; block-size: 2rem; }
.ub-tile__go {
	grid-area: go;
	justify-self: end;
	display: grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}
.ub-tile__go::before {
	content: "";
	inline-size: 1.125rem;
	block-size: 1.125rem;
	background-color: currentColor;
	-webkit-mask: var(--ub-i-arrow-right, var(--ub-i-none)) center / contain no-repeat;
	mask: var(--ub-i-arrow-right, var(--ub-i-none)) center / contain no-repeat;
}
.ub-tile__name {
	grid-area: name;
	margin-block-start: 0.75rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.ub-tile__meta { grid-area: meta; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 0.75rem; font-size: 0.875rem; }
.ub-tile__price { color: var(--wp--preset--color--primary); font-weight: 700; }
.ub-tile__count { color: var(--wp--preset--color--muted); }

.ub-tile__link:hover { border-color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--line)); background: var(--wp--preset--color--base); }
.ub-tile__link:hover .ub-tile__name { color: var(--wp--preset--color--primary); }
.ub-tile__link:hover .ub-tile__go { border-color: var(--wp--preset--color--primary); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); }

@media (max-width: 599px) {
	.ub-tile__link { grid-template-columns: auto 1fr; gap: 0.25rem 0.5rem; border-radius: 12px; }
	.ub-tile__icon { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 10px; }
	.ub-tile__svg { inline-size: 1.625rem; block-size: 1.625rem; }
	.ub-tile__go { inline-size: 2rem; block-size: 2rem; }
	.ub-tile__name { margin-block-start: 0.5rem; }
	.ub-tile__meta { flex-direction: column; font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: no-preference) {
	html:not([data-ub-motion="off"]) .ub-tile__link { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; }
	html:not([data-ub-motion="off"]) .ub-tile__go { transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease; }
	html:not([data-ub-motion="off"]) .ub-tile__link:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--soft); }
	html:not([data-ub-motion="off"]) .ub-tile__link:hover .ub-tile__go { transform: translateX(3px); }

	html:not([data-ub-motion="off"]) .ub-tile.is-pending { opacity: 0; transform: translateY(16px); }
	html:not([data-ub-motion="off"]) .ub-tile.is-shown { transition: opacity 0.5s ease-out var(--ub-delay, 0ms), transform 0.5s ease-out var(--ub-delay, 0ms); }
	html:not([data-ub-motion="off"]) .ub-tile.is-pending .ub-tile__svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
	html:not([data-ub-motion="off"]) .ub-tile.is-shown .ub-tile__svg * {
		stroke-dasharray: 1;
		animation: ub-tile-draw 1.2s cubic-bezier(0.45, 0, 0.2, 1) calc(var(--ub-delay, 0ms) + 150ms) both;
	}
}
@keyframes ub-tile-draw {
	from { stroke-dashoffset: 1; }
	to { stroke-dashoffset: 0; }
}