/**
 * Speaker Showcase - Frontend Styles
 * 4 Column Center Layout
 */


/* Main Grid - 4 Speakers Per Row */
.spsh-grid {

	display: grid;

	grid-template-columns: repeat(4, 1fr);

	gap: 28px;

	margin: 30px 0;

}


/* Speaker Card */
.spsh-card {

	background: #ffffff;

	border-radius: 10px;

	overflow: hidden;

	box-shadow: 0 2px 8px rgba(0,0,0,0.08);

	transition: transform 0.25s ease, box-shadow 0.25s ease;

	display: flex;

	flex-direction: column;

	text-align: center;

}


.spsh-card:hover {

	transform: translateY(-4px);

	box-shadow: 0 8px 20px rgba(0,0,0,0.12);

}



/* Image Area */
.spsh-card-image {

	width: 100%;

	aspect-ratio: 1 / 1;

	overflow: hidden;

	background:#f3f4f6;

}



/* Speaker Image */
.spsh-card-image img,
.spsh-photo {

	width:100%;

	height:100%;

	object-fit:cover;

	display:block;

}



/* Placeholder */
.spsh-photo-placeholder {

	background:linear-gradient(
		135deg,
		#e5e7eb 0%,
		#d1d5db 100%
	);

}



/* Content */
.spsh-card-body {

	padding:18px 18px 20px;

	flex:1;

	display:flex;

	flex-direction:column;

	align-items:center;

	text-align:center;

}



/* Speaker Name */
.spsh-name {

	margin:0 0 8px;

	font-size:18px;

	font-weight:700;

	line-height:1.3;

	color:#111827;

	text-align:center;

}



/* Designation */
.spsh-designation {

	margin:0 0 6px;

	font-size:14px;

	font-weight:600;

	color:#2563eb;

	line-height:1.4;

	text-align:center;

}



/* Organization */
.spsh-organization {

	margin:0 0 12px;

	font-size:14px;

	color:#6b7280;

	line-height:1.4;

	text-align:center;

}



/* Social Icons */
.spsh-socials {

	display:flex;

	justify-content:center;

	align-items:center;

	gap:10px;

	margin-top:auto;

	padding-top:12px;

}



/* Social Icon */
.spsh-social {

	display:inline-flex;

	align-items:center;

	justify-content:center;

	width:36px;

	height:36px;

	border-radius:50%;

	background:#f3f4f6;

	color:#4b5563;

	text-decoration:none;

	transition:all .25s ease;

}


.spsh-social:hover {

	transform:scale(1.08);

}



/* Linkedin */
.spsh-social-linkedin:hover {

	background:#0a66c2;

	color:#ffffff;

}



/* Instagram */
.spsh-social-instagram:hover {

	background:linear-gradient(
		45deg,
		#f09433,
		#e6683c,
		#dc2743,
		#cc2366,
		#bc1888
	);

	color:#ffffff;

}



/* Empty Message */
.spsh-empty {

	padding:30px;

	text-align:center;

	color:#6b7280;

	background:#f9fafb;

	border-radius:8px;

}



/* ==========================
   Responsive
========================== */


/* Tablet - 2 Columns */
@media(max-width:1024px){

	.spsh-grid {

		grid-template-columns:repeat(2,1fr);

		gap:24px;

	}

}



/* Mobile - 1 Column */
@media(max-width:600px){

	.spsh-grid {

		grid-template-columns:repeat(1,1fr);

		gap:18px;

	}


	.spsh-name {

		font-size:16px;

	}

}
.spsh-card{cursor:pointer}
.spsh-modal{display:none;position:fixed;z-index:99999;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.6)}
.spsh-modal-content{background:#fff;margin:8% auto;padding:30px;max-width:650px;border-radius:10px;position:relative}
.spsh-close{position:absolute;right:18px;top:10px;font-size:30px;cursor:pointer}
.spsh-bio{text-align:left;line-height:1.6}