/**
 * Employee directory loading overlay.
 * Visible until body.sln-directory-loaded is set (AJAX cards + photos ready).
 * Scoped to the card list container — never the navy filter bar.
 */

body.otm-enhanced-directory .employee-list-block .block-content > .container,
body.page-id-76 .employee-list-block .block-content > .container {
	position: relative;
}

body.otm-enhanced-directory:not(.sln-directory-loaded) .employee-list-block .block-content > .container,
body.page-id-76:not(.sln-directory-loaded) .employee-list-block .block-content > .container {
	min-height: 280px;
}

.sln-directory-loader {
	position: absolute;
	inset: 0;
	z-index: 8;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
	padding: 2.5rem 1rem 3rem;
	background: rgba(255, 255, 255, 0.94);
	pointer-events: none;
}

body.sln-directory-loaded .sln-directory-loader,
.sln-directory-loader[hidden],
.otm-enhanced-filter .sln-directory-loader,
.buildout-filter .sln-directory-loader {
	display: none !important;
}

.sln-directory-loader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
}

.sln-directory-loader__spinner {
	box-sizing: border-box;
	width: 42px;
	height: 42px;
	border: 3px solid #d5dbe6;
	border-top-color: #122346;
	border-radius: 50%;
	animation: sln-directory-spin 0.7s linear infinite;
}

.sln-directory-loader__text {
	margin: 0;
	color: #122346;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Immediate CSS fallback before the JS overlay is injected. */
body.otm-enhanced-directory:not(.sln-directory-loaded) .employee-list-block .block-content > .container:not(:has(.sln-directory-loader))::before,
body.page-id-76:not(.sln-directory-loaded) .employee-list-block .block-content > .container:not(:has(.sln-directory-loader))::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 88px;
	width: 42px;
	height: 42px;
	margin-left: -21px;
	border: 3px solid #d5dbe6;
	border-top-color: #122346;
	border-radius: 50%;
	animation: sln-directory-spin 0.7s linear infinite;
	z-index: 8;
}

body.otm-enhanced-directory:not(.sln-directory-loaded) .employee-list-block .block-content > .container:not(:has(.sln-directory-loader))::after,
body.page-id-76:not(.sln-directory-loaded) .employee-list-block .block-content > .container:not(:has(.sln-directory-loader))::after {
	content: "Loading…";
	position: absolute;
	left: 0;
	right: 0;
	top: 146px;
	text-align: center;
	color: #122346;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	z-index: 8;
}

/* Filter bar must stay clear and usable while the list loads. */
.otm-enhanced-filter,
.otm-enhanced-filter .container,
.otm-enhanced-filter .container-950,
.buildout-filter.otm-enhanced-filter,
.buildout-filter.otm-enhanced-filter .container {
	min-height: 0 !important;
}

.otm-enhanced-filter .container::before,
.otm-enhanced-filter .container::after,
.otm-enhanced-filter .container-950::before,
.otm-enhanced-filter .container-950::after,
.buildout-filter .container::before,
.buildout-filter .container::after {
	content: none !important;
	display: none !important;
	animation: none !important;
}

@keyframes sln-directory-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 767px) {
	body.otm-enhanced-directory:not(.sln-directory-loaded) .employee-list-block .block-content > .container,
	body.page-id-76:not(.sln-directory-loaded) .employee-list-block .block-content > .container {
		min-height: 220px;
	}

	.sln-directory-loader {
		min-height: 200px;
		padding: 2rem 0.75rem;
	}

	body.otm-enhanced-directory:not(.sln-directory-loaded) .employee-list-block .block-content > .container:not(:has(.sln-directory-loader))::before,
	body.page-id-76:not(.sln-directory-loaded) .employee-list-block .block-content > .container:not(:has(.sln-directory-loader))::before {
		top: 64px;
		width: 36px;
		height: 36px;
		margin-left: -18px;
	}

	body.otm-enhanced-directory:not(.sln-directory-loaded) .employee-list-block .block-content > .container:not(:has(.sln-directory-loader))::after,
	body.page-id-76:not(.sln-directory-loaded) .employee-list-block .block-content > .container:not(:has(.sln-directory-loader))::after {
		top: 116px;
		font-size: 0.8rem;
	}
}