/* -------------------------------------------------------------------------
   7.5 Artwork page (single-artwork.php)
   ------------------------------------------------------------------------- */

/* --- Layout: video or image left, details right ------------------------- */

/* Both columns are sticky: the shorter one waits while the longer one scrolls,
   and both end on the same line, right before "More views". The media is
   capped to the screen height so that it always fits while it sticks. */
.artwork {
	--artwork-sticky-top: calc(var(--header-h) + var(--space-3));
	--artwork-media-max: calc(100vh - var(--artwork-sticky-top) - var(--space-3));
}

@supports (height: 100svh) {
	.artwork {
		--artwork-media-max: calc(100svh - var(--artwork-sticky-top) - var(--space-3));
	}
}

.artwork__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--space-4);
}

@media (min-width: 900px) {
	.artwork__layout {
		grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr);
	}

	.artwork__media,
	.artwork__details {
		position: sticky;
		top: var(--artwork-sticky-top);
	}
}

/* --- Images ------------------------------------------------------------- */

.tg-artwork-figure {
	margin-bottom: var(--space-2);
	background: var(--stone);
}

.tg-artwork-figure--empty {
	aspect-ratio: 1;
}

.tg-artwork-image {
	width: 100%;
	cursor: zoom-in;
}

/* Main media frame (video, or the main image when there is no video): the
   width of its column and, on desktop, the full available screen height
   (4:5 on small screens). The main image or the video poster is shown
   whole, centred and scaled down to fit ("contain"), on the stone
   background; the video, once it plays, fills the frame. */
.artwork__media {
	--artwork-frame-height: auto;
}

.artwork__media .tg-artwork-figure,
.artwork__media .tg-video {
	position: relative;
	width: 100%;
	height: var(--artwork-frame-height);
	aspect-ratio: 4 / 5;
	margin: 0;
	overflow: hidden;
	background: var(--stone);
}

/* Desktop: the frame fits the screen from the first view, where it starts
   below the header, the page padding and the breadcrumb (≈ 3rem), so that
   the video controls at its bottom are visible without scrolling */
@media (min-width: 900px) {
	.artwork__media {
		--artwork-frame-height: calc(100vh - var(--header-h) - var(--space-4) - 3rem - var(--space-3));
	}

	@supports (height: 100svh) {
		.artwork__media {
			--artwork-frame-height: calc(100svh - var(--header-h) - var(--space-4) - 3rem - var(--space-3));
		}
	}

	.artwork__media .tg-artwork-figure,
	.artwork__media .tg-video {
		aspect-ratio: auto;
	}
}

.artwork__media .tg-artwork-figure a {
	display: block;
	height: 100%;
}

.artwork__media .tg-artwork-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Video poster: same as the main image, before playing and when paused */
.artwork__media .tg-video__image {
	object-fit: contain;
}

.artwork__media .tg-player__paused {
	background: var(--stone);
}

/* Once the video plays (gallery.js), it fills the same frame, cropped, with
   the gallery's own controls (.tg-player). If the YouTube API fails, the
   fallback is YouTube's own player, shown whole (.is-native). */
.artwork__media .tg-video:is(.is-custom, .is-native) {
	background: var(--ink);
}

/* Fallback: YouTube's own player, whole video, its own controls */
.artwork__media .tg-video.is-native .tg-video__frame {
	position: absolute;
	inset: 0;
}

/* Custom player: the iframe is enlarged to cover the frame (container units
   = the frame's size) and centred, keeping the video's ratio. It is also
   taller than the video by --yt-band at the top and the bottom: YouTube
   fills these bands with black and shows its own title there, outside the
   frame. */
.artwork__media .tg-video.is-custom {
	--yt-band: 5rem;
	container-type: size;
}

.tg-video__player iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, 100cqh * 16 / 9);
	height: calc(max(100cqh, 100cqw * 9 / 16) + var(--yt-band) * 2);
	border: 0;
	transform: translate(-50%, -50%);
}

.tg-video--vertical .tg-video__player iframe {
	width: max(100cqw, 100cqh * 9 / 16);
	height: calc(max(100cqh, 100cqw * 16 / 9) + var(--yt-band) * 2);
}

/* Fullscreen: the whole video, still with the gallery's controls (the
   title bands stay outside the screen) */
.tg-video.is-custom:fullscreen .tg-video__player iframe {
	top: calc(var(--yt-band) * -1);
	left: 0;
	width: 100%;
	height: calc(100% + var(--yt-band) * 2);
	transform: none;
}

/* Paused or ended: the poster covers YouTube's pause screen */
.tg-player__paused {
	display: none;
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.tg-video.is-ready:not(.is-playing) .tg-player__paused {
	display: flex;
}

.tg-player__paused .tg-video__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Transparent layer over the video: a click plays or pauses, and the
   pointer is tracked to show or hide the controls */
.tg-player__surface {
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.tg-video.is-idle .tg-player__surface {
	cursor: none;
}

/* Controls bar, at the bottom of the frame on a dark gradient */
.tg-player {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-3) var(--space-2);
	color: var(--paper);
	background: linear-gradient(transparent, color-mix(in srgb, var(--ink) 75%, transparent));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.tg-video.is-ready .tg-player {
	opacity: 1;
}

.tg-video.is-ready.is-idle:not(:focus-within) .tg-player {
	opacity: 0;
}

.tg-player__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	font-size: var(--size-s);
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.tg-player__speed {
	font-variant-numeric: tabular-nums;
}

.tg-player__time {
	flex: none;
	font-size: var(--size-s);
	font-variant-numeric: tabular-nums;
}

.tg-player__progress {
	flex: 1;
	min-width: 3rem;
	accent-color: var(--paper);
	cursor: pointer;
}

.tg-player__volume {
	flex: none;
	width: 5rem;
	accent-color: var(--paper);
	cursor: pointer;
}

/* Small screens: the volume follows the phone's buttons */
@media (max-width: 600px) {
	.tg-player {
		gap: var(--space-1);
		padding: var(--space-3) var(--space-2) var(--space-1);
	}

	.tg-player__volume,
	.tg-player__time {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tg-player {
		transition: none;
	}
}

/* --- Details ------------------------------------------------------------ */

.artwork__artist {
	margin: 0;
	font-size: var(--size-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.artwork__title {
	margin: var(--space-1) 0 var(--space-3);
}

/* Specs table (year, technique, dimensions…) */
.tg-specs {
	margin: 0 0 var(--space-3);
	padding: 0;
	border-top: 1px solid var(--line);
}

.tg-specs__row {
	display: flex;
	gap: var(--space-2);
	padding: var(--space-1) 0;
	font-size: var(--size-s);
	border-bottom: 1px solid var(--line);
}

.tg-specs dt {
	flex: 0 0 7rem;
	color: var(--mute);
}

.tg-specs dd {
	margin: 0;
}

/* Inquiry button, after the description and above "See more" */
.artwork__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: var(--space-4) 0 0;
}

/* Long description folded by main.js, with a fade at the bottom */
.artwork__description.is-collapsed {
	max-height: 12rem;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
	mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

/* "Show all / Show less": plain underlined text button */
.artwork__description-toggle {
	display: block;
	margin-top: var(--space-1);
	padding: 0;
	font: inherit;
	font-size: var(--size-s);
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	background: none;
	border: 0;
	cursor: pointer;
}

.artwork__description-toggle:hover {
	color: var(--mute);
}

.artwork__description-toggle[hidden] {
	display: none;
}

/* "See more — n views" link, at the end of the details column */
.artwork__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-top: var(--space-3);
	padding-bottom: 0.25rem;
	font-size: var(--size-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	border-bottom: 1px solid currentColor;
	transition: color 0.2s;
}

.artwork__more:hover {
	color: var(--accent-dark);
	text-decoration: none;
}

.artwork__more-arrow {
	transition: transform 0.2s ease;
}

.artwork__more:hover .artwork__more-arrow {
	transform: translateY(0.2rem);
}

@media (prefers-reduced-motion: reduce) {
	.artwork__more-arrow {
		transition: none;
	}
}

/* --- More views: rows of 2 images, same height, real shape -------------- */

.artwork-views {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--line);
	scroll-margin-top: calc(var(--header-h) + var(--space-2));
	/* not hidden under the sticky header */
}

.artwork-views__title {
	margin-bottom: var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--size-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mute);
}

.artwork-views__grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* Each item grows in proportion to its ratio (width / height, set inline by
   the template), so both images of a row end up exactly the same height. */
.artwork-views__row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
}

@media (min-width: 700px) {
	.artwork-views__grid,
	.artwork-views__row {
		gap: var(--space-3);
	}
}

.artwork-views__item {
	flex: var(--ratio, 1) 1 0%;
	min-width: 0;
	margin: 0;
}

/* Last image alone on its row: half width, not stretched across the page */
.artwork-views__row--single .artwork-views__item {
	flex: 0 1 50%;
}

.artwork-views__item a {
	display: block;
	overflow: hidden;
	cursor: zoom-in;
}

.artwork-views__image {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.3s ease;
}

.artwork-views__item a:hover .artwork-views__image {
	transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
	.artwork-views__image {
		transition: none;
	}
}

/* --- Video (YouTube, click-to-load) ------------------------------------- */

.tg-video {
	position: relative;
	aspect-ratio: 16 / 9;
	margin: 0 0 var(--space-2);
	background: var(--stone);
}

/* YouTube Shorts */
.tg-video--vertical {
	aspect-ratio: 9 / 16;
}

.tg-video__poster {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	height: 100%;
	font-size: var(--size-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
}

.tg-video__poster:hover {
	text-decoration: none;
}

/* Poster: the main image of the artwork, behind the play button */
.tg-video__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Thin circle with a play triangle */
.tg-video__play {
	position: relative;
	width: 4rem;
	height: 4rem;
	border: 1px solid var(--ink);
	border-radius: 50%;
	background: var(--paper);
	transition: background 0.2s;
}

/* On a paper background, so it stays readable over the poster */
.tg-video__label {
	position: relative;
	padding: 0.25rem var(--space-1);
	background: var(--paper);
}

.tg-video__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0.55rem 0 0.55rem 0.9rem;
	border-color: transparent transparent transparent var(--ink);
	transition: border-color 0.2s;
}

.tg-video__poster:hover .tg-video__play {
	background: var(--ink);
}

.tg-video__poster:hover .tg-video__play::after {
	border-left-color: var(--paper);
}

.tg-video__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}