/**
 * The picture header at the top of the front page: a pattern built from a
 * normal Cover block (patterns/picture-header.php), so editors can change
 * picture and text. The professorship cards: components-professorships.css.
 */

/* Block style “Picture header” (Cover block), as the hero of the RUB web
   components (design/README.md): the picture across the window, a Hellblau box on the content edge that overlaps its lower edge,
   heading and text in RUB Blau. Height and overlay of the block are set by
   the style, not in the block's settings. */
.wp-block-cover.is-style-rub-picture-header {
	--rub-hero-overlap: 5rem;
	--rub-hero-picture: 14rem;
	--rub-hero-under: 0px;

	align-items: flex-end;
	border-radius: 0;
	justify-content: flex-start;
	/* Out of the content column to the full window width; the constrained
	   layout of the page sets the margins with !important. */
	margin-inline: calc(50% - 50vw) !important;
	max-width: none !important;
	min-height: 0 !important;
	overflow: visible;
	/* Room for the picture above the box; the box starts at the content edge. */
	padding: calc(var(--rub-hero-picture) + var(--rub-hero-under)) max(1rem, calc(50vw - 50%)) 0;
}

/* First on the front page, the picture starts right under the header (no
   white strip): pulled up by the header and the space above the content, so
   the bar's rounded lower corners lie on the picture. */
.home .wp-block-post-content > .wp-block-cover.is-style-rub-picture-header:first-child {
	--rub-hero-under: calc(var(--rub-header-height) + 2 * var(--wp--preset--spacing--30));

	margin-top: calc(-1 * var(--rub-hero-under)) !important;
}

/* The picture fills the cover except the strip the box overlaps. */
.is-style-rub-picture-header .wp-block-cover__image-background {
	height: calc(100% - var(--rub-hero-overlap)) !important;
	inset: 0 0 auto !important;
}

.is-style-rub-picture-header .wp-block-cover__background {
	display: none;
}

.is-style-rub-picture-header .wp-block-cover__inner-container {
	background-color: var(--rub-light);
	border-radius: var(--rub-radius);
	box-sizing: border-box;
	color: var(--rub-blue);
	display: flex;
	flex-direction: column;
	/* 32px between heading, text and button, as the RUB's hero box. */
	gap: 2rem;
	margin: 0;
	max-width: 612px;
	padding: 40px;
	width: 100%;
}

.is-style-rub-picture-header .wp-block-cover__inner-container > * {
	color: var(--rub-blue);
	margin: 0 !important;
	max-width: none;
	text-align: left;
}

/* Headline 1 of the library's hero (sizes in style.css). */
.is-style-rub-picture-header h1 {
	font-size: var(--rub-h1-size);
	font-weight: 800;
	letter-spacing: -1.5px;
	line-height: var(--rub-h1-line);
}

.is-style-rub-picture-header .rub-picture-header__subtitle {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

@media (max-width: 781px) {
	.wp-block-cover.is-style-rub-picture-header {
		--rub-hero-overlap: 2.5rem;
		/* Phones: a tall picture above the box, as the RUB's mobile hero. */
		--rub-hero-picture: 18rem;
	}

	/* The RUB's mobile hero box: padding and gap 24px. */
	.is-style-rub-picture-header .wp-block-cover__inner-container {
		gap: 24px;
		padding: 24px;
	}
}