/* Lightbox der Galerie.

   Das Element ist ein natives <dialog> — Escape und die Fokus-Falle kommen vom
   Browser. Die Verdunkelung trägt der Dialog selbst und nicht ::backdrop: so
   liegt sie in derselben Ebene wie der Inhalt und wird von jedem Browser
   gleich gezeichnet. */

.tsch-lightbox {
	position: fixed;
	inset: 0;
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	max-height: 100vh;
	padding: var(--space-lg);
	color: var(--color-cream);
	background: rgb(var(--color-ink-rgb) / 0.94);
	border: none;
}

/* hidden verliert gegen display: grid — betrifft die Pfeile, die bei einem
   einzelnen Bild über das Attribut ausgeblendet werden. */
.tsch-lightbox[hidden],
.tsch-lightbox__nav[hidden],
.tsch-lightbox__counter[hidden] { display: none; }

.tsch-lightbox[open] {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-rows: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-md);
}

.tsch-lightbox__img {
	grid-column: 2;
	grid-row: 1;
	display: block;
	max-width: 100%;
	max-height: 100%;
	margin-inline: auto;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-hard);
}

.tsch-lightbox__nav,
.tsch-lightbox__close {
	display: grid;
	place-items: center;
	color: var(--color-cream);
	background: rgb(var(--color-ink-soft-rgb) / 0.85);
	border: 1px solid rgb(var(--color-primary-rgb) / 0.45);
	border-radius: 999px;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast);
}
.tsch-lightbox__nav:hover,
.tsch-lightbox__close:hover {
	color: var(--color-white);
	background: var(--color-primary);
}

.tsch-lightbox__nav {
	grid-row: 1;
	width: 48px;
	height: 48px;
	font-size: 32px;
	line-height: 1;
}
.tsch-lightbox__nav--prev { grid-column: 1; }
.tsch-lightbox__nav--next { grid-column: 3; }

.tsch-lightbox__close {
	position: absolute;
	z-index: 1;
	inset-block-start: var(--space-lg);
	inset-inline-end: var(--space-lg);
	width: 40px;
	height: 40px;
	font-size: 24px;
	line-height: 1;
}

.tsch-lightbox__counter {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	font-size: var(--text-small);
	color: var(--color-cream-dim);
	text-align: center;
}

/* Schmale Displays: die Pfeile wandern unter das Bild, damit es die volle
   Breite bekommt. */
@media (max-width: 700px) {
	.tsch-lightbox { padding: var(--space-md); }

	.tsch-lightbox[open] {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: minmax(0, 1fr) auto auto;
		gap: var(--space-sm);
	}

	.tsch-lightbox__img,
	.tsch-lightbox__counter { grid-column: 1 / -1; }
	.tsch-lightbox__img { grid-row: 1; }
	.tsch-lightbox__counter { grid-row: 2; }

	.tsch-lightbox__nav {
		grid-row: 3;
		width: 44px;
		height: 44px;
	}
	.tsch-lightbox__nav--prev { grid-column: 1; justify-self: start; }
	.tsch-lightbox__nav--next { grid-column: 2; justify-self: end; }
}