/* Gallery Manager – Frontend */

.gm-album,
.gm-albums-overview {
	margin: 1.5rem 0;
}

.gm-album-title {
	margin: 0 0 0.5rem 0;
}
.gm-album-description {
	margin-bottom: 1rem;
	color: #555;
}

/* Grid (Layout=grid). */
.gm-album.gm-layout-grid .gm-grid {
	display: grid;
	gap: 12px;
}
.gm-album.gm-layout-grid.gm-cols-1 .gm-grid { grid-template-columns: 1fr; }
.gm-album.gm-layout-grid.gm-cols-2 .gm-grid { grid-template-columns: repeat(2, 1fr); }
.gm-album.gm-layout-grid.gm-cols-3 .gm-grid { grid-template-columns: repeat(3, 1fr); }
.gm-album.gm-layout-grid.gm-cols-4 .gm-grid { grid-template-columns: repeat(4, 1fr); }
.gm-album.gm-layout-grid.gm-cols-5 .gm-grid { grid-template-columns: repeat(5, 1fr); }
.gm-album.gm-layout-grid.gm-cols-6 .gm-grid { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 768px) {
	.gm-album.gm-layout-grid .gm-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 480px) {
	.gm-album.gm-layout-grid .gm-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Masonry container. */
.gm-album.gm-layout-masonry .gm-grid {
	margin: 0;
}
.gm-album.gm-layout-masonry .gm-item {
	margin-bottom: 12px;
	display: block;
}

/* Item-Größen für Masonry. */
.gm-album.gm-layout-masonry.gm-cols-1 .gm-item { width: 100%; }
.gm-album.gm-layout-masonry.gm-cols-2 .gm-item { width: calc(50% - 6px); }
.gm-album.gm-layout-masonry.gm-cols-3 .gm-item { width: calc(33.333% - 8px); }
.gm-album.gm-layout-masonry.gm-cols-4 .gm-item { width: calc(25% - 9px); }
.gm-album.gm-layout-masonry.gm-cols-5 .gm-item { width: calc(20% - 10px); }
.gm-album.gm-layout-masonry.gm-cols-6 .gm-item { width: calc(16.666% - 10px); }

.gm-album.gm-layout-masonry .gm-item { margin-right: 12px; }
.gm-album.gm-layout-masonry { box-sizing: border-box; }

@media (max-width: 768px) {
	.gm-album.gm-layout-masonry .gm-item { width: calc(50% - 6px) !important; }
}
@media (max-width: 480px) {
	.gm-album.gm-layout-masonry .gm-item { width: 100% !important; margin-right: 0; }
}

/* Item-Styles. */
.gm-item {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	background: #f2f2f2;
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease;
}
.gm-item:hover { transform: scale(1.01); }
.gm-item img {
	display: block;
	width: 100%;
	height: auto;
}
.gm-album.gm-layout-grid .gm-item img {
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}
.gm-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 6px 10px;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
	color: #fff;
	font-size: 13px;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.gm-item:hover .gm-caption { opacity: 1; }

.gm-play-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 36px;
	color: #fff;
	background: rgba(0,0,0,0.5);
	border-radius: 50%;
	width: 56px;
	height: 56px;
	line-height: 56px;
	text-align: center;
	pointer-events: none;
}

.gm-video-placeholder {
	display: flex;
	width: 100%;
	aspect-ratio: 16/9;
	background: #222;
	color: #fff;
	font-size: 38px;
	align-items: center;
	justify-content: center;
}

/* Album-Übersicht. */
.gm-albums-overview {
	display: grid;
	gap: 16px;
}
.gm-albums-overview.gm-cols-1 { grid-template-columns: 1fr; }
.gm-albums-overview.gm-cols-2 { grid-template-columns: repeat(2, 1fr); }
.gm-albums-overview.gm-cols-3 { grid-template-columns: repeat(3, 1fr); }
.gm-albums-overview.gm-cols-4 { grid-template-columns: repeat(4, 1fr); }
.gm-albums-overview.gm-cols-5 { grid-template-columns: repeat(5, 1fr); }
.gm-albums-overview.gm-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 768px) {
	.gm-albums-overview { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
	.gm-albums-overview { grid-template-columns: 1fr !important; }
}

.gm-album-card {
	display: block;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	color: inherit;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gm-album-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.gm-album-cover {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #eee;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.gm-album-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gm-album-meta {
	padding: 10px 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
}
.gm-album-title {
	font-weight: 600;
}
.gm-album-count {
	color: #666;
	font-size: 12px;
}
.gm-empty {
	padding: 12px;
	color: #777;
	font-style: italic;
}