/* Components: cards, block styles, people, news, tables (buttons: buttons.css). Part of the RUB Chair theme. */

/* -------------------------------------------------------------------------
 * 4d. Cards
 * ---------------------------------------------------------------------- */

.rub-card {
	background-color: var(--rub-light);
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: box-shadow var(--rub-transition), transform var(--rub-transition);
}

/* Cards that lead somewhere (news, projects, professorships, link cards) rise a little
   under the mouse. */
.rub-card:hover,
.rub-professorships > .wp-block-column:hover,
.is-style-rub-link-cards .wp-block-column:hover {
	box-shadow: var(--rub-shadow-hover);
}

/* The whole card leads to the post: the title's link stretches over it.
   It stays one link for keyboards and screen readers; the category label
   and "Read more" lie above it and keep their own targets. */
.rub-card {
	position: relative;
}

.rub-card .wp-block-post-title a::after {
	content: "";
	inset: 0;
	position: absolute;
}

/* WordPress positions constrained groups (the card's text part); then the
   link would only cover the text, not a tile without a linked picture. */
.rub-card .rub-card__body {
	position: static;
}

.rub-card :is(.rub-card__category a, .wp-block-post-excerpt__more-link) {
	position: relative;
	z-index: 1;
}

.rub-card:has(.wp-block-post-title a:focus-visible) {
	/* The library's focus: 2px RUB Blau, 4px outside the card. */
	outline: 2px solid var(--rub-accent-text);
	outline-offset: 4px;
}

.rub-card .wp-block-post-title a:hover {
	/* The whole card is the target and rises; the title stays as it is,
	   as in the RUB's teasers. */
	text-decoration: none;
}

.rub-card .wp-block-post-title a:focus-visible {
	outline: none;
}

/* The picture frame itself is 16:9, so every card's picture is equally high
   whatever size the image file has and however a browser treats the image's
   width and height attributes. */
.rub-card .wp-block-post-featured-image {
	aspect-ratio: 16 / 9;
	margin: 0 !important;
	overflow: hidden;
	/* Full card width: WordPress's automatic side margins would let the frame
	   shrink to the image's own size and centre it (Safari does). */
	width: 100%;
}

.rub-card .wp-block-post-featured-image :is(a, img) {
	display: block;
	height: 100%;
	width: 100%;
}

.rub-card .wp-block-post-featured-image img {
	object-fit: cover;
}

/* The light foot bar is the detail that makes the RUB service teasers
   recognisable. */
.rub-card::after {
	background-color: var(--rub-light);
	content: "";
	display: block;
	height: 6px;
	margin-top: auto;
}

.rub-card__body {
	padding: var(--wp--preset--spacing--30);
}

.rub-card__meta {
	align-items: baseline;
}

/* The category as a small label (“Dachzeile” of the RUB teasers). */
.rub-card__category {
	font-size: 0.8125rem;
}

.rub-card__category a {
	background-color: rgb(0 53 96 / 15%);
	border-radius: 4px;
	color: var(--rub-blue);
	display: inline-block;
	/* The RUB's label: UI H6 12/18 semi-bold, 26px high with its padding. */
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 18px;
	padding: 0.25rem 0.5rem;
	text-decoration: none;
}

.rub-card__category .wp-block-post-terms__separator {
	display: inline-block;
	width: 0.25rem;
	visibility: hidden;
}

.rub-card__category a:hover,
.rub-card__category a:focus {
	text-decoration: underline;
}

.rub-card__body > *:first-child {
	margin-top: 0;
}

/* 16px before the teaser text, as the library's teaser D. */
.rub-card__body > .wp-block-post-excerpt {
	margin-top: 1rem;
}

.rub-card__body > *:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.rub-card {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 4e. Rounded corners (--rub-radius, style.css) for every block-like element;
 *     :where() keeps the specificity low, so round portraits stay round.
 * ---------------------------------------------------------------------- */

:where(.wp-block-button__link, .wp-element-button, .rub-card, .rub-person-card,
	.is-style-rub-box, .is-style-rub-cards .wp-block-column, .is-style-rub-link-cards .wp-block-column, .is-style-rub-callout, .rub-callout, .is-style-rub-dark-band, .rub-to-top,
	.rub-content .wp-block-image:not(.is-style-rub-portrait) img) {
	border-radius: var(--rub-radius);
}

/* The picture on top of a card follows the card's corners. */
.rub-card {
	overflow: hidden;
}