/* Front-end compatibility fixes for the editable Gutenberg homepage.
 * Keep the public layout pixel-compatible with the pre-migration template while
 * retaining native Image/Button/Group blocks in the WordPress editor. */

/* The old homepage used the story <img> itself as the first grid item. Gutenberg
 * wraps an Image block in <figure>; display:contents makes the image participate
 * in the existing three-column grid exactly like the original element. */
.bbb-home .bbb-home-grid > .bbb-story-image.wp-block-image {
	display: contents;
}

.bbb-home .bbb-home-grid > .bbb-story-image.wp-block-image > img {
	aspect-ratio: 4 / 3;
	border-radius: var(--bbb-radius-lg);
	display: block;
	height: 100%;
	max-width: 100%;
	min-width: 0;
	object-fit: cover;
	width: 100%;
}

/* The original teaser gallery had four direct image grid items. Remove only the
 * Gutenberg figure wrappers from layout so all four tracks are used as before. */
.bbb-home .bbb-teaser-gallery > .wp-block-image {
	display: contents;
}

.bbb-home .bbb-teaser-gallery > .wp-block-image > img {
	min-width: 0;
}

/* The pre-migration CTA used the gold button variant inside the green panel. */
.bbb-home .bbb-price-callout > .wp-block-buttons {
	flex: none;
	margin: 0;
}

.bbb-home .bbb-price-callout .bbb-block-button-primary .wp-block-button__link,
.bbb-home .bbb-price-callout .bbb-block-button-primary .wp-block-button__link:hover,
.bbb-home .bbb-price-callout .bbb-block-button-primary .wp-block-button__link:focus-visible {
	background: var(--bbb-gold);
	border-color: var(--bbb-gold);
	color: var(--bbb-charcoal);
}

/* Guard against block/global image rules accidentally collapsing the footer
 * wordmark after a theme/editor stylesheet refresh. The footer logo now carries
 * its production colours directly in the SVG, so do not recolour it with CSS. */
.bbb-site-footer .bbb-footer-brand img {
	display: block;
	filter: none;
	height: auto;
	max-width: 170px;
	opacity: 1;
	visibility: visible;
	width: 170px;
}