/*
 * Überschreibt gezielt die von gallery-for-immich.php per Inline-Style gesetzten
 * "display:grid"-Regeln auf .immich-grid (dort ausschließlich als HTML-Attribut
 * style="..." gesetzt, siehe render_gallery() im Original-Plugin). Inline-Styles
 * lassen sich von außen nur mit !important überschreiben – daher hier bewusst
 * eingesetzt, ausschließlich auf die beiden fremden Klassennamen begrenzt.
 *
 * grid-template-columns/gap aus dem Original bleiben unangetastet bzw. wirken
 * unter Flexbox einfach nicht mehr (gap wird von Flexbox ebenfalls unterstützt
 * und bleibt daher sinnvoll erhalten).
 */
.immich-grid {
	display: flex !important;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory !important;
	scroll-behavior: smooth !important;
	-webkit-overflow-scrolling: touch !important;
	padding-bottom: 6px;
}

.immich-grid > div {
	flex: 0 0 auto !important;
	scroll-snap-align: start;
}

/* Wird von carousel.js um jedes .immich-grid gelegt, damit die Pfeil-Buttons
   nicht mitscrollen, sondern fest über dem Karussell stehen bleiben. */
.gfic-carousel-wrap {
	position: relative;
}

.gfic-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.9);
	color: var(--gfic-accent, #098DA3);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
}

.gfic-nav:hover {
	background: var(--gfic-accent, #098DA3);
	color: #fff;
}

.gfic-nav--prev {
	left: -8px;
}

.gfic-nav--next {
	right: -8px;
}

@media (max-width: 600px) {
	.gfic-nav {
		width: 34px;
		height: 34px;
		font-size: 1.25rem;
	}
}