/* Team Showcase Pro - frontend grid & layouts */

.tsp-grid {
	/* Layout */
	--tsp-cols-desktop: 4;
	--tsp-cols-tablet: 3;
	--tsp-cols-mobile: 2;
	--tsp-gap: 24px;
	--tsp-photo-size: 160px;

	/* Card */
	--tsp-card-bg: #ffffff;
	--tsp-card-border: transparent;
	--tsp-radius: 16px;
	--tsp-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06);

	/* Type & color */
	--tsp-name-color: #101828;
	--tsp-designation-color: #475467;
	--tsp-subtext-color: #98a2b3;
	--tsp-accent: #2563eb;

	display: grid;
	grid-template-columns: repeat(var(--tsp-cols-desktop), 1fr);
	gap: var(--tsp-gap);
	width: 100%;
}

.tsp-grid,
.tsp-grid * {
	box-sizing: border-box;
}

/* ---------- Card base (Classic layout, also the default for others) ---------- */

.tsp-card {
	position: relative;
	text-align: center;
	background: var(--tsp-card-bg);
	border: 1px solid var(--tsp-card-border);
	border-radius: var(--tsp-radius);
	box-shadow: var(--tsp-shadow);
	padding: 28px 20px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tsp-card:hover {
	transform: translateY(-3px);
}

.tsp-photo-wrap {
	position: relative;
	margin: 0 auto 18px;
	width: 100%;
	max-width: var(--tsp-photo-size);
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.tsp-photo,
.tsp-photo-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tsp-photo-placeholder {
	background: #eef1f4;
	color: #98a2b3;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.2em;
	font-weight: 600;
}

/* Photo shape variants */
.tsp-shape-circle .tsp-photo,
.tsp-shape-circle .tsp-photo-placeholder { border-radius: 50%; }

.tsp-shape-rounded .tsp-photo,
.tsp-shape-rounded .tsp-photo-placeholder { border-radius: 14px; }

.tsp-shape-square .tsp-photo,
.tsp-shape-square .tsp-photo-placeholder { border-radius: 0; }

.tsp-name {
	font-size: 1.08em;
	font-weight: 700;
	color: var(--tsp-name-color);
	margin: 0 0 4px;
	line-height: 1.35;
}

.tsp-designation {
	font-size: 0.9em;
	font-weight: 500;
	color: var(--tsp-designation-color);
	margin: 0 0 2px;
}

.tsp-subtext {
	font-size: 0.82em;
	color: var(--tsp-subtext-color);
	margin: 0 0 8px;
}

.tsp-social {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.tsp-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--tsp-accent) 10%, transparent);
	color: var(--tsp-accent);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.tsp-social a:hover {
	background: var(--tsp-accent);
	color: #fff;
}

.tsp-social .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	line-height: 15px;
}

.tsp-empty {
	text-align: center;
	color: #98a2b3;
	padding: 20px;
}

/* ---------- Layout: Minimal (no card chrome, just image + text) ---------- */

.tsp-layout-minimal .tsp-card {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

.tsp-layout-minimal .tsp-photo-wrap {
	max-width: calc(var(--tsp-photo-size) * 0.85);
}

/* ---------- Layout: Bordered (outline, flat, no shadow) ---------- */

.tsp-layout-bordered .tsp-card {
	box-shadow: none;
	border: 1px solid var(--tsp-card-border, #e4e7ec);
}

.tsp-layout-bordered .tsp-card:hover {
	border-color: var(--tsp-accent);
	transform: none;
}

/* ---------- Layout: Horizontal (photo left, text right) ---------- */

.tsp-layout-horizontal .tsp-card {
	display: flex;
	align-items: center;
	gap: 18px;
	text-align: left;
	padding: 18px;
}

.tsp-layout-horizontal .tsp-photo-wrap {
	margin: 0;
	max-width: calc(var(--tsp-photo-size) * 0.55);
	flex-shrink: 0;
}

.tsp-layout-horizontal .tsp-content {
	flex: 1;
	min-width: 0;
}

.tsp-layout-horizontal .tsp-social {
	justify-content: flex-start;
}

/* ---------- Layout: Overlay (full-bleed photo, caption on top) ---------- */

.tsp-layout-overlay .tsp-card {
	padding: 0;
	overflow: hidden;
}

.tsp-layout-overlay .tsp-photo-wrap {
	margin: 0;
	max-width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: 0;
}

.tsp-layout-overlay .tsp-photo,
.tsp-layout-overlay .tsp-photo-placeholder {
	border-radius: 0;
}

.tsp-layout-overlay .tsp-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px 18px 18px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0) 100%);
}

.tsp-layout-overlay .tsp-name,
.tsp-layout-overlay .tsp-designation,
.tsp-layout-overlay .tsp-subtext {
	color: #fff;
}

.tsp-layout-overlay .tsp-social a {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.tsp-layout-overlay .tsp-social a:hover {
	background: var(--tsp-accent);
}

/* ---------- Responsive breakpoints ---------- */

@media (max-width: 1024px) {
	.tsp-grid {
		grid-template-columns: repeat(var(--tsp-cols-tablet), 1fr);
	}
}

@media (max-width: 600px) {
	.tsp-grid {
		grid-template-columns: repeat(var(--tsp-cols-mobile), 1fr);
	}
	.tsp-card {
		padding: 20px 14px;
	}
	.tsp-layout-horizontal .tsp-card {
		padding: 14px;
		gap: 14px;
	}
}