/* ==========================================================================
   Galerieübersicht (bm_image_gallery, Action "list")
   Quadratische Kacheln, Titel mittig, beim Hover/Fokus: helle Abdunklung,
   Titel rückt nach oben, "Ansehen"-Button blendet ein, Bild zoomt leicht.
   ========================================================================== */

/* Kachel: Link-Container, immer quadratisch, Inhalt wird abgeschnitten */
.sv-gallery-tile {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	text-decoration: none;
}

/* Vorschaubild füllt die Kachel vollständig aus */
.sv-gallery-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

/* Overlay über dem Bild: zentriert Titel und Button, zunächst transparent */
.sv-gallery-tile__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	text-align: center;
	background: rgba(255, 255, 255, 0);
	transition: background .3s ease;
}

/* Titel: weiß mit Schatten, damit er auf hellen und dunklen Bildern lesbar bleibt */
.sv-gallery-tile__title {
	color: #fff;
	font-size: 1.1rem;
	line-height: 1.3;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .75);
	transition: transform .3s ease;
}

/* Button: unsichtbar und leicht nach unten versetzt, bis gehovert wird */
.sv-gallery-tile__btn {
	margin-top: 1rem;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .3s ease, transform .3s ease;
	pointer-events: none;
}

/* Hover und Tastaturfokus: Overlay aufhellen */
.sv-gallery-tile:hover .sv-gallery-tile__overlay,
.sv-gallery-tile:focus-visible .sv-gallery-tile__overlay {
	background: rgba(255, 255, 255, .35);
}

/* Hover und Tastaturfokus: Titel nach oben schieben */
.sv-gallery-tile:hover .sv-gallery-tile__title,
.sv-gallery-tile:focus-visible .sv-gallery-tile__title {
	transform: translateY(-.5rem);
}

/* Hover und Tastaturfokus: Button einblenden */
.sv-gallery-tile:hover .sv-gallery-tile__btn,
.sv-gallery-tile:focus-visible .sv-gallery-tile__btn {
	opacity: 1;
	transform: translateY(0);
}

/* Hover und Tastaturfokus: Bild leicht vergrößern */
.sv-gallery-tile:hover .sv-gallery-tile__img,
.sv-gallery-tile:focus-visible .sv-gallery-tile__img {
	transform: scale(1.05);
}

/* Touch-Geräte ohne Hover: Button dauerhaft zeigen, sonst wäre er nie sichtbar */
@media (hover: none) {
	.sv-gallery-tile__btn {
		opacity: 1;
		transform: none;
	}
}

/* Nutzer mit reduzierter Bewegung: keine Animationen */
@media (prefers-reduced-motion: reduce) {
	.sv-gallery-tile__img,
	.sv-gallery-tile__overlay,
	.sv-gallery-tile__title,
	.sv-gallery-tile__btn {
		transition: none;
	}
}

/* ==========================================================================
   Galerie-Detailansicht (bm_image_gallery, Action "gallery")
   CSS-Grid mit gleichmäßigem Abstand horizontal und vertikal,
   Bilder füllen jede Zelle quadratisch aus.
   ========================================================================== */

/* Raster: 2 Spalten mobil, gleicher Abstand in beide Richtungen */
.sv-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .5rem;
	margin-bottom: 1rem;
}

/* Tablet: 3 Spalten */
@media (min-width: 768px) {
	.sv-gallery-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Laptop: 4 Spalten */
@media (min-width: 992px) {
	.sv-gallery-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Große Bildschirme: 6 Spalten wie bisher */
@media (min-width: 1400px) {
	.sv-gallery-grid {
		grid-template-columns: repeat(6, 1fr);
		gap: .75rem;
	}
}

/* Einzelne Zelle: quadratisch, Inhalt abgeschnitten */
.sv-gallery-grid__item {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: #e9ecef; /* Platzhalterfarbe, solange das Bild lädt */
}

/* Bild füllt die Zelle vollständig */
.sv-gallery-grid__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease, filter .3s ease;
}

/* Hover/Fokus: leichter Zoom und etwas heller */
.sv-gallery-grid__item:hover .sv-gallery-grid__img,
.sv-gallery-grid__item:focus-visible .sv-gallery-grid__img {
	transform: scale(1.05);
	filter: brightness(1.08);
}

/* Reduzierte Bewegung: keine Animation */
@media (prefers-reduced-motion: reduce) {
	.sv-gallery-grid__img {
		transition: none;
	}
}