/*
 * Bridge layer: Gutenberg block wrappers → Webflow's expected DOM.
 *
 * Webflow's stylesheet targets a specific markup shape. Core blocks emit their
 * own wrappers around the same content, so this file neutralises core styling
 * ONLY where a Webflow class is present on the same element.
 *
 * Scoping every rule to a Webflow class is deliberate: any new block an editor
 * adds later that has no Webflow equivalent keeps its normal core styling.
 */

/* ---------------------------------------------------------------------------
 * Grid: Webflow's row/column system is float-based, core's is flexbox.
 * ------------------------------------------------------------------------ */

.wp-block-columns.w-row {
	display: block;
	flex-wrap: initial;
	gap: 0;
	margin-bottom: 0;
}

/* Floats need clearing, which the flex version never had to do. */
.wp-block-columns.w-row::after {
	content: "";
	display: table;
	clear: both;
}

.wp-block-column.w-col {
	flex-basis: auto !important;
	flex-grow: 0;
	word-break: normal;
	overflow-wrap: normal;
}

/* Core stacks columns below 782px; Webflow does it at 767px. Defer to Webflow
   so the breakpoint matches the original exactly. */
@media (max-width: 781px) {
	.wp-block-columns.w-row:not(.is-not-stacked-on-mobile) > .wp-block-column.w-col {
		flex-basis: auto !important;
	}
}

@media (min-width: 768px) and (max-width: 781px) {
	.wp-block-column.w-col-4 {
		width: 33.33333333%;
	}
	.wp-block-column.w-col-6 {
		width: 50%;
	}
}

/* ---------------------------------------------------------------------------
 * Images: core wraps every image in <figure class="wp-block-image">.
 * ------------------------------------------------------------------------ */

.grey-icon-wrapper .wp-block-image,
.icon-wrapper .wp-block-image,
.section .wp-block-image {
	margin: 0;
	display: block;
}

/*
 * Fixed-height images.
 *
 * Core's block stylesheet sets `.wp-block-image img { height: auto }`, and an
 * author rule always beats the width/height HTML attributes (those are only
 * presentation hints). The Fli-City Blackout hero is sized in the original
 * with height="600" and no width, so it grew to its full 1978px. Expressing
 * the same sizing as CSS restores it.
 *
 * Keep `width: auto` alongside the height so the aspect ratio is preserved.
 */
.wp-block-image.blm-h600 img {
	height: 600px;
	width: auto;
	max-width: 100%;
}

/*
 * Logo aspect ratio.
 *
 * The original logo markup carried width="65" and no height, so the height
 * followed the intrinsic ratio — including at ≤767px where Webflow overrides
 * the width to 50px. WordPress always emits both attributes, which pins the
 * height at 65px while CSS shrinks the width to 50px, squashing the logo.
 * Letting height follow width restores the original behaviour at every width.
 */
.logo-img,
.footer-logo {
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Groups: core adds layout classes we do not want constraining Webflow
 * sections, which manage their own width via .w-container.
 * ------------------------------------------------------------------------ */

.wp-block-group.wf-section,
.wp-block-group.w-container,
.wp-block-group.section {
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-block-group.w-container > *,
.wp-block-group.wf-section > * {
	max-width: none;
}

/* ---------------------------------------------------------------------------
 * Headings and paragraphs need NO bridging.
 *
 * Core emits the bare <h2>/<p> with our Webflow class already on it, and
 * Webflow's own reset supplies the margins. An earlier version of this file
 * tried to "restore" margins with `margin-block: revert`, which reverted to
 * the *browser* defaults (1em/0.83em) rather than Webflow's reset — silently
 * adding 15–21px around every heading and paragraph on the page. Do not
 * reintroduce that.
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * Contact form: honeypot must be invisible to humans but reachable to bots.
 * ------------------------------------------------------------------------ */

.blmflint-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Video gallery container.
 * ------------------------------------------------------------------------ */

.blm-video-gallery {
	margin: 0 auto;
}

.blm-video-gallery--empty {
	padding: 24px;
	border: 1px dashed #888;
	color: #ccc;
	text-align: center;
}