/* =========================================================
   Southkhali Profile Manager — Front-end Styles
   থিমের সাথে সামঞ্জস্যপূর্ণ কালার স্কিম ব্যবহার করা হয়েছে,
   কিন্তু থিম না থাকলেও সুন্দরভাবে দেখাবে এমনভাবে ডিজাইন করা।
   ========================================================= */
.sspm-grid{
	display:grid;
	grid-template-columns:repeat(var(--sspm-cols,4), 1fr);
	gap:20px;
	margin:24px 0;
	font-family:'Hind Siliguri','Noto Sans Bengali',sans-serif;
}
.sspm-card{
	background:#fff; border:1px solid #E4DFD1; border-radius:14px; padding:24px 16px;
	text-align:center; box-shadow:0 4px 14px rgba(11,79,60,0.08); cursor:pointer;
	transition:.25s ease; outline:none;
}
.sspm-card:hover, .sspm-card:focus-visible{
	transform:translateY(-5px); border-color:#C99A2E; box-shadow:0 10px 26px rgba(11,79,60,0.14);
}
.sspm-card-photo{
	width:96px; height:96px; border-radius:50%; overflow:hidden; margin:0 auto 14px;
	background:#EAF4EF; display:flex; align-items:center; justify-content:center;
}
.sspm-card-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.sspm-avatar-fallback{font-size:32px;}
.sspm-card-name{margin:0 0 6px; font-size:17px; color:#0B4F3C; font-weight:700;}
.sspm-card-role{
	display:inline-block; background:#FBF0D8; color:#C99A2E; font-size:12.5px; font-weight:700;
	padding:3px 12px; border-radius:999px; margin-bottom:8px;
}
.sspm-card-view{display:block; margin-top:10px; font-size:13px; font-weight:700; color:#8B2942;}
.sspm-empty{color:#666; text-align:center; padding:30px 0;}

/* ============ MODAL ============ */
.sspm-modal{position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px;}
.sspm-modal[hidden]{display:none;}
.sspm-modal-overlay{position:absolute; inset:0; background:rgba(11,20,17,.6); backdrop-filter:blur(2px);}
.sspm-modal-box{
	position:relative; background:#fff; border-radius:16px; max-width:480px; width:100%;
	padding:36px 30px 30px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.3);
	max-height:88vh; overflow-y:auto; animation:sspmPop .25s ease;
}
@keyframes sspmPop{from{opacity:0; transform:scale(.94) translateY(10px);} to{opacity:1; transform:scale(1) translateY(0);}}
.sspm-modal-close{
	position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
	background:#F3EDE0; border:0; font-size:20px; line-height:1; cursor:pointer; color:#1E2321;
}
.sspm-modal-close:hover{background:#8B2942; color:#fff;}
.sspm-modal-photo{
	width:130px; height:130px; border-radius:50%; overflow:hidden; margin:0 auto 16px;
	background:#EAF4EF; display:flex; align-items:center; justify-content:center; font-size:48px;
	border:4px solid #EAF4EF;
}
.sspm-modal-photo img{width:100%; height:100%; object-fit:cover;}
.sspm-modal-name{margin:0 0 6px; font-size:22px; color:#0B4F3C;}
.sspm-modal-role{
	display:inline-block; background:#FBF0D8; color:#C99A2E; font-weight:700; font-size:13px;
	padding:5px 16px; border-radius:999px; margin-bottom:18px;
}
.sspm-modal-info-grid{display:flex; flex-direction:column; gap:10px; text-align:left; margin-top:6px;}
.sspm-modal-info-row{display:flex; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:1px dashed #E4DFD1; font-size:14.5px;}
.sspm-modal-info-row .sspm-label{color:#C99A2E; font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; flex:0 0 auto;}
.sspm-modal-info-row .sspm-value{color:#1E2321; font-weight:600; text-align:right;}
.sspm-modal-bio{margin-top:18px; padding-top:16px; border-top:1px solid #E4DFD1; color:#4B534F; font-size:14px; text-align:left; line-height:1.7;}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
	.sspm-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:600px){
	.sspm-grid{grid-template-columns:repeat(2,1fr); gap:14px;}
	.sspm-card{padding:18px 10px;}
	.sspm-modal-box{padding:28px 20px 24px;}
}