/* VELYON Theme — Category Tiles block (v2.3.1)
   Markup: blocks/category-tiles/render.php. Two-colour heading + a row of illustrated tiles on soft
   coloured backgrounds. Scrolls sideways on phones, fills the row on larger screens. Tokens only. */

/* Highlight colour for the heading (dark values by default, like the theme; light mode overrides). */
.velyon-category-tiles { --vct-hl: #ffc21a; }
.vct-ac-green  { --vct-hl: #00ce2d; }
.vct-ac-blue   { --vct-hl: #60a5fa; }
.vct-ac-pink   { --vct-hl: #f472b6; }
.vct-ac-purple { --vct-hl: #a78bfa; }
html[data-theme="light"] .vct-ac-gold   { --vct-hl: #c26a00; }
html[data-theme="light"] .vct-ac-green  { --vct-hl: #0a8f2a; }
html[data-theme="light"] .vct-ac-blue   { --vct-hl: #1d4ed8; }
html[data-theme="light"] .vct-ac-pink   { --vct-hl: #be185d; }
html[data-theme="light"] .vct-ac-purple { --vct-hl: #6d28d9; }

.vct-title { margin: 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
.vct-l1 { font-size: clamp(30px, 6vw, 46px); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.vct-hl { color: var(--vct-hl); }
.vct-l2 { font-size: clamp(17px, 3vw, 22px); font-weight: 600; line-height: 1.3; color: var(--velyon-text-muted); }

.vct-list {
	list-style: none;
	margin: 0;
	padding: 4px 2px 10px;
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.vct-list::-webkit-scrollbar { display: none; }
.vct-list > li { flex: 1 0 140px; scroll-snap-align: start; min-width: 0; }

/* v2.3.0: every tile has its own soft background colour. The same formula works in both modes:
   a little of the tone mixed into the page surface = pastel in light mode, deep tint in dark mode. */
.vct-tone-blue   { --vct-tone: #3b82f6; }
.vct-tone-purple { --vct-tone: #8b5cf6; }
.vct-tone-amber  { --vct-tone: #f59e0b; }
.vct-tone-pink   { --vct-tone: #ec4899; }
.vct-tone-green  { --vct-tone: #10b981; }
.vct-tone-teal   { --vct-tone: #14b8a6; }
.vct-tone-orange { --vct-tone: #f97316; }

.vct-tile {
	position: relative;
	overflow: hidden;
	height: 100%;
	min-height: 136px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 18px 12px 14px;
	text-align: center;
	color: var(--velyon-text);
	background: color-mix(in srgb, var(--vct-tone, var(--velyon-accent)) 16%, var(--velyon-surface));
	border: 1px solid color-mix(in srgb, var(--vct-tone, var(--velyon-accent)) 26%, var(--velyon-border));
	border-radius: 24px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* soft diagonal shine, like a glossy app tile */
.vct-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(115deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 42%);
	opacity: .55;
}
html[data-theme="dark"] .vct-tile::after { opacity: .08; }
.vct-tile:hover,
.vct-tile:focus-visible {
	transform: translateY(-4px);
	border-color: var(--vct-tone, var(--velyon-accent));
	box-shadow: var(--velyon-shadow);
	outline: none;
}
.vct-tile:focus-visible { outline: 2px solid var(--velyon-accent); outline-offset: 2px; }
.vct-label {
	position: relative;
	z-index: 1;
	font-family: var(--velyon-font-heading);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}
.vct-art { position: relative; z-index: 1; display: flex; line-height: 0; }
.vct-art svg { width: 68px; height: 68px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18)); transition: transform .25s ease; }
.vct-tile:hover .vct-art svg { transform: scale(1.08) rotate(-3deg); }

/* "Simple line icons" style: icon above the label, tinted to the tile colour */
.vct--line .vct-tile { justify-content: center; min-height: 118px; gap: 10px; }
.vct-icon {
	position: relative;
	z-index: 1;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	color: var(--vct-tone, var(--velyon-accent-deep));
	background: color-mix(in srgb, var(--vct-tone, var(--velyon-accent)) 18%, var(--velyon-surface));
}

/* Larger screens: wrap and centre instead of scrolling. */
@media (min-width: 783px) {
	.vct-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); overflow: visible; }
	.vct-list > li { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.vct-tile, .vct-art svg { transition: none; }
	.vct-tile:hover, .vct-tile:hover .vct-art svg { transform: none; }
}