/**
 * Virrat Client Showcase - Premium 3D Clean Card Wall Styles
 */

/* Root Section Variables */
.virrat-client-wall-section {
	display: block;
	width: 100%;
	min-height: 220px;
	padding: var(--padding-top, 40px) 24px var(--padding-bottom, 40px) 24px;
	box-sizing: border-box;
	--wall-bg: #fafafa;
	--wall-text: #18181b;
	--wall-subtext: #71717a;
	--wall-line: rgba(0, 0, 0, 0.1);
	--card-bg: #ffffff;
	--card-border: rgba(0, 0, 0, 0.08);
	--card-shadow-on: 0 2px 10px rgba(0,0,0,0.06);
	--card-shadow: var(--card-shadow-active, var(--card-shadow-on));
	--card-shadow-hover: 0 12px 24px -6px rgba(0, 0, 0, 0.12), 0 4px 8px -4px rgba(0, 0, 0, 0.06);
	background-color: var(--wall-bg);
	color: var(--wall-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark Mode Overrides */
.virrat-client-wall-section.virrat-dark,
@media (prefers-color-scheme: dark) {
	.virrat-client-wall-section:not(.virrat-light) {
		--wall-bg: #0a0a0a;
		--wall-text: #ffffff;
		--wall-subtext: rgba(255, 255, 255, 0.45);
		--wall-line: rgba(255, 255, 255, 0.1);
		--card-bg: #18181b;
		--card-border: rgba(255, 255, 255, 0.1);
		--card-shadow-on: 0 2px 10px rgba(0, 0, 0, 0.3);
		--card-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.5);
	}
}

/* Responsive Header */
.virrat-client-wall-section .virrat-wall-header {
	max-width: 1024px;
	margin: 0 auto;
}

.virrat-client-wall-section .virrat-title-row {
	display: flex;
	align-items: center;
	gap: 16px;
}

.virrat-client-wall-section .virrat-title-row.align-center {
	justify-content: center;
}

.virrat-client-wall-section .virrat-title-row.align-right {
	justify-content: flex-end;
}

.virrat-client-wall-section .virrat-wall-title {
	font-size: 1.125rem; /* 18px */
	font-weight: 600;
	letter-spacing: -0.025em;
	white-space: nowrap;
	margin: 0;
	color: inherit;
}

.virrat-client-wall-section .virrat-title-line {
	height: 1px;
	flex: 1;
	background-color: var(--wall-line);
}

.virrat-client-wall-section .virrat-wall-subtitle {
	margin-top: 8px;
	margin-bottom: 0;
	font-size: 0.875rem; /* 14px */
	color: var(--wall-subtext);
}

/* 3D Viewport & Plane */
.virrat-client-wall-section .virrat-wall-viewport {
	position: relative;
	max-width: 1152px;
	margin: 32px auto 0 auto;
	overflow: hidden;
	min-height: 200px;
}

.virrat-client-wall-section .virrat-wall-plane {
	height: 100%;
	transform-style: preserve-3d;
	will-change: transform;
}

.virrat-client-wall-section .virrat-wall-motion-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--gap-v, 14px);
	will-change: transform;
}

/* Grid Layout */
.virrat-client-wall-section .virrat-wall-grid {
	display: grid;
	width: 100%;
	column-gap: var(--gap-h, 14px);
	row-gap: var(--gap-v, 14px);
	box-sizing: border-box;
}

/* Premium Card Tile Element */
.virrat-client-wall-section .virrat-tile {
	position: relative;
	display: block;
	width: var(--card-width, 100%);
	height: var(--card-height, 100%);
	aspect-ratio: 1 / 1;
	outline: none;
	text-decoration: none;
	cursor: pointer;
	border: none;
	padding: 0;
	margin: 0;
	background: transparent;
}

.virrat-client-wall-section .virrat-tile-inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	box-sizing: border-box;
	background-color: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--card-radius, 8px);
	box-shadow: var(--card-shadow);
	transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 400ms ease, z-index 400ms ease, border-color 400ms ease;
}

.virrat-client-wall-section .virrat-tile:hover .virrat-tile-inner,
.virrat-client-wall-section .virrat-tile:focus-visible .virrat-tile-inner {
	z-index: 20;
	transform: scale(var(--hover-scale, 1.08));
	box-shadow: var(--card-shadow-hover);
	border-color: rgba(0, 0, 0, 0.15);
}

.virrat-client-wall-section.virrat-dark .virrat-tile:hover .virrat-tile-inner,
.virrat-client-wall-section.virrat-dark .virrat-tile:focus-visible .virrat-tile-inner {
	border-color: rgba(255, 255, 255, 0.25);
}

/* Logo Image Inside Card */
.virrat-client-wall-section .virrat-tile img {
	max-width: var(--logo-width, 80%);
	max-height: var(--logo-height, 80%);
	width: auto;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
	object-fit: var(--object-fit, contain);
	filter: var(--grayscale-filter, grayscale(100%));
	opacity: var(--logo-opacity, 0.65);
	transition: filter 400ms ease, opacity 400ms ease, transform 400ms ease;
}

/* Hover Behavior: Full Color Removal of Grayscale Filter */
.virrat-client-wall-section .virrat-tile:hover img,
.virrat-client-wall-section .virrat-tile:focus-visible img {
	filter: grayscale(0%) brightness(1);
	opacity: 1;
}

/* Mask Overlay Gradient */
.virrat-client-wall-section[data-edge-fade="true"] .virrat-wall-mask {
	pointer-events: none;
	position: absolute;
	inset: 0;
	background: 
		linear-gradient(to bottom, var(--wall-bg) 0%, transparent var(--fade-v, 80px), transparent calc(100% - var(--fade-v, 80px)), var(--wall-bg) 100%),
		linear-gradient(to right, var(--wall-bg) 0%, transparent var(--fade-h, 120px), transparent calc(100% - var(--fade-h, 120px)), var(--wall-bg) 100%);
}

/* Tile Overlay (Title & Subtitle) */
.virrat-client-wall-section .virrat-tile-overlay {
	position: absolute;
	inset: auto 0 0 0;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
	padding: 24px 12px 12px 12px;
	border-radius: 0 0 var(--card-radius, 8px) var(--card-radius, 8px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 300ms ease, transform 300ms ease;
	pointer-events: none;
}

.virrat-client-wall-section .virrat-tile:hover .virrat-tile-overlay,
.virrat-client-wall-section .virrat-tile:focus-visible .virrat-tile-overlay {
	opacity: 1;
	transform: translateY(0);
}

.virrat-client-wall-section .virrat-tile-title {
	color: #ffffff;
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.2;
}

.virrat-client-wall-section .virrat-tile-subtitle {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.75rem;
	margin-top: 4px;
	line-height: 1.3;
}