/* Page sections for front pages and overviews. Most are block styles an
   editor picks in the sidebar (Styles): “Cards”, “Light box”, “Wide banner”; the bands are in bands.css;
   the small ones are CSS classes (Advanced → Additional CSS class). */

/* Small label above a heading, e.g. “CHAIR HOLDER”. Class: rub-eyebrow.
   In RUB blue, as all text in the corporate design. */
.rub-eyebrow {
	color: var(--rub-accent-text);
	font-size: 0.875rem;
	font-weight: 600;
}

/* A heading right after the label sits close to it, as on the RUB's teasers –
   in cards as everywhere, without spacing set by hand in the editor. */
.rub-eyebrow:has(+ :is(h2, h3, h4)) {
	margin-bottom: var(--wp--preset--spacing--10);
}

.rub-content .rub-eyebrow + :is(h2, h3, h4) {
	margin-top: 0;
}

/* Larger line under the page title, e.g. who holds the chair. Class: rub-lead.
   The library's Subheadline: 24/36 from tablets up, 20/30 on phones. */
.rub-content .rub-lead {
	font-size: 1.25rem;
	line-height: 1.875rem;
}

@media (min-width: 768px) {
	.rub-content .rub-lead {
		font-size: 1.5rem;
		line-height: 2.25rem;
	}
}

.rub-lead .rub-eyebrow {
	display: block;
	margin-bottom: 0.15rem;
}

/* Quiet note with a lock, e.g. “password required”. Class: rub-lock-note. */
.rub-lock-note {
	color: var(--wp--preset--color--muted, #003560);
	margin-top: var(--wp--preset--spacing--20);
}

.rub-lock-note::before {
	background-color: currentColor;
	content: "";
	display: inline-block;
	height: 0.9em;
	mask: url("../icons/lock.svg") center / contain no-repeat;
	vertical-align: -0.1em;
	width: 0.9em;
	margin-right: 0.4em;
}

/* Block style “Light box” (group): the teaser of the RUB web components,
   Hellblau 50 without a frame. */
.is-style-rub-box {
	background-color: var(--rub-light);
	padding: var(--wp--preset--spacing--40);
}

/* Light boxes side by side are as high as the highest one. */
.is-style-rub-box {
	height: 100%;
}

/* Block style “Wide banner” (image): a wide strip, e.g. a group photo. */
.is-style-rub-wide img {
	aspect-ratio: 21 / 9;
	object-fit: cover;
	width: 100%;
}

/* A quiet pointer below a table or list: thin rule, one line, an arrow.
   Class: rub-more-link. The arrow has empty alternative text. */
.rub-more-link {
	border-top: 1px solid var(--rub-light);
	color: var(--wp--preset--color--muted, #003560);
	font-size: 0.9375rem;
	padding-top: var(--wp--preset--spacing--20);
}

.rub-more-link a {
	font-weight: 600;
	margin-left: 0.25rem;
	white-space: nowrap;
}

.rub-more-link a::after {
	background-color: currentColor;
	content: "";
	display: inline-block;
	height: 0.9em;
	mask: url("../icons/arrow-right.svg") center / contain no-repeat;
	vertical-align: -0.1em;
	width: 0.9em;
	margin-left: 0.25em;
}

/* Photo captions as the library's picture: Body Small 16/24, regular, in
   the text colour, 8px under the picture. */
.rub-content .wp-block-image .wp-element-caption {
	color: var(--wp--preset--color--contrast, #000d17);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5rem;
	margin-top: 0.5rem;
}