/*!
 * DX Image Slideshow 2.0.0 — TreyBraid
 * Joomla 5 / 6 site module
 */

.dxis {
	--dxis-ratio: var(--dxis-ratio-d, 21 / 9);
	--dxis-peek: var(--dxis-peek-d, 4%);
	--dxis-edge: var(--dxis-edge-d, calc(4% + 12px));
	--dxis-gap: 12px;
	--dxis-side-scale: .9;
	--dxis-side-opacity: 1;
	--dxis-radius: 0px;
	--dxis-fit: cover;
	--dxis-speed: 800ms;
	--dxis-ease: cubic-bezier(.22, .8, .24, 1);
	position: relative;
	width: 100%;
	max-width: var(--dxis-max, none);
	margin-inline: auto;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

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

.dxis.dxis--compact {
	--dxis-ratio: var(--dxis-ratio-m, var(--dxis-ratio-d));
	--dxis-peek: var(--dxis-peek-m, var(--dxis-peek-d));
	--dxis-edge: var(--dxis-edge-m, var(--dxis-edge-d));
}

.dxis.dxis--bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ---------- Viewport ---------- */

.dxis-viewport {
	position: relative;
	overflow: hidden;
	background: var(--dxis-bg, transparent);
	container-type: inline-size;
	outline: none;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.dxis-viewport:focus-visible {
	box-shadow: inset 0 0 0 3px rgba(0, 120, 255, .65);
}

.dxis-sizer {
	margin: 0 var(--dxis-edge);
	aspect-ratio: var(--dxis-ratio);
	pointer-events: none;
}

.dxis-stage {
	position: absolute;
	inset: 0;
}

/* ---------- Slides (shared) ---------- */

.dxis-slide {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--dxis-edge);
	width: calc(100% - (2 * var(--dxis-edge)));
	overflow: hidden;
	border-radius: var(--dxis-radius);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform, opacity;
}

.dxis-link {
	display: block;
	position: absolute;
	inset: 0;
	color: inherit;
	text-decoration: none;
}

.dxis-img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: var(--dxis-fit);
	object-position: center;
	-webkit-user-drag: none;
	pointer-events: none;
}

/* ---------- Mode: slide (carousel) ---------- */

.dxis--slide .dxis-slide {
	--pos: 0;
	--sc: 1;
	opacity: 0;
	transform: translateX(calc(var(--pos) * (100% + var(--dxis-gap)))) translateX(var(--dxis-drag, 0px)) scale(var(--sc));
	transition:
		transform var(--dxis-speed) var(--dxis-ease),
		opacity var(--dxis-speed) var(--dxis-ease);
}

.dxis--slide .dxis-slide.is-active {
	opacity: 1;
	z-index: 3;
	cursor: default;
}

.dxis--slide .dxis-slide.is-prev,
.dxis--slide .dxis-slide.is-next {
	--sc: var(--dxis-side-scale);
	opacity: var(--dxis-side-opacity);
	z-index: 2;
	cursor: pointer;
}

.dxis--slide .dxis-slide.is-hidden {
	--sc: var(--dxis-side-scale);
	z-index: 1;
}

.dxis--slide .dxis-slide.is-left { transform-origin: 100% 50%; }
.dxis--slide .dxis-slide.is-right { transform-origin: 0% 50%; }

.dxis--slide .dxis-slide.no-anim,
.dxis.is-dragging .dxis-slide {
	transition: none !important;
}

.dxis-slide.no-anim,
.dxis-slide.no-anim .dxis-img,
.dxis-slide.no-anim .dxis-caption {
	transition: none !important;
}

/* Before the script runs, show only the first slide. */
.dxis:not(.is-ready) .dxis-slide:not(:first-child) {
	visibility: hidden;
}

/* ---------- Mode: stack (fade / zoom / ken burns / blur) ---------- */

.dxis--stack .dxis-slide {
	opacity: 0;
	z-index: 0;
	transition: opacity var(--dxis-speed) var(--dxis-ease);
}

.dxis--stack .dxis-slide.is-leaving {
	opacity: 1;
	z-index: 1;
	transition: none;
}

.dxis--stack .dxis-slide.is-active {
	opacity: 1;
	z-index: 2;
}

.dxis--stack .dxis-img {
	transition:
		transform var(--dxis-speed) var(--dxis-ease),
		filter var(--dxis-speed) var(--dxis-ease);
}

.dxis-fx-zoom-in .dxis-slide:not(.is-active):not(.is-leaving) .dxis-img { transform: scale(.82); }
.dxis-fx-zoom-out .dxis-slide:not(.is-active):not(.is-leaving) .dxis-img { transform: scale(1.22); }
.dxis-fx-blur .dxis-slide:not(.is-active):not(.is-leaving) .dxis-img { filter: blur(16px); transform: scale(1.04); }

.dxis-fx-kenburns .dxis-slide.is-active .dxis-img,
.dxis-fx-kenburns .dxis-slide.is-leaving .dxis-img {
	animation: dxis-kenburns var(--dxis-kb, 6000ms) linear both;
}

.dxis-fx-kenburns .dxis-slide[data-kb="0"] .dxis-img { transform-origin: 30% 40%; }
.dxis-fx-kenburns .dxis-slide[data-kb="1"] .dxis-img { transform-origin: 70% 60%; }
.dxis-fx-kenburns .dxis-slide[data-kb="2"] .dxis-img { transform-origin: 65% 30%; }
.dxis-fx-kenburns .dxis-slide[data-kb="3"] .dxis-img { transform-origin: 35% 70%; }

@keyframes dxis-kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.14); }
}

/* Side peeks for stack mode (built by the script). */
.dxis-ghost {
	position: absolute;
	top: calc((1 - var(--dxis-side-scale)) * 50%);
	bottom: calc((1 - var(--dxis-side-scale)) * 50%);
	width: var(--dxis-peek);
	overflow: hidden;
	z-index: 1;
	cursor: pointer;
	opacity: var(--dxis-side-opacity);
	border-radius: var(--dxis-radius);
	display: none;
}

.dxis--stack .dxis-ghost { display: block; }
.dxis-ghost--prev { left: 0; }
.dxis-ghost--next { right: 0; }

.dxis-ghost__item {
	position: absolute;
	top: 0;
	bottom: 0;
	width: calc((100cqw - (2 * var(--dxis-edge))) * var(--dxis-side-scale));
	background-repeat: no-repeat;
	background-position: center;
	background-size: var(--dxis-fit);
	opacity: 0;
	transition: opacity var(--dxis-speed) var(--dxis-ease);
}

.dxis-ghost--prev .dxis-ghost__item { right: 0; }
.dxis-ghost--next .dxis-ghost__item { left: 0; }
.dxis-ghost__item.is-active { opacity: 1; }

.dxis--single .dxis-ghost { display: none !important; }

/* ---------- Captions ---------- */

.dxis-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: clamp(28px, 6%, 64px) clamp(14px, 3%, 32px) clamp(12px, 2.4%, 24px);
	background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
	color: #fff;
	text-align: left;
	pointer-events: none;
	transition: opacity var(--dxis-speed) var(--dxis-ease), transform var(--dxis-speed) var(--dxis-ease);
}

.dxis-cap-center .dxis-caption { text-align: center; }
.dxis-cap-right .dxis-caption { text-align: right; }

.dxis-caption__text {
	display: inline-block;
	max-width: 60ch;
	font-size: clamp(.95rem, 1.6cqw, 1.5rem);
	font-weight: 700;
	line-height: 1.25;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.dxis-slide:not(.is-active) .dxis-caption {
	opacity: 0;
	transform: translateY(8px);
}

/* ---------- Centered hero heading + comments (1.5.0) ---------- */

.dxis-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(12px, 4%, 44px);
    pointer-events: none; /* Preserve image links, swiping and navigation. */
    overflow: hidden;
}

.dxis-hero-box {
    width: fit-content;
    max-width: min(100%, 920px);
    max-height: 100%;
    overflow: hidden;
    background: var(--dxis-hero-box-bg, rgba(0, 0, 0, .55));
    border-radius: 8px;
    padding: clamp(12px, 2.5cqw, 36px) clamp(14px, 4cqw, 56px);
    text-align: center;
    overflow-wrap: anywhere;
}

.dxis-hero-title {
    color: var(--dxis-hero-color, #fff);
    font-family: inherit;
    font-size: clamp(20px, 3.6cqw, 58px);
    font-weight: 800;
    line-height: 1.16;
    text-transform: none;
    letter-spacing: normal;
    margin: 0;
}

.dxis-hero-comments {
    color: var(--dxis-comments-color, #fff);
    font-family: inherit;
    font-size: var(--dxis-comments-size, 16px);
    font-weight: var(--dxis-comments-weight, 400);
    line-height: 1.5;
    white-space: pre-line;
    margin: 0;
}

.dxis-hero-title + .dxis-hero-comments {
    margin-top: clamp(6px, 1.5cqw, 18px);
}

/* Keep central text within smaller carousel slides, including mobile ratios. */
@container (max-width: 520px) {
    .dxis-hero-overlay { padding: 10px; }
    .dxis-hero-box { padding: 10px 14px; }
    .dxis-hero-title { font-size: clamp(18px, 5cqw, 30px); }
    .dxis-hero-comments { line-height: 1.35; }
}

/* ---------- Arrows ---------- */

.dxis-arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: grid;
	place-items: center;
	width: var(--dxis-arrow-size, 48px);
	height: var(--dxis-arrow-size, 48px);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dxis-arrow-bg, rgba(0, 0, 0, .45));
	color: var(--dxis-arrow-color, #fff);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity .25s ease, transform .25s ease, background-color .25s ease;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.dxis-arrow svg {
	width: 46%;
	height: 46%;
	pointer-events: none;
}

.dxis-arrow--prev { left: calc(var(--dxis-edge) + 14px); }
.dxis-arrow--next { right: calc(var(--dxis-edge) + 14px); }

.dxis-arrow:hover { transform: translateY(-50%) scale(1.08); }
.dxis-arrow:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.dxis-arrows-hover .dxis-arrow { opacity: 0; }
.dxis-arrows-hover .dxis-arrow--prev { transform: translate(-8px, -50%); }
.dxis-arrows-hover .dxis-arrow--next { transform: translate(8px, -50%); }

.dxis-arrows-hover:hover .dxis-arrow,
.dxis-arrows-hover:focus-within .dxis-arrow {
	opacity: 1;
	transform: translateY(-50%);
}

@media (hover: none) {
	.dxis-arrows-hover .dxis-arrow {
		opacity: 1;
		transform: translateY(-50%);
	}
}

.dxis--compact .dxis-arrow {
	width: min(var(--dxis-arrow-size, 48px), 38px);
	height: min(var(--dxis-arrow-size, 48px), 38px);
}

.dxis--compact .dxis-arrow--prev { left: calc(var(--dxis-edge) + 8px); }
.dxis--compact .dxis-arrow--next { right: calc(var(--dxis-edge) + 8px); }

/* ---------- Dots ---------- */

.dxis-dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 14px var(--dxis-edge) 0;
}

.dxis-dots-overlay .dxis-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	z-index: 5;
	padding-top: 0;
	pointer-events: none;
}

.dxis-dot {
	width: 10px;
	height: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--dxis-dot, #c4c4c4);
	cursor: pointer;
	pointer-events: auto;
	transition: width .3s ease, background-color .3s ease;
}

.dxis-dot.is-active {
	width: 28px;
	background: var(--dxis-dot-active, #1f1f1f);
}

.dxis-dot:focus-visible { outline: 2px solid var(--dxis-dot-active, #1f1f1f); outline-offset: 3px; }

.dxis-dots-overlay .dxis-dot { box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }

/* Many images: keep dots compact. */
.dxis-dots.is-many .dxis-dot { width: 7px; height: 7px; }
.dxis-dots.is-many .dxis-dot.is-active { width: 18px; }

/* ---------- Responsive portrait carousel (2.0.0) ---------- */

/* Let the mobile carousel use the width of its module position.  When the
   portrait frame is very tall, --dxis-ratio-m controls the *stage height*,
   while the current and adjacent images retain desktop-style slide mechanics. */
.dxis.dxis--compact {
    min-width: 0;
}
.dxis.dxis--compact .dxis-sizer,
.dxis.dxis--compact .dxis-stage,
.dxis.dxis--compact .dxis-slide {
    min-width: 0;
}
.dxis.dxis--compact .dxis-img {
    min-width: 0;
    max-height: 100%;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.dxis .dxis-img { animation: none !important; transform: none !important; filter: none !important; }
	.dxis--slide .dxis-slide { transition-duration: 1ms !important; }
	.dxis--stack .dxis-slide { transition-duration: 200ms !important; }
}