/*
 * Leo Skull Tiled Gallery - Kacheln.
 *
 * Die Anordnung kommt vom Server als Anteile: jede Zeile trägt ihr
 * Seitenverhältnis, jede Gruppe ihre Breite in Prozent, jedes Bild seinen
 * Anteil an der Höhe. Dadurch wächst das Mosaik ohne JavaScript mit der
 * Spalte mit.
 */

.ls-tiled-gallery {
	--lstg-gap: 4px;
	clear: both;
	margin: 0 calc(var(--lstg-gap) / -2) 1.5em;
	padding: 0;
}

.ls-tiled-gallery *,
.ls-tiled-gallery *::before,
.ls-tiled-gallery *::after {
	box-sizing: border-box;
}

/* Mosaik */

.ls-tiled-gallery .lstg-row {
	display: flex;
	width: 100%;
}

.ls-tiled-gallery .lstg-group {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ls-tiled-gallery .lstg-item {
	position: relative;
	margin: 0;
	padding: 0;
	min-height: 0;
	overflow: hidden;
}

/* Quadrate und Kreise */

.ls-tiled-gallery .lstg-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
}

.ls-tiled-gallery .lstg-grid .lstg-item {
	aspect-ratio: 1;
}

.ls-tiled-gallery .lstg-span-3 {
	grid-column: span 2;
}

.ls-tiled-gallery .lstg-span-2 {
	grid-column: span 3;
}

.ls-tiled-gallery .lstg-span-1 {
	grid-column: span 6;
}

/* Kachel: Link und Bild füllen die Fläche, das Bild wird beschnitten. */

.ls-tiled-gallery .lstg-link {
	position: absolute;
	inset: calc(var(--lstg-gap) / 2);
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	text-decoration: none;
	overflow: hidden;
}

.ls-tiled-gallery a.lstg-link {
	cursor: pointer;
}

.ls-tiled-gallery a.lstg-link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -3px;
}

/* !important: Themes geben Inhaltsbildern gern pauschal Ränder, Rahmen und
   eine automatische Höhe mit - das würde die Kacheln verziehen. */
.ls-tiled-gallery .lstg-image {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	object-fit: cover;
	background: rgba(127, 127, 127, 0.15);
}

.ls-tiled-gallery.type-circle .lstg-link,
.ls-tiled-gallery.type-circle .lstg-image {
	border-radius: 50% !important;
}

/* Bildunterschrift */

.ls-tiled-gallery .lstg-caption {
	position: absolute;
	right: calc(var(--lstg-gap) / 2);
	bottom: calc(var(--lstg-gap) / 2);
	left: calc(var(--lstg-gap) / 2);
	margin: 0;
	padding: 10px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.8);
	color: #333;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none;
}

.ls-tiled-gallery .lstg-item-small .lstg-caption {
	padding: 6px 8px;
	font-size: 11px;
}

.ls-tiled-gallery.type-circle .lstg-caption {
	display: none;
}

/* Graustufen: farbig beim Überfahren und bei Tastaturfokus. */

.ls-tiled-gallery.lstg-grayscale .lstg-image {
	filter: grayscale(1);
	transition: filter 0.2s ease;
}

.ls-tiled-gallery.lstg-grayscale .lstg-link:hover .lstg-image,
.ls-tiled-gallery.lstg-grayscale .lstg-link:focus-visible .lstg-image {
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	.ls-tiled-gallery.lstg-grayscale .lstg-image {
		transition: none;
	}
}