/**
 * SCB Mediathek — Frontend-Galerie (0.16.9)
 *
 * CSS-Custom-Properties (vom PHP-Render inline gesetzt):
 *   --scb-mt-cols-mobile   1..4   Spalten <  640px
 *   --scb-mt-cols-tablet   1..6   Spalten 640..1023px
 *   --scb-mt-cols-desktop  1..8   Spalten >= 1024px
 *   --scb-mt-gap           0|4|8|16px  Grid-Abstand
 *   --scb-mt-fit           cover|contain
 *
 * Theme-Tokens werden mit Fallback genutzt (Plugin standalone-fähig):
 *   --c-surface     #fff (dark: #1f2329)
 *   --c-text        #1d2327 (dark: #f6f7f7)
 *   --c-line        #dcdcde (dark: #3a4148)
 *   --scb-red       #c42119 (Brand-Akzent)
 *   --scb-font-display  Barlow Condensed
 *   --scb-radius    2px
 */

.scb-mt-gallery {
	margin: 1.5em 0;
	--scb-mt-cols-mobile:  2;
	--scb-mt-cols-tablet:  3;
	--scb-mt-cols-desktop: 4;
	--scb-mt-gap: 8px;
	--scb-mt-fit: cover;
}

.scb-mt-gallery__heading {
	margin: 0 0 0.9em;
	padding-top: clamp( 0.55rem, 1.2vw, 0.9rem );
	padding-bottom: clamp( 0.2rem, 0.6vw, 0.35rem );
	font-family: var( --scb-font-display, "Barlow Condensed", system-ui, sans-serif );
	font-weight: 700;
	font-size: clamp( 1.4rem, 2.4vw, 2rem );
	line-height: 1.15;
	letter-spacing: 0.5px;
	color: var( --c-text, #1d2327 );
}

/* -------------------------------------------------------------- Grid */

.scb-mt-gallery__grid {
	display: grid;
	grid-template-columns: repeat( var( --scb-mt-cols-mobile ), 1fr );
	gap: var( --scb-mt-gap );
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (min-width: 640px) {
	.scb-mt-gallery__grid {
		grid-template-columns: repeat( var( --scb-mt-cols-tablet ), 1fr );
	}
}

@media (min-width: 1024px) {
	.scb-mt-gallery__grid {
		grid-template-columns: repeat( var( --scb-mt-cols-desktop ), 1fr );
	}
}

.scb-mt-gallery__item {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}

.scb-mt-gallery__item figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
}

.scb-mt-gallery__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: var( --scb-mt-fit, cover );
	border-radius: var( --scb-radius, 2px );
	background: #f0f0f0;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.scb-mt-gallery[style*="--scb-mt-fit:contain"] .scb-mt-gallery__item img,
.scb-mt-gallery[style*="--scb-mt-fit: contain"] .scb-mt-gallery__item img {
	background: #fafafa;
	padding: 4px;
	box-sizing: border-box;
}
[data-theme="dark"] .scb-mt-gallery[style*="contain"] .scb-mt-gallery__item img {
	background: #1f2329;
}

.scb-mt-gallery__link {
	display: block;
	overflow: hidden;
	border-radius: var( --scb-radius, 2px );
	text-decoration: none;
	color: inherit;
}

.scb-mt-gallery__link:hover img,
.scb-mt-gallery__link:focus-visible img {
	transform: scale( 1.03 );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.12 );
}

.scb-mt-gallery__link:focus-visible {
	outline: var( --scb-focus, 2px solid #1d6fb8 );
	outline-offset: 2px;
}

/* -------------------------------------------------------------- Caption: statisch */

.scb-mt-gallery__caption {
	margin-top: 6px;
	font-size: 0.875em;
	line-height: 1.35;
	color: var( --c-text-soft, #555 );
	text-align: center;
	padding: 0 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* -------------------------------------------------------------- Caption: Overlay (Hover) */

.scb-mt-gallery--caption-overlay .scb-mt-gallery__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 12px 14px 10px;
	color: #fff;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.78 ), rgba( 0, 0, 0, 0 ) );
	opacity: 0;
	transform: translateY( 8px );
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
	border-bottom-left-radius: var( --scb-radius, 2px );
	border-bottom-right-radius: var( --scb-radius, 2px );
	display: block; /* override line-clamp box */
	-webkit-line-clamp: initial;
	-webkit-box-orient: initial;
}

.scb-mt-gallery--caption-overlay .scb-mt-gallery__item:hover .scb-mt-gallery__caption,
.scb-mt-gallery--caption-overlay .scb-mt-gallery__item:focus-within .scb-mt-gallery__caption {
	opacity: 1;
	transform: translateY( 0 );
}

.scb-mt-gallery:not(.scb-mt-gallery--has-captions) .scb-mt-gallery__caption {
	display: none;
}

/* -------------------------------------------------------------- Slider-Modus */

.scb-mt-gallery--mode-slider .scb-mt-gallery__slider-frame {
	position: relative;
}

.scb-mt-gallery--mode-slider .scb-mt-gallery__grid {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 0;
}
.scb-mt-gallery--mode-slider .scb-mt-gallery__grid::-webkit-scrollbar { display: none; }

.scb-mt-gallery--mode-slider .scb-mt-gallery__item {
	flex: 0 0 calc( (100% - (var( --scb-mt-cols-mobile, 2 ) - 1) * var( --scb-mt-gap, 8px )) / var( --scb-mt-cols-mobile, 2 ) );
	scroll-snap-align: start;
}
@media (min-width: 640px) {
	.scb-mt-gallery--mode-slider .scb-mt-gallery__item {
		flex: 0 0 calc( (100% - (var( --scb-mt-cols-tablet, 3 ) - 1) * var( --scb-mt-gap, 8px )) / var( --scb-mt-cols-tablet, 3 ) );
	}
}
@media (min-width: 1024px) {
	.scb-mt-gallery--mode-slider .scb-mt-gallery__item {
		flex: 0 0 calc( (100% - (var( --scb-mt-cols-desktop, 4 ) - 1) * var( --scb-mt-gap, 8px )) / var( --scb-mt-cols-desktop, 4 ) );
	}
}

.scb-mt-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var( --c-surface, #fff );
	color: var( --c-text, #1d2327 );
	border: 1px solid var( --c-line, #dcdcde );
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.12 );
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.scb-mt-gallery__nav:hover,
.scb-mt-gallery__nav:focus-visible {
	background: var( --scb-red, #c42119 );
	color: #fff;
	transform: translateY( -50% ) scale( 1.05 );
}
.scb-mt-gallery__nav:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	transform: translateY( -50% );
	background: var( --c-surface, #fff );
	color: var( --c-text, #1d2327 );
}
.scb-mt-gallery__nav--prev { left: -10px; }
.scb-mt-gallery__nav--next { right: -10px; }
@media (max-width: 640px) {
	.scb-mt-gallery__nav { width: 40px; height: 40px; }
	.scb-mt-gallery__nav--prev { left: 4px; }
	.scb-mt-gallery__nav--next { right: 4px; }
}

/* -------------------------------------------------------------- Empty-State */

.scb-mt-gallery--empty {
	background: #fff8e5;
	border: 1px dashed #d4a017;
	border-radius: var( --scb-radius, 2px );
	padding: 18px 22px;
	color: #5e4900;
}
.scb-mt-gallery--empty p { margin: 0 0 6px; }
.scb-mt-gallery__hint { font-size: 0.875em; color: #8a6d00; font-style: italic; }

/* -------------------------------------------------------------- Pagination — Theme-Tokens */

.scb-mt-gallery__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 1.5em;
	font-family: var( --scb-font-display, "Barlow Condensed", system-ui, sans-serif );
	font-weight: 700;
	letter-spacing: 0.5px;
}

.scb-mt-gallery__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var( --c-line, #dcdcde );
	border-radius: var( --scb-radius, 2px );
	text-decoration: none;
	color: var( --c-text, #1d2327 );
	background: var( --c-surface, #fff );
	font-size: 0.95em;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.scb-mt-gallery__page:hover,
.scb-mt-gallery__page:focus-visible {
	background: var( --c-surface-2, #f6f7f7 );
	color: var( --c-text, #1d2327 );
	border-color: var( --c-text-soft, #757575 );
	text-decoration: none;
}

.scb-mt-gallery__page:focus-visible {
	outline: var( --scb-focus, 2px solid #1d6fb8 );
	outline-offset: 2px;
}

.scb-mt-gallery__page--current {
	background: var( --scb-red, #c42119 );
	color: #fff;
	border-color: var( --scb-red, #c42119 );
	pointer-events: none;
}

.scb-mt-gallery__page--ellipsis {
	border: none;
	background: transparent;
	color: var( --c-text-soft, #8c8f94 );
	pointer-events: none;
	padding: 0 4px;
	min-width: auto;
}

.scb-mt-gallery__page--prev,
.scb-mt-gallery__page--next {
	padding: 0 16px;
}

/* -------------------------------------------------------------- GLightbox: Play-Button */

.scb-mt-glightbox-playbtn {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 999999;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	background: rgba( 0, 0, 0, 0.55 );
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.scb-mt-glightbox-playbtn:hover {
	background: var( --scb-red, #c42119 );
	border-color: var( --scb-red, #c42119 );
}
.scb-mt-glightbox-playbtn svg { width: 20px; height: 20px; }