/* Block style “Action area” (columns), the action area of the RUB web
   components (design/README.md): a picture beside a Hellblau box with
   heading, a short text and a button. A caption sits small on the picture's
   lower edge, as the RUB's “© name”.
   The picture keeps its own format, so a wide group photo shows everyone;
   only if the text beside it is taller than the picture is a little cut off
   at the sides – keep the text short. Part of the RUB Chair theme. */
.wp-block-columns.is-style-rub-action-area {
	background-color: var(--rub-light);
	border-radius: var(--rub-radius);
	gap: 0;
	overflow: hidden;
}

.is-style-rub-action-area > .wp-block-column:first-child .wp-block-image {
	height: 100%;
	margin: 0;
	position: relative;
}

/* A picture that is a link (“Picture leads to a page”) behaves as one without. */
.is-style-rub-action-area > .wp-block-column:first-child .wp-block-image > a {
	display: block;
	height: 100%;
}

.is-style-rub-action-area > .wp-block-column:first-child img {
	border-radius: 0;
	display: block;
	height: 100%;
	max-height: 32rem;
	object-fit: cover;
	width: 100%;
}

.rub-content .is-style-rub-action-area .wp-element-caption {
	background-color: rgb(255 255 255 / 85%);
	border-radius: 4px;
	bottom: 0.5rem;
	color: var(--rub-blue);
	font-size: 0.75rem;
	left: 0.5rem;
	margin: 0;
	padding: 0.1rem 0.4rem;
	position: absolute;
}

.is-style-rub-action-area > .wp-block-column:last-child {
	align-self: center;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--30);
}

.is-style-rub-action-area > .wp-block-column:last-child > :first-child {
	margin-top: 0;
}

/* 8px between heading and texts as in the library; the button keeps its
   distance (block gap). */
.is-style-rub-action-area > .wp-block-column:last-child > :is(p, h2, h3, h4) + :is(p, ul) {
	margin-top: 0.5rem;
}

/* Wide screens: picture (60%) and box (40%) side by side, whatever widths
   the columns were given in the editor; the picture fills the box's height. */
@media (min-width: 1100px) {
	.wp-block-columns.is-style-rub-action-area {
		flex-wrap: nowrap !important;
	}

	.is-style-rub-action-area > .wp-block-column:first-child {
		align-self: stretch !important;
		flex-basis: 60% !important;
	}

	.is-style-rub-action-area > .wp-block-column:last-child {
		flex-basis: 40% !important;
		/* 56px beside the picture, as the library's action area. */
		padding: 3.5rem;
	}
}

/* Narrower screens: the picture across the whole width on top, the box
   below; beside it there would be too little room. */
@media (max-width: 1099.98px) {
	.wp-block-columns.is-style-rub-action-area {
		flex-direction: column;
	}

	.is-style-rub-action-area > .wp-block-column {
		flex-basis: auto !important;
		width: 100%;
	}

	.is-style-rub-action-area > .wp-block-column:first-child img {
		height: auto;
	}
}