/**
 * Professorship cards on the front page (patterns/professorships.php): one
 * card per professorship, built from normal blocks, so editors can change
 * everything; the contact lines come from the person entry.
 */

/* Hellblau teasers, not the white “Cards” (sections.css loads later). */
.rub-professorships.is-style-rub-cards > .wp-block-column {
	background-color: var(--rub-light);
	border-color: transparent;
}

/* Professorship cards (columns with the style “Cards”): photo on the left;
   name, text, contact and button on the right. Contact and button sit at the
   bottom, so cards with texts of different length still line up. */
.rub-professorships > .wp-block-column {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: var(--wp--preset--spacing--30);
}

.rub-professorships .wp-block-image {
	margin: 0;
}

.rub-professorships .wp-block-image img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--rub-radius);
}

.rub-professorship__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	height: 100%;
}

.rub-professorship__text > * {
	margin: 0;
}

.rub-professorships h3 {
	font-size: var(--wp--preset--font-size--large);
}

.rub-professorship__name {
	font-weight: 600;
}

.rub-professorship__text .rub-person-details {
	margin-top: auto;
	font-size: var(--wp--preset--font-size--small);
}

/* Side by side, the cards share one grid of rows (subgrid): name of the
   professorship, professor, text, contact and button stand level in both
   cards, whatever the length of each text. */
@media (min-width: 782px) {
	.wp-block-columns.rub-professorships {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(5, auto);
		row-gap: 0.5rem;
	}

	.rub-professorships > .wp-block-column {
		grid-row: span 5;
		grid-template-rows: subgrid;
	}

	.rub-professorships > .wp-block-column > .wp-block-image,
	.rub-professorship__text {
		grid-row: 1 / -1;
	}

	.rub-professorship__text {
		display: grid;
		grid-template-rows: subgrid;
	}

	/* The grid keeps contact lines level; they start at the top of their row. */
	.rub-professorship__text .rub-person-details {
		margin-top: 0;
	}
}

@media (max-width: 781px) {
	/* Narrow screens: photo above the text, so the text has the whole width. */
	.rub-professorships > .wp-block-column {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.rub-professorships .wp-block-image img {
		width: 6rem;
	}
}

/* A click anywhere on a card leads where its button leads: the button's link
   stretches over the card. Still one link for screen readers and keyboards;
   e-mail and phone links stay clickable above it. Under the mouse the card
   rises like the news cards (components.css). */

.rub-professorships > .wp-block-column {
	position: relative;
	transition: box-shadow var(--rub-transition);
}

.rub-professorships .wp-block-button:first-of-type .wp-block-button__link::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.rub-professorships a:not(.wp-block-button__link) {
	position: relative;
	z-index: 2;
}