/**
 * Stack Logo Grid — Elementor Widget Styles
 * Prefix: stklg-
 */

/* ═══════════════════════════════════════════
   BASE — Grid & Column System
═══════════════════════════════════════════ */

.stklg-wrap {
	--stklg-cols: 4;
	--stklg-accent: #4f46e5;
	--stklg-line: #e5e7eb;
	display: grid;
	grid-template-columns: repeat(var(--stklg-cols), 1fr);
	gap: 24px;
}

.stklg-cols-2 { --stklg-cols: 2; }
.stklg-cols-3 { --stklg-cols: 3; }
.stklg-cols-4 { --stklg-cols: 4; }
.stklg-cols-5 { --stklg-cols: 5; }
.stklg-cols-6 { --stklg-cols: 6; }

@media (max-width: 1024px) {
	.stklg-tablet-2 { --stklg-cols: 2; }
	.stklg-tablet-3 { --stklg-cols: 3; }
	.stklg-tablet-4 { --stklg-cols: 4; }
}

@media (max-width: 767px) {
	.stklg-mobile-2 { --stklg-cols: 2; }
	.stklg-mobile-3 { --stklg-cols: 3; }
}

/* ═══════════════════════════════════════════
   BASE — Item & Image
═══════════════════════════════════════════ */

.stklg-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 90px;
	padding: 16px;
	position: relative;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	box-sizing: border-box;
}

.stklg-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.stklg-img {
	max-height: calc( 50px * var(--stklg-item-scale, 1) );
	max-width: calc( 70% * var(--stklg-item-scale, 1) );
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

/* Global stacking guarantee. Several variants paint a decorative ::before or
   ::after over the whole tile; the content has to sit above it or the logo
   disappears. Applying this once means no future variant can repeat the bug. */
.stklg-item > .stklg-link,
.stklg-item > .stklg-img,
.stklg-item > .stklg-name,
.stklg-item > .stklg-placeholder {
	position: relative;
	z-index: 1;
}

.stklg-placeholder {
	font-size: 13px;
	font-weight: 700;
	color: #aaa;
	text-align: center;
}

.stklg-name {
	font-size: 12px;
	font-weight: 600;
	color: #666;
	margin-top: 8px;
	text-align: center;
	transition: color 0.2s ease, opacity 0.2s ease;
}

/* ═══════════════════════════════════════════
   STYLE 01 — Grid (clean, no effects)
═══════════════════════════════════════════ */

.stklg-grid .stklg-item {
	background: #fff;
}
.stklg-grid .stklg-item:hover .stklg-img {
	opacity: 0.75;
}

/* ═══════════════════════════════════════════
   STYLE 02 — Caption Header
   Was a grayscale filter, which is now a control that works with all forty
   styles. The wall now opens with a standing caption and a rule above it.
═══════════════════════════════════════════ */

.stklg-grayscale {
	row-gap: 20px;
}
.stklg-grayscale::before {
	content: 'Trusted by';
	grid-column: 1 / -1;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--stklg-line);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #98a2b3;
}
.stklg-grayscale .stklg-item {
	background: #fff;
	min-height: 76px;
}
.stklg-grayscale .stklg-item:hover .stklg-img {
	opacity: 0.75;
}

/* ═══════════════════════════════════════════
   STYLE 03 — Logo Cloud
   Was an opacity fade, which the grayscale and hover controls already cover.
   The logos now flow as a centred cloud at mixed sizes rather than a grid.
═══════════════════════════════════════════ */

.stklg-fade {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 34px;
}
.stklg-fade .stklg-item {
	flex: 0 0 auto;
	min-height: 0;
	padding: 8px;
}
.stklg-fade .stklg-item:nth-child(3n+1) .stklg-img {
	max-height: calc( 64px * var(--stklg-item-scale, 1) );
}
.stklg-fade .stklg-item:nth-child(3n+2) .stklg-img {
	max-height: calc( 40px * var(--stklg-item-scale, 1) );
}
.stklg-fade .stklg-img {
	max-width: none;
}
.stklg-fade .stklg-item:hover .stklg-img {
	opacity: 0.75;
}

/* ═══════════════════════════════════════════
   STYLE 04 — Bordered Box
═══════════════════════════════════════════ */

.stklg-bordered .stklg-item {
	border: 1px solid #e0e0e0;
	background: #fff;
	transition: border-color 0.2s ease;
}
.stklg-bordered .stklg-item:hover {
	border-color: #4f46e5;
}
.stklg-bordered .stklg-img {
	opacity: 0.7;
	transition: opacity 0.3s ease;
}
.stklg-bordered .stklg-item:hover .stklg-img {
	opacity: 1;
}

/* ═══════════════════════════════════════════
   STYLE 05 — Card (shadow + white bg)
═══════════════════════════════════════════ */

.stklg-card .stklg-item {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.07);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.stklg-card .stklg-item:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.13);
	transform: translateY(-4px);
}
.stklg-card .stklg-img {
	opacity: 0.75;
	filter: grayscale(40%);
	transition: opacity 0.3s ease, filter 0.3s ease;
}
.stklg-card .stklg-item:hover .stklg-img {
	opacity: 1;
	filter: grayscale(0%);
}

/* ═══════════════════════════════════════════
   STYLE 06 — Circle Row
   Was a second rounded-chip grid. The logos now sit in outlined circles that
   overlap along one row, the way a partner strip reads in a hero.
═══════════════════════════════════════════ */

.stklg-pill {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 6px 0;
}
.stklg-pill .stklg-item {
	flex: 0 0 auto;
	width: 92px;
	height: 92px;
	padding: 14px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 1px var(--stklg-line), 0 0 0 5px #fff;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.stklg-pill .stklg-item + .stklg-item {
	margin-left: -18px;
}
.stklg-pill {
	row-gap: 16px;
}
.stklg-pill .stklg-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 0 0 1px var(--stklg-accent), 0 0 0 5px #fff, 0 8px 24px -8px rgba(16,24,40,.25);
	z-index: 2;
}
.stklg-pill .stklg-img {
	max-height: calc( 34px * var(--stklg-item-scale, 1) );
	max-width: calc( 74% * var(--stklg-item-scale, 1) );
}

/* ═══════════════════════════════════════════
   STYLE 07 — Circle
═══════════════════════════════════════════ */

.stklg-circle .stklg-item {
	background: #f5f5f5;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	min-height: unset;
	padding: 18px;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}
.stklg-circle .stklg-item:hover {
	background: #fff;
	box-shadow: 0 0 0 3px #4f46e5;
}
.stklg-circle .stklg-img {
	filter: grayscale(80%);
	opacity: 0.6;
	max-width: 55%;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.stklg-circle .stklg-item:hover .stklg-img {
	filter: grayscale(0%);
	opacity: 1;
}

/* ═══════════════════════════════════════════
   STYLE 08 — Hairline Matrix
   Was a bare grid with a filter on it, which is a control now. The cells now
   share hairline edges and read as one continuous matrix.
═══════════════════════════════════════════ */

.stklg-outlined {
	gap: 0;
	border-top: 1px solid var(--stklg-line);
	border-left: 1px solid var(--stklg-line);
}
.stklg-outlined .stklg-item {
	min-height: 108px;
	background: #fff;
	border-right: 1px solid var(--stklg-line);
	border-bottom: 1px solid var(--stklg-line);
}
.stklg-outlined .stklg-item:hover {
	background: #f9fafb;
}

/* ═══════════════════════════════════════════
   STYLE 09 — Feature Cell
   Was one more white card differing only in shadow depth. The first logo now
   occupies a two-by-two feature cell and the rest fill in around it.
═══════════════════════════════════════════ */

.stklg-shadow-lift {
	gap: 12px;
}
.stklg-shadow-lift .stklg-item {
	background: #fff;
	border: 1px solid var(--stklg-line);
	border-radius: 12px;
	min-height: 96px;
}
.stklg-shadow-lift .stklg-item:first-child {
	grid-column: span 2;
	grid-row: span 2;
	background: #f9fafb;
	border-color: transparent;
}
.stklg-shadow-lift .stklg-item:first-child .stklg-img {
	max-height: calc( 92px * var(--stklg-item-scale, 1) );
	max-width: calc( 62% * var(--stklg-item-scale, 1) );
}
.stklg-shadow-lift .stklg-item:hover {
	border-color: var(--stklg-accent);
}

/* ═══════════════════════════════════════════
   STYLE 10 — Baseline Rules
   Was a bare grid with reduced opacity. Every logo now sits on a ruled
   baseline that runs the full width of its cell, like a printed index.
═══════════════════════════════════════════ */

.stklg-minimal {
	gap: 0;
	column-gap: 28px;
}
.stklg-minimal .stklg-item {
	min-height: 92px;
	padding: 18px 4px;
	border-bottom: 1px solid var(--stklg-line);
}
.stklg-minimal .stklg-item:hover {
	border-bottom-color: var(--stklg-accent);
}
.stklg-minimal .stklg-name {
	margin-top: 10px;
}

/* ═══════════════════════════════════════════
   STYLE 11 — Dark Card
═══════════════════════════════════════════ */

.stklg-dark .stklg-item {
	background: #1a1a1a;
	border-radius: 6px;
	transition: background 0.2s ease;
}
.stklg-dark .stklg-item:hover {
	background: #252525;
}
.stklg-dark .stklg-img {
	filter: grayscale(100%) brightness(1.8);
	opacity: 0.5;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.stklg-dark .stklg-item:hover .stklg-img {
	filter: grayscale(0%) brightness(1);
	opacity: 1;
}
.stklg-dark .stklg-name { color: #aaa; }

/* ═══════════════════════════════════════════
   STYLE 12 — Numbered Wall
   Was a third white card, separated only by a gradient wash. Each cell now
   carries its own index in the corner, so the wall reads as a numbered list.
═══════════════════════════════════════════ */

.stklg-gradient {
	counter-reset: stklg-index;
	gap: 14px;
}
.stklg-gradient .stklg-item {
	counter-increment: stklg-index;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 34px 16px 16px;
	min-height: 118px;
	background: #fff;
	border: 1px solid var(--stklg-line);
	border-radius: 10px;
}
.stklg-gradient .stklg-item::before {
	content: counter(stklg-index, decimal-leading-zero);
	position: absolute;
	top: 12px;
	left: 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #cbd5e1;
	z-index: 0;
}
.stklg-gradient .stklg-item:hover::before {
	color: var(--stklg-accent);
}
.stklg-gradient .stklg-img {
	margin-right: auto;
}

/* ═══════════════════════════════════════════
   STYLE 13 — Glassmorphism
═══════════════════════════════════════════ */

.stklg-glass .stklg-item {
	background: rgba(255,255,255,0.2);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: 12px;
	transition: background 0.25s ease, box-shadow 0.25s ease;
}
.stklg-glass .stklg-item:hover {
	background: rgba(255,255,255,0.35);
	box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.stklg-glass .stklg-img {
	filter: grayscale(30%);
	opacity: 0.75;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.stklg-glass .stklg-item:hover .stklg-img {
	filter: grayscale(0%);
	opacity: 1;
}

/* ═══════════════════════════════════════════
   STYLE 14 — Neon Glow
═══════════════════════════════════════════ */

.stklg-neon {
	background: #0a0a0a;
	padding: 20px;
}
.stklg-neon .stklg-item {
	border: 1px solid rgba(108,99,255,0.2);
	border-radius: 6px;
	background: #111;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.stklg-neon .stklg-item:hover {
	border-color: #6c63ff;
	box-shadow: 0 0 16px rgba(108,99,255,0.5), inset 0 0 16px rgba(108,99,255,0.07);
}
.stklg-neon .stklg-img {
	filter: grayscale(100%) brightness(2);
	opacity: 0.4;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.stklg-neon .stklg-item:hover .stklg-img {
	filter: grayscale(0%) brightness(1.1);
	opacity: 1;
}
.stklg-neon .stklg-name { color: #888; }

/* ═══════════════════════════════════════════
   STYLE 15 — Name Beside Logo
   Was an offset "retro" shadow. Each entry is now an editorial row: the mark
   on the left, the client's name beside it, divided by a hairline.
═══════════════════════════════════════════ */

.stklg-retro {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0;
	column-gap: 40px;
}
.stklg-retro .stklg-item {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	padding: 18px 0;
	min-height: 84px;
	border-bottom: 1px solid var(--stklg-line);
	text-align: left;
}
.stklg-retro .stklg-link {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
}
.stklg-retro .stklg-img {
	flex: 0 0 auto;
	max-height: calc( 40px * var(--stklg-item-scale, 1) );
	max-width: calc( 96px * var(--stklg-item-scale, 1) );
}
.stklg-retro .stklg-name {
	margin-top: 0;
	font-size: 14px;
	font-weight: 600;
	color: #344054;
	text-align: left;
}
.stklg-retro .stklg-item:hover .stklg-name {
	color: var(--stklg-accent);
}

/* ═══════════════════════════════════════════
   STYLE 16 — Mixed Heights
   Was a hover tilt on the same white card. The cells now alternate between a
   tall tinted block and a short plain one, giving the wall a rhythm.
═══════════════════════════════════════════ */

.stklg-tilt {
	gap: 12px;
	align-items: stretch;
}
.stklg-tilt .stklg-item {
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--stklg-line);
	min-height: 96px;
}
.stklg-tilt .stklg-item:nth-child(odd) {
	min-height: 148px;
	background: #f9fafb;
	border-color: transparent;
}
.stklg-tilt .stklg-item:nth-child(odd) .stklg-img {
	max-height: calc( 62px * var(--stklg-item-scale, 1) );
}
.stklg-tilt .stklg-item:hover {
	border-color: var(--stklg-accent);
}

/* ═══════════════════════════════════════════
   STYLE 17 — Scroll Rail
   Was a hover zoom, and per-logo scale is a control now. The logos run along
   one rail that scrolls and snaps, with the row edges faded.
═══════════════════════════════════════════ */

.stklg-scale {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	padding: 4px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.stklg-scale::-webkit-scrollbar {
	display: none;
}
.stklg-scale .stklg-item {
	flex: 0 0 auto;
	width: 168px;
	min-height: 96px;
	scroll-snap-align: center;
	background: #fff;
}
.stklg-scale .stklg-item + .stklg-item {
	box-shadow: inset 1px 0 0 var(--stklg-line);
}
.stklg-scale .stklg-item:hover .stklg-img {
	opacity: 0.75;
}

/* ═══════════════════════════════════════════
   STYLE 18 — Magazine (left border accent)
═══════════════════════════════════════════ */

.stklg-magazine .stklg-item {
	background: #fff;
	border-left: 3px solid #e0e0e0;
	padding-left: 20px;
	transition: border-color 0.2s ease;
}
.stklg-magazine .stklg-item:hover {
	border-left-color: #4f46e5;
}
.stklg-magazine .stklg-img {
	filter: grayscale(60%);
	opacity: 0.65;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.stklg-magazine .stklg-item:hover .stklg-img {
	filter: grayscale(0%);
	opacity: 1;
}

/* ═══════════════════════════════════════════
   STYLE 19 — Ticker Scroll (CSS marquee)
═══════════════════════════════════════════ */

.stklg-ticker {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
}

.stklg-ticker-track {
	display: inline-flex;
	align-items: center;
	gap: 48px;
	animation: stklg-ticker-scroll 30s linear infinite;
	white-space: nowrap;
}

.stklg-ticker:hover .stklg-ticker-track {
	animation-play-state: paused;
}

@keyframes stklg-ticker-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.stklg-ticker .stklg-item {
	display: inline-flex;
	flex-shrink: 0;
	background: transparent;
	padding: 12px 0;
	min-height: unset;
	transition: opacity 0.2s ease;
}
.stklg-ticker .stklg-item:hover {
	opacity: 0.8;
}
.stklg-ticker .stklg-img {
	max-height: 40px;
	filter: grayscale(80%);
	opacity: 0.6;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.stklg-ticker .stklg-item:hover .stklg-img {
	filter: grayscale(0%);
	opacity: 1;
}

/* ═══════════════════════════════════════════
   STYLE 20 — Large / Small alternating
═══════════════════════════════════════════ */

.stklg-large-small .stklg-img {
	filter: grayscale(60%);
	opacity: 0.65;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.stklg-large-small .stklg-item:hover .stklg-img {
	filter: grayscale(0%);
	opacity: 1;
}
.stklg-large-small .stklg-item:nth-child(odd) .stklg-img {
	max-height: 60px;
}
.stklg-large-small .stklg-item:nth-child(even) .stklg-img {
	max-height: 34px;
}
.stklg-large-small .stklg-item {
	background: #fff;
}

/* ═══════════════════════════════════════════
   STYLE 21 — Rule List
   Was a random rotation that read as accidental misalignment. The logos now
   stack as one ruled list, mark on the left, name on the right.
═══════════════════════════════════════════ */

.stklg-scattered {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.stklg-scattered .stklg-item {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 72px;
	padding: 14px 4px;
	border-bottom: 1px solid var(--stklg-line);
	transform: none;
}
.stklg-scattered .stklg-item:first-child {
	border-top: 1px solid var(--stklg-line);
}
.stklg-scattered .stklg-link {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.stklg-scattered .stklg-img {
	max-height: calc( 34px * var(--stklg-item-scale, 1) );
	max-width: calc( 130px * var(--stklg-item-scale, 1) );
	margin-right: auto;
}
.stklg-scattered .stklg-name {
	margin-top: 0;
	margin-left: auto;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.stklg-scattered .stklg-item:hover {
	background: #f9fafb;
}

/* ═══════════════════════════════════════════
   STYLE 22 — Overlap Strip
═══════════════════════════════════════════ */

.stklg-overlap {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0;
	flex-wrap: nowrap;
	overflow-x: auto;
}
.stklg-overlap .stklg-item {
	background: #fff;
	border: 2px solid #f0f0f0;
	border-radius: 8px;
	padding: 14px 20px;
	min-height: unset;
	flex-shrink: 0;
	margin-left: -16px;
	transition: transform 0.2s ease, z-index 0s, box-shadow 0.2s ease;
	z-index: 1;
}
.stklg-overlap .stklg-item:first-child {
	margin-left: 0;
}
.stklg-overlap .stklg-item:hover {
	transform: translateY(-4px) scale(1.05);
	z-index: 10;
	box-shadow: 0 6px 20px rgba(0,0,0,0.14);
}
.stklg-overlap .stklg-img {
	filter: grayscale(60%);
	opacity: 0.65;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.stklg-overlap .stklg-item:hover .stklg-img {
	filter: grayscale(0%);
	opacity: 1;
}

/* ═══════════════════════════════════════════
   STYLE 23 — Mono Tint (single hue filter)
═══════════════════════════════════════════ */

.stklg-mono .stklg-item {
	background: #f0efff;
	border-radius: 6px;
	transition: background 0.2s ease;
}
.stklg-mono .stklg-item:hover {
	background: #e5e3ff;
}
.stklg-mono .stklg-img {
	filter: grayscale(100%) sepia(30%) hue-rotate(220deg) saturate(2);
	opacity: 0.6;
	transition: filter 0.35s ease, opacity 0.35s ease;
}
.stklg-mono .stklg-item:hover .stklg-img {
	filter: grayscale(0%);
	opacity: 1;
}

/* ═══════════════════════════════════════════
   STYLE 24 — Spotlight (dark bg)
═══════════════════════════════════════════ */

.stklg-spotlight {
	background: #111;
	padding: 20px;
}
.stklg-spotlight .stklg-item {
	background: #1a1a1a;
	border-radius: 6px;
	position: relative;
	overflow: hidden;
	transition: background 0.2s ease;
}
.stklg-spotlight .stklg-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.07) 0%, transparent 70%);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.stklg-spotlight .stklg-item:hover::before {
	opacity: 1;
}
.stklg-spotlight .stklg-img {
	filter: grayscale(100%) brightness(2);
	opacity: 0.35;
	transition: filter 0.35s ease, opacity 0.35s ease;
}
.stklg-spotlight .stklg-item:hover .stklg-img {
	filter: grayscale(0%) brightness(1.1);
	opacity: 1;
}
.stklg-spotlight .stklg-name { color: #777; }

/* ═══════════════════════════════════════════
   STYLE 25 — Panel Wall
   Was neumorphic, a look that has not aged well. The whole wall now sits in
   one tinted panel with the cells divided by hairlines.
═══════════════════════════════════════════ */

.stklg-neumorphic {
	gap: 1px;
	padding: 1px;
	background: var(--stklg-line);
	border: 1px solid var(--stklg-line);
	border-radius: 16px;
	overflow: hidden;
}
.stklg-neumorphic .stklg-item {
	background: #fbfcfd;
	min-height: 112px;
	box-shadow: none;
}
.stklg-neumorphic .stklg-item:hover {
	background: #fff;
}

/* ═══════════════════════════════════════════
   STYLE 26 — Segmented Bar
   Was a frosted panel that rendered as a plain grid. The logos now share one
   rounded bar split into equal segments.
═══════════════════════════════════════════ */

.stklg-frosted {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	gap: 0;
	border: 1px solid var(--stklg-line);
	border-radius: 999px;
	background: #fff;
	padding: 6px 10px;
	box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -8px rgba(16,24,40,.12);
}
.stklg-frosted::-webkit-scrollbar {
	display: none;
}
.stklg-frosted .stklg-item {
	flex: 1 0 110px;
	min-height: 64px;
	padding: 8px 14px;
}
.stklg-frosted .stklg-item + .stklg-item {
	box-shadow: inset 1px 0 0 var(--stklg-line);
}
.stklg-frosted .stklg-img {
	max-height: calc( 32px * var(--stklg-item-scale, 1) );
}
.stklg-frosted .stklg-item:hover .stklg-img {
	opacity: 0.72;
}

/* ═══════════════════════════════════════════
   STYLE 27 — Contact Sheet
   Was a hard offset frame. The wall is now a dense contact sheet: small marks,
   tight gutters and a hairline frame around the block.
═══════════════════════════════════════════ */

.stklg-bold-frame {
	gap: 6px;
	padding: 10px;
	border: 1px solid var(--stklg-line);
	border-radius: 8px;
	background: #fff;
}
.stklg-bold-frame .stklg-item {
	min-height: 68px;
	padding: 8px;
	background: #f9fafb;
	border-radius: 4px;
}
.stklg-bold-frame .stklg-img {
	max-height: calc( 28px * var(--stklg-item-scale, 1) );
	max-width: calc( 80% * var(--stklg-item-scale, 1) );
}
.stklg-bold-frame .stklg-item:hover {
	background: #eef2ff;
}

/* ═══════════════════════════════════════════
   STYLE 28 — Zigzag Rows (alternating margin)
═══════════════════════════════════════════ */

.stklg-zigzag .stklg-item {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.07);
	transition: transform 0.2s ease;
}
.stklg-zigzag .stklg-item:nth-child(odd) {
	transform: translateY(-10px);
}
.stklg-zigzag .stklg-item:nth-child(even) {
	transform: translateY(10px);
}
.stklg-zigzag .stklg-item:hover {
	transform: translateY(-14px) scale(1.04) !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.13);
}
.stklg-zigzag .stklg-img {
	filter: grayscale(60%);
	opacity: 0.65;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.stklg-zigzag .stklg-item:hover .stklg-img {
	filter: grayscale(0%);
	opacity: 1;
}

/* ═══════════════════════════════════════════
   STYLE 29 — Name Below (always visible)
═══════════════════════════════════════════ */

.stklg-name-below .stklg-item {
	background: #fff;
	border-radius: 8px;
	border: 1px solid #e8e8e8;
	padding: 18px 14px 14px;
	transition: box-shadow 0.2s ease;
}
.stklg-name-below .stklg-item:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.stklg-name-below .stklg-img {
	filter: grayscale(50%);
	opacity: 0.7;
	margin-bottom: 4px;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.stklg-name-below .stklg-item:hover .stklg-img {
	filter: grayscale(0%);
	opacity: 1;
}
.stklg-name-below .stklg-name {
	font-size: 11px;
	color: #999;
	margin-top: 8px;
}
.stklg-name-below .stklg-item:hover .stklg-name {
	color: #555;
}

/* ═══════════════════════════════════════════
   STYLE 30 — Name on Hover
═══════════════════════════════════════════ */

.stklg-name-hover .stklg-item {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 6px rgba(0,0,0,0.06);
	transition: box-shadow 0.2s ease;
}
.stklg-name-hover .stklg-item:hover {
	box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.stklg-name-hover .stklg-img {
	filter: grayscale(60%);
	opacity: 0.65;
	transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.stklg-name-hover .stklg-item:hover .stklg-img {
	filter: grayscale(0%);
	opacity: 1;
	transform: translateY(-6px);
}
.stklg-name-hover .stklg-name {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	font-size: 11px;
	color: #555;
}
.stklg-name-hover .stklg-item:hover .stklg-name {
	opacity: 1;
	transform: translateY(0);
}

/* ═══════════════════════════════════════════
   STYLE 31 — Strip (single row, flex)
═══════════════════════════════════════════ */

.stklg-strip {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
	border-top: 1px solid #e8e8e8;
	border-left: 1px solid #e8e8e8;
}
.stklg-strip .stklg-item {
	flex: 1 1 120px;
	border-right: 1px solid #e8e8e8;
	border-bottom: 1px solid #e8e8e8;
	background: #fff;
	min-height: 80px;
	transition: background 0.2s ease;
}
.stklg-strip .stklg-item:hover {
	background: #fafafa;
}
.stklg-strip .stklg-img {
	filter: grayscale(70%);
	opacity: 0.55;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.stklg-strip .stklg-item:hover .stklg-img {
	filter: grayscale(0%);
	opacity: 1;
}

/* ═══════════════════════════════════════════
   STYLE 32 — Colored Backgrounds
═══════════════════════════════════════════ */

.stklg-colored .stklg-item {
	border-radius: 8px;
	transition: filter 0.2s ease, transform 0.2s ease;
}
.stklg-colored .stklg-item:nth-child(6n+1) { background: #eff6ff; }
.stklg-colored .stklg-item:nth-child(6n+2) { background: #f0fdf4; }
.stklg-colored .stklg-item:nth-child(6n+3) { background: #fef9c3; }
.stklg-colored .stklg-item:nth-child(6n+4) { background: #fdf2f8; }
.stklg-colored .stklg-item:nth-child(6n+5) { background: #fff7ed; }
.stklg-colored .stklg-item:nth-child(6n+6) { background: #f0fdfa; }
.stklg-colored .stklg-item:hover {
	transform: scale(1.04);
	filter: brightness(0.97);
}
.stklg-colored .stklg-img {
	filter: grayscale(20%);
	opacity: 0.8;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.stklg-colored .stklg-item:hover .stklg-img {
	filter: grayscale(0%);
	opacity: 1;
}

/* ═══════════════════════════════════════════
   STYLE 33 — Featured Row
   Was a second divider layout. The first row now runs at feature size on a
   tinted band and the rest of the wall follows underneath at half the weight.
═══════════════════════════════════════════ */

.stklg-divider {
	gap: 10px;
	align-items: stretch;
}
.stklg-divider .stklg-item {
	min-height: 78px;
	background: #fff;
	border-radius: 10px;
}
.stklg-divider .stklg-item:nth-child(-n+4) {
	min-height: 128px;
	background: #f9fafb;
}
.stklg-divider .stklg-item:nth-child(-n+4) .stklg-img {
	max-height: calc( 70px * var(--stklg-item-scale, 1) );
}
.stklg-divider .stklg-item:nth-child(n+5) .stklg-img {
	max-height: calc( 34px * var(--stklg-item-scale, 1) );
	opacity: 0.8;
}
.stklg-divider .stklg-item:hover .stklg-img {
	opacity: 1;
}

/* ═══════════════════════════════════════════
   STYLE 34 — Stacked Label (logo + separator + name)
═══════════════════════════════════════════ */

.stklg-stacked-label .stklg-item {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 20px 14px 14px;
	flex-direction: column;
	gap: 0;
}
.stklg-stacked-label .stklg-item:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.stklg-stacked-label .stklg-img {
	filter: grayscale(50%);
	opacity: 0.7;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.stklg-stacked-label .stklg-item:hover .stklg-img {
	filter: grayscale(0%);
	opacity: 1;
}
.stklg-stacked-label .stklg-name {
	width: 100%;
	text-align: center;
	padding-top: 10px;
	margin-top: 10px;
	border-top: 1px solid #eee;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #aaa;
}
.stklg-stacked-label .stklg-item:hover .stklg-name {
	color: #555;
}

/* ═══════════════════════════════════════════
   STYLE 35 — Cascade
   Was a polaroid prop. Each mark now steps down a little further than the one
   before it, so the row falls in a deliberate diagonal.
═══════════════════════════════════════════ */

.stklg-polaroid {
	align-items: start;
	gap: 16px;
}
.stklg-polaroid .stklg-item {
	background: #fff;
	border: 1px solid var(--stklg-line);
	border-radius: 12px;
	min-height: 92px;
}
.stklg-polaroid .stklg-item:nth-child(4n+2) { margin-top: 18px; }
.stklg-polaroid .stklg-item:nth-child(4n+3) { margin-top: 36px; }
.stklg-polaroid .stklg-item:nth-child(4n+4) { margin-top: 54px; }
.stklg-polaroid .stklg-item:hover {
	border-color: var(--stklg-accent);
}
.stklg-polaroid .stklg-name {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   STYLE 36 — Column Flow
   Was a rotated sticker card. The marks now flow down newspaper columns
   instead of across grid rows, so a long client list stays readable.
═══════════════════════════════════════════ */

.stklg-sticker {
	display: block;
	column-count: var(--stklg-cols);
	column-gap: 28px;
	column-rule: 1px solid var(--stklg-line);
}
.stklg-sticker .stklg-item {
	break-inside: avoid;
	display: block;
	text-align: center;
	min-height: 0;
	padding: 14px 4px;
	transform: none;
}
.stklg-sticker .stklg-img {
	margin: 0 auto;
	max-height: calc( 42px * var(--stklg-item-scale, 1) );
}
.stklg-sticker .stklg-item + .stklg-item {
	border-top: 1px solid var(--stklg-line);
}
.stklg-sticker .stklg-item:hover .stklg-img {
	opacity: 0.72;
}

/* ═══════════════════════════════════════════
   STYLE 37 — Dashed Outline
═══════════════════════════════════════════ */

.stklg-dashed .stklg-item {
	background: #fff;
	border: 2px dashed #e0e0e0;
	border-radius: 12px;
}
.stklg-dashed .stklg-item:hover {
	border-style: solid;
	border-color: #c7c7c7;
	box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.stklg-dashed .stklg-item:hover .stklg-img {
	transform: scale(1.04);
}

/* ═══════════════════════════════════════════
   STYLE 38 — Label Corner
   Was a hover ring on the same white card. Each cell is now a fixed-ratio
   media block with the mark centred and the client's name in the corner.
═══════════════════════════════════════════ */

.stklg-focus {
	gap: 12px;
}
.stklg-focus .stklg-item {
	aspect-ratio: 4 / 3;
	min-height: 92px;
	padding: 16px 14px 36px;
	justify-content: center;
	background: #f9fafb;
	border-radius: 12px;
}
.stklg-focus .stklg-img {
	max-height: calc( 46px * var(--stklg-item-scale, 1) );
}
.stklg-focus .stklg-name {
	position: absolute;
	left: 14px;
	bottom: 12px;
	margin-top: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #98a2b3;
	text-align: left;
	z-index: 1;
}
.stklg-focus .stklg-item:hover {
	background: #eef2ff;
}
.stklg-focus .stklg-item:hover .stklg-name {
	color: var(--stklg-accent);
}

/* ═══════════════════════════════════════════
   STYLE 39 — Checkerboard
═══════════════════════════════════════════ */

.stklg-checker .stklg-item {
	background: #ffffff;
	border-radius: 8px;
}
.stklg-checker .stklg-item:nth-child(odd) {
	background: #fafafa;
}
.stklg-checker .stklg-item:hover {
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.stklg-checker .stklg-img {
	opacity: 0.85;
	filter: grayscale(40%);
}
.stklg-checker .stklg-item:hover .stklg-img {
	opacity: 1;
	filter: grayscale(0%);
}

/* ═══════════════════════════════════════════
   STYLE 40 — Centre Rail
   Was a gradient ring border. A single hairline now runs the width of the row
   and the marks sit on it, each in its own break in the line.
═══════════════════════════════════════════ */

.stklg-gradient-ring {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 18px 0;
}
.stklg-gradient-ring::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: var(--stklg-line);
}
.stklg-gradient-ring::-webkit-scrollbar {
	display: none;
}
.stklg-gradient-ring .stklg-item {
	flex: 0 0 auto;
	min-height: 0;
	margin: 0 14px;
	padding: 10px 18px;
	background: #fff;
	z-index: 1;
}
.stklg-gradient-ring .stklg-img {
	max-height: calc( 38px * var(--stklg-item-scale, 1) );
	max-width: none;
}
.stklg-gradient-ring .stklg-item:hover .stklg-img {
	opacity: 0.72;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */

/* Style 22 overflowed its container above 767px because the strip is a
   nowrap flex row with a horizontal scroll and no scroll affordance. It now
   scrolls cleanly at every width and hides the scrollbar chrome. */
.stklg-overlap {
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	padding: 10px 16px;
	margin: -10px 0;
	max-width: 100%;
}
.stklg-overlap::-webkit-scrollbar {
	display: none;
}

@media (max-width: 1024px) {
	/* Style 31 had no rules between 768px and the desktop breakpoint, so it
	   produced ragged rows of two and three. */
	.stklg-strip .stklg-item {
		flex: 1 1 calc(33.333% - 1px);
	}
	.stklg-sticker {
		column-count: 2;
	}
	.stklg-shadow-lift .stklg-item:first-child .stklg-img {
		max-height: calc( 64px * var(--stklg-item-scale, 1) );
	}
}

@media (max-width: 767px) {
	.stklg-overlap {
		flex-wrap: wrap;
		gap: 12px;
		overflow-x: visible;
		justify-content: center;
	}
	.stklg-overlap .stklg-item {
		margin-left: 0;
	}

	.stklg-strip .stklg-item {
		flex: 1 1 calc(50% - 1px);
	}
	.stklg-sticker {
		column-count: 1;
	}
	.stklg-polaroid .stklg-item:nth-child(4n+2),
	.stklg-polaroid .stklg-item:nth-child(4n+3),
	.stklg-polaroid .stklg-item:nth-child(4n+4) {
		margin-top: 0;
	}
	.stklg-shadow-lift .stklg-item:first-child {
		grid-column: span 2;
		grid-row: auto;
	}
	.stklg-retro .stklg-item,
	.stklg-scattered .stklg-item {
		flex-wrap: wrap;
	}

	.stklg-ticker-track {
		animation-duration: 20s;
	}

	.stklg-zigzag .stklg-item:nth-child(odd),
	.stklg-zigzag .stklg-item:nth-child(even) {
		transform: none;
	}
}


/* ═══════════════════════════════════════════
   GRAYSCALE CONTROL
   Grayscale used to be baked into five separate variants. It is now a control
   that works with any of the forty, which retires the duplicates and gives
   buyers more, not less.
═══════════════════════════════════════════ */

.stklg-gs-none .stklg-img { filter: none; }
.stklg-gs-always .stklg-img { filter: grayscale(100%); }
.stklg-gs-always .stklg-item:hover .stklg-img { filter: grayscale(100%); }
.stklg-gs-hover .stklg-img { filter: grayscale(100%); opacity: .72; }
.stklg-gs-hover .stklg-item:hover .stklg-img,
.stklg-gs-hover .stklg-item:focus-within .stklg-img { filter: grayscale(0%); opacity: 1; }
.stklg-gs-soft .stklg-img { filter: grayscale(55%); opacity: .85; }
.stklg-gs-soft .stklg-item:hover .stklg-img,
.stklg-gs-soft .stklg-item:focus-within .stklg-img { filter: grayscale(0%); opacity: 1; }

/* ═══════════════════════════════════════════
   REDUCED MOTION
   The ticker animates for ever. WCAG 2.2.2 requires a way to stop motion that
   runs for more than five seconds, and there was none — on a widget whose
   whole point is movement.
═══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.stklg-wrap *,
	.stklg-wrap *::before,
	.stklg-wrap *::after {
		animation: none !important;
		transition: none !important;
	}
	/* With the animation off, the duplicated half of the ticker is dead weight
	   and the row becomes a plain scrollable strip. */
	.stklg-ticker-track {
		animation: none !important;
		transform: none !important;
		flex-wrap: wrap;
		justify-content: center;
	}
	.stklg-ticker-track .stklg-item[aria-hidden="true"] {
		display: none;
	}
}