/* Staff Management — frontend. Self-contained, theme-independent card styling.
 * Cards use fixed light tokens so they look identical regardless of the
 * active theme's body background. Dark mode is OPT-IN via a wrapper class
 * (.sms-dark) instead of auto-flipping with the OS, which previously made
 * cards render near-black on light pages. */

.sms-wrap,
.sms-carousel,
.sms-related .sms-grid,
.sms-grid {
	--sms-radius: 16px;
	--sms-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 4px 16px rgba(16, 24, 40, 0.08);
	--sms-shadow-hover: 0 12px 28px rgba(16, 24, 40, 0.16);
	--sms-card-bg: #ffffff;
	--sms-fg: #0C1929;
	--sms-muted: #6b7280;
	--sms-accent: #0C1929;
	--sms-accent-fg: #ffffff;
	--sms-link: #B8893A;
	--sms-border: #e8eaee;
	--sms-chip: #f3f4f6;
	--sms-chip-fg: #4b5563;
	--sms-badge: #B8893A;
}

.sms-wrap {
	margin: 1.5rem 0;
	color: var(--sms-fg);
}

/* Opt-in dark mode: add class="sms-dark" via shortcode wrapper or theme. */
.sms-wrap.sms-dark {
	--sms-card-bg: #1f2430;
	--sms-fg: #f3f4f6;
	--sms-muted: #9ca3af;
	--sms-accent: #B8893A;
	--sms-link: #B8893A;
	--sms-border: #2f3645;
	--sms-chip: #2a3140;
	--sms-chip-fg: #cbd5e1;
	--sms-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35);
	--sms-shadow-hover: 0 12px 28px rgba(0,0,0,.55);
}

/* ---------- Filter bar ---------- */
.sms-filter-bar {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}
.sms-filter-bar .sms-search,
.sms-filter-bar .sms-dept-filter {
	padding: 0.7rem 1rem;
	border: 1px solid var(--sms-border);
	border-radius: 10px;
	background: var(--sms-card-bg);
	color: var(--sms-fg);
	font-size: 0.95rem;
	line-height: 1.4;
	box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.sms-filter-bar .sms-search { flex: 1 1 240px; }
.sms-filter-bar .sms-dept-filter { min-width: 200px; cursor: pointer; }
.sms-filter-bar .sms-search:focus,
.sms-filter-bar .sms-dept-filter:focus {
	outline: none;
	border-color: var(--sms-accent);
	box-shadow: 0 0 0 3px rgba(184, 137, 58, 0.2);
}

/* ---------- Grid ---------- */
.sms-grid {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: 1fr; /* mobile: 1 */
}
@media (min-width: 600px) {
	.sms-grid.sms-cols-2, .sms-grid.sms-cols-3, .sms-grid.sms-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
	.sms-grid.sms-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.sms-grid.sms-cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
	.sms-grid.sms-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Card ---------- */
.sms-card {
	position: relative;
	background: var(--sms-card-bg);
	color: var(--sms-fg);
	border: 1px solid var(--sms-border);
	border-radius: var(--sms-radius);
	box-shadow: var(--sms-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.sms-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sms-shadow-hover);
}

.sms-badge {
	position: absolute;
	top: 14px; left: 14px;
	z-index: 2;
	background: var(--sms-badge);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.28rem 0.65rem;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* Image: consistent square-ish portrait, evenly cropped */
.sms-card-media {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--sms-chip);
}
.sms-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	transition: transform 0.5s ease;
}
.sms-card:hover .sms-img { transform: scale(1.04); }
.sms-img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #eef1f5, #dfe4ea);
}

/* Body */
.sms-card-body {
	padding: 1.25rem 1.25rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1;
}
.sms-card .sms-name {
	margin: 0 !important;
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em;
}
.sms-card .sms-name a { color: var(--sms-fg) !important; text-decoration: none; }
.sms-card .sms-name a:hover { color: var(--sms-link) !important; }

.sms-designation {
	margin: 0.1rem 0 0;
	color: var(--sms-link);
	font-weight: 600;
	font-size: 0.9rem;
}
.sms-education {
	margin: 0.15rem 0 0;
	color: var(--sms-muted);
	font-size: 0.85rem;
	line-height: 1.45;
}

/* Socials as subtle chips */
.sms-socials { display: flex; gap: 0.5rem; margin-top: 0.85rem; flex-wrap: wrap; }
.sms-social {
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--sms-chip);
	color: var(--sms-chip-fg);
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.sms-social:hover { background: var(--sms-accent); color: #fff; transform: translateY(-2px); }
.sms-social .dashicons { font-size: 18px; width: 18px; height: 18px; line-height: 18px; }

/* Primary button — solid, high contrast, clearly readable */
.sms-contact-btn {
	margin-top: 1.1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1.1rem;
	background: var(--sms-accent);
	color: var(--sms-accent-fg) !important;
	border-radius: 10px;
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1;
	transition: filter 0.18s ease, transform 0.18s ease;
}
.sms-card-body > .sms-contact-btn { margin-top: auto; }
.sms-contact-btn:hover { filter: brightness(0.92); color: var(--sms-accent-fg) !important; }
.sms-contact-btn:active { transform: translateY(1px); }
.sms-wa-btn { background: #25d366; }

/* Pagination */
.sms-pagination { text-align: center; margin-top: 2rem; }
.sms-load-more {
	padding: 0.75rem 1.8rem;
	border: 1.5px solid var(--sms-accent);
	background: transparent;
	color: var(--sms-accent);
	border-radius: 10px;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.95rem;
	transition: background 0.18s ease, color 0.18s ease;
}
.sms-load-more:hover { background: var(--sms-accent); color: #fff; }
.sms-load-more[disabled] { opacity: 0.5; cursor: default; }

.sms-empty { color: var(--sms-muted); grid-column: 1 / -1; padding: 2rem 0; text-align: center; }

/* ---------- Single profile ---------- */
.sms-single {
	--sms-radius: 16px;
	--sms-fg: #0C1929;
	--sms-muted: #6b7280;
	--sms-accent: #0C1929;
	--sms-link: #B8893A;
	--sms-border: #e8eaee;
	--sms-chip: #f3f4f6;
	--sms-chip-fg: #4b5563;
	max-width: 1000px;
	margin: 2.5rem auto;
	padding: 0 1rem;
	color: var(--sms-fg);
}
.sms-single-header { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 768px) { .sms-single-header { grid-template-columns: 300px 1fr; align-items: start; } }
.sms-single-img { width: 100%; border-radius: var(--sms-radius); object-fit: cover; aspect-ratio: 1; box-shadow: 0 6px 20px rgba(16,24,40,.12); }
.sms-single-name { margin: 0 0 0.5rem; font-size: 2rem; line-height: 1.15; }
.sms-single-designation { color: var(--sms-accent); font-weight: 600; font-size: 1.15rem; margin: 0 0 0.4rem; }
.sms-single-education, .sms-single-experience { color: var(--sms-muted); margin: 0 0 0.35rem; }
.sms-socials--lg { margin: 1rem 0; }
.sms-single-actions { display: flex; gap: 0.6rem; margin-top: 1.1rem; flex-wrap: wrap; }
.sms-single-bio { margin: 2.25rem 0; line-height: 1.75; font-size: 1.02rem; }
.sms-single-custom h2, .sms-related h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.sms-cf-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem; }
.sms-cf-item { border: 1px solid var(--sms-border); border-radius: 12px; padding: 0.9rem 1.1rem; background: var(--sms-chip); }
.sms-cf-item dt { font-weight: 700; font-size: 0.78rem; color: var(--sms-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.sms-cf-item dd { margin: 0.35rem 0 0; font-weight: 500; }
.sms-related { margin-top: 3rem; }

/* ---------- Carousel ---------- */
.sms-carousel { padding: 0.5rem 0 2.75rem; }
.sms-carousel .swiper-slide { height: auto; }
.sms-carousel .swiper-slide .sms-card { height: 100%; }
.sms-carousel .swiper-button-prev, .sms-carousel .swiper-button-next { color: var(--sms-accent); }
.sms-carousel .swiper-pagination-bullet-active { background: var(--sms-accent); }

/* ---------- A11y ---------- */
.sms-card a:focus-visible,
.sms-contact-btn:focus-visible,
.sms-social:focus-visible,
.sms-load-more:focus-visible {
	outline: 3px solid var(--sms-accent);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.sms-card, .sms-img { transition: none; }
	.sms-card:hover { transform: none; }
	.sms-card:hover .sms-img { transform: none; }
}