/* Compatibility layer for the native Gutenberg versions of the five main pages. */

/* Core/Post Content adds a layout wrapper. These pages already own their layout,
 * so make that neutral wrapper transparent to CSS layout on the front end. */
.bbb-home > .wp-block-post-content,
.bbb-booking-page > .wp-block-post-content,
.bbb-gallery-page > .wp-block-post-content,
.bbb-program-page > .wp-block-post-content,
.bbb-contact-page > .wp-block-post-content {
	display: contents;
}

.bbb-editable-section.wp-block-group,
.bbb-editable-section.wp-block-buttons {
	margin-block-start: 0;
}

.bbb-block-button-primary .wp-block-button__link,
.bbb-map-block-button .wp-block-button__link {
	align-items: center;
	background: var(--bbb-forest);
	border: 1px solid var(--bbb-forest);
	border-radius: 12px;
	color: white;
	display: inline-flex;
	font-weight: 700;
	justify-content: center;
	min-height: 46px;
	padding: .75rem 1.4rem;
	text-decoration: none;
	transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.bbb-block-button-primary .wp-block-button__link:hover,
.bbb-map-block-button .wp-block-button__link:hover {
	background: var(--bbb-forest-dark);
	color: white;
	transform: translateY(-1px);
}

.bbb-block-button-outline-light .wp-block-button__link {
	align-items: center;
	background: transparent;
	border: 1px solid rgb(255 255 255 / 70%);
	border-radius: 12px;
	color: white;
	display: inline-flex;
	font-weight: 700;
	justify-content: center;
	min-height: 46px;
	padding: .75rem 1.4rem;
	text-decoration: none;
}

.bbb-block-button-outline-light .wp-block-button__link:hover {
	background: white;
	color: var(--bbb-forest);
}

.bbb-text-link-block {
	margin-bottom: 0;
}

.bbb-text-link-block a {
	color: var(--bbb-forest);
	font-weight: 700;
	text-decoration: none;
}

.bbb-text-link-block a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Facts use paragraph blocks as the editable grid cells. Gutenberg's flow
 * layout adds margin-top to every child Group after the first one; clear that
 * margin so all four facts share the exact same baseline as the original
 * direct-markup version. Keep the original typography/line-height from app.css. */
.bbb-facts > .wp-block-group {
	align-self: stretch;
	margin-block-end: 0 !important;
	margin-block-start: 0 !important;
	row-gap: 0;
}

.bbb-facts > .wp-block-group > p {
	margin-block-end: 0 !important;
	margin-block-start: 0 !important;
}

.bbb-facts > .wp-block-group > p:has(strong),
.bbb-facts > .wp-block-group > p:has(small) {
	align-self: center;
}

/* The image block introduces a figure wrapper; keep the old image treatment. */
.bbb-story-image {
	margin: 0;
	overflow: hidden;
}

.bbb-story-image img {
	border-radius: inherit;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.bbb-teaser-gallery .wp-block-image {
	margin: 0;
}

.bbb-teaser-gallery .wp-block-image img {
	width: 100%;
}

/* Native editable program cards replace the old all-in-one anchor cards. */
.bbb-program-teaser-grid .bbb-program-card {
	background: var(--bbb-surface);
	border: 1px solid var(--bbb-border);
	border-radius: var(--bbb-radius);
	display: grid;
	gap: .3rem;
	grid-template-columns: 48px 1fr;
	padding: 1.4rem;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.bbb-program-teaser-grid .bbb-program-card:hover {
	box-shadow: var(--bbb-shadow);
	transform: translateY(-3px);
}

.bbb-program-card > * {
	margin: 0;
}

.bbb-program-card .bbb-program-index {
	align-items: center;
	background: var(--bbb-forest);
	border-radius: 50%;
	color: var(--bbb-gold);
	display: flex;
	font-weight: 800;
	grid-row: span 2;
	height: 42px;
	justify-content: center;
	width: 42px;
}

.bbb-program-card h3 {
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0;
}

.bbb-program-teaser-grid .bbb-program-card h3 a {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--bbb-forest);
	display: inline;
	font-family: var(--bbb-display);
	font-size: inherit;
	font-weight: inherit;
	padding: 0;
	text-decoration: none;
	transform: none;
}

.bbb-program-teaser-grid .bbb-program-card h3 a:hover {
	box-shadow: none;
	text-decoration: underline;
	text-underline-offset: 3px;
	transform: none;
}

.bbb-program-card > p:not(.bbb-program-index) {
	color: var(--bbb-muted);
	font-size: .82rem;
	grid-column: 2;
}

/* Core Buttons keep the Programok tabs editable without changing their look. */
.bbb-program-tabs .wp-block-button {
	margin: 0;
}

.bbb-program-tabs .wp-block-button__link {
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--bbb-forest);
	font-size: inherit;
	font-weight: 700;
	min-height: 0;
	padding: .65rem 1.4rem;
}

.bbb-program-tabs .wp-block-button__link:hover {
	background: var(--bbb-forest);
	color: white;
}

/* Contact cards now use editable paragraph/group blocks. */
.bbb-contact-cards article > .bbb-contact-icon {
	align-items: center;
	background: var(--bbb-forest);
	border-radius: 50%;
	color: white;
	display: flex;
	font-family: var(--bbb-body);
	font-size: 1.2rem;
	height: 50px;
	justify-content: center;
	margin: 0;
	width: 50px;
}

.bbb-contact-cards article > .wp-block-group,
.bbb-contact-cards .bbb-contact-value,
.bbb-contact-cards .bbb-contact-note {
	margin: 0;
}

.bbb-contact-cards .bbb-contact-note {
	color: var(--bbb-muted);
	font-family: var(--bbb-body);
	font-size: .72rem;
}

.bbb-map-button-wrap {
	bottom: 1.25rem;
	position: absolute;
	right: 1.25rem;
	z-index: 2;
}

.bbb-map-block-button .wp-block-button__link {
	box-shadow: var(--bbb-shadow);
}

/* Homepage Gutenberg parity fixes. */
.bbb-home .bbb-hero {
	overflow: hidden;
}

/* A Group block is an is-layout-flow container. Its automatic block gap was
 * being applied to the overlay, which left an uncovered strip at the top. */
.bbb-home .bbb-hero > .bbb-hero-video,
.bbb-home .bbb-hero > .bbb-hero-overlay,
.bbb-home .bbb-hero > .bbb-hero-content {
	margin-block-start: 0 !important;
}

.bbb-home .bbb-hero > .bbb-hero-video {
	bottom: 0;
	height: 100%;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
}

.bbb-home .bbb-hero > .bbb-hero-overlay {
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
}

/* Restore the original card overlap instead of allowing Gutenberg's block gap
 * to push the facts strip completely below the hero. Make the strip just a
 * touch wider/taller than before without changing the four-column proportions. */
.bbb-home .bbb-facts {
	margin: -4.2rem auto 0 !important;
	max-width: min(calc(100% - 2rem), calc(var(--bbb-max) + 40px));
	padding: 1.5rem;
}

/* All three teaser cards were equal-height links before the block migration. */
.bbb-home .bbb-program-teaser-grid {
	align-items: stretch;
	grid-auto-rows: 1fr;
}

/* Gutenberg applies the layout block gap as margin-top to later child groups.
 * Clear it on every card so all three start on the same grid row. */
.bbb-home .bbb-program-teaser-grid > .bbb-program-card {
	align-self: stretch;
	box-sizing: border-box;
	height: 100%;
	margin-block-start: 0 !important;
	width: 100%;
}

.bbb-home .bbb-program-teaser-grid .bbb-program-card > * {
	margin-block-end: 0 !important;
	margin-block-start: 0 !important;
}

/* Keep the same generous separation between the price CTA and the footer CTA. */
.bbb-home .bbb-price-callout {
	margin-bottom: 7.5rem !important;
}

/* Editor-only guidance: the customer sees clearly separated editable areas. */
.editor-styles-wrapper .bbb-editable-section {
	outline: 1px dashed rgb(30 69 62 / 20%);
	outline-offset: 5px;
}

.editor-styles-wrapper .bbb-editable-section:focus-within {
	outline-color: rgb(30 69 62 / 55%);
}

.editor-styles-wrapper .bbb-hero {
	min-height: 520px;
}

.editor-styles-wrapper .bbb-map {
	min-height: 420px;
}

.editor-styles-wrapper .bbb-map iframe {
	min-height: 420px;
}

.editor-styles-wrapper .wp-block-shortcode {
	background: rgb(30 69 62 / 5%);
	border: 1px dashed rgb(30 69 62 / 22%);
	border-radius: 10px;
	padding: .7rem;
}

@media (max-width: 820px) {
	.bbb-program-card > p:not(.bbb-program-index) {
		grid-column: 2;
	}
}

@media (max-width: 560px) {
	.bbb-program-tabs .wp-block-button {
		width: 100%;
	}

.bbb-program-tabs .wp-block-button__link {
		display: block;
		padding: .55rem .35rem;
		text-align: center;
		white-space: normal;
		width: 100%;
	}
}