/**
 * Recordsure People route presentation.
 *
 * Styles the virtual Meet the team route the People bridge renders on
 * Recordsure: the unavailable notice and the bridge's own directory. That
 * directory shows only while no Recordsure Meet the team page is published;
 * the guided page otherwise replaces it with the rs-team markup that
 * recordsure.css styles, so nothing here touches it. A person has no page of
 * their own: every former profile address redirects to the directory. The
 * bridge enqueues this file only on that route, and only because the theme
 * ships it.
 *
 * Every colour, size, radius and shadow comes from a theme.json preset or
 * custom property, and every colour pair is one the recordsure-brand contrast
 * matrix measures. Nothing here moves.
 */

/* ─── Page shell ───────────────────────────────────────────────────────── */
/* The bridge prints its own main landmark without the theme's layout
   classes. Each block it renders therefore carries the container every
   Recordsure band uses: the wide layout width, centred, including the band
   gutter that the theme stylesheet steps at 40rem and 64rem. */
.tcc-people-main > .tcc-people-notice,
.tcc-people-directory__header,
.tcc-people-directory__grid {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--rs-gutter);
}

/* The page template's vertical rhythm. */
.tcc-people-main > .tcc-people-notice {
	padding-block: var(--wp--preset--spacing--16) var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--rs-slate);
}

/* ─── Links ────────────────────────────────────────────────────────────── */
/* The light-surface tertiary link states from the brand contract, which the
   theme also gives prose links inside its own main landmark. */
.tcc-people-main > .tcc-people-notice a {
	color: var(--wp--preset--color--rs-blue-accessible);
	text-decoration-line: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.tcc-people-main > .tcc-people-notice a:visited {
	color: var(--wp--preset--color--rs-navy-mid);
}

.tcc-people-main > .tcc-people-notice a:hover {
	color: var(--wp--preset--color--rs-blue-strong);
}

.tcc-people-main > .tcc-people-notice a:active {
	color: var(--wp--preset--color--rs-navy-deep);
}

.tcc-people-main > .tcc-people-notice a:focus-visible,
.tcc-people-card a:focus-visible {
	outline: 2px solid var(--wp--preset--color--rs-blue-accessible);
	outline-offset: 2px;
}

/* ─── Unavailable notice ───────────────────────────────────────────────── */
.tcc-people-main > .tcc-people-notice h1,
.tcc-people-directory__header h1 {
	min-width: 0;
	margin: 0;
	color: var(--wp--preset--color--rs-navy-deep);
	font-size: var(--wp--preset--font-size--xxxl);
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* The route has no Figma page, so its titles step like the Figma's policy
   title: 36px, then 48px from 64rem. */
@media (min-width: 64rem) {

	.tcc-people-main > .tcc-people-notice h1,
	.tcc-people-directory__header h1 {
		font-size: var(--wp--preset--font-size--display);
	}
}

.tcc-people-main > .tcc-people-notice p,
.tcc-people-directory__grid > .tcc-people-notice {
	max-width: var(--wp--style--global--content-size);
	color: var(--wp--preset--color--rs-slate);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.7;
}

.tcc-people-main > .tcc-people-notice p {
	margin: var(--wp--preset--spacing--4) 0 0;
}

/* ─── Bridge directory ─────────────────────────────────────────────────── */
/* Shown only while no Recordsure Meet the team page is published. Its cards
   follow the Recordsure team cards. */
.tcc-people-directory__header {
	padding-block: var(--wp--preset--spacing--16) var(--wp--preset--spacing--10);
}

.tcc-people-directory__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--wp--preset--spacing--6);
	padding-block-end: var(--wp--preset--spacing--20);
}

.tcc-people-directory__grid > .tcc-people-notice {
	grid-column: 1 / -1;
	margin: 0;
}

.tcc-people-card {
	display: flex;
	gap: var(--wp--preset--spacing--4);
	align-items: flex-start;
	box-sizing: border-box;
	height: 100%;
	min-width: 0;
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--rs-border);
	border-radius: var(--wp--custom--recordsure--radius--card);
	background: var(--wp--preset--color--rs-white);
	color: var(--wp--preset--color--rs-slate);
	box-shadow: var(--wp--preset--shadow--rs-card);
}

.tcc-people-card__media {
	flex: 0 0 var(--wp--preset--spacing--20);
	width: var(--wp--preset--spacing--20);
}

.tcc-people-card__portrait {
	display: block;
	box-sizing: border-box;
	width: var(--wp--preset--spacing--20);
	height: var(--wp--preset--spacing--20);
	border-radius: 50%;
	background: var(--wp--preset--color--rs-blue-light);
	color: var(--wp--preset--color--rs-navy-deep);
	object-fit: cover;
}

/* The initials stand in for a portrait that has not been supplied yet. */
.tcc-people-card__portrait--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 800;
}

.tcc-people-card__body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	overflow-wrap: anywhere;
}

.tcc-people-card__name {
	max-width: 100%;
	margin: 0;
	color: var(--wp--preset--color--rs-navy);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.4;
}

.tcc-people-card__title {
	max-width: 100%;
	margin: var(--wp--preset--spacing--2) 0 0;
	color: var(--wp--preset--color--rs-blue-strong);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.625;
}

.tcc-people-card__summary {
	max-width: 100%;
	margin: var(--wp--preset--spacing--3) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.625;
}

/* The LinkedIn link has no text of its own; its accessible name is its
   label, and the glyph is a mask painted in the link colour, so it survives
   content sanitisation. The target is 44px square. */
.tcc-people-card__linkedin {
	--rs-people-linkedin-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.94 5.5a2.44 2.44 0 1 1-4.88 0 2.44 2.44 0 0 1 4.88 0ZM2.4 21.5h4.2V8.9H2.4v12.6Zm7.3-12.6h4v1.72h.06a4.42 4.42 0 0 1 3.97-2.18c4.25 0 5.03 2.8 5.03 6.43v6.63h-4.2v-5.88c0-1.4-.02-3.2-1.95-3.2-1.96 0-2.26 1.53-2.26 3.1v5.98H9.7V8.9Z'/%3E%3C/svg%3E");
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin-block-start: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--rs-blue-accessible);
}

.tcc-people-card__linkedin::before {
	content: "";
	display: block;
	inline-size: var(--wp--preset--spacing--6);
	block-size: var(--wp--preset--spacing--6);
	background-color: currentcolor;
	-webkit-mask: var(--rs-people-linkedin-glyph) no-repeat center / contain;
	mask: var(--rs-people-linkedin-glyph) no-repeat center / contain;
}

.tcc-people-card__linkedin:visited {
	color: var(--wp--preset--color--rs-navy-mid);
}

.tcc-people-card__linkedin:hover {
	color: var(--wp--preset--color--rs-blue-strong);
}

.tcc-people-card__linkedin:active {
	color: var(--wp--preset--color--rs-navy-deep);
}

/* Forced colours drop the background the glyph is painted with. */
@media (forced-colors: active) {

	.tcc-people-card__linkedin::before {
		background-color: LinkText;
		forced-color-adjust: none;
	}
}

/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 40rem) {

	.tcc-people-card {
		flex-direction: column;
	}
}