/*
 * Every colour and radius is a variable: another site re-skins the cards by
 * redefining these on :root, without touching the markup.
 */

:root {
	--ccc-navy: #17296A;
	--ccc-navy-dark: #142452;
	--ccc-accent: #0055FF;
	--ccc-text: #33395A;
	--ccc-muted: #6B6E7B;
	--ccc-card-bg: #FFFFFF;
	--ccc-soft-bg: #E0E3EA;
	--ccc-soft-text: #656E97;
	--ccc-line: #E6E8EF;
	--ccc-secondary-bg: #F1F4FB;
	--ccc-linkedin: #0A66C2;
	--ccc-radius: 10px;
	--ccc-radius-sm: 6px;
	--ccc-shadow: 0 2px 10px rgba(18, 34, 79, 0.06);
}

/* ------------------------------------------------------------------ photos */

.ccc-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Without this the photo stretches to the full height of the card row. */
	align-self: flex-start;
	overflow: hidden;
	border-radius: var(--ccc-radius-sm);
	background: var(--ccc-soft-bg);
}

/* !important: some themes (e.g. Twenty Twenty-One) put inline sizes on post thumbnails. */
.ccc-photo__img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center top;
}

/* SVG defaults to overflow:hidden, which shaves a pixel off the right and
   bottom edges of paths that touch the viewBox. */
.ccc-icon {
	overflow: visible;
}

.ccc-photo__initials {
	font-size: 2.8em;
	font-weight: 600;
	color: var(--ccc-soft-text);
	letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ buttons */

.ccc-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.85em 1.5em;
	border-radius: var(--ccc-radius-sm);
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

.ccc-btn .ccc-icon {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
}

.ccc-btn__arrow {
	font-size: 1.05em;
}

.ccc-btn--primary {
	background: var(--ccc-navy);
	color: #FFFFFF;
}

.ccc-btn--primary:hover {
	background: var(--ccc-accent);
	color: #FFFFFF;
}

.ccc-btn--secondary {
	background: var(--ccc-secondary-bg);
	color: var(--ccc-linkedin);
}

.ccc-btn--secondary:hover {
	background: var(--ccc-linkedin);
	color: #FFFFFF;
}

/* ------------------------------------------------------------ contact rows */

.ccc-contacts {
	margin: 0;
	padding: 0;
	font-size: 0.95em;
}

/* Two classes deep on purpose: themes style bare dt/dd and their default 40px
   indent would otherwise win over a single class selector. */
.ccc-contacts .ccc-contacts__label,
.ccc-contacts .ccc-contacts__value {
	margin: 0;
	padding: 0;
}

/* Centre, not baseline: the label is itself a flex box with an icon, and its
   baseline sits lower than the value's. */
.ccc-contacts__row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.3em 0.85em;
	padding: 0.85em 0;
	border-bottom: 1px solid var(--ccc-line);
}

.ccc-contacts__label {
	display: flex;
	align-items: center;
	gap: 0.7em;
	flex: 0 0 5.8em;
	margin: 0;
	font-weight: 500;
	color: var(--ccc-muted);
}

.ccc-contacts__icon {
	display: inline-flex;
	color: inherit;
}

.ccc-contacts__icon .ccc-icon {
	width: 1.15em;
	height: 1.15em;
}

/* Long addresses are cut with an ellipsis instead of wrapping, so every row
   stays one line high. The full value is in the title attribute. */
.ccc-contacts__value {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--ccc-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ccc-contacts__value a {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ccc-contacts__value a {
	color: var(--ccc-text);
	text-decoration: none;
}

.ccc-contacts__value a:hover {
	color: var(--ccc-accent);
	text-decoration: underline;
}

/* Equal columns keep both buttons the same width. */
.ccc-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
	gap: 0.9em;
	margin-top: 1.6em;
}

.ccc-actions .ccc-btn {
	justify-content: center;
}

/* --------------------------------------------------------------- profile */

/* Grid rather than flex: on a narrow card the same blocks are reordered so the
   buttons sit right under the name, visible without scrolling. */
.ccc-profile-wrap {
	container-type: inline-size;
}

.ccc-profile {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"photo"
		"identity"
		"actions"
		"bio"
		"contacts";
	align-content: start;
	row-gap: 1.6em;
	padding: 2.2em;
	border-radius: var(--ccc-radius);
	background: var(--ccc-card-bg);
	box-shadow: var(--ccc-shadow);
}

.ccc-profile__photo {
	grid-area: photo;
	width: 100%;
	max-width: 260px;
	aspect-ratio: 3 / 4;
}

.ccc-profile__identity {
	grid-area: identity;
	min-width: 0;
}

.ccc-profile__name {
	margin: 0 0 0.2em;
	font-size: 1.75em;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ccc-navy-dark);
}

.ccc-profile__job {
	margin: 0;
	font-size: 1.05em;
	font-weight: 500;
	color: var(--ccc-muted);
}

.ccc-profile__bio {
	grid-area: bio;
	min-width: 0;
	color: var(--ccc-muted);
	line-height: 1.6;
}

.ccc-profile__bio p:last-child {
	margin-bottom: 0;
}

.ccc-profile__contacts {
	grid-area: contacts;
	min-width: 0;
	padding-top: 1.6em;
	border-top: 1px solid var(--ccc-line);
}

.ccc-profile__actions {
	grid-area: actions;
	min-width: 0;
	margin-top: 0;
}

/* Two gates, both must pass. The container check keeps a narrow card (a theme
   sidebar can leave one on a wide screen) in a single column. The viewport check
   stops the layout flipping back to columns when a sidebar disappears at the
   theme's own breakpoint and the card suddenly gets wider. */
@media (min-width: 1321px) {
@container (min-width: 860px) {
	.ccc-profile {
		/* 0.45 / 0.55 keeps the original 340px / 420px proportion between the
		   text column and the contacts column at any card width. */
		grid-template-columns: 240px minmax(0, 0.45fr) minmax(0, 0.55fr);
		grid-template-areas:
			"photo identity contacts"
			"photo bio      contacts"
			"photo bio      actions";
		column-gap: 2.2em;
		row-gap: 0;
	}

	.ccc-profile__photo {
		width: 240px;
		max-width: none;
	}

	.ccc-profile__job {
		margin-bottom: 1em;
	}

	.ccc-profile__contacts {
		padding-top: 0;
		padding-left: 2.2em;
		border-top: 0;
		border-left: 1px solid var(--ccc-line);
	}

	/* Padding, not margin: a margin here would break the dividing line in two. */
	.ccc-profile__actions {
		padding-top: 1.6em;
		padding-left: 2.2em;
		border-left: 1px solid var(--ccc-line);
	}
}
}

/* ----------------------------------------------------------------- about */

.ccc-about {
	margin-top: 1.6em;
	padding: 2.2em;
	border-radius: var(--ccc-radius);
	background: var(--ccc-card-bg);
	box-shadow: var(--ccc-shadow);
}

.ccc-about__title {
	margin: 0 0 0.7em;
	font-size: 1.5em;
	font-weight: 700;
	color: var(--ccc-navy-dark);
}

.ccc-about__text {
	color: var(--ccc-muted);
	line-height: 1.7;
}

.ccc-about__text p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------ team listing */

.ccc-team {
	container-type: inline-size;
}

.ccc-team__group + .ccc-team__group {
	margin-top: 2.6em;
}

.ccc-team__group-title {
	display: flex;
	align-items: center;
	gap: 1em;
	margin: 0 0 1.4em;
	font-size: 1.8em;
	font-weight: 700;
	color: var(--ccc-navy-dark);
}

/* The rule that runs from the heading to the edge of the row. */
.ccc-team__group-title::after {
	content: "";
	flex: 1 1 auto;
	height: 3px;
	background: var(--ccc-navy-dark);
}

.ccc-team__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5em;
}

.ccc-member {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
	padding: 1.5em;
	border-radius: var(--ccc-radius);
	background: var(--ccc-card-bg);
	box-shadow: var(--ccc-shadow);
}

.ccc-member__photo {
	flex: 0 0 auto;
	width: 130px;
	aspect-ratio: 3 / 4;
}

.ccc-member__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.ccc-member__name {
	margin: 0 0 0.2em;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.25;
}

.ccc-member__name a {
	color: var(--ccc-navy-dark);
	text-decoration: none;
}

.ccc-member__name a:hover {
	color: var(--ccc-accent);
}

.ccc-member__job {
	margin: 0;
	font-weight: 500;
	color: var(--ccc-muted);
}

.ccc-member__rule {
	display: block;
	width: 2.2em;
	height: 1px;
	margin: 1em 0;
	background: var(--ccc-line);
}

/* Clamped so cards in a row keep the same height whatever the text length. */
.ccc-member__bio {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Margin, not padding: padding would enlarge the clamped box and let the
	   next line show through underneath. */
	margin-bottom: 1em;
	color: var(--ccc-muted);
	line-height: 1.55;
}

.ccc-member__bio p:last-child {
	margin-bottom: 0;
}

.ccc-member__link.ccc-btn {
	align-self: flex-start;
	margin-top: auto;
	padding: 0.7em 1.3em;
}

/* Photo beside the text once the card is wide enough for both. */
@container (min-width: 520px) {
	.ccc-member {
		flex-direction: row;
	}

	.ccc-member__photo {
		width: 225px;
	}

	/* Matches the photo height, so every card is the same height and the buttons
	   line up no matter how much text each person has. */
	.ccc-member__body {
		min-height: 300px;
	}
}

@container (min-width: 1120px) {
	.ccc-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------- fallback */

.ccc-card {
	padding: 0;
}

.ccc-card__notice {
	margin: 0;
	color: var(--ccc-muted);
}

/* ------------------------------------------------------------- responsive */

/* On a phone the buttons go one under another rather than side by side. */
@media (max-width: 630px) {
	.ccc-actions {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.ccc-profile,
	.ccc-about {
		padding: 1.4em;
	}

	/* Icons alone are clear enough on a phone; the labels only cost width. */
	.ccc-contacts__text {
		display: none;
	}

	.ccc-contacts__row {
		align-items: center;
		column-gap: 0.65em;
	}

	.ccc-contacts__label {
		flex: 0 0 auto;
		gap: 0;
	}

	.ccc-contacts__value {
		flex: 1 1 auto;
	}
}