/* ── Project — Visual Assets ───────────────────────────────────────────────
   Mosaic of inlined SVG tiles. template-parts/blocks/block-project-visual-language.php

   Every color, interval, radius and type style is a token:
   - Colors: --vl-bg / --vl-ink / --vl-icon / --vl-tile, written inline by the
     template from the block's palette selects.
   - Type, spacing, corners, inner margin: --vl-* from Design Tokens → Blocks →
     Visual Assets (inc/visual-language-tokens.php), each falling back to the
     site's own tokens below when left blank.
   - Widths: --boxedWidth / --wideWidth / --veryWideWidth.
   The only literal sizes are the grid-unit targets (a layout rule, not a
   token): Tile Size S/M/L per screen, below. */

.vl-block
{
	--vl-bg-c:  var(--vl-bg, #ffffff);
	--vl-ink-c: var(--vl-ink, var(--color-body-text, #333333));
	--vl-gap-c: var(--vl-gap, calc(var(--defaultInterval) * .5));
	--vl-side:  var(--vl-pad-sides, var(--defaultInterval));
	--vl-muted: color-mix(in srgb, var(--vl-ink-c) 68%, transparent);
	--vl-line:  color-mix(in srgb, var(--vl-ink-c) 15%, transparent);

	background: var(--vl-bg-c);
	color: var(--vl-ink-c);
	padding-top: var(--vl-pad-top, calc(var(--defaultInterval) * 2));
	padding-bottom: var(--vl-pad-bottom, calc(var(--defaultInterval) * 2));
	display: grid;
	gap: var(--vl-text-space, calc(var(--defaultInterval) * 1.5));
	justify-items: center;
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Beats page-width-control.css, which clamps every .entry-content child to
   the page tier (and, on Full pages, shifts it by --insetLMargin): this block
   is always full-bleed and sizes its own text and mosaic from the tokens. */
#SD .entry-content > section.vl-block.alignfull
{
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-right: 0;
}

.vl-block.vl-on-dark
{
	--vl-ink-c: var(--vl-ink, #ffffff);
}

/* ── Widths ────────────────────────────────────────────────────────────────── */

.vl-block { --vl-w: var(--wideWidth); }
.vl-block.vl-w-boxed                 { --vl-w: var(--boxedWidth); }
.vl-block.vl-w-wide                  { --vl-w: var(--wideWidth); }
.vl-block.vl-w-very_wide             { --vl-w: var(--veryWideWidth); }
.vl-block.vl-w-full                  { --vl-w: 100vw; }
.width-boxed     .vl-block.vl-w-inherit { --vl-w: var(--boxedWidth); }
.width-wide      .vl-block.vl-w-inherit { --vl-w: var(--wideWidth); }
.width-very_wide .vl-block.vl-w-inherit { --vl-w: var(--veryWideWidth); }
.width-full      .vl-block.vl-w-inherit { --vl-w: 100vw; }

.vl-block > .vl-text
{
	width: min(100% - var(--vl-side) * 2, var(--boxedWidth));
}

.vl-block > .vl-assets
{
	width: min(100% - var(--vl-side) * 2, var(--vl-w));
}
.vl-block.vl-w-full > .vl-assets,
.width-full .vl-block.vl-w-inherit > .vl-assets
{
	width: 100%;
}

/* ── Text ──────────────────────────────────────────────────────────────────── */

#SD .vl-block .vl-headline
{
	margin: 0 0 calc(var(--defaultInterval) * .6);
	color: inherit;
	text-wrap: balance;
	font-family:    var(--vl-headline-family, var(--h2-font));
	font-weight:    var(--vl-headline-weight, var(--h2-weight));
	font-style:     var(--vl-headline-style, normal);
	font-size:      var(--vl-headline-size, var(--h2Size));
	line-height:    var(--vl-headline-line-height, 1.15);
	letter-spacing: var(--vl-headline-letter-spacing, var(--h2-tracking));
	text-transform: var(--vl-headline-text-transform, var(--h2-transform));
}

#SD .vl-block .vl-body,
#SD .vl-block .vl-body p
{
	font-family:    var(--vl-body-family, inherit);
	font-weight:    var(--vl-body-weight, inherit);
	font-style:     var(--vl-body-style, inherit);
	font-size:      var(--vl-body-size, inherit);
	line-height:    var(--vl-body-line-height, inherit);
	letter-spacing: var(--vl-body-letter-spacing, inherit);
	text-transform: var(--vl-body-text-transform, none);
	color: inherit;
}
#SD .vl-block .vl-body p:last-child { margin-bottom: 0; }

/* ── Grid unit (layout rule: one Tile Size choice, a size per screen) ─────── */

.vl-block.vl-size-s { --vl-target: 80px; }
.vl-block.vl-size-m { --vl-target: 100px; }
.vl-block.vl-size-l { --vl-target: 130px; }

@media only screen and (max-width: 999px)
{
	.vl-block.vl-size-s { --vl-target: 64px; }
	.vl-block.vl-size-m { --vl-target: 80px; }
	.vl-block.vl-size-l { --vl-target: 100px; }
}

@media only screen and (max-width: 599px)
{
	.vl-block.vl-size-s { --vl-target: 48px; }
	.vl-block.vl-size-m { --vl-target: 60px; }
	.vl-block.vl-size-l { --vl-target: 76px; }
}

/* ── Mosaic ────────────────────────────────────────────────────────────────── */

/* Without JS: auto-fill columns near the target size. visualLanguage.js then
   sets an exact column count (--vl-cols) and square unit (--vl-unit). */
.vl-mosaic
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--vl-target), 1fr));
	grid-auto-rows: var(--vl-unit, var(--vl-target));
	grid-auto-flow: dense;
	gap: var(--vl-gap-c);
}
.vl-mosaic.vl-ready
{
	grid-template-columns: repeat(var(--vl-cols), minmax(0, 1fr));
}

.vl-tile
{
	--vl-pad: calc(var(--vl-unit, var(--vl-target)) * var(--vl-padf, .14));

	position: relative;
	margin: 0;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--vl-radius, var(--defaultBorderRadius, 10px));
	background: var(--vl-tile, transparent);
	color: var(--vl-icon, currentColor);
}

.vl-tile.vl-tile--none  { background: transparent; }
.vl-tile.vl-tile--tint  { background: color-mix(in srgb, var(--vl-bg-c), var(--vl-ink-c) 7%); }
.vl-tile.vl-tile--fill  { background: transparent; }

.vl-tile .vl-art
{
	position: absolute;
	inset: var(--vl-pad);
	display: grid;
	place-items: center;
}
.vl-tile.vl-tile--fill .vl-art { inset: 0; }

.vl-tile .vl-art svg
{
	display: block;
	width: 100%;
	height: 100%;
}

/* ── Captions ──────────────────────────────────────────────────────────────── */

.vl-tile figcaption,
.vl-legend
{
	font-family:    var(--vl-caption-family, inherit);
	font-weight:    var(--vl-caption-weight, inherit);
	font-style:     var(--vl-caption-style, normal);
	font-size:      var(--vl-caption-size, .75rem);
	line-height:    var(--vl-caption-line-height, 1.25);
	letter-spacing: var(--vl-caption-letter-spacing, normal);
	text-transform: var(--vl-caption-text-transform, none);
}

/* Label in tile */
.vl-cap-chip .vl-tile figcaption
{
	position: absolute;
	left: var(--vl-gap-c);
	bottom: var(--vl-gap-c);
	max-width: calc(100% - var(--vl-gap-c) * 2);
	padding: .2em .55em;
	border-radius: var(--vl-chip-radius, 4px);
	background: var(--vl-bg-c);
	color: var(--vl-ink-c);
}

/* Detail tiles are too small for a chip: a compact caption under the art.
   Art and caption stack (flex, not absolute) so a two-line caption shrinks
   the art instead of overlapping it. */
.vl-cap-chip .vl-tile.vl-detail:has(figcaption)
{
	display: flex;
	flex-direction: column;
	gap: 4%;
	padding: calc(var(--vl-pad) * .6) 5% 6%;
	box-sizing: border-box;
}
.vl-cap-chip .vl-tile.vl-detail:has(figcaption) .vl-art
{
	position: static;
	flex: 1 1 0;
	min-height: 0;
}
.vl-cap-chip .vl-tile.vl-detail figcaption
{
	position: static;
	flex: none;
	max-width: none;
	padding: 0;
	background: none;
	text-align: center;
	font-size: min(var(--vl-caption-size, .75rem), .7rem);
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media only screen and (max-width: 599px)
{
	.vl-cap-chip .vl-tile.vl-detail figcaption
	{
		-webkit-line-clamp: 1;
		font-size: min(var(--vl-caption-size, .75rem), .62rem);
	}
}
.vl-cap-chip .vl-tile.vl-detail.vl-tile--dark figcaption
{
	color: var(--vl-bg-c);
}
.vl-on-dark.vl-cap-chip .vl-tile.vl-detail.vl-tile--dark figcaption
{
	color: var(--vl-ink-c);
}

/* On hover */
.vl-cap-hover .vl-tile figcaption
{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: calc(var(--vl-gap-c) * 2) var(--vl-gap-c) var(--vl-gap-c);
	background: linear-gradient(transparent, color-mix(in srgb, var(--vl-ink-c) 85%, transparent));
	color: var(--vl-bg-c);
	opacity: 0;
	transition: opacity var(--defaultTransitionDuration, 500ms) ease;
}
.vl-cap-hover .vl-tile:hover figcaption,
.vl-cap-hover .vl-tile:focus-visible figcaption
{
	opacity: 1;
}

/* Numbered legend */
.vl-badge
{
	position: absolute;
	top: calc(var(--vl-gap-c) * .6);
	left: calc(var(--vl-gap-c) * .6);
	padding: 0 .4em;
	border-radius: var(--vl-chip-radius, 4px);
	background: var(--vl-bg-c);
	color: var(--vl-ink-c);
	font-family:    var(--vl-legend-family, inherit);
	font-weight:    var(--vl-legend-weight, inherit);
	font-style:     var(--vl-legend-style, normal);
	font-size:      var(--vl-legend-size, .7rem);
	letter-spacing: var(--vl-legend-letter-spacing, normal);
	line-height: 1.6;
}

#SD .vl-block .vl-legend
{
	list-style: none;
	margin: calc(var(--defaultInterval) * 1) 0 0;
	padding: calc(var(--defaultInterval) * .8) 0 0;
	border-top: 1px solid var(--vl-line);
	columns: 4 180px;
	column-gap: calc(var(--defaultInterval) * 1.2);
}
#SD .vl-block .vl-legend li
{
	break-inside: avoid;
	display: flex;
	gap: .6em;
	margin: 0;
	padding: .15em 0;
	text-indent: 0;
}
#SD .vl-block .vl-legend li::before { content: none; }
.vl-legend .vl-legend-n
{
	min-width: 1.8em;
	color: var(--vl-muted);
	font-family:    var(--vl-legend-family, inherit);
	font-weight:    var(--vl-legend-weight, inherit);
	font-size:      var(--vl-legend-size, .7rem);
	letter-spacing: var(--vl-legend-letter-spacing, normal);
	padding-top: .15em;
}

@media (prefers-reduced-motion: reduce)
{
	.vl-cap-hover .vl-tile figcaption { transition: none; }
}