/* Abhay's Our Team V.02 - frontend styles
   All rules are scoped under .aot-team-wrapper and key visual properties
   carry !important so the card template renders correctly even inside
   themes/page builders that ship their own strong default styles for
   headings, images and paragraphs. */

.aot-team-wrapper,
.aot-team-wrapper * {
	box-sizing: border-box !important;
}

.aot-team-wrapper {
	--aot-avatar-size: 76px;
	--aot-gap: 18px;
}

.aot-team-wrapper .aot-grid {
	display: grid !important;
	grid-template-columns: repeat(var(--aot-columns, 2), 1fr) !important;
	gap: 26px !important;
	margin: 24px 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.aot-team-wrapper .aot-card {
	display: flex !important;
	flex-direction: column !important;
	background: #ffffff !important;
	border-radius: 18px !important;
	padding: 24px 26px !important;
	margin: 0 !important;
	box-shadow: 0 10px 30px rgba(30, 30, 70, 0.07) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.aot-team-wrapper .aot-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(30, 30, 70, 0.12) !important;
}

.aot-team-wrapper .aot-card-top {
	display: flex !important;
	align-items: flex-start !important;
	gap: var(--aot-gap) !important;
}

.aot-team-wrapper .aot-avatar-wrap {
	flex-shrink: 0 !important;
	width: var(--aot-avatar-size) !important;
}

.aot-team-wrapper .aot-avatar {
	width: var(--aot-avatar-size) !important;
	height: var(--aot-avatar-size) !important;
	max-width: var(--aot-avatar-size) !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
	background: #f3f4f6;
}

.aot-team-wrapper .aot-avatar-placeholder {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #fff !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Vertical accent line between the avatar and the text block,
   matching the reference card template */
.aot-team-wrapper .aot-info {
	flex: 1 !important;
	min-width: 0 !important;
	padding: 2px 0 2px 16px !important;
	margin: 0 !important;
	border-left: 3px solid var(--aot-color, #7c3aed) !important;
}

.aot-team-wrapper .aot-name {
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-size: 21px !important;
	line-height: 1.25 !important;
	font-weight: 800 !important;
	color: var(--aot-color, #7c3aed) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	word-break: break-word;
}

.aot-team-wrapper .aot-detail {
	margin: 0 0 4px !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	color: #8a8f98 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	word-break: break-word;
}

.aot-team-wrapper .aot-about {
	margin: 8px 0 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	color: #6b7280 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	word-break: break-word;
}

.aot-team-wrapper .aot-role {
	margin: 16px 0 0 calc(var(--aot-avatar-size) + var(--aot-gap) + 16px) !important;
	padding: 0 !important;
	font-size: 13px !important;
	color: #a1a6ad !important;
	text-transform: lowercase !important;
	letter-spacing: 0.2px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 680px) {
	.aot-team-wrapper .aot-grid {
		grid-template-columns: 1fr !important;
	}

	.aot-team-wrapper .aot-role {
		margin-left: 0 !important;
	}
}