/* ==========================================================================
   Prestige Detailing — team cards (pd-team)
   Figma: 29:2479 (row of 4 × 343 × 480, gap 12) · hover card 29:2488.
   Rendered inside #wrap_all, so every rule is paired: ".pd-team .x" + "#top #wrap_all .pd-team .x".
   Self-contained: carries its own copy of pd-main-nav's shared tokens and the
   .pd-nav-t cap trim, so it never depends on the nav stylesheet being current.
   No !important, no margin/padding shorthands.
   ========================================================================== */

@property --pd-fb       { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --pd-nav-tt   { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pd-nav-tb   { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---------- Tokens ---------- */
.pd-team {
	/* Shared site tokens — same values as pd-main-nav */
	--pd-nav-font: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--pd-cap: 0.71875;
	--pd-asc: 0.966;
	--pd-desc: 0.286;

	--pd-team-ink: 22, 20, 20;              /* #161414 */
	--pd-team-tile: #242222;                /* empty photo tile (Figma mask rect) */
	--pd-team-red: #d60c0c;
	--pd-team-gap: 12px;
	--pd-team-ratio: 343 / 480;
	--pd-team-fade: 250px;                  /* gradient height, bottom-anchored */
	--pd-team-pad-x: 40px;
	--pd-team-pad-y: 48px;                  /* bio card: top to name cap, social row to bottom */
	--pd-team-cover-b: 40px;                /* photo card: role baseline to bottom */
	--pd-team-head-gap: 16px;               /* name cap box → role cap box */
	--pd-team-body-gap: 40px;               /* role → bio, and the minimum above the social row */
	--pd-team-name-fs: 22px;
	--pd-team-name-lh: 32px;
	--pd-team-sm-fs: 16px;
	--pd-team-sm-lh: 24px;
	--pd-team-dim: 0.72;
	--pd-team-btn: 44px;
	--pd-team-btn-gap: 8px;
	--pd-team-icon: 20px;
	--pd-team-line: rgba(22, 20, 20, 0.08);
	--pd-team-speed: 0.3s;

	/* Margins: inline --pd-team-mt / --pd-team-mb from the panel; the ramp only writes -now */
	--pd-team-mt-now: var(--pd-team-mt, 0px);
}

@media (max-width: 1199px) {
	.pd-team.pd-team--scale { --pd-team-mt-now: calc(var(--pd-team-mt, 0px) * 0.75); }
}
@media (max-width: 899px) {
	.pd-team.pd-team--scale { --pd-team-mt-now: calc(var(--pd-team-mt, 0px) * 0.6); }
}

/* ---------- Cap trim (text-box) with a metric fallback — same as pd-main-nav ---------- */
.pd-team .pd-nav-t,
#top #wrap_all .pd-team .pd-nav-t {
	display: block;
	--pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--fs)));
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs)));
	font-size: var(--fs);
	line-height: var(--lh);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-box: trim-both cap alphabetic;
	margin-top: calc(-1 * var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
}

@supports not ((text-box: trim-both cap alphabetic) or (text-box-trim: trim-both)) {
	.pd-team { --pd-fb: 1; }
}

/* ---------- Section + grid ---------- */
.pd-team,
#top #wrap_all .pd-team {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	container-type: inline-size;
	container-name: pd-team;
	margin-top: var(--pd-team-mt-f, var(--pd-team-mt-now));
	margin-bottom: var(--pd-team-mb, 0px);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	font-family: var(--pd-nav-font);
	font-style: normal;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.pd-team .pd-team__grid,
#top #wrap_all .pd-team .pd-team__grid {
	--pd-team-cols: 1;
	display: grid;
	grid-template-columns: repeat(var(--pd-team-cols), minmax(0, 1fr));
	gap: var(--pd-team-gap);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	list-style: none;
}

/* Columns follow (after the base grid rule, which they override at equal specificity) the SECTION's width, not the viewport (container queries), so four cards
   only sit side by side where each still fits its 4 social buttons (≥ 280px a card).
   1 below 580px, 2 from 580px, then the panel's choice: 3 from 900px, 4 from 1180px (4 → 2 → 1). */
@container pd-team (min-width: 580px) {
	.pd-team .pd-team__grid,
	#top #wrap_all .pd-team .pd-team__grid { --pd-team-cols: 2; }
}
@container pd-team (min-width: 900px) {
	.pd-team.pd-team--cols-3 .pd-team__grid,
	#top #wrap_all .pd-team.pd-team--cols-3 .pd-team__grid { --pd-team-cols: 3; }
}
@container pd-team (min-width: 1180px) {
	.pd-team.pd-team--cols-4 .pd-team__grid,
	#top #wrap_all .pd-team.pd-team--cols-4 .pd-team__grid { --pd-team-cols: 4; }
}

/* ---------- Card: one grid cell holding a ratio sizer, the photo, the cover text and the bio panel.
   The panel is always laid out (just transparent), so the card is max(ratio, bio) tall in BOTH
   states and nothing reflows on hover. ---------- */
.pd-team .pd-team__card,
#top #wrap_all .pd-team .pd-team__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	overflow: hidden;
	list-style: none;
	background-color: var(--pd-team-tile);
	outline: none;
}

.pd-team .pd-team__card::before,
#top #wrap_all .pd-team .pd-team__card::before {
	content: "";
	grid-area: 1 / 1;
	aspect-ratio: var(--pd-team-ratio);
}

.pd-team .pd-team__card:focus-visible,
#top #wrap_all .pd-team .pd-team__card:focus-visible {
	outline: 2px solid var(--pd-team-red);
	outline-offset: -2px;
}

/* Photo */
.pd-team .pd-team__media,
#top #wrap_all .pd-team .pd-team__media {
	position: relative;
	grid-area: 1 / 1;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	overflow: hidden;
	background-color: var(--pd-team-tile);
}

.pd-team .pd-team__media::after,
#top #wrap_all .pd-team .pd-team__media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--pd-team-fade);
	background-image: linear-gradient(180deg, rgba(var(--pd-team-ink), 0) 0%, rgb(var(--pd-team-ink)) 100%);
	pointer-events: none;
}

.pd-team .pd-team__img,
#top #wrap_all .pd-team .pd-team__img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	border-width: 0;
	border-style: none;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: 50% 50%;
}

.pd-team .pd-team__img--top,
#top #wrap_all .pd-team .pd-team__img--top { object-position: 50% 0%; }

.pd-team .pd-team__img--left,
#top #wrap_all .pd-team .pd-team__img--left { object-position: 0% 50%; }

.pd-team .pd-team__img--right,
#top #wrap_all .pd-team .pd-team__img--right { object-position: 100% 50%; }

/* Cover: name + role over the photo, anchored to the bottom */
.pd-team .pd-team__cover,
#top #wrap_all .pd-team .pd-team__cover {
	position: relative;
	grid-area: 1 / 1;
	align-self: end;
	display: flex;
	flex-direction: column;
	row-gap: var(--pd-team-head-gap);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: var(--pd-team-pad-x);
	padding-bottom: var(--pd-team-cover-b);
	padding-left: var(--pd-team-pad-x);
	padding-right: var(--pd-team-pad-x);
	transition: opacity var(--pd-team-speed) ease;
}

/* Bio panel */
.pd-team .pd-team__panel,
#top #wrap_all .pd-team .pd-team__panel {
	position: relative;
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	row-gap: var(--pd-team-body-gap);
	box-sizing: border-box;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: var(--pd-team-pad-y);
	padding-bottom: var(--pd-team-pad-y);
	padding-left: var(--pd-team-pad-x);
	padding-right: var(--pd-team-pad-x);
	background-color: #fff;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--pd-team-speed) ease;
}

.pd-team .pd-team__info,
.pd-team .pd-team__head,
#top #wrap_all .pd-team .pd-team__info,
#top #wrap_all .pd-team .pd-team__head {
	display: flex;
	flex-direction: column;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

.pd-team .pd-team__info,
#top #wrap_all .pd-team .pd-team__info { row-gap: var(--pd-team-body-gap); }

.pd-team .pd-team__head,
#top #wrap_all .pd-team .pd-team__head { row-gap: var(--pd-team-head-gap); }

/* ---------- Type ---------- */
.pd-team .pd-team__name,
.pd-team .pd-team__cname,
#top #wrap_all .pd-team .pd-team__name,
#top #wrap_all .pd-team .pd-team__cname {
	--fs: var(--pd-team-name-fs);
	--lh: var(--pd-team-name-lh);
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	font-family: var(--pd-nav-font);
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
	overflow-wrap: break-word;
}

.pd-team .pd-team__role,
.pd-team .pd-team__crole,
.pd-team .pd-team__bio,
#top #wrap_all .pd-team .pd-team__role,
#top #wrap_all .pd-team .pd-team__crole,
#top #wrap_all .pd-team .pd-team__bio {
	--fs: var(--pd-team-sm-fs);
	--lh: var(--pd-team-sm-lh);
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	font-family: var(--pd-nav-font);
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
	overflow-wrap: break-word;
}

.pd-team .pd-team__cname,
#top #wrap_all .pd-team .pd-team__cname { color: #fff; }

.pd-team .pd-team__crole,
#top #wrap_all .pd-team .pd-team__crole { color: rgba(255, 255, 255, var(--pd-team-dim)); }

.pd-team .pd-team__name,
.pd-team .pd-team__role,
#top #wrap_all .pd-team .pd-team__name,
#top #wrap_all .pd-team .pd-team__role { color: rgb(var(--pd-team-ink)); }

.pd-team .pd-team__bio,
#top #wrap_all .pd-team .pd-team__bio { color: rgba(var(--pd-team-ink), var(--pd-team-dim)); }

/* ---------- Social row ---------- */
.pd-team .pd-team__social,
#top #wrap_all .pd-team .pd-team__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pd-team-btn-gap);
	margin-top: auto;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	list-style: none;
}

.pd-team .pd-team__net,
#top #wrap_all .pd-team .pd-team__net {
	display: block;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	list-style: none;
}

/* The 1px line is an inset shadow: takes no space, and the hover drops it with no reflow (§7.5). */
.pd-team .pd-team__link,
#top #wrap_all .pd-team .pd-team__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--pd-team-btn);
	height: var(--pd-team-btn);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	border-width: 0;
	border-style: none;
	border-radius: 0;
	color: rgb(var(--pd-team-ink));
	background-color: #fff;
	box-shadow: inset 0 0 0 1px var(--pd-team-line);
	text-decoration: none;
	outline: none;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.pd-team .pd-team__link:hover,
.pd-team .pd-team__link:focus-visible,
#top #wrap_all .pd-team .pd-team__link:hover,
#top #wrap_all .pd-team .pd-team__link:focus-visible {
	color: #fff;
	background-color: var(--pd-team-red);
	box-shadow: inset 0 0 0 1px var(--pd-team-red);
	text-decoration: none;
}

.pd-team .pd-team__link:focus-visible,
#top #wrap_all .pd-team .pd-team__link:focus-visible {
	outline: 2px solid rgb(var(--pd-team-ink));
	outline-offset: 2px;
}

.pd-team .pd-team__svg,
#top #wrap_all .pd-team .pd-team__svg {
	display: block;
	flex: 0 0 auto;
	width: var(--pd-team-icon);
	height: var(--pd-team-icon);
}

/* ---------- Open state: hover (real pointers), tap (.is-open, set by the script), keyboard focus ---------- */
.pd-team .pd-team__card:is(.is-open, :focus-visible, :has(:focus-visible)) .pd-team__panel,
#top #wrap_all .pd-team .pd-team__card:is(.is-open, :focus-visible, :has(:focus-visible)) .pd-team__panel {
	opacity: 1;
	pointer-events: auto;
}

.pd-team .pd-team__card:is(.is-open, :focus-visible, :has(:focus-visible)) .pd-team__cover,
#top #wrap_all .pd-team .pd-team__card:is(.is-open, :focus-visible, :has(:focus-visible)) .pd-team__cover {
	opacity: 0;
}

@media (hover: hover) {
	.pd-team .pd-team__card:hover .pd-team__panel,
	#top #wrap_all .pd-team .pd-team__card:hover .pd-team__panel {
		opacity: 1;
		pointer-events: auto;
	}

	.pd-team .pd-team__card:hover .pd-team__cover,
	#top #wrap_all .pd-team .pd-team__card:hover .pd-team__cover {
		opacity: 0;
	}
}

@media (hover: none) {
	.pd-team .pd-team__card,
	#top #wrap_all .pd-team .pd-team__card {
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pd-team .pd-team__panel,
	.pd-team .pd-team__cover,
	.pd-team .pd-team__link,
	#top #wrap_all .pd-team .pd-team__panel,
	#top #wrap_all .pd-team .pd-team__cover,
	#top #wrap_all .pd-team .pd-team__link {
		transition-duration: 0s;
	}
}