/* Operational Gallery Slider - front-end */

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

.ogs {
	/* Overridable defaults (the plugin sets the -d / -m values inline) */
	--ogs-bg: #0a0f1c;
	--ogs-accent: #89a5d5;
	--ogs-ring: #6a7794;
	--ogs-text: #ffffff;
	--ogs-w-d: 78%;   --ogs-w-m: 86%;
	--ogs-gap-d: 16px; --ogs-gap-m: 10px;
	--ogs-h-d: 400px; --ogs-h-m: 360px;
	--ogs-r: 10px;
	--ogs-speed: 700ms;
	--ogs-dim: .45;
	--ogs-shade: .85;
	--ogs-pt: 30px;
	--ogs-pb: 32px;
	--ogs-inset: 9px;
	--ogs-ts: 21px;
	--ogs-ss: 14px;

	--ogs-wn-d: .78; --ogs-wn-m: .86;
	--ogs-ratio-d: 2.35; --ogs-ratio-m: 1.5;

	--ogs-w: var(--ogs-w-d);
	--ogs-wn: var(--ogs-wn-d);
	--ogs-ratio: var(--ogs-ratio-d);
	--ogs-gap: var(--ogs-gap-d);
	--ogs-h: var(--ogs-h-d);
	--ogs-line: rgba(255, 255, 255, .2);
	--ogs-ease: cubic-bezier(.65, 0, .3, 1);

	position: relative;
	width: 100%;
	overflow: hidden;
	padding: var(--ogs-pt) 0 var(--ogs-pb);
	background: var(--ogs-bg);
	color: var(--ogs-text);
	text-align: left;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@supports (color: color-mix(in srgb, red, blue)) {
	.ogs { --ogs-line: color-mix(in srgb, var(--ogs-text) 20%, transparent); }
}

.ogs--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: 0;
}

/* ---------- Header ---------- */

.ogs .ogs__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin: 0 0 24px;
	padding: 0 calc((100% - var(--ogs-w)) / 2 + var(--ogs-inset));
}

.ogs .ogs__eyebrow {
	display: block;
	margin: 0 0 2px;
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--ogs-accent);
	opacity: .78;
}

.ogs .ogs__heading {
	margin: 0;
	padding: 0;
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--ogs-text);
}

.ogs .ogs__counter {
	flex: none;
	padding-top: 2px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 13px;
	letter-spacing: .08em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.ogs .ogs__cur { font-weight: 700; color: var(--ogs-text); }
.ogs .ogs__sep,
.ogs .ogs__tot { opacity: .5; }

/* ---------- Stage & slides ---------- */

.ogs .ogs__stage {
	position: relative;
	height: var(--ogs-h);
	overflow: visible;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	outline: none;
}
.ogs.ogs--ratio .ogs__stage {
	height: auto;
	aspect-ratio: calc(var(--ogs-ratio) / var(--ogs-wn));
}
.ogs .ogs__stage:focus-visible {
	outline: 2px solid var(--ogs-accent);
	outline-offset: -2px;
}

.ogs .ogs__viewport { position: absolute; inset: 0; }

.ogs .ogs__slide {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--ogs-w);
	height: 100%;
	margin: 0 0 0 calc(var(--ogs-w) / -2);
	border: 1px solid var(--ogs-line);
	border-radius: var(--ogs-r);
	overflow: hidden;
	background: #0d1220;
	cursor: pointer;
	transform: translate3d(calc(var(--ogs-off, 0) * (100% + var(--ogs-gap)) + var(--ogs-drag, 0px)), 0, 0);
	transition: transform var(--ogs-speed) var(--ogs-ease), visibility var(--ogs-speed) linear;
	will-change: transform;
}
.ogs .ogs__slide.is-active { cursor: default; }
.ogs .ogs__slide.is-far { visibility: hidden; }

/* Slides that wrap around the loop reposition without animating */
.ogs .ogs__slide.ogs-nt,
.ogs.ogs-dragging .ogs__slide { transition: none; }

.ogs .ogs__slide.ogs-pop { animation: ogsPop var(--ogs-speed) ease both; }
@keyframes ogsPop { from { opacity: 0; } to { opacity: 1; } }

.ogs .ogs__media { position: absolute; inset: 0; }
.ogs .ogs__media img,
.ogs .ogs__img,
.ogs .ogs__slide img {
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 100% !important;
	min-height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: cover !important;
	object-position: center !important;
	aspect-ratio: auto !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	-webkit-user-drag: none;
	pointer-events: none;
}

/* Dim the peeking slides */
.ogs .ogs__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: #04060d;
	opacity: var(--ogs-dim);
	transition: opacity var(--ogs-speed) ease;
	pointer-events: none;
}
.ogs .ogs__slide.is-active::after { opacity: 0; }

/* Caption gradient */
.ogs .ogs__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(4, 6, 14, .92) 0%, rgba(4, 6, 14, .55) 22%, rgba(4, 6, 14, 0) 55%);
	opacity: var(--ogs-shade);
	pointer-events: none;
}

.ogs .ogs__caption {
	position: absolute;
	left: 21px;
	right: 21px;
	bottom: 20px;
	z-index: 3;
	opacity: 0;
	transform: translate3d(0, 10px, 0);
	transition: opacity .35s ease, transform .35s ease;
	pointer-events: none;
}
.ogs .ogs__slide.is-active .ogs__caption {
	opacity: 1;
	transform: none;
	transition-duration: .55s;
	transition-delay: calc(var(--ogs-speed) * .35);
}

.ogs .ogs__title {
	margin: 0 0 3px;
	font-size: var(--ogs-ts);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: .005em;
	color: var(--ogs-text);
}
.ogs .ogs__sub {
	margin: 0;
	font-size: var(--ogs-ss);
	line-height: 1.4;
	color: var(--ogs-text);
	opacity: .58;
}

.ogs .ogs__link {
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: inherit;
	text-decoration: none;
}
.ogs .ogs__slide:not(.is-active) .ogs__link { pointer-events: none; }
.ogs .ogs__link:focus-visible { outline: 2px solid var(--ogs-accent); outline-offset: -3px; }


/* ---------- Text position variants ---------- */
.ogs--cap-bc .ogs__caption { text-align: center; }
.ogs--cap-br .ogs__caption { text-align: right; }

.ogs--cap-tl .ogs__caption { top: 20px; bottom: auto; transform: translate3d(0, -10px, 0); }
.ogs--cap-tl .ogs__slide.is-active .ogs__caption { transform: none; }
.ogs--cap-tl .ogs__shade { background: linear-gradient(to bottom, rgba(4, 6, 14, .92) 0%, rgba(4, 6, 14, .55) 22%, rgba(4, 6, 14, 0) 55%); }

.ogs--cap-c .ogs__caption { top: 50%; bottom: auto; text-align: center; transform: translate3d(0, calc(-50% + 10px), 0); }
.ogs--cap-c .ogs__slide.is-active .ogs__caption { transform: translate3d(0, -50%, 0); }
.ogs--cap-c .ogs__shade { background: rgba(4, 6, 14, .55); }

/* ---------- Controls ---------- */

.ogs .ogs__controls {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	margin: 14px 0 0;
	padding: 0 calc((100% - var(--ogs-w)) / 2 + var(--ogs-inset));
}
.ogs .ogs__arrow--prev { grid-column: 1; justify-self: start; }
.ogs .ogs__dots        { grid-column: 2; }
.ogs .ogs__arrow--next { grid-column: 3; justify-self: end; }

.ogs .ogs__arrow {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	visibility: visible !important;
	width: 46px !important;
	height: 46px !important;
	min-width: 46px !important;
	min-height: 46px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1.5px solid var(--ogs-ring) !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--ogs-text) !important;
	font-size: 0 !important;
	line-height: 1 !important;
	text-transform: none !important;
	text-shadow: none !important;
	cursor: pointer;
	opacity: 1 !important;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.ogs .ogs__arrow:hover,
.ogs .ogs__arrow:focus-visible {
	border-color: var(--ogs-accent) !important;
	background: rgba(137, 165, 213, .12) !important;
	color: var(--ogs-text) !important;
}
@supports (color: color-mix(in srgb, red, blue)) {
	.ogs .ogs__arrow:hover,
	.ogs .ogs__arrow:focus-visible { background: color-mix(in srgb, var(--ogs-accent) 14%, transparent) !important; }
}
.ogs .ogs__arrow:focus-visible { outline: 2px solid var(--ogs-accent); outline-offset: 3px; }
.ogs .ogs__arrow:active { transform: scale(.94); }
.ogs .ogs__arrow[disabled] { opacity: .35 !important; cursor: default; pointer-events: none; }
.ogs .ogs__arrow svg {
	display: block !important;
	width: 15px !important;
	height: 15px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
	pointer-events: none;
}
.ogs .ogs__arrow svg path { fill: none !important; stroke: currentColor !important; }

.ogs .ogs__dots { display: flex; align-items: center; gap: 0; }
.ogs .ogs__dot {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	display: block !important;
	position: relative;
	width: 37px;
	height: 22px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: 0;
	cursor: pointer;
}
.ogs .ogs__dot::before {
	content: "";
	position: absolute;
	left: 0;
	right: 8px;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: var(--ogs-text);
	opacity: .22;
	transition: background-color .3s ease, opacity .3s ease;
}
.ogs .ogs__dot:hover::before { opacity: .5; }
.ogs .ogs__dot.is-active::before { background: var(--ogs-accent); opacity: 1; }
.ogs .ogs__dot[disabled] { cursor: default; }
.ogs .ogs__dot:focus-visible { outline: 2px solid var(--ogs-accent); outline-offset: 0; border-radius: 3px; }

.ogs--single .ogs__slide { cursor: default; }

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.ogs {
		--ogs-w: var(--ogs-w-m);
		--ogs-gap: var(--ogs-gap-m);
		--ogs-h: var(--ogs-h-m);
		--ogs-wn: var(--ogs-wn-m);
		--ogs-ratio: var(--ogs-ratio-m);
		--ogs-inset: 4px;
	}
	.ogs .ogs__header { margin-bottom: 18px; }
	.ogs .ogs__caption { left: 16px; right: 16px; bottom: 16px; }
	.ogs .ogs__title { font-size: calc(var(--ogs-ts) * .85); }
	.ogs .ogs__sub { font-size: calc(var(--ogs-ss) * .9); }
	.ogs .ogs__arrow { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
	.ogs .ogs__dot { width: 30px; }
	.ogs .ogs__dot::before { right: 6px; }
	.ogs .ogs__controls { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.ogs .ogs__slide,
	.ogs .ogs__caption,
	.ogs .ogs__slide::after { transition-duration: .01ms; transition-delay: 0s; }
	.ogs .ogs__slide.ogs-pop { animation: none; }
}