/* Bands across a page, block styles of the group block an editor picks in
   the sidebar (Styles): “Dark band” and “Light band”. Part of the RUB
   Chair theme. */

/* Block style “Dark band” (group): navy band with white text, e.g. a
   project or dashboard teaser. Hellblau text only here (5.6:1). */
.is-style-rub-dark-band {
	background-color: var(--rub-blue);
	color: #fff;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.is-style-rub-dark-band h2,
.is-style-rub-dark-band h3 {
	color: #fff;
}

.is-style-rub-dark-band .wp-block-image {
	margin: 0;
}

/* On phones the columns stack; a round picture (the Sun) would fill the whole
   width, so it stays small there. */
@media (max-width: 781.98px) {
	.is-style-rub-dark-band .wp-block-image.is-style-rub-portrait {
		margin-inline: auto;
		max-width: 8rem;
	}
}

/* The general caption rule is more specific and would paint grey on navy. */
.rub-content .is-style-rub-dark-band .wp-block-image .wp-element-caption {
	color: #c9d3e0;
	font-size: 0.875rem;
	text-align: center;
}

/* A navy button would vanish on navy: invert it. */
.is-style-rub-dark-band .wp-block-button__link {
	background-color: #fff;
	color: var(--rub-blue);
}

.is-style-rub-dark-band .wp-block-button__link:hover,
.is-style-rub-dark-band .wp-block-button__link:focus {
	background-color: var(--rub-accent);
	color: var(--rub-blue);
}

.is-style-rub-dark-band :where(a, button, [tabindex]):focus-visible {
	outline-color: var(--rub-accent);
}

.is-style-rub-dark-band .rub-eyebrow {
	color: var(--rub-accent);
}

.is-style-rub-dark-band .rub-lock-note {
	color: #cfd8e4;
}

/* Block style “Light band” (group): a Hellblau band across the whole window,
   e.g. behind the news on the front page. Its content keeps the width of the
   page; cards in it turn white, so they stand out from the band. */
.is-style-rub-light-band {
	background-color: var(--rub-light);
	margin-inline: calc(50% - 50vw) !important;
	max-width: none !important;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30) !important;
}

.is-style-rub-light-band :is(.rub-card, .is-style-rub-box, .is-style-rub-cards .wp-block-column, .is-style-rub-link-cards .wp-block-column, .rub-link-area) {
	background-color: #fff;
	border-color: transparent;
	box-shadow: var(--rub-shadow);
}