/**
 * Kasparthalmann Gallery — frontend styles.
 *
 * Scoped under .ktg-* to avoid theme conflicts (Impreza / US Core).
 *
 * Hierarchy:
 *   .ktg-gallery                          (main container — owns --ktg-gap)
 *     ├── .ktg-auto-gallery
 *     │     └── .ktg-row                  (per-row grid, --ktg-cols = row length)
 *     │           └── .ktg-item
 *     └── .ktg-row.ktg-row-custom         (responsive grid with --ktg-cols-*)
 *           └── .ktg-item                 (responsive span via --ktg-span-*)
 *
 * Responsive breakpoints:
 *   - Mobile:  < 768 px
 *   - Tablet:  768 – 1199 px
 *   - Desktop: >= 1200 px
 */

/* ------------------------------------------------------------------
 * Main container — owns structural spacing via --ktg-gap
 * ------------------------------------------------------------------ */

.ktg-gallery {
	--ktg-gap: 2.5vw;
	display: flex;
	flex-direction: column;
	gap: var(--ktg-gap);
	width: 100%;
	margin: 0;
}

/* ------------------------------------------------------------------
 * Auto Gallery — justified flex layout (sizes computed by gallery-layout.js)
 * ------------------------------------------------------------------ */

.ktg-auto-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ktg-gap);
	align-content: flex-start;
	/* Hidden until gallery-layout.js computes sizes and adds .ktg-layout-ready */
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ktg-auto-gallery.ktg-layout-ready {
	opacity: 1;
}

.ktg-auto-gallery > .ktg-item {
	flex-shrink: 0;
	/* width + height set by gallery-layout.js */
}

.ktg-auto-gallery > .ktg-item img,
.ktg-auto-gallery > .ktg-item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No-JS fallback: show gallery immediately */
.no-js .ktg-auto-gallery,
noscript ~ .ktg-auto-gallery {
	opacity: 1;
}

/* Mobile: clear JS computed sizes, stack single column, show immediately */
@media (max-width: 767px) {
	.ktg-auto-gallery {
		opacity: 1;
	}
	.ktg-auto-gallery > .ktg-item {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: unset !important;
	}
	.ktg-auto-gallery > .ktg-item img,
	.ktg-auto-gallery > .ktg-item video {
		height: auto;
	}
}

/* ------------------------------------------------------------------
 * Custom Gallery Row — responsive grid
 * ------------------------------------------------------------------ */

.ktg-row-custom {
	display: grid;
	grid-template-columns: repeat(var(--ktg-cols-mobile, 1), 1fr);
	gap: var(--ktg-gap);
	width: 100%;
}

@media (min-width: 768px) {
	.ktg-row-custom {
		grid-template-columns: repeat(var(--ktg-cols-tablet, 2), 1fr);
	}
}

@media (min-width: 1200px) {
	.ktg-row-custom {
		grid-template-columns: repeat(var(--ktg-cols-desktop, 3), 1fr);
	}
}

/* Gallery Image child — responsive span */
.ktg-row-custom .ktg-item {
	grid-column: span var(--ktg-span-mobile, 1);
}

@media (min-width: 768px) {
	.ktg-row-custom .ktg-item {
		grid-column: span var(--ktg-span-tablet, 1);
	}
}

@media (min-width: 1200px) {
	.ktg-row-custom .ktg-item {
		grid-column: span var(--ktg-span-desktop, 1);
	}
}

/* ------------------------------------------------------------------
 * Shared item figure
 * ------------------------------------------------------------------ */

.ktg-item {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	margin: 0;
	background: #f5f5f5;
}

.ktg-media-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.ktg-item img.ktg-media,
.ktg-item video.ktg-media,
.ktg-item .ktg-media-wrap img,
.ktg-item .ktg-media-wrap video {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	margin: auto;
	object-fit: contain;
}

.ktg-video-responsive {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	overflow: hidden;
}

.ktg-video-responsive iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ------------------------------------------------------------------
 * Scroll fade-in animation (applied by gallery.js via IntersectionObserver)
 * ------------------------------------------------------------------ */

.ktg-item.ktg-fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.ktg-item.ktg-fade-in.ktg-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.ktg-item.ktg-fade-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * Zoom (+) button — visible ONLY when overlay is open (clicked)
 * ------------------------------------------------------------------ */

.ktg-zoom {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: #111;
	font-size: 28px;
	line-height: 1;
	font-weight: 300;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

/* Show + only when the info overlay is open */
.ktg-item.is-open .ktg-zoom {
	opacity: 1;
	pointer-events: auto;
}

.ktg-zoom:hover {
	transform: scale(1.1);
}

.ktg-zoom:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
	opacity: 1;
	pointer-events: auto;
}

/* ------------------------------------------------------------------
 * Click-to-reveal overlay — solid grey card, text bottom-left
 * ------------------------------------------------------------------ */

.ktg-overlay {
	position: absolute;
	inset: 0;
	background: #ededec;
	color: #111;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	text-align: left;
	padding: 1.5em;
	z-index: 2;
}

.ktg-item.is-open .ktg-overlay {
	opacity: 1;
	pointer-events: auto;
}

.ktg-overlay .ktg-title {
	margin: 0;
	font-size: 1.2em;
	font-weight: 600;
	color: #111;
	line-height: 1.3;
}

.ktg-overlay .ktg-year {
	margin: 0;
	font-size: 1.2em;
	font-weight: 600;
	color: #111;
	line-height: 1.3;
}

.ktg-overlay .ktg-subtitle {
	margin: 0.4em 0 0 0;
	font-size: 1em;
	font-weight: 400;
	color: #333;
	line-height: 1.4;
}

.ktg-overlay .ktg-desc {
	margin: 0.15em 0 0 0;
	font-size: 1em;
	font-weight: 400;
	color: #333;
	line-height: 1.4;
}

/* ------------------------------------------------------------------
 * Lightbox — white backdrop
 * ------------------------------------------------------------------ */

/* Lightbox root: flex column so stage + caption never overlap.
 * Topbar (counter + tools) → body (stage + arrows, fills remaining) → caption (natural height).
 */
.ktg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: #fff;
	color: #111;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	font-family: inherit;
	display: flex;
	flex-direction: column;
}

.ktg-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.ktg-lightbox[hidden] {
	display: none !important;
}

.ktg-lb-backdrop {
	position: absolute;
	inset: 0;
	background: #fff;
	cursor: zoom-out;
}

/* Top bar: counter left, tools right */
.ktg-lb-topbar {
	position: relative;
	z-index: 3;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 18px;
	flex-shrink: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.ktg-lightbox.is-ui-visible .ktg-lb-topbar {
	opacity: 1;
}

.ktg-lb-counter {
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	color: #999;
}

.ktg-lb-tools {
	display: flex;
	gap: 8px;
}

.ktg-lb-tools button {
	background: transparent;
	border: 0;
	color: #999;
	cursor: pointer;
	padding: 6px;
	line-height: 0;
	border-radius: 2px;
	transition: transform 0.2s ease, color 0.2s ease;
}

.ktg-lb-tools button:hover {
	color: #555;
	transform: scale(1.1);
}

.ktg-lb-tools button:focus-visible {
	outline: 2px solid #999;
	outline-offset: 2px;
}

/* Stage: direct flex child #2, fills all remaining height.
 * Contains centered media + absolutely-positioned prev/next arrows.
 */
.ktg-lb-stage {
	position: relative;
	z-index: 2;
	flex: 1 1 0%;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.ktg-lb-prev,
.ktg-lb-next {
	position: absolute;
	z-index: 3;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	color: #999;
	cursor: pointer;
	padding: 16px;
	line-height: 0;
	border-radius: 2px;
	opacity: 0;
	transition: opacity 0.4s ease, transform 0.2s ease, color 0.2s ease;
}

.ktg-lb-prev { left: 14px; }
.ktg-lb-next { right: 14px; }

.ktg-lightbox.is-ui-visible .ktg-lb-prev,
.ktg-lightbox.is-ui-visible .ktg-lb-next {
	opacity: 1;
}

.ktg-lb-prev:hover { transform: translateY(-50%) scale(1.1); color: #555; }
.ktg-lb-next:hover { transform: translateY(-50%) scale(1.1); color: #555; }

.ktg-lb-prev:focus-visible,
.ktg-lb-next:focus-visible {
	outline: 2px solid #999;
	outline-offset: 2px;
}

.ktg-lb-media {
	display: flex;
	max-width: 100%;
	max-height: 100%;
	transition: opacity 0.25s ease, transform 0.3s ease;
}

/* Slide transition classes applied by lightbox.js */
.ktg-lb-media.ktg-slide-out-left {
	opacity: 0;
	transform: translateX(-40px);
}

.ktg-lb-media.ktg-slide-out-right {
	opacity: 0;
	transform: translateX(40px);
}

.ktg-lb-media.ktg-slide-in {
	opacity: 0;
	transform: translateX(0);
	transition: none; /* no transition on the "snap into place" */
}

.ktg-lb-media.ktg-slide-in-from-left {
	opacity: 0;
	transform: translateX(-40px);
	transition: none;
}

.ktg-lb-media.ktg-slide-in-from-right {
	opacity: 0;
	transform: translateX(40px);
	transition: none;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.ktg-lb-media,
	.ktg-lb-media.ktg-slide-out-left,
	.ktg-lb-media.ktg-slide-out-right,
	.ktg-lb-media.ktg-slide-in-from-left,
	.ktg-lb-media.ktg-slide-in-from-right {
		transition: none;
		transform: none;
	}
}

.ktg-lb-media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.ktg-lb-media video {
	width: 88vw;
	max-width: 1600px;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.ktg-lb-media iframe {
	width: 88vw;
	max-width: 1600px;
	height: 49.5vw;
	max-height: 900px;
	border: 0;
	display: block;
}

/* Caption: natural height, sits below the stage */
.ktg-lb-caption {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 16px 40px 24px 40px;
	flex-shrink: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.ktg-lightbox.is-ui-visible .ktg-lb-caption {
	opacity: 1;
}

.ktg-lb-caption .ktg-lb-title {
	margin: 0;
	font-size: 1.1em;
	font-weight: 500;
	color: #888;
}

.ktg-lb-caption .ktg-lb-year {
	margin: 0;
	font-size: 1.1em;
	font-weight: 500;
	color: #888;
}

.ktg-lb-caption .ktg-lb-year:empty,
.ktg-lb-caption .ktg-lb-subtitle:empty,
.ktg-lb-caption .ktg-lb-title:empty {
	display: none;
}

.ktg-lb-caption .ktg-lb-subtitle {
	margin: 4px 0 0 0;
	font-size: 1em;
	color: #999;
}

.ktg-lb-caption .ktg-lb-desc {
	margin: 4px 0 0 0;
	font-size: 0.95em;
	color: #999;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5;
}

.ktg-lb-caption .ktg-lb-desc:empty {
	display: none;
}

/* Fullscreen tweaks */
.ktg-lightbox.is-fullscreen .ktg-lb-stage {
	padding: 0;
}

.ktg-lightbox.is-fullscreen .ktg-lb-media img,
.ktg-lightbox.is-fullscreen .ktg-lb-media video {
	max-width: 100%;
}

/* Mobile: always show chrome, no fade */
.ktg-lightbox.is-mobile .ktg-lb-topbar,
.ktg-lightbox.is-mobile .ktg-lb-prev,
.ktg-lightbox.is-mobile .ktg-lb-next,
.ktg-lightbox.is-mobile .ktg-lb-caption {
	opacity: 1 !important;
}

@media (max-width: 767px) {
	.ktg-lb-topbar { padding: 10px 12px; }
	.ktg-lb-caption { padding: 12px 20px 16px 20px; }
	.ktg-lb-prev { left: 4px; padding: 10px; }
	.ktg-lb-next { right: 4px; padding: 10px; }
}