/**
 * Front-end styles for the City Line Capital Team Members plugin.
 *
 * The grid, card, headshot, name, and title all reuse the child theme's design
 * system (clc.css: .clc-grid-4, .clc-team-card, .clc-headshot, .clc-team-name,
 * .clc-team-title), so the [clc_team] shortcode renders pixel-identical to the
 * cards the team pages previously hard-coded. This file adds only what the
 * plugin introduces: the clickable-card affordance, the profile <dialog>
 * pop-up, and the contact rows inside it. Falls back to the brand hex values
 * when the theme's custom properties are unavailable.
 *
 * @package CityLineTeam
 */

/* -------------------------------------------------------------------------
 * Clickable cards (members that have profile details).
 * ------------------------------------------------------------------------- */
.clc-team-card--link {
	cursor: pointer;
}

.clc-team-card--link:focus-visible {
	outline: 2px solid var(--clc-copper-500, #EE7D22);
	outline-offset: 4px;
}

/* Lock page scroll while a profile dialog is open (toggled by team.js). */
html.clt-dialog-open {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Profile dialog.
 *
 * The <dialog> element itself is a transparent shell: the visible panel is
 * .clc-team-dialog__inner, so a click that lands on the dialog element itself
 * can only have come from the ::backdrop area (team.js uses that to close).
 * ------------------------------------------------------------------------- */
.clc-team-dialog {
	width: min(860px, calc(100vw - 2.5rem));
	max-height: min(86vh, 100%);
	padding: 0;
	border: 0;
	margin: auto;
	background: transparent;
	overflow: visible;
}

.clc-team-dialog::backdrop {
	background: rgba(16, 20, 43, 0.78);
}

.clc-team-dialog__inner {
	position: relative;
	max-height: 86vh;
	overflow-y: auto;
	background: var(--clc-paper, #F6F5F2);
	clip-path: polygon(var(--clc-notch, 56px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--clc-notch, 56px));
	padding: clamp(1.75rem, 4.5vw, 3rem);
}

.clc-team-dialog__close {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--clc-ink, #1B213D);
	cursor: pointer;
	transition: color 0.25s ease;
}

.clc-team-dialog__close svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.clc-team-dialog__close:hover {
	color: var(--clc-copper-600, #D96C10);
}

.clc-team-dialog__close:focus-visible {
	outline: 2px solid var(--clc-copper-500, #EE7D22);
	outline-offset: 2px;
}

.clc-team-dialog__grid {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	gap: clamp(1.5rem, 3.5vw, 2.5rem);
	align-items: start;
}

/* Reuses .clc-headshot for the notched crop + gradient backing; the card
   hover zoom doesn't apply here (it's scoped to .clc-team-card:hover). */
.clc-team-dialog__photo {
	margin-bottom: 0;
}

.clc-team-dialog__name {
	font-size: clamp(1.35rem, 2.4vw, 1.6rem);
	margin: 0;
}

.clc-team-dialog__bio {
	margin-top: 1.05rem;
	color: var(--clc-body, #444B60);
	font-size: 0.95rem;
	line-height: 1.7;
}

.clc-team-dialog__bio p {
	margin: 0;
}

.clc-team-dialog__bio p + p {
	margin-top: 0.75em;
}

/* Stack the photo above the text on small screens. */
@media (max-width: 700px) {
	.clc-team-dialog__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.clc-team-dialog__photo {
		width: min(240px, 62%);
	}
}

/* -------------------------------------------------------------------------
 * Contact rows (inside the dialog).
 * ------------------------------------------------------------------------- */
.clc-team-contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.45rem;
	margin-top: 1.15rem;
}

.clc-team-contact__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	font-size: 0.88rem;
	line-height: 1.35;
	color: var(--clc-steel-500, #42718B);
	text-decoration: none;
	word-break: break-word;
	transition: color 0.25s ease;
}

.clc-team-contact__item svg {
	width: 15px;
	height: 15px;
	flex: none;
	fill: currentColor;
}

.clc-team-contact__item:hover {
	color: var(--clc-copper-600, #D96C10);
}

/* -------------------------------------------------------------------------
 * Entry animation (skipped for reduced-motion users).
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.clc-team-dialog[open] {
		animation: clt-dialog-in 0.45s var(--clc-ease, cubic-bezier(0.22, 1, 0.36, 1));
	}

	.clc-team-dialog[open]::backdrop {
		animation: clt-backdrop-in 0.45s ease;
	}
}

@keyframes clt-dialog-in {
	from {
		opacity: 0;
		transform: translateY(26px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes clt-backdrop-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}