/* Components, continued (components.css): people. Part of the RUB Chair theme. */

/* -------------------------------------------------------------------------
 * 6. Components
 * ---------------------------------------------------------------------- */

/* Person card: photo left, name and details right, on Hellblau like the
   other cards. */
.rub-person-card {
	background-color: var(--rub-light);
	padding: var(--wp--preset--spacing--40);
}

/* Photos of people (person cards, profile pages): square, with the rounded
   corners of the cards. */
.rub-person-card img,
.rub-profile-photo img {
	aspect-ratio: 1 / 1;
	border-radius: var(--rub-radius);
	object-fit: cover;
	width: 100%;
}

/* Block style "Round portrait", for other pictures (e.g. the Sun). */
.is-style-rub-portrait img {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	object-fit: cover;
	width: 100%;
}

/* On phones the column is full width: a smaller photo, so the name follows soon. */
@media (max-width: 781px) {
	.rub-profile-photo {
		max-width: 12rem;
	}
}

/* No photo on file: initials in the same place (inc/placeholders.php). */
.rub-portrait-placeholder {
	align-items: center;
	aspect-ratio: 1 / 1;
	background: var(--rub-light);
	border-radius: var(--rub-radius);
	color: var(--rub-blue);
	display: flex;
	font-size: clamp(2.5rem, 7vw, 4.5rem);
	font-weight: 600;
	justify-content: center;
	letter-spacing: 0.04em;
	margin: 0;
	user-select: none;
}

/* Not everyone has a portrait on file. An empty featured-image block would
   otherwise leave a blank column next to the name, so collapse it and let the
   details take the full width. Scoped to cards: on a profile page the same
   column also holds the contact details and must stay. */
.rub-person-card .rub-person-card__media:not(:has(img)) {
	display: none;
}

/* !important is needed here: the column block writes flex-basis as an inline
   style, which would otherwise leave a dead 22% gutter to the right of the
   details and make long names wrap for no reason. */
.rub-person-card .rub-person-card__media:not(:has(img)) + .wp-block-column {
	flex-basis: 100% !important;
}

.rub-person-card__name {
	margin-bottom: 0.25rem;
}