/**
 * Empies Staff Directory
 * Compact cards, navy + warm accent; subtle motion (decor + card entrance + hover).
 */

.empies-staff {
	--empies-accent: #28306e;
	--empies-accent-mid: #3d4a90;
	--empies-accent-hover: #1f264f;
	--empies-accent-secondary: rgb(245, 130, 32);
	--empies-line: rgba(0, 0, 0, 0.1);
	--empies-line-strong: rgba(0, 0, 0, 0.14);
	--empies-photo-bg: #eceef3;
	--empies-card-body-bg: #ffffff;
	--empies-radius: 12px;
	--empies-radius-sm: 8px;
	position: relative;
	overflow: visible;
	max-width: var(--empies-staff-max-width, 120rem);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--empies-staff-gutter, 0);
	padding-right: var(--empies-staff-gutter, 0);
	font-family: inherit;
	color: inherit;
	line-height: 1.55;
	text-align: center;
}

/* Soft dots / rings / blobs — behind the directory (content sits above) */
.empies-staff__soft-decor {
	pointer-events: none;
	position: absolute;
	z-index: 0;
	left: -4%;
	right: -4%;
	top: clamp(5.25rem, 14vw, 8.25rem);
	bottom: 0;
	min-height: 260px;
}

.empies-staff__soft-decor::before {
	content: '';
	position: absolute;
	left: 4%;
	top: 8%;
	width: min(36vw, 220px);
	height: min(36vw, 220px);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(40, 48, 110, 0.06) 0%, transparent 68%);
	animation: empies-staff-float 9s ease-in-out infinite;
}

.empies-staff__soft-decor::after {
	content: '';
	position: absolute;
	right: 2%;
	bottom: 8%;
	width: min(46vw, 280px);
	height: min(46vw, 280px);
	border-radius: 50%;
	border: 3px solid rgba(245, 130, 32, 0.12);
	animation: empies-staff-pulse 5.2s ease-in-out infinite;
}

.empies-staff__soft-decor .empies-staff__dot {
	position: absolute;
	z-index: 1;
	border-radius: 50%;
	background: var(--empies-accent-secondary);
	opacity: 0.88;
	animation: empies-staff-float 4.8s ease-in-out infinite;
}

.empies-staff__soft-decor .empies-staff__dot--a {
	width: 12px;
	height: 12px;
	top: 14%;
	left: 8%;
}

.empies-staff__soft-decor .empies-staff__dot--b {
	width: 8px;
	height: 8px;
	top: 48%;
	left: 92%;
	background: var(--empies-accent-mid);
	animation-delay: 0.85s;
}

.empies-staff__soft-decor .empies-staff__dot--c {
	width: 9px;
	height: 9px;
	top: 72%;
	left: 12%;
	animation-delay: 1.7s;
}

.empies-staff__soft-decor .empies-staff__ring {
	position: absolute;
	z-index: 1;
	width: 36px;
	height: 36px;
	border: 3px solid rgba(245, 130, 32, 0.32);
	border-radius: 50%;
	top: 28%;
	left: 82%;
	animation: empies-staff-pulse 3.4s ease-in-out infinite;
}

.empies-staff__panels {
	position: relative;
	z-index: 1;
	min-height: 0;
}

.empies-staff__featured {
	position: relative;
	z-index: 2;
	margin: 0.5rem 0 1.5rem;
	text-align: center;
}

/* Principal 50% | Deputies 50% (each deputy splits the right half equally) */
.empies-staff__featured--combined .empies-staff__featured-row {
	display: grid;
	width: 100%;
	max-width: min(76rem, 100%);
	margin-left: auto;
	margin-right: auto;
	gap: 1.25rem 1.75rem;
	align-items: stretch;
	box-sizing: border-box;
}

.empies-staff__featured--combined .empies-staff__featured-row--split {
	grid-template-columns: 1fr 1fr;
}

.empies-staff__featured--combined .empies-staff__featured-row--principal-only,
.empies-staff__featured--combined .empies-staff__featured-row--deputies-only {
	grid-template-columns: 1fr;
	max-width: min(36rem, 100%);
}

.empies-staff__featured--combined .empies-staff__featured-row--deputies-only {
	max-width: min(76rem, 100%);
}

.empies-staff__featured-col {
	min-width: 0;
	text-align: center;
}

.empies-staff__featured-deputies-grid {
	display: grid;
	width: 100%;
	gap: 1rem 1.1rem;
	align-items: stretch;
	justify-content: center;
}

.empies-staff__featured-deputies-grid--one {
	grid-template-columns: 1fr;
	max-width: 20rem;
	margin-left: auto;
	margin-right: auto;
}

.empies-staff__featured-deputies-grid--two {
	grid-template-columns: 1fr 1fr;
}

.empies-staff__featured-deputies-grid--many {
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.empies-staff__featured-deputy-cell {
	min-width: 0;
	display: flex;
	justify-content: center;
}

.empies-staff__featured-deputy-cell .empies-staff__card {
	width: 100%;
	max-width: 22rem;
}

/* Featured cards: single column in principal column; no 3/4-col media overrides */
.empies-staff__grid.empies-staff__grid--featured {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
}

.empies-staff__grid.empies-staff__grid--featured .empies-staff__card {
	width: 100%;
	max-width: 22rem;
}

@media (min-width: 900px) {
	.empies-staff__grid.empies-staff__grid--featured {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 1200px) {
	.empies-staff__grid.empies-staff__grid--featured {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.empies-staff__featured--combined .empies-staff__featured-row--split {
		grid-template-columns: 1fr;
	}

	.empies-staff__featured-deputies-grid--two {
		grid-template-columns: 1fr;
	}
}

.empies-staff__featured-title {
	margin: 0 0 1rem;
	font-size: clamp(1.15rem, 2.5vw, 1.45rem);
	font-weight: 700;
	color: var(--empies-accent);
	letter-spacing: 0.02em;
}

.empies-staff__tabs-wrap {
	position: relative;
	z-index: 2;
}

/* PNGs only in left/right gutters beside the card column */
.empies-staff__results-row {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	gap: 1.25rem 2.25rem;
	margin-top: 20px;
	width: 100%;
	box-sizing: border-box;
}

.empies-staff__sideshape {
	flex: 0 0 min(26vw, 128px);
	max-width: 136px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	min-height: clamp(300px, 52vh, 620px);
	gap: 2rem;
	padding-top: 2.25rem;
	padding-bottom: 2.75rem;
	pointer-events: none;
}

.empies-staff__sideshape--left {
	padding-right: 0.85rem;
}

.empies-staff__sideshape--right {
	padding-left: 0.85rem;
}

.empies-staff__results-main {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 62rem;
}

.empies-staff__side-img {
	display: block;
	width: 100%;
	max-width: 100px;
	height: auto;
	object-fit: contain;
	opacity: 0.62;
	user-select: none;
	will-change: transform;
	margin-block: 1rem;
}

.empies-staff__side-img--left1 {
	animation: empies-staff-drift-1 16s ease-in-out infinite;
}

.empies-staff__side-img--left2 {
	animation: empies-staff-drift-3 18s ease-in-out infinite;
	animation-delay: -3s;
}

.empies-staff__side-img--right1 {
	animation: empies-staff-drift-2 13s ease-in-out infinite;
	animation-delay: -1s;
}

.empies-staff__side-img--right2 {
	animation: empies-staff-drift-4 15s ease-in-out infinite;
	animation-delay: -2s;
}

/* Paper clip: outer drift (like other shapes) + inner continuous spin */
.empies-staff__side-wrap--paperclip {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-block: 0.5rem;
	animation: empies-staff-drift-3 18s ease-in-out infinite;
	animation-delay: -2.5s;
	will-change: transform;
}

.empies-staff__side-img--paperclip {
	max-width: 40px;
	width: 100%;
	height: auto;
	margin-block: 0;
	opacity: 0.55;
	animation: empies-staff-spin 22s linear infinite;
	transform-origin: center center;
}

@media (max-width: 640px) {
	.empies-staff__sideshape {
		display: none;
	}

	.empies-staff__results-row {
		gap: 0;
	}
}

@keyframes empies-staff-float {
	0%,
	100% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(3px, -7px);
	}
}

@keyframes empies-staff-pulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.45;
	}
	50% {
		transform: scale(1.1);
		opacity: 0.9;
	}
}

@keyframes empies-staff-drift-1 {
	0%,
	100% {
		transform: translate(0, 0) rotate(-3deg);
	}
	40% {
		transform: translate(8px, -12px) rotate(2deg);
	}
	70% {
		transform: translate(-6px, 8px) rotate(-1deg);
	}
}

@keyframes empies-staff-drift-2 {
	0%,
	100% {
		transform: translate(0, 0) rotate(4deg);
	}
	50% {
		transform: translate(-10px, 10px) rotate(-2deg);
	}
}

@keyframes empies-staff-drift-3 {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	33% {
		transform: translate(10px, -8px) scale(1.03);
	}
	66% {
		transform: translate(-8px, 10px) scale(0.99);
	}
}

@keyframes empies-staff-drift-4 {
	0%,
	100% {
		transform: translate(0, 0) rotate(-2deg);
	}
	45% {
		transform: translate(-9px, -11px) rotate(3deg);
	}
	80% {
		transform: translate(6px, 5px) rotate(-2deg);
	}
}

@keyframes empies-staff-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes empies-staff-card-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.empies-staff__soft-decor::before,
	.empies-staff__soft-decor::after,
	.empies-staff__soft-decor .empies-staff__dot,
	.empies-staff__soft-decor .empies-staff__ring {
		animation: none;
	}

	.empies-staff__side-img {
		animation: none !important;
	}

	.empies-staff__side-wrap--paperclip {
		animation: none;
	}

	.empies-staff__side-img--paperclip {
		transform: none;
	}

	.empies-staff__card {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

}

.empies-staff__grid,
.empies-staff__empty {
	text-align: initial;
}

.empies-staff__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.5rem;
	position: relative;
	z-index: 2;
	margin: 1rem 0 1.25rem;
	justify-content: center;
	align-items: center;
}

.empies-staff__tab {
	display: inline-block;
	padding: 0.4rem 0.85rem;
	text-decoration: none;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: inherit;
	background: transparent;
	font: inherit;
	font-size: 0.92em;
	font-weight: 500;
	opacity: 0.85;
	cursor: pointer;
	transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.empies-staff__tab:hover {
	opacity: 1;
	color: var(--empies-accent);
}

.empies-staff__tab:focus-visible {
	outline: 2px solid var(--empies-accent-secondary);
	outline-offset: 3px;
	border-radius: 2px;
}

.empies-staff__tab--active {
	opacity: 1;
	font-weight: 700;
	color: var(--empies-accent);
	border-bottom-color: var(--empies-accent);
}

.empies-staff__grades {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem 0.5rem;
	padding-top: 0.85rem;
	margin-top: 0.25rem;
	border-top: 1px solid var(--empies-line);
	font-size: 0.88em;
}

.empies-staff__grades-label {
	font-weight: 700;
	color: var(--empies-accent);
	opacity: 0.85;
	margin-right: 0.2rem;
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.empies-staff__grade {
	text-decoration: none;
	padding: 0.3rem 0.65rem;
	border-radius: var(--empies-radius-sm);
	color: var(--empies-accent-mid);
	background: transparent;
	border: 1px solid var(--empies-line);
	font: inherit;
	font-size: 0.88em;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.empies-staff__grade:hover {
	border-color: var(--empies-accent);
	color: var(--empies-accent);
}

.empies-staff__grade:focus-visible {
	outline: 2px solid var(--empies-accent-secondary);
	outline-offset: 2px;
}

.empies-staff__grade--active {
	border-color: var(--empies-accent);
	background: rgba(40, 48, 110, 0.08);
	font-weight: 700;
	color: var(--empies-accent);
	text-decoration: none;
}

/* Compact grid — slightly smaller cards */
.empies-staff__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 1rem 1.1rem;
	justify-content: center;
	justify-items: stretch;
	max-width: 62rem;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 900px) {
	.empies-staff__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.empies-staff__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.empies-staff__card {
	position: relative;
	margin: 0;
	animation: empies-staff-card-in 0.52s cubic-bezier(0.22, 1, 0.36, 1) backwards;
	will-change: opacity, transform;
}

.empies-staff__card-inner {
	background: var(--empies-card-body-bg);
	border: 1px solid var(--empies-line-strong);
	border-radius: var(--empies-radius);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition:
		border-color 0.22s ease,
		box-shadow 0.22s ease,
		transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 2px 14px rgba(40, 48, 110, 0.07);
}

.empies-staff__card-inner:hover {
	border-color: rgba(40, 48, 110, 0.22);
	box-shadow: 0 10px 28px rgba(40, 48, 110, 0.11);
	transform: translateY(-4px);
}

/* Photos are 708×1062 (2:3) — scale the full portrait, no cropping */
.empies-staff__card-image {
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--empies-photo-bg);
	border: 0;
	border-bottom: 1px solid var(--empies-line);
	line-height: 0;
	text-align: center;
	overflow: hidden;
}

.empies-staff__card-image img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	border: 0;
	outline: none;
	box-shadow: none;
	object-fit: contain;
	object-position: center top;
}

.empies-staff__card-inner:hover .empies-staff__card-image img {
	transform: none;
}

.empies-staff__card-image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 2 / 3;
	min-height: 11rem;
	padding: 1.25rem 1rem;
	color: var(--empies-accent);
	opacity: 0.22;
	background: var(--empies-photo-bg);
}

/* Info bar — clearly separate block under photo */
.empies-staff__card-body {
	padding: 0.65rem 0.75rem 0.85rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	align-items: center;
	text-align: center;
	background: var(--empies-card-body-bg);
}

.empies-staff__card-badge {
	margin: 0 0 0.2rem;
	display: inline-block;
	padding: 0.2rem 0.6rem;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--empies-accent);
	background: rgba(40, 48, 110, 0.1);
	border-radius: var(--empies-radius-sm);
}

.empies-staff__card-name {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--empies-accent);
	line-height: 1.28;
	letter-spacing: -0.02em;
}

.empies-staff__card-job {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--empies-accent-mid);
}

.empies-staff__card-sections,
.empies-staff__card-grades {
	margin: 0;
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--empies-accent);
	opacity: 0.72;
}

.empies-staff__card-bio {
	margin: 0.45rem 0 0;
	padding: 0.65rem 0.8rem;
	font-size: 0.87rem;
	color: inherit;
	opacity: 0.88;
	background: rgba(40, 48, 110, 0.04);
	border-radius: var(--empies-radius-sm);
	border-left: 3px solid var(--empies-accent);
	text-align: left;
	width: 100%;
	box-sizing: border-box;
}

.empies-staff__card-contact {
	margin: 0.6rem 0 0;
	padding: 0.65rem 0 0;
	border-top: 1px solid var(--empies-line);
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	width: 100%;
	text-align: left;
}

.empies-staff__card-contact-row {
	display: grid;
	grid-template-columns: 4.25rem 1fr;
	gap: 0.25rem 0.65rem;
	align-items: baseline;
	font-size: 0.84rem;
}

.empies-staff__card-contact dt {
	margin: 0;
	font-weight: 600;
	color: var(--empies-accent);
	opacity: 0.55;
}

.empies-staff__card-contact dd {
	margin: 0;
	font-weight: 600;
	color: var(--empies-accent);
	word-break: break-word;
}

.empies-staff__card-contact a {
	color: var(--empies-accent-mid);
	text-decoration: underline;
	text-decoration-color: rgba(61, 74, 144, 0.35);
	text-underline-offset: 0.15em;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.empies-staff__card-contact a:hover {
	color: var(--empies-accent-secondary);
	text-decoration-color: var(--empies-accent-secondary);
}

.empies-staff__empty {
	margin: 1rem auto;
	max-width: 36rem;
	padding: 1.1rem;
	text-align: center;
	font-style: normal;
	color: var(--empies-accent-mid);
	background: rgba(40, 48, 110, 0.05);
	border-radius: var(--empies-radius);
	border: 1px dashed var(--empies-line-strong);
}

@media (max-width: 480px) {
	.empies-staff__grid {
		grid-template-columns: 1fr;
		max-width: 100%;
	}

	.empies-staff__card-contact-row {
		grid-template-columns: 1fr;
		gap: 0.1rem;
	}
}