/**
 * Roshan Gallery - Base CSS & Items Style Preset Engine
 * BEM isolated styling, zero global pollution.
 * Pure modern CSS Grid with responsive multi-tier columns.
 */

:root {
	--rg-cols-desktop: 4;
	--rg-cols-laptop: 4;
	--rg-cols-tablet: 2;
	--rg-cols-mobile: 1;
	--rg-gap-x: 16px;
	--rg-gap-y: 16px;
	--rg-gap: 16px;
	--rg-border-width: 1px;
	--rg-border-color: #e2e8f0;
	--rg-radius: 4px;
	--rg-aspect-ratio: 4 / 3;
	--rg-title-size: 14px;
	--rg-title-color: #1a202c;
	--rg-title-weight: 600;
	--rg-caption-size: 13px;
	--rg-caption-color: #4a5568;
	--rg-bg-color: transparent;
	--rg-overlay-color: #000000;
	--rg-overlay-op: 0.4;
}

.roshan-gallery {
	box-sizing: border-box;
	width: 100%;
	margin: 1.5em auto;
	background-color: var(--rg-bg-color, transparent);
	padding: 0;
}

.roshan-gallery *,
.roshan-gallery *::before,
.roshan-gallery *::after {
	box-sizing: border-box;
}

/* Gallery Grid Container - Strictly controls rows & columns */
.roshan-gallery__grid {
	display: grid !important;
	grid-template-columns: repeat(var(--rg-cols-desktop, 4), minmax(0, 1fr)) !important;
	gap: var(--rg-gap-y, 16px) var(--rg-gap-x, 16px) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
	list-style: none !important;
	box-sizing: border-box !important;
}

/* Auto-fit Fluid Mode */
.roshan-gallery--cols-autofit .roshan-gallery__grid {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

/* Responsive Columns: Laptop (max 1200px) */
@media (max-width: 1200px) {
	.roshan-gallery__grid {
		grid-template-columns: repeat(var(--rg-cols-laptop, var(--rg-cols-desktop, 4)), minmax(0, 1fr)) !important;
	}
}

/* Responsive Columns: Tablet (max 900px) */
@media (max-width: 900px) {
	.roshan-gallery__grid {
		grid-template-columns: repeat(var(--rg-cols-tablet, 2), minmax(0, 1fr)) !important;
	}
}

/* Responsive Columns: Mobile (max 600px) */
@media (max-width: 600px) {
	.roshan-gallery__grid {
		grid-template-columns: repeat(var(--rg-cols-mobile, 1), minmax(0, 1fr)) !important;
		gap: calc(var(--rg-gap-y, 16px) * 0.75) calc(var(--rg-gap-x, 16px) * 0.75) !important;
	}
}

/* Gallery Item Card */
.roshan-gallery__item {
	display: flex !important;
	flex-direction: column !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-width: 0 !important;
}

.roshan-gallery__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: #ffffff;
	border: var(--rg-border-width, 1px) solid var(--rg-border-color, #e2e8f0);
	border-radius: var(--rg-radius, 4px);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	position: relative;
}

.roshan-gallery--border-none .roshan-gallery__inner {
	border: none;
	box-shadow: none;
	background: transparent;
}

/* ==========================================================================
   Thumbnail Area Base
   ========================================================================== */
.roshan-gallery__thumb-wrapper {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	aspect-ratio: var(--rg-aspect-ratio, 4 / 3);
	overflow: hidden !important;
	background-color: #f7fafc !important;
	box-sizing: border-box !important;
}

.roshan-gallery__link,
.roshan-gallery__thumb-static {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	text-decoration: none !important;
	color: inherit !important;
	overflow: hidden !important;
	position: relative !important;
	box-sizing: border-box !important;
}

/* Image Base */
.roshan-gallery__image {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease !important;
	will-change: transform;
	box-sizing: border-box !important;
}

/* ==========================================================================
   1. EQUAL HEIGHT MODE (.roshan-gallery--height-equal)
   Creates genuinely equal-height cards/containers across each row.
   Height comes from layout/container, not from each image's natural height.
   Images fill the container (width: 100%; height: 100%; object-fit: cover).
   Cropping allowed, distortion NOT allowed. Responsive across all devices.
   ========================================================================== */
.roshan-gallery--height-equal .roshan-gallery__item {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
}

.roshan-gallery--height-equal .roshan-gallery__inner {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	width: 100% !important;
}

.roshan-gallery--height-equal .roshan-gallery__thumb-wrapper {
	width: 100% !important;
	aspect-ratio: var(--rg-aspect-ratio, 4 / 3) !important;
	flex-shrink: 0 !important;
	overflow: hidden !important;
}

/* Equal Height with Original Dimensions: Container maintains equal row height */
.roshan-gallery--height-equal.roshan-gallery--ratio-original .roshan-gallery__thumb-wrapper {
	aspect-ratio: auto !important;
	flex: 1 1 auto !important;
	min-height: 220px !important;
}

.roshan-gallery--height-equal .roshan-gallery__link,
.roshan-gallery--height-equal .roshan-gallery__thumb-static {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
}

.roshan-gallery--height-equal .roshan-gallery__image {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
}

.roshan-gallery--height-equal .roshan-gallery__caption-area {
	flex-grow: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
}

/* ==========================================================================
   2. NATURAL HEIGHT MODE (.roshan-gallery--height-natural)
   Each image preserves its own proportions without distortion or stretching.
   When Original Dimensions is selected:
     Height calculated naturally from image dimensions.
     No fixed height forced. No cropping. object-fit: contain.
   When a specific ratio (4:3, 16:9, 1:1, 3:4, 3:5, Custom) is selected:
     Container uses selected ratio without distortion or cropping.
   ========================================================================== */
.roshan-gallery--height-natural .roshan-gallery__item {
	display: flex !important;
	flex-direction: column !important;
	height: auto !important;
}

.roshan-gallery--height-natural .roshan-gallery__inner {
	display: flex !important;
	flex-direction: column !important;
	height: auto !important;
	width: 100% !important;
}

/* Natural Height + Fixed Aspect Ratio */
.roshan-gallery--height-natural:not(.roshan-gallery--ratio-original) .roshan-gallery__thumb-wrapper {
	width: 100% !important;
	aspect-ratio: var(--rg-aspect-ratio, 4 / 3) !important;
	height: auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.roshan-gallery--height-natural:not(.roshan-gallery--ratio-original) .roshan-gallery__link,
.roshan-gallery--height-natural:not(.roshan-gallery--ratio-original) .roshan-gallery__thumb-static {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.roshan-gallery--height-natural:not(.roshan-gallery--ratio-original) .roshan-gallery__image {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center center !important;
}

/* Natural Height + Original Dimensions */
.roshan-gallery--height-natural.roshan-gallery--ratio-original .roshan-gallery__thumb-wrapper {
	aspect-ratio: auto !important;
	height: auto !important;
	width: 100% !important;
	max-height: none !important;
	display: block !important;
}

.roshan-gallery--height-natural.roshan-gallery--ratio-original .roshan-gallery__link,
.roshan-gallery--height-natural.roshan-gallery--ratio-original .roshan-gallery__thumb-static {
	display: block !important;
	width: 100% !important;
	height: auto !important;
}

.roshan-gallery--height-natural.roshan-gallery--ratio-original .roshan-gallery__image {
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	object-fit: contain !important;
	display: block !important;
}

/* ==========================================================================
   3. ADAPTIVE HEIGHT MODE (.roshan-gallery--height-adaptive)
   Dynamically and intelligently adapts to different image shapes
   (portrait, landscape, square, panoramic) without unnecessary cropping or distortion.
   Independent from Equal Height mode.
   ========================================================================== */
.roshan-gallery--height-adaptive .roshan-gallery__item {
	display: flex !important;
	flex-direction: column !important;
	height: auto !important;
}

.roshan-gallery--height-adaptive .roshan-gallery__inner {
	display: flex !important;
	flex-direction: column !important;
	height: auto !important;
	width: 100% !important;
}

/* Adaptive Height + Fixed Ratio */
.roshan-gallery--height-adaptive:not(.roshan-gallery--ratio-original) .roshan-gallery__thumb-wrapper {
	width: 100% !important;
	aspect-ratio: var(--rg-aspect-ratio, 4 / 3) !important;
	height: auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.roshan-gallery--height-adaptive:not(.roshan-gallery--ratio-original) .roshan-gallery__link,
.roshan-gallery--height-adaptive:not(.roshan-gallery--ratio-original) .roshan-gallery__thumb-static {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.roshan-gallery--height-adaptive:not(.roshan-gallery--ratio-original) .roshan-gallery__image {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center center !important;
}

/* Adaptive Height + Original Dimensions */
.roshan-gallery--height-adaptive.roshan-gallery--ratio-original .roshan-gallery__thumb-wrapper {
	aspect-ratio: auto !important;
	height: auto !important;
	width: 100% !important;
	max-height: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.roshan-gallery--height-adaptive.roshan-gallery--ratio-original .roshan-gallery__link,
.roshan-gallery--height-adaptive.roshan-gallery--ratio-original .roshan-gallery__thumb-static {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: auto !important;
}

.roshan-gallery--height-adaptive.roshan-gallery--ratio-original .roshan-gallery__image {
	width: 100% !important;
	height: auto !important;
	max-height: var(--rg-adaptive-max-height, 560px) !important;
	object-fit: contain !important;
	object-position: center center !important;
	display: block !important;
}

.roshan-gallery--height-adaptive.roshan-gallery--mode-slider .roshan-gallery__slider-track-wrap,
.roshan-gallery--height-adaptive.roshan-gallery--mode-slider .roshan-gallery__grid {
	transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	align-items: center !important;
}

/* Hover Effects */
.roshan-gallery--hover-zoom .roshan-gallery__inner:hover .roshan-gallery__image {
	transform: scale(1.06);
}

.roshan-gallery--hover-brightness .roshan-gallery__inner:hover .roshan-gallery__image {
	filter: brightness(1.1);
	transform: scale(1.04);
}

.roshan-gallery--hover-slide-up .roshan-gallery__inner:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.roshan-gallery--hover-slide-up .roshan-gallery__inner:hover .roshan-gallery__image {
	transform: scale(1.04);
}

.roshan-gallery--hover-none .roshan-gallery__inner:hover .roshan-gallery__image {
	transform: none;
}

/* ==========================================================================
   ITEMS STYLE PRESETS (Shown in the visual settings screenshot)
   ========================================================================== */

/* 1. Classic Style */
.roshan-gallery--style-classic .roshan-gallery__caption-area {
	padding: 10px 12px 12px;
	background: #ffffff;
}

/* 2. Overlay Style */
.roshan-gallery--style-overlay .roshan-gallery__overlay-content {
	position: absolute;
	inset: 0;
	background-color: var(--rg-overlay-color, #000000);
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	transition: opacity 0.3s ease;
	z-index: 3;
}

.roshan-gallery--style-overlay.roshan-gallery--overlay-trigger-always .roshan-gallery__overlay-content,
.roshan-gallery--style-overlay .roshan-gallery__inner:hover .roshan-gallery__overlay-content {
	opacity: var(--rg-overlay-op, 0.75);
}

.roshan-gallery__overlay-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 6px;
}

.roshan-gallery__overlay-icon {
	color: #ffffff;
	font-size: 1.4rem;
	margin-top: 4px;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* 3. Content Box Style (Elevated bottom container) */
.roshan-gallery--style-content-box .roshan-gallery__inner {
	overflow: visible;
	background: transparent;
	border: none;
	box-shadow: none;
}

.roshan-gallery--style-content-box .roshan-gallery__thumb-wrapper {
	border-radius: var(--rg-radius, 6px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.roshan-gallery--style-content-box .roshan-gallery__caption-area {
	background: #ffffff;
	padding: 12px 14px;
	margin: -14px 10px 0;
	position: relative;
	z-index: 2;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	border: 1px solid #edf2f7;
}

/* ==========================================================================
   INDEPENDENT TITLE & CAPTION TYPOGRAPHY & CONTROLS
   ========================================================================== */

.roshan-gallery__title-top {
	padding: 6px 10px;
	width: 100%;
}

.roshan-gallery__caption-area {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 8px 10px 10px;
	gap: 4px;
}

.roshan-gallery__title {
	margin: 0;
	font-size: var(--rg-title-size, 14px);
	color: var(--rg-title-color, #1a202c);
	font-weight: var(--rg-title-weight, 600);
	line-height: 1.35;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.roshan-gallery__caption {
	margin: 0;
	font-size: var(--rg-caption-size, 13px);
	color: var(--rg-caption-color, #4a5568);
	line-height: 1.4;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Hover reveal triggers */
.roshan-title--hover {
	opacity: 0;
	transform: translateY(4px);
}

.roshan-gallery__inner:hover .roshan-title--hover {
	opacity: 1;
	transform: translateY(0);
}

.roshan-caption--hover {
	opacity: 0;
	transform: translateY(4px);
}

.roshan-gallery__inner:hover .roshan-caption--hover {
	opacity: 1;
	transform: translateY(0);
}

/* Alignments */
.roshan-align-left {
	text-align: left;
}

.roshan-align-center {
	text-align: center;
}

.roshan-align-right {
	text-align: right;
}

/* Text Line Clamping */
.roshan-line-clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.roshan-clamp-1 {
	-webkit-line-clamp: 1;
}

.roshan-clamp-2 {
	-webkit-line-clamp: 2;
}

.roshan-clamp-3 {
	-webkit-line-clamp: 3;
}

/* ==========================================================================
   DYNAMIC PAGINATION & LOAD MORE
   ========================================================================== */

.roshan-gallery__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 28px;
	padding: 8px 0;
	font-size: 15px;
	user-select: none;
}

.roshan-gallery__page-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border: 1px solid transparent;
	background: transparent;
	color: #0066cc;
	font-weight: 500;
	font-size: 14px;
	cursor: pointer;
	border-radius: 50%;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.roshan-gallery__page-num:hover {
	background-color: #f1f5f9;
	color: #004b99;
	transform: translateY(-1px);
}

.roshan-gallery__page-num--current {
	border: 1px solid #d1d5db;
	background-color: #ffffff;
	color: #1f2937;
	cursor: default;
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.roshan-gallery__page-num--current:hover {
	background-color: #ffffff;
	color: #1f2937;
	transform: none;
}

.roshan-gallery__page-dots {
	color: #6b7280;
	padding: 0 4px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	cursor: pointer;
	border: none;
	background: transparent;
	min-width: 30px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: color 0.15s ease, background-color 0.15s ease;
}

button.roshan-gallery__page-dots:hover {
	color: #0066cc;
	background-color: #f1f5f9;
}

/* Load More & Infinite Scroll */
.roshan-gallery__load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.roshan-gallery__load-more-btn {
	background-color: #0066cc;
	color: #ffffff;
	border: none;
	padding: 10px 24px;
	font-size: 14px;
	font-weight: 500;
	border-radius: 4px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.roshan-gallery__load-more-btn:hover {
	background-color: #004b99;
	transform: translateY(-1px);
}

.roshan-gallery__spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255,255,255,0.4);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: roshan-spin 0.6s linear infinite;
}

.roshan-gallery.is-loading .roshan-gallery__spinner,
.roshan-gallery__load-more-btn.is-loading .roshan-gallery__spinner {
	display: inline-block;
}

@keyframes roshan-spin {
	to { transform: rotate(360deg); }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.roshan-gallery__image,
	.roshan-gallery__inner,
	.roshan-gallery__title,
	.roshan-gallery__caption,
	.roshan-gallery__overlay-content,
	.roshan-gallery__inside-content,
	.roshan-gallery__page-num,
	.roshan-gallery__load-more-btn,
	.roshan-gallery__slider-btn {
		transition: none !important;
		transform: none !important;
	}
}

/* ==========================================================================
   Single-Row Slider / Horizontal Carousel Mode
   Functions as a single-row horizontal carousel by default.
   Keeps all images on one continuous line without wrapping.
   ========================================================================== */
.roshan-gallery--mode-slider {
	position: relative;
	width: 100%;
}

.roshan-gallery--mode-slider .roshan-gallery__slider-wrapper {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
}

.roshan-gallery--mode-slider .roshan-gallery__slider-track-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.roshan-gallery--mode-slider.roshan-gallery--layout-grid .roshan-gallery__grid,
.roshan-gallery--mode-slider .roshan-gallery__grid {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory !important;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
	gap: var(--rg-gap-x, 16px) !important;
	padding: 8px 2px !important;
	margin: 0 !important;
	width: 100% !important;
	justify-content: flex-start !important;
}

/* Horizontal Slider Alignment (when not enough images to fill full width) */
.roshan-gallery--align-center.roshan-gallery--mode-slider .roshan-gallery__grid:not(.is-overflowing),
.roshan-gallery--mode-slider .roshan-gallery__grid:not(.is-overflowing) {
	justify-content: center !important;
}

.roshan-gallery--align-left.roshan-gallery--mode-slider .roshan-gallery__grid {
	justify-content: flex-start !important;
}

.roshan-gallery--align-right.roshan-gallery--mode-slider .roshan-gallery__grid:not(.is-overflowing) {
	justify-content: flex-end !important;
}

/* When items overflow, flex-start allows full scrolling without clipping start */
.roshan-gallery--mode-slider .roshan-gallery__grid.is-overflowing {
	justify-content: flex-start !important;
}

.roshan-gallery--mode-slider.roshan-gallery--layout-grid .roshan-gallery__grid::-webkit-scrollbar,
.roshan-gallery--mode-slider .roshan-gallery__grid::-webkit-scrollbar {
	display: none !important;
}

/* Slider item sizing based on responsive columns (min-width: 0 prevents column calculation blowout) */
.roshan-gallery--mode-slider .roshan-gallery__item {
	flex: 0 0 calc((100% - (var(--rg-cols-desktop, 4) - 1) * var(--rg-gap-x, 16px)) / var(--rg-cols-desktop, 4)) !important;
	max-width: calc((100% - (var(--rg-cols-desktop, 4) - 1) * var(--rg-gap-x, 16px)) / var(--rg-cols-desktop, 4)) !important;
	min-width: 0 !important;
	scroll-snap-align: start !important;
	box-sizing: border-box !important;
	flex-shrink: 0 !important;
}

@media (max-width: 1200px) {
	.roshan-gallery--mode-slider .roshan-gallery__item {
		flex: 0 0 calc((100% - (var(--rg-cols-laptop, var(--rg-cols-desktop, 4)) - 1) * var(--rg-gap-x, 16px)) / var(--rg-cols-laptop, var(--rg-cols-desktop, 4))) !important;
		max-width: calc((100% - (var(--rg-cols-laptop, var(--rg-cols-desktop, 4)) - 1) * var(--rg-gap-x, 16px)) / var(--rg-cols-laptop, var(--rg-cols-desktop, 4))) !important;
		min-width: 0 !important;
	}
}

@media (max-width: 900px) {
	.roshan-gallery--mode-slider .roshan-gallery__item {
		flex: 0 0 calc((100% - (var(--rg-cols-tablet, 2) - 1) * var(--rg-gap-x, 16px)) / var(--rg-cols-tablet, 2)) !important;
		max-width: calc((100% - (var(--rg-cols-tablet, 2) - 1) * var(--rg-gap-x, 16px)) / var(--rg-cols-tablet, 2)) !important;
		min-width: 0 !important;
	}
}

@media (max-width: 600px) {
	.roshan-gallery--mode-slider .roshan-gallery__item {
		flex: 0 0 calc((100% - (var(--rg-cols-mobile, 1) - 1) * var(--rg-gap-x, 16px)) / var(--rg-cols-mobile, 1)) !important;
		max-width: calc((100% - (var(--rg-cols-mobile, 1) - 1) * var(--rg-gap-x, 16px)) / var(--rg-cols-mobile, 1)) !important;
		min-width: 0 !important;
	}
}

/* Multi-Row Grid Mode (Explicit isolation from slider flex styles) */
.roshan-gallery--mode-grid .roshan-gallery__grid {
	display: grid !important;
	grid-template-columns: repeat(var(--rg-cols-desktop, 4), minmax(0, 1fr)) !important;
	gap: var(--rg-gap-y, 16px) var(--rg-gap-x, 16px) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	overflow-x: visible !important;
	flex-wrap: wrap !important;
}

.roshan-gallery--mode-grid .roshan-gallery__item {
	flex: none !important;
	max-width: 100% !important;
	width: 100% !important;
	min-width: 0 !important;
}

/* Slider Navigation Arrows - Safely positioned inside wrapper boundary */
.roshan-gallery__slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	color: #1e293b;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.25s ease, visibility 0.25s ease;
	outline: none;
	padding: 0;
	opacity: 1;
	visibility: visible;
}

.roshan-gallery__slider-btn:hover:not(:disabled) {
	background: #f8fafc;
	color: #0066cc;
	transform: translateY(-50%) scale(1.08);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}

.roshan-gallery__slider-btn:active:not(:disabled) {
	transform: translateY(-50%) scale(0.96);
}

.roshan-gallery__slider-btn:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.4);
}

.roshan-gallery__slider-btn:disabled,
.roshan-gallery__slider-btn.is-disabled {
	opacity: 0;
	visibility: hidden;
	cursor: not-allowed;
	pointer-events: none;
}

.roshan-gallery__slider-btn--prev {
	left: 8px;
}

.roshan-gallery__slider-btn--next {
	right: 8px;
}

@media (max-width: 600px) {
	.roshan-gallery__slider-btn {
		width: 32px;
		height: 32px;
	}
	.roshan-gallery__slider-btn--prev {
		left: 4px;
	}
	.roshan-gallery__slider-btn--next {
		right: 4px;
	}
}

/* Slider Pagination Dots */
.roshan-gallery__slider-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 16px auto 4px;
	padding: 4px 0;
	width: 100%;
}

.roshan-gallery__slider-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #cbd5e1;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
	outline: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.roshan-gallery__slider-dot:hover {
	background: #94a3b8;
	transform: scale(1.2);
}

.roshan-gallery__slider-dot.is-active {
	background: #0284c7;
	width: 24px;
	border-radius: 5px;
	transform: none;
}