/* ================================================
   GUTENBERG BRIDGE — CSS Overrides
   ================================================

   Makes Gutenberg's wp-block-group wrappers work
   with the existing BMP design system classes.

   Gutenberg outputs: <div class="wp-block-group hero-grid">
   Existing CSS expects: <div class="hero-grid">

   Since CSS class selectors (.hero-grid) match regardless
   of the wp-block-group class, most styles work automatically.
   These overrides handle edge cases and reset Gutenberg defaults.
   ================================================ */

/* ---------- KILL WORDPRESS LAYOUT SYSTEM ---------- */

/*
 * WordPress 6.x adds .is-layout-flow / .is-layout-constrained
 * on wp-block-group elements, which sets display:flex and
 * overrides our CSS grid. We nuke these globally since our
 * theme handles all layout via custom CSS.
 */
.wp-block-group.is-layout-flow,
.wp-block-group.is-layout-constrained,
.wp-block-group.is-layout-flex {
	display: block !important;
	max-width: none !important;
	gap: unset !important;
}

/* ---------- RESET GUTENBERG DEFAULTS ---------- */

.wp-block-group {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

/* ---------- GUTENBERG BLOCK SPACING INSIDE CONTENT ---------- */

/*
 * Inside .content-section .container, Gutenberg blocks need natural
 * vertical spacing (the original WP margins). We only reset margins
 * to 0 for blocks inside our custom grid/bento layouts.
 */
.content-section > .container > .wp-block-heading,
.content-section .container > .wp-block-heading {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	color: var(--color-primary);
}

.content-section > .container > .wp-block-heading:first-child,
.content-section .container > .wp-block-heading:first-child {
	margin-top: 0;
}

.content-section > .container > p,
.content-section .container > p {
	margin-bottom: 1rem;
}

.content-section > .container > .wp-block-list,
.content-section .container > .wp-block-list {
	margin-bottom: 1.5rem;
	padding-left: 1.25rem;
}

.content-section .wp-block-list li {
	margin-bottom: .75rem;
	line-height: 1.6;
}

.content-section .wp-block-columns {
	margin-bottom: 2rem;
	gap: 3rem;
}

.content-section .wp-block-column > .wp-block-heading {
	margin-top: 0;
	margin-bottom: 1rem;
	color: var(--color-primary);
}

.content-section .wp-block-column > p {
	margin-bottom: 1rem;
}

.content-section .wp-block-column > .wp-block-group > .wp-block-heading,
.content-section .wp-block-column > .wp-block-group > h3 {
	margin-top: 0;
	margin-bottom: .75rem;
	color: var(--color-primary);
}

.content-section .wp-block-column > .wp-block-group > p {
	margin-bottom: .75rem;
}

/* Reset for blocks inside custom layouts (bento, hero, etc.) */
.hero-grid .wp-block-heading,
.bento-2 .wp-block-heading,
.section-head .wp-block-heading {
	margin-top: 0;
	margin-bottom: 0;
}

.wp-block-separator {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: 2.5rem 0;
}

/* Shortcodes inside wp-block-shortcode need no extra wrapper */
.wp-block-shortcode {
	margin: 0;
}

/* ---------- SECTION-LEVEL GROUPS ---------- */

div.cta-bar,
.wp-block-group.cta-bar {
	background: var(--color-primary) !important;
	color: #fff;
	padding: 3.5rem 0 !important;
	display: block !important;
}

.wp-block-group.page-title {
	background: var(--color-bg-light) !important;
	padding: 3.5rem 0 3rem !important;
	border-bottom: 1px solid var(--color-border);
	display: block !important;
}

.wp-block-group.content-section {
	padding: var(--section-padding) !important;
	display: block !important;
}

.wp-block-group.content-section.alt {
	background: var(--color-bg-light) !important;
}

.wp-block-group.hero {
	padding: 3rem 0 4rem !important;
	display: block !important;
}

.wp-block-group.container {
	max-width: var(--container-max-width) !important;
	margin: 0 auto !important;
	padding: 0 var(--container-padding) !important;
	display: block !important;
}

/* ---------- HERO GRID ---------- */

.wp-block-group.hero-grid {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	grid-auto-rows: minmax(100px, auto) !important;
	gap: 12px !important;
}

/* All tiles inside hero-grid */
.hero-grid > .wp-block-group {
	border-radius: var(--r-sm);
	padding: 1.5rem;
	background: var(--color-bg-light);
	display: flex !important;
	flex-direction: column;
	justify-content: space-between;
}

/* Tile positioning — match original CSS grid areas */
.hero-grid > .wp-block-group.tile.t-headline {
	grid-column: span 4;
	grid-row: span 2;
}

.hero-grid > .wp-block-group.tile.t-sub {
	grid-column: span 2;
	grid-row: span 1;
}

.hero-grid > .wp-block-group.tile.t-stats {
	grid-column: span 2;
	grid-row: span 1;
	background: var(--color-primary);
	color: #fff;
}

.hero-grid > .wp-block-group.tile.t-stats .eyebrow {
	color: #fff;
}

.hero-grid > .wp-block-group.tile.t-image {
	grid-column: span 3;
	grid-row: span 2;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--color-border);
	background: #fff;
}

.hero-grid > .wp-block-group.tile.t-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-grid > .wp-block-group.tile.t-cta {
	grid-column: span 2;
	grid-row: span 1;
	background: var(--color-primary);
	color: #fff;
	text-decoration: none;
}

.hero-grid > .wp-block-group.tile.t-cta .eyebrow {
	color: #fff;
}

/* Logo tiles from shortcode */
.hero-grid > .wp-block-shortcode {
	display: contents;
}

/* ---------- BENTO-2 GRID ---------- */

.wp-block-group.bento-2 {
	display: grid !important;
	grid-template-columns: repeat(6, 1fr) !important;
	grid-auto-rows: minmax(120px, auto) !important;
	gap: 12px !important;
}

.bento-2 > .wp-block-group {
	border-radius: var(--r-sm);
}

.bento-2 > .wp-block-group.b-intro {
	grid-column: span 3;
	grid-row: span 2;
	background: var(--color-bg-light);
	padding: 2rem;
	display: flex !important;
	flex-direction: column;
	justify-content: space-between;
}

.bento-2 > .wp-block-shortcode {
	display: contents;
}

.bento-2 > .wp-block-group.b-image {
	grid-column: span 3;
	grid-row: span 1;
	padding: 0;
	overflow: hidden;
}

.bento-2 > .wp-block-group.b-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bento-2 > .wp-block-group.b-quote {
	grid-column: span 3;
	grid-row: span 1;
	background: var(--color-bg-light);
	padding: 2rem;
}

/* ---------- SECTION HEAD ---------- */

.wp-block-group.section-head {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 3rem !important;
	align-items: end !important;
	margin-bottom: 3rem !important;
}

.section-head .wp-block-group.meta-col {
	text-align: right;
	font-family: var(--font-primary);
	font-size: .75rem;
	color: var(--color-text);
	letter-spacing: .05em;
	display: block !important;
}

/* ---------- CONTENT GRID ---------- */

.wp-block-group.content-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 2rem !important;
}

/* ---------- SPLIT LAYOUT ---------- */

.wp-block-group.split {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 2rem !important;
	align-items: stretch;
}

.split > .wp-block-group {
	border-radius: var(--r-sm);
}

.split > .wp-block-group.k-card {
	background: var(--color-bg-light);
	padding: 2rem;
	display: flex !important;
	flex-direction: column;
	justify-content: space-between;
}

/* ---------- CONTACT CARD ---------- */

.wp-block-group.contact-card {
	background: var(--color-primary) !important;
	color: #fff;
	padding: 2rem !important;
	border-radius: var(--r-sm);
}

.wp-block-group.contact-card h2,
.wp-block-group.contact-card h3,
.wp-block-group.contact-card h4 {
	color: #fff;
}

.wp-block-group.contact-card a {
	color: #fff;
}

/* ---------- GUTENBERG IMAGE IN TILES ---------- */

.wp-block-group.tile .wp-block-image {
	margin: 0;
	height: 100%;
}

.wp-block-group.tile .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- CTA INNER OVERRIDES ---------- */

.cta-bar .wp-block-group.cta-inner {
	display: grid !important;
	grid-template-columns: 1fr auto !important;
	align-items: center !important;
	gap: 2rem !important;
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

.cta-inner h2 {
	color: #fff;
}

.cta-inner p {
	color: rgba(255, 255, 255, .88);
	margin-top: .5rem;
}

/* ---------- RESPONSIVE OVERRIDES ---------- */

@media (max-width: 48em) {
	.wp-block-group.hero-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.hero-grid > .wp-block-group.tile.t-headline {
		grid-column: span 2;
	}

	.hero-grid > .wp-block-group.tile.t-image {
		grid-column: span 2;
		grid-row: span 1;
	}

	.wp-block-group.bento-2 {
		grid-template-columns: 1fr !important;
	}

	.bento-2 > .wp-block-group.b-intro,
	.bento-2 > .wp-block-group.b-image,
	.bento-2 > .wp-block-group.b-quote {
		grid-column: span 1;
	}

	.wp-block-group.content-grid {
		grid-template-columns: 1fr !important;
	}

	.wp-block-group.split {
		grid-template-columns: 1fr !important;
	}

	.wp-block-group.section-head {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
	}

	.section-head .wp-block-group.meta-col {
		text-align: left;
	}

	div.cta-bar,
	.wp-block-group.cta-bar {
		padding: 2.75rem 0 !important;
	}

	.cta-bar .wp-block-group.cta-inner {
		grid-template-columns: 1fr !important;
	}
}