/* Services Showcase — frontend styles */

.svcshow-wrap {
	--svcshow-navy: #0f1b2d;
	--svcshow-navy-light: #1c2e4a;
	--svcshow-accent: #c9a35c;
	--svcshow-bg: #ffffff;
	--svcshow-text: #0f1b2d;
	--svcshow-muted: #5b6474;
	--svcshow-font: 'DM Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

	font-family: var(--svcshow-font);
	max-width: 100%;
	margin: 2.5rem 0;
}

.svcshow-title {
	font-family: 'Cormorant Garamond', var(--svcshow-font);
	font-weight: 600;
	font-size: 1.75rem;
	letter-spacing: 0.02em;
	color: var(--svcshow-text);
	margin: 0 0 1.25rem;
	text-align: center;
}

.svcshow-scroller-outer {
	position: relative;
	display: flex;
	align-items: center;
}

.svcshow-scroller {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	padding: 0.5rem 0.25rem 1.25rem;
	width: 100%;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--svcshow-navy-light) transparent;
	cursor: grab;
	user-select: none;
}

.svcshow-scroller:active {
	cursor: grabbing;
}

.svcshow-scroller::-webkit-scrollbar {
	height: 6px;
}
.svcshow-scroller::-webkit-scrollbar-thumb {
	background: var(--svcshow-navy-light);
	border-radius: 999px;
	opacity: 0.4;
}
.svcshow-scroller::-webkit-scrollbar-track {
	background: transparent;
}

.svcshow-item {
	flex: 0 0 auto;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.75rem;
	width: 128px;
	text-decoration: none;
	padding: 1.25rem 0.75rem;
	border-radius: 14px;
	background: var(--svcshow-bg);
	border: 1px solid rgba(15, 27, 45, 0.08);
	box-shadow: 0 2px 6px rgba(15, 27, 45, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.svcshow-item:hover,
.svcshow-item:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(15, 27, 45, 0.12);
	border-color: var(--svcshow-accent);
}

.svcshow-icon {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--svcshow-icon-bg, #ffffff);
	border: 1px solid rgba(15, 27, 45, 0.08);
	flex-shrink: 0;
	padding: 6px;
	box-sizing: border-box;
}

.svcshow-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.svcshow-icon-fallback {
	color: var(--svcshow-navy);
	font-family: 'Cormorant Garamond', var(--svcshow-font);
	font-size: 1.4rem;
	font-weight: 600;
	text-transform: uppercase;
}

.svcshow-name {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--svcshow-text);
	text-align: center;
	line-height: 1.3;
}

.svcshow-arrow {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(15, 27, 45, 0.15);
	background: var(--svcshow-bg);
	color: var(--svcshow-navy);
	font-size: 1.4rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	transition: background 0.2s ease, color 0.2s ease;
}

.svcshow-arrow:hover {
	background: var(--svcshow-navy);
	color: #fff;
}

.svcshow-arrow-left {
	margin-right: 0.75rem;
}

.svcshow-arrow-right {
	margin-left: 0.75rem;
}

/* Dark-navy theme variant: add class "svcshow-dark" on the shortcode wrapper via a filter, or wrap in a container with this class */
.svcshow-dark {
	--svcshow-bg: #16233a;
	--svcshow-text: #f5f6f8;
	--svcshow-muted: #aab3c2;
}
.svcshow-dark .svcshow-item {
	border-color: rgba(255, 255, 255, 0.08);
}
.svcshow-dark .svcshow-icon {
	--svcshow-icon-bg: #ffffff;
	border-color: rgba(15, 27, 45, 0.08);
}
.svcshow-dark .svcshow-arrow {
	border-color: rgba(255, 255, 255, 0.15);
	background: transparent;
	color: #f5f6f8;
}

@media (max-width: 480px) {
	.svcshow-arrow {
		display: none;
	}
	.svcshow-item {
		width: 104px;
	}
}