/**
 * Artist index (patterns/template-archive-artist.php). Loaded only on the artist archive.
 * Names are set in Inter (local font, shows at once); Skia is reserved for the slide titles
 * and the artist hero name (owner ruling 2026-09-29).
 *
 * Two presentations of the same markup:
 *  - Tiles (default, and the only form without JS): one work per artist, name below,
 *    3 / 2 / 1 columns. This is what touch devices and narrow screens get. Every image is
 *    the whole work at its own proportions and no frame, sized and placed by the rules of
 *    the artist pages' work grids (assets/css/artist.css, crossovergallery_work_scales(),
 *    crossovergallery_work_grid_placements(); owner ruling 2026-09-29): quarter-column
 *    tracks, --cg-scale column widths per work, wide works (`.is-wide`) on a column and a
 *    half, rows packed and centred, each work centred in its tile with the name under it at
 *    the image's left edge; rows align at the top and run ragged at the bottom — hung, not
 *    gridded.
 *  - Roster (`.cg-artist-roster.is-list`, set by assets/js/artists.js when the device can
 *    hover with a fine pointer at ≥ 901px): a column of names on the left, one sticky
 *    preview image on the right that follows the hovered or focused name. The tile images
 *    are hidden and their clones stack inside `.cg-artist-preview`, a sticky box the height of
 *    the viewport below the header, pulled up to start level with the archive title. Each
 *    work is contained in that box at its own proportions and centred, so portrait and
 *    landscape works read equally large; its share of the box is --cg-scale (data-cg-side,
 *    crossovergallery_artist_index_sides(): the curve of the grids, a 30 cm work at 0.6 of
 *    the box, a 200 cm work filling it), so small works sit inside it — as on a wall.
 */

/* ---------- Tiles ---------- */
.cg-artist-index { --cg-gap: clamp(30px, 4vw, 50px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(30px, 5vw, 60px) var(--cg-gap); align-items: start; list-style: none; margin: 0; padding: 0; }
.cg-artist-tile { grid-column: var(--cg-col, span 4); }
@media (max-width: 900px) { .cg-artist-index { grid-template-columns: repeat(8, minmax(0, 1fr)); } .cg-artist-tile { grid-column: var(--cg-col-t, span 4); } }
@media (max-width: 600px) { .cg-artist-index { grid-template-columns: 1fr; } .cg-artist-tile { grid-column: auto; } }
.cg-artist-tile { margin: 0; }
/* The link (image + name) is --cg-scale columns wide and centred in its tile, like the figure of a work tile. */
.cg-artist-tile a { display: block; margin: 0 auto; width: min(100%, calc(100% * var(--cg-scale, 1))); color: inherit; text-decoration: none; }
.cg-artist-tile.is-wide a { width: calc(var(--cg-scale, 1) * (200% - var(--cg-gap)) / 3); }
@media (max-width: 900px) { .cg-artist-tile.is-wide a { width: calc(var(--cg-scale, 1) * (100% - var(--cg-gap)) / 2); } }
@media (max-width: 600px) { .cg-artist-tile a, .cg-artist-tile.is-wide a { width: min(100%, calc(100% * var(--cg-scale, 1))); } }
.cg-artist-tile-image { display: block; }
.cg-artist-tile-image img { width: 100%; height: auto; display: block; transition: opacity .3s ease; }
.cg-artist-tile-blank { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--wp--preset--color--accent-5); }
.cg-artist-tile-name { display: block; margin-top: 14px; font-family: var(--wp--preset--font-family--inter); font-weight: 400; font-size: 1.25rem; }
.cg-artist-tile a:hover img, .cg-artist-tile a:focus-visible img { opacity: .85; }
.cg-artist-tile a:hover .cg-artist-tile-name, .cg-artist-tile a:focus-visible .cg-artist-tile-name { text-decoration: underline; }

/* ---------- Roster ---------- */
.cg-artist-preview[hidden] { display: none; }
.cg-artist-roster.is-list { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.cg-artist-roster.is-list .cg-artist-index { display: block; }
.cg-artist-roster.is-list .cg-artist-tile-image { display: none; }
.cg-artist-roster.is-list .cg-artist-tile a { display: inline-block; width: auto; margin: 0; padding: .18em 0; }
.cg-artist-roster.is-list .cg-artist-tile-name {
	margin: 0;
	/* Light weight: the un-hovered names recede, the followed one stands out in full black (owner ruling 2026-09-29, after trying smaller sizes). */
	font-size: clamp(1.75rem, 2.6vw, 2.6rem);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--contrast);
	transition: color .25s ease;
}
/* While the pointer is over the list, everything but the followed name recedes. */
.cg-artist-roster.is-list .cg-artist-index:hover .cg-artist-tile:not(.is-active) .cg-artist-tile-name,
.cg-artist-roster.is-list .cg-artist-index:focus-within .cg-artist-tile:not(.is-active) .cg-artist-tile-name { color: var(--wp--preset--color--accent-3); }
.cg-artist-roster.is-list .cg-artist-tile a:hover .cg-artist-tile-name,
.cg-artist-roster.is-list .cg-artist-tile a:focus-visible .cg-artist-tile-name { text-decoration: none; }

.cg-artist-preview {
	position: sticky;
	top: 84px; /* 64px header + breathing room */
	height: calc(100vh - 108px);
	margin-top: calc(-1 * var(--cg-preview-lift, 0px)); /* level with the title; set by artists.js */
	overflow: hidden;
}
/* Flex, not grid: the image's percentage max-height must resolve against the box, and a grid track would size to the image. */
.cg-artist-preview-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s ease; }
.cg-artist-preview-slide.is-active { opacity: 1; }
.cg-artist-preview-slide img { width: auto; height: auto; max-width: calc(100% * var(--cg-scale, 1)); max-height: calc(100% * var(--cg-scale, 1)); display: block; }

@media (prefers-reduced-motion: reduce) {
	.cg-artist-tile-image img, .cg-artist-tile-name, .cg-artist-preview-slide { transition: none; }
}