/*!
 * Logo Grid DX Showcase 1.0.0 — TreyBraid
 * Joomla 5 / 6 site module
 */
.lgdx {
	--lgdx-w: 180px;
	--lgdx-h: 90px;
	--lgdx-gap: 24px;
	--lgdx-pad: 12px;
	--lgdx-radius: 8px;
	--lgdx-scale: 1;
	--lgdx-dur: 250ms;
	--lgdx-ease: cubic-bezier(.2, .8, .2, 1);
	--lgdx-cell-w: calc(var(--lgdx-w) + (var(--lgdx-pad) * 2) + (var(--lgdx-border-w, 0px) * 2));
	--lgdx-cell-h: calc(var(--lgdx-h) + (var(--lgdx-pad) * 2) + (var(--lgdx-border-w, 0px) * 2));
	--lgdx-fe-y: calc(var(--lgdx-h) * (var(--lgdx-scale) - 1) * .5 + 4px);
	--lgdx-fe-x: calc(var(--lgdx-w) * (var(--lgdx-scale) - 1) * .5);
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	background: var(--lgdx-module-bg, transparent);
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

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

/* ---------- Viewport (scroll area) ---------- */
.lgdx__viewport {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	container-type: inline-size;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	/* room for magnification so scaled logos are not clipped */
	padding-block: var(--lgdx-fe-y);
	outline: none;
}

.lgdx__viewport:focus-visible {
	box-shadow: 0 0 0 2px currentColor;
	border-radius: 4px;
}

.lgdx--origin-bottom { --lgdx-fe-y: 4px; }
.lgdx--origin-bottom .lgdx__viewport { padding-top: calc(var(--lgdx-h) * (var(--lgdx-scale) - 1) + 4px); padding-bottom: 4px; }
.lgdx--origin-top .lgdx__viewport { padding-bottom: calc(var(--lgdx-h) * (var(--lgdx-scale) - 1) + 4px); padding-top: 4px; }

.lgdx--noscrollbar .lgdx__viewport { scrollbar-width: none; -ms-overflow-style: none; }
.lgdx--noscrollbar .lgdx__viewport::-webkit-scrollbar { display: none; width: 0; height: 0; }

.lgdx--fade .lgdx__viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.lgdx.is-dragging .lgdx__viewport { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.lgdx.is-auto .lgdx__viewport { scroll-snap-type: none; }

/* ---------- Track ---------- */
.lgdx__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--lgdx-effective-gap, var(--lgdx-gap));
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0 var(--lgdx-fe-x);
	list-style: none;
}

.lgdx__item {
	flex: 0 1 var(--lgdx-cell-w);
	width: var(--lgdx-cell-w);
	min-width: 0;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
	position: relative;
	z-index: 1;
}

.lgdx__item::before,
.lgdx__item::marker { content: none; }

/* horizontal: stretch cells to fill the row when they fit */
.lgdx--fill .lgdx__item { flex: 1 1 var(--lgdx-cell-w); width: auto; }

/* Desktop horizontal rows always stay on one line. Items may shrink below the
   configured logo width when necessary, but never wrap or force page overflow. */
.lgdx--horizontal .lgdx__viewport { overflow-x: hidden; }
.lgdx--horizontal .lgdx__track { justify-content: center; }

/* ---------- Grid layout ---------- */
.lgdx--grid .lgdx__viewport { overflow: visible; }
.lgdx--grid .lgdx__track {
	display: grid;
	width: 100%;
	min-width: 0;
	grid-template-columns: repeat(var(--lgdx-cols, 4), minmax(0, 1fr));
	padding: 0;
}
.lgdx--grid.lgdx--grid-auto .lgdx__track { grid-template-columns: repeat(auto-fill, minmax(min(var(--lgdx-cell-w), 100%), 1fr)); }
.lgdx--grid .lgdx__item { width: auto; flex: none; }
.lgdx--grid .lgdx__arrow { display: none; }

/* ---------- Cell ---------- */
.lgdx__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	height: 100%;
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
a.lgdx__link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: var(--lgdx-radius); }

.lgdx__logo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--lgdx-cell-h);
	padding: var(--lgdx-pad);
	background: transparent;
	border: var(--lgdx-border-w, 0) solid var(--lgdx-border-c, transparent);
	border-radius: var(--lgdx-radius);
	overflow: hidden;
	transform: scale(var(--lgdx-s, 1));
	transform-origin: 50% 50%;
	transition: transform var(--lgdx-dur) var(--lgdx-ease), box-shadow var(--lgdx-dur) ease;
	will-change: transform;
}

.lgdx--origin-bottom .lgdx__logo { transform-origin: 50% 100%; }
.lgdx--origin-top .lgdx__logo { transform-origin: 50% 0; }

.lgdx__img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(100%, var(--lgdx-w));
	max-height: var(--lgdx-h);
	object-fit: var(--lgdx-fit, contain);
	aspect-ratio: auto;
	flex: 0 1 auto;
	opacity: var(--lgdx-alpha-idle, 1);
	transition: opacity var(--lgdx-dur) ease, filter var(--lgdx-dur) ease;
	user-select: none;
	-webkit-user-drag: none;
}

/* ---------- Alpha (opacity) on hover ---------- */
.lgdx--alpha-self .lgdx__item:hover .lgdx__img,
.lgdx--alpha-self .lgdx__link:focus-visible .lgdx__img { opacity: var(--lgdx-alpha-hover); }

.lgdx--alpha-siblings .lgdx__track:hover .lgdx__img { opacity: var(--lgdx-alpha-hover); }
.lgdx--alpha-siblings .lgdx__track:hover .lgdx__item:hover .lgdx__img { opacity: 1; }

/* ---------- Grayscale ---------- */
.lgdx--gray-hover .lgdx__img { filter: grayscale(1); }
.lgdx--gray-hover .lgdx__item:hover .lgdx__img { filter: none; }
.lgdx--gray-always .lgdx__img { filter: grayscale(1); }

/* ---------- Fisheye ---------- */
.lgdx--fe .lgdx__item:hover { z-index: 5; }
.lgdx--fe-magnify .lgdx__item:hover .lgdx__logo,
.lgdx--fe-magnify .lgdx__link:focus-visible .lgdx__logo { --lgdx-s: var(--lgdx-scale); }
/* dock: JS drives --lgdx-s per item; keep it snappy while the pointer moves */
.lgdx--fe-dock.is-docking .lgdx__logo { transition-duration: 90ms; }
.lgdx--fe-lens .lgdx__item.is-lens .lgdx__logo { overflow: visible; }

/* ---------- Titles ---------- */
.lgdx__title {
	display: block;
	max-width: 100%;
	font-size: var(--lgdx-title-size, 14px);
	font-weight: var(--lgdx-title-weight, 600);
	letter-spacing: var(--lgdx-title-ls, 0);
	text-transform: var(--lgdx-title-tt, none);
	line-height: 1.25;
	color: var(--lgdx-title-color, inherit);
	text-align: center;
	overflow-wrap: anywhere;
	transition: color var(--lgdx-dur) ease, opacity var(--lgdx-dur) ease, transform var(--lgdx-dur) var(--lgdx-ease);
}
/* keep titles above magnified logos */
.lgdx--tpos-below .lgdx__title,
.lgdx--tpos-above .lgdx__title { position: relative; z-index: 2; }
.lgdx--fe.lgdx--tpos-below .lgdx__title { margin-top: calc(var(--lgdx-h) * (var(--lgdx-scale) - 1) * .5); }
.lgdx--fe.lgdx--tpos-above .lgdx__title { margin-bottom: calc(var(--lgdx-h) * (var(--lgdx-scale) - 1) * .5); }

.lgdx__item:hover .lgdx__title { color: var(--lgdx-title-hcolor, var(--lgdx-title-color)); }

.lgdx--tpos-overlay-bottom .lgdx__title,
.lgdx--tpos-overlay-center .lgdx__title {
	position: absolute;
	left: 0;
	right: 0;
	padding: 6px 10px;
	background: var(--lgdx-ov-bg);
	color: var(--lgdx-ov-color);
	pointer-events: none;
}
.lgdx--tpos-overlay-bottom .lgdx__title { bottom: 0; }
.lgdx--tpos-overlay-center .lgdx__title { top: 50%; transform: translateY(-50%); }
.lgdx--tpos-overlay-bottom .lgdx__item:hover .lgdx__title,
.lgdx--tpos-overlay-center .lgdx__item:hover .lgdx__title { color: var(--lgdx-ov-color); }

/* hover-only titles */
.lgdx--title-hover .lgdx__title { opacity: 0; }
.lgdx--title-hover.lgdx--tpos-below .lgdx__title { transform: translateY(-4px); }
.lgdx--title-hover.lgdx--tpos-above .lgdx__title { transform: translateY(4px); }
.lgdx--title-hover.lgdx--tpos-overlay-bottom .lgdx__title { transform: translateY(100%); }
.lgdx--title-hover .lgdx__item:hover .lgdx__title,
.lgdx--title-hover .lgdx__link:focus-visible .lgdx__title { opacity: 1; transform: none; }
.lgdx--title-hover.lgdx--tpos-overlay-center .lgdx__item:hover .lgdx__title,
.lgdx--title-hover.lgdx--tpos-overlay-center .lgdx__link:focus-visible .lgdx__title { transform: translateY(-50%); }

/* ---------- Arrows ---------- */
.lgdx__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--lgdx-arrow-color) 25%, transparent);
	border-radius: 50%;
	background: transparent;
	color: var(--lgdx-arrow-color);
	cursor: pointer;
	transition: opacity .2s ease, background-color .2s ease;
}
.lgdx__arrow:hover { background: color-mix(in srgb, var(--lgdx-arrow-color) 10%, transparent); }
.lgdx__arrow:focus-visible { outline: 2px solid var(--lgdx-arrow-color); outline-offset: 2px; }
.lgdx__arrow[disabled] { opacity: .3; cursor: default; }
.lgdx.is-static .lgdx__arrow { visibility: hidden; }

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
	.lgdx__logo,
	.lgdx__img,
	.lgdx__title { transition: none !important; }
	.lgdx--fe .lgdx__logo { --lgdx-s: 1 !important; }
}

/* Touch devices: no hover-driven magnification */
@media (hover: none) {
	.lgdx--fe .lgdx__logo { --lgdx-s: 1 !important; }
	.lgdx--title-hover .lgdx__item:focus-within .lgdx__title { opacity: 1; transform: none; }
}

/* Desktop auto-fit is intentionally disabled by the module's generated mobile
   media rule, which restores horizontal scrolling / wrapping at the configured
   mobile breakpoint. */