/**
 * Frontend Styles for Custom Team Showcase
 */

@import url('https://fonts.googleapis.com/css2?family=Italiana&display=swap');


.cts-team-showcase {
	color: var(--cts-text-color, #333333);
	font-family: inherit;
	/* Inherit theme font */
}

.cts-layout-grid {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 5px;
	align-items: center;
}

/* --- LEFT COLUMN: IMAGES --- */

.cts-left-col {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
}

.cts-image-stack {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	overflow: hidden;
}

.cts-member-display {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	/* Removed transition in favor of animation */
}

.cts-member-display.cts-active {
	visibility: visible;
	animation: fadeUp 0.9s ease-out 0s 1 normal both running;
}

@keyframes fadeUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.cts-image-bg {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
}

.cts-image-placeholder {
	background-color: #ddd;
}

.cts-image-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 60px 30px 0px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
	color: #fff;
	box-sizing: border-box;
}

.cts-display-name {
	margin: 0 0 5px;
	font-size: 30px;
	/* text-3xl approx */
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	font-family: 'Italiana', serif;
}

.cts-display-designation {
	margin: 0;
	font-size: 0.75rem;
	/* text-xs */
	text-transform: uppercase;
	letter-spacing: 0.1em;
	/* tracking-widest */
	color: #6dd4f3;
	/* Based on user request */
}

/* --- RIGHT COLUMN: CONTENT --- */

.cts-right-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cts-quote-stack {
	position: relative;
	margin-bottom: 40px;
}

.cts-quote-mark {
	font-size: 48px;
	/* text-5xl */
	color: var(--cts-accent-color, #00b4d8);
	line-height: 1;
	font-family: 'Italiana', serif;
	display: block;
	margin-bottom: 1rem;
}

.cts-quote-container {
	position: relative;
	/* Min height could be set dynamically, but for now we let it flow.
	   Using absolute positioning for inactive quotes might collapse container height.
	   To prevent height jump, we can use CSS Grid to overlap them. */
	display: grid;
}

.cts-member-quote {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, visibility 0.5s ease;
	font-size: 18px;
	line-height: 1.6;
}

.cts-member-quote.cts-active {
	opacity: 1;
	visibility: visible;
}

.cts-member-quote p {
	margin: 0;
}

/* --- SELECTOR CARDS --- */

.cts-cards-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.cts-member-card {
	background-color: #fdf9fa !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 8px;
	padding: 16px;
	text-align: left;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	box-shadow: none !important;
	font-family: inherit;
	color: var(--cts-text-color, #333333) !important;
	justify-content: center;
}

.cts-member-card:hover {
	background-color: #fdf9fa !important;
	border-color: var(--cts-accent-color, #00b4d8) !important;
	color: var(--cts-text-color, #333333) !important;
}

.cts-member-card.cts-active,
.cts-member-card.cts-active:hover {
	background-color: var(--cts-accent-color, #00b4d8) !important;
	color: #fff !important;
	border-color: var(--cts-accent-color, #00b4d8) !important;
}

.cts-card-name {
	font-size: 1.125rem;
	/* text-lg */
	font-weight: 400;
	margin-bottom: 4px;
	color: var(--cts-text-color, #333333);
	font-family: 'Italiana', serif;
	line-height: 1.25;
}

.cts-card-role {
	font-size: 10px;
	/* text-[10px] */
	text-transform: uppercase;
	letter-spacing: 0.1em;
	/* tracking-widest */
	color: #6b7280;
	/* text-foreground-500 approx */
}

.cts-member-card.cts-active .cts-card-name,
.cts-member-card.cts-active .cts-card-role {
	color: #fff;
	/* text-background-100 */
}


/* --- RESPONSIVE --- */

@media (max-width: 1024px) {
	.cts-layout-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.cts-left-col {
		max-width: 100%;
		margin: 0 auto;
	}

	.cts-display-name {
		font-size: 24px;
	}

	.cts-member-quote {
		font-size: 16px;
	}
}

@media (max-width: 768px) {
	.cts-layout-grid {
		gap: 30px;
	}

	.cts-quote-mark {
		margin-bottom: 0;
	}

	.cts-cards-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {

	/* Keep 2 columns on mobile to match reference */
	.cts-cards-container {
		grid-template-columns: repeat(2, 1fr);
	}

	.cts-member-card {
		padding: 12px;
	}
}