/* ===========================================
   GALLERY SECTION BASE
   =========================================== */

.gs-gallery-info{
	background: radial-gradient(circle at top left, #04232c 0%, #020910 70%);
	padding: 40px 40px 70px 40px;
}

/* ===========================================
   SHELL AROUND THE SLIDER (JS CREATES THIS)
   =========================================== */

.gs-gallery-info .gs-slider-shell {
	position: relative;
	width: 100%;
}

/* ===========================================
   SLIDER CORE
   =========================================== */

.gs-gallery-info .gs-slider-shell .gs-posts-wrapper {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	gap: 20px;
	padding: 20px 0;
	scrollbar-width: thin;          /* Firefox */
	-webkit-overflow-scrolling: touch;
}

.gs-gallery-info .gs-slider-shell .gs-posts-wrapper::-webkit-scrollbar {
	height: 6px;
}

.gs-gallery-info .gs-slider-shell .gs-posts-wrapper::-webkit-scrollbar-track {
	background: transparent !important;
}

.gs-gallery-info .gs-slider-shell .gs-posts-wrapper::-webkit-scrollbar-thumb {
	background: #555;
}

/* ===========================================
   SLIDES (VARIABLE WIDTH, FIXED HEIGHT)
   =========================================== */

.gs-gallery-info .gs-slider-shell .gs-grid-column {
	flex: 0 0 auto !important;      /* VARIABLE WIDTH */
	min-width: 0 !important;
	max-width: none !important;
	scroll-snap-align: start;
	background: transparent;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ===========================================
   IMAGES (CRITICAL RULES)
   =========================================== */

.gs-gallery-info .gs-grid-column img {
	height: 420px;                 /* SAME HEIGHT */
	width: auto;                   /* VARIABLE WIDTH */
	max-width: none;
	object-fit: contain;           /* NO CROPPING */
	display: block;
	user-select: none;
	pointer-events: auto;
}

/* ===========================================
   MOBILE TUNING
   =========================================== */

@media (max-width: 768px) {
	.gs-gallery-info .gs-grid-column img {
		height: 320px;
	}
}

/* ===========================================
   DRAGGING FEEDBACK
   =========================================== */

.gs-gallery-info .gs-slider-shell .gs-posts-wrapper.dragging {
	cursor: grabbing;
	cursor: -webkit-grabbing;
	user-select: none;
}

/* Disable pointer events while dragging */
.gs-gallery-info .gs-slider-shell .gs-posts-wrapper.dragging * {
	pointer-events: none !important;
}

/* ===========================================
   ARROWS (FIXED TO SHELL)
   =========================================== */

.gs-gallery-info .gs-slider-shell .slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-60%);
	width: 44px;
	height: 44px;
	z-index: 50;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.3);
	border-radius: 44px;
	font-size: 28px;
	font-weight: bold;
	color: #333;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	user-select: none;
	transition: background-color 0.5s ease-in-out;
}

.gs-gallery-info .gs-slider-shell .slider-arrow:hover{
	background: rgba(255,255,255,0.9);
}

.gs-gallery-info .gs-slider-shell .slider-arrow-left {
	left: -40px;
}

.gs-gallery-info .gs-slider-shell .slider-arrow-right {
	right: -40px;
}

.gs-gallery-info .gs-slider-shell .slider-arrow-left::before {
	font-family: "Font Awesome 7 Pro";
	content: "\e615";
}

.gs-gallery-info .gs-slider-shell .slider-arrow-right::before {
	font-family: "Font Awesome 7 Pro";
	content: "\e4b1";
}

/* ===========================================
   LIGHTBOX OVERLAY
   =========================================== */

.gs-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease-in-out;
}

.gs-lightbox.active {
	opacity: 1;
	pointer-events: auto;
}

/* Image */
.gs-lightbox img {
	max-width: 100vw;
	max-height: 100vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Close button */
.gs-lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 36px;
	color: #fff;
	cursor: pointer;
	z-index: 10000;
}

.gs-lightbox-close i {
	font-family: "Font Awesome 7 Pro";
}

/* ===== Lightbox: stop native image dragging cursor ===== */
.gs-gallery-info img {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
}

/* Optional: nice cursor */
.gs-gallery-info .gs-slider-shell .gs-posts-wrapper {
  cursor: grab;
}
.gs-gallery-info .gs-slider-shell .gs-posts-wrapper.dragging {
  cursor: grabbing;
}

.gs-gallery-info {
  visibility: hidden;
}

/* todo: size of exit for lightbox */