/**
 * FSRA Plugins – Team Explorer shortcode front-end styles
 * Colors use theme palette (--wp--preset--color--*) when available.
 */

.ra-team-explorer {
	display: block;
	margin: 1.5em 0;
}

.ra-team-explorer-empty {
	margin: 1em 0;
	color: var(--wp--preset--color--gray-mid, #666);
}

/* Grid layout */
.ra-team-explorer--grid {
	display: grid;
	gap: 1.5rem;
}

.ra-team-explorer--list .ra-team-card {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--gray-light, #e0e0e0);
}

.ra-team-explorer--list .ra-team-card:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Team card */
.ra-team-card {
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--gray-light, #e0e0e0);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.ra-team-card__logo {
	text-align: center;
	padding: 1rem;
	background: var(--wp--preset--color--gray-muted, #f8f8f8);
	border-bottom: 1px solid var(--wp--preset--color--gray-light, #eee);
}

.ra-team-card__logo img {
	max-width: 120px;
	height: auto;
	display: inline-block;
	vertical-align: middle;
}

.ra-team-card__body {
	padding: 1rem 1.25rem;
}

.ra-team-card__title {
	margin: 0 0 0.75em;
	font-size: 1.25rem;
	line-height: 1.3;
}

.ra-team-card__leader,
.ra-team-card__members {
	margin: 0.5em 0 0;
	font-size: 0.9rem;
}

.ra-team-card__label {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--gray-slate, #555);
	margin-bottom: 0.35em;
}

.ra-team-card__leader {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
}

.ra-team-card__leader-avatar,
.ra-team-card__member-avatar {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 50%;
	vertical-align: middle;
}

.ra-team-card__member-list {
	list-style: none;
	margin: 0.25em 0 0;
	padding: 0;
}

.ra-team-card__member {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0.35em 0;
}

.ra-team-card__member-avatar {
	flex-shrink: 0;
}

/* ==========================================================================
   Row layout: leaders row + members row (click to show members)
   ========================================================================== */

.ra-team-explorer--row {
	--ra-teal: var(--wp--preset--color--primary, #01cccb);
	--ra-teal-dark: var(--wp--preset--color--primary-dark, #029e9d);
	--ra-bg-pattern: color-mix(in srgb, var(--wp--preset--color--base, #fff) 3%, transparent);
	/* No fallback to black: background only when block Background is set in FSE */
	background-color: var(--ra-block-bg, transparent);
	padding: 2rem 1.5rem;
	margin: 1.5em 0;
	position: relative;
	overflow: hidden;
}

/* Optional subtle circuit-style pattern */
.ra-team-explorer--row::before {
	content: "";
	position: absolute;
	inset: 0;
	background-size: 24px 24px, 24px 24px, 40px 40px, 40px 40px;
	pointer-events: none;
}

.ra-team-explorer--row .ra-team-explorer__leaders,
.ra-team-explorer--row .ra-team-explorer__members-row {
	position: relative;
	z-index: 1;
}

/* Tab list: horizontal nav like reference (subteams-wrapper) */
.ra-team-explorer__leaders {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	list-style: none;
	margin: 0 0 0;
	padding: 0;
	border-bottom: 2px solid color-mix(in srgb, var(--ra-block-text, var(--wp--preset--color--base, #fff)) 15%, transparent);
}

.ra-team-explorer__leaders .nav-item {
	display: inline-flex;
}

.ra-team-explorer__team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 1.25rem;
	margin-bottom: -2px;
	background: transparent;
	border: 2px solid transparent;
	border-radius: 8px 8px 0 0;
	border-bottom-color: transparent;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
	/* Block color control: use --ra-block-text when set by block Text in FSE */
	color: var(--ra-block-text, var(--wp--preset--color--base, #fff));
	font: inherit;
	text-align: center;
	min-width: 120px;
}

.ra-team-explorer__team:hover {
	background: color-mix(in srgb, var(--ra-block-text, var(--wp--preset--color--base, #fff)) 6%, transparent);
}

.ra-team-explorer__team.is-selected,
.ra-team-explorer__team.active {
	background: color-mix(in srgb, var(--ra-block-text, var(--wp--preset--color--base, #fff)) 12%, transparent);
	border-color: var(--ra-teal);
	border-bottom-color: var(--ra-block-bg, transparent);
}

.ra-team-explorer__team-title {
	display: block;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.3;
}

.ra-team-explorer__person {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
}

.ra-team-explorer__person-photo {
	width: 128px;
	height: 128px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--ra-teal);
	background: color-mix(in srgb, var(--ra-block-text, var(--wp--preset--color--base, #fff)) 12%, transparent);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* Ensure avatar/featured image always fills the circle and is visible */
.ra-team-explorer__person-photo .ra-team-explorer__avatar,
.ra-team-explorer__person-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: absolute;
	inset: 0;
}

/* No image: same circle, visible placeholder so tab looks like others */
.ra-team-explorer__person-photo--placeholder {
	background: color-mix(in srgb, var(--ra-block-text, var(--wp--preset--color--base, #fff)) 8%, transparent);
}

.ra-team-explorer__person-name {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	background: var(--ra-teal);
	color: var(--ra-block-text, var(--wp--preset--color--base, #fff));
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.3;
	border-radius: 4px;
	white-space: nowrap;
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ra-team-explorer__person--no-leader .ra-team-explorer__person-name {
	background: color-mix(in srgb, var(--ra-block-text, var(--wp--preset--color--base, #fff)) 20%, transparent);
}

.ra-team-explorer__members-row {
	min-height: 100px;
}

.ra-team-explorer__members-panel {
	display: none;
	padding: 1rem 0;
}

.ra-team-explorer__members-panel.is-visible {
	display: block;
	background: color-mix(in srgb, var(--ra-block-text, var(--wp--preset--color--base, #fff)) 8%, transparent);
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	border: 1px solid color-mix(in srgb, var(--ra-teal) 30%, transparent);
}

.ra-team-explorer__members-panel[hidden] {
	display: none !important;
}

.ra-team-explorer__members-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem 1.5rem;
}

/* Horizontal scroll (slider-like) for many members, like reference */
.ra-team-explorer__members-slider {
	flex-wrap: nowrap;
	justify-content: flex-start;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-bottom: 0.5rem;
}

.ra-team-explorer__members-slider .ra-team-explorer__person {
	scroll-snap-align: start;
	flex-shrink: 0;
}

.ra-team-explorer__members-inner .ra-team-explorer__person-photo {
	/* Same size as leaders row (128px) */
	width: 128px;
	height: 128px;
}

.ra-team-explorer__members-empty {
	color: color-mix(in srgb, var(--ra-block-text, var(--wp--preset--color--base, #fff)) 50%, transparent);
	font-size: 0.9rem;
}

/* ==========================================================================
   Mobile: teams in grid, remain clickable (touch-friendly)
   ========================================================================== */

@media (max-width: 767px) {
	.ra-team-explorer--row .ra-team-explorer__leaders {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
		border-bottom: 2px solid color-mix(in srgb, var(--ra-block-text, var(--wp--preset--color--base, #fff)) 15%, transparent);
	}

	.ra-team-explorer--row .ra-team-explorer__leaders .nav-item {
		display: block;
	}

	.ra-team-explorer--row .ra-team-explorer__team {
		width: 100%;
		min-height: 44px;
		min-width: 0;
		padding: 0.75rem 0.5rem;
		touch-action: manipulation;
		-webkit-tap-highlight-color: color-mix(in srgb, var(--ra-teal) 20%, transparent);
	}

	.ra-team-explorer--row .ra-team-explorer__person-photo,
	.ra-team-explorer--row .ra-team-explorer__members-inner .ra-team-explorer__person-photo {
		width: 64px;
		height: 64px;
	}
}