/**
 * Team cards (opt-in convention: lp-team-card, paired with team-cards.js).
 *
 * A group with the `lp-team-card` class becomes an interactive member card:
 * a hover/focus wash, and on click a native <dialog> lightbox built from the
 * card's own content — photo, name, role, and its hidden `lp-team-card__bio`
 * paragraph. Without JS the card is inert and the bio simply stays hidden;
 * name and role remain visible in the grid.
 */

.lp-team-card {
	border-radius: 14px;
	padding: 0.875rem 0.875rem 1.125rem;
	transition: background-color 0.15s ease;
	cursor: pointer;
}

.lp-team-card:hover,
.lp-team-card:focus-visible {
	background-color: var(--wp--preset--color--primary-light);
	outline: none;
}

.lp-team-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.lp-team-card .lp-team-card__bio {
	display: none;
}

/* ── Lightbox dialog (built by team-cards.js) ── */
dialog.lp-team-dialog {
	border: none;
	border-radius: 24px;
	padding: 0;
	max-width: min(960px, calc(100vw - 2rem));
	box-shadow: var(--wp--preset--shadow--console);
	background: var(--wp--preset--color--base);
}

dialog.lp-team-dialog::backdrop {
	background: rgba(1, 51, 114, 0.6);
}

.lp-team-dialog__inner {
	padding: 3rem;
	display: grid;
	gap: 0.5rem;
}

/* Photo top-left, text to its right (stacks again on small screens). */
@media (min-width: 600px) {
	.lp-team-dialog__inner {
		grid-template-columns: 160px minmax(0, 1fr);
		column-gap: 1.75rem;
		align-items: start;
	}

	.lp-team-dialog__photo {
		grid-column: 1;
		grid-row: 1 / span 4;
	}

	.lp-team-dialog__name,
	.lp-team-dialog__role,
	.lp-team-dialog__bio {
		grid-column: 2;
	}
}

.lp-team-dialog__photo {
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: 999px;
	margin-bottom: 0.75rem;
}

.lp-team-dialog__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.lp-team-dialog__role {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
}

.lp-team-dialog__bio {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--muted);
	line-height: 1.7;
}

.lp-team-dialog__close {
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	width: 2.25rem;
	height: 2.25rem;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--primary-dark);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.lp-team-dialog__close:hover,
.lp-team-dialog__close:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: reduce) {
	.lp-team-card {
		transition: none;
	}
}