/**
 * Barndoor v12 page fixes that Bricks cannot hold yet (native migration phase 7, native/phase7.md).
 * Every other page fix is a Bricks style now: dark bands and PPC pages (global classes, phases 3 / 4a), page elements
 * (phases 1 / 4b / 7), homepage hv-* classes (phases 2 / 7).
 * What is left targets elements inside the legacy components hero_split and resources_slider (pre-2.0 element IDs:
 * the Bricks abilities cannot write them). Builder steps to move them: native/phase7.md, "Builder steps for Nate".
 */

/* product heroes (component hero_split on 3326 and 3282, and the 5897 hero section): the strip behind the diagram
   (hs_green_section) was a pale mint block under the dark band -> cream, so the diagram sits between the band and the cream page */
#brx-content > .brxe-hero_split .brxe-hs_green_section { background: var(--color-cream) !important; border-top: 0 !important; }
/* hero H1 scale inside hero_split (3326, 3282: 72px at desktop like the other heroes; 5897's H1 holds the same value as an element style) */
#brx-content > .brxe-hero_split h1 { font-size: clamp(2.6rem, 5vw, 4.5rem); }
/* Marker.io BW1-103/106 equal-height columns and cards, inside the legacy components (hero_split columns, vertical_cards).
   Every Bricks-owned grid item carries align-self stretch itself now (classes hv-deploy__card, component xagxhq, 606 / 5897 elements). */
#brx-content :is(.brxe-hero_split, .brxe-vertical_cards) :is([class*="__cards"], [class*="grid-"]) > :not(img, picture, figure, video, svg) { align-self: stretch; }

/* MCP security (3282) Resources carousel (component resources_slider): the cards had no styles (giant centred titles, no card) */
.page-id-3282 .brxe-resources_slider { background-color: var(--color-cream); }
.brxe-resources_slider .swiper-slide { padding: 0 10px; height: auto; }
.brxe-resources_slider .swiper-slide :is(.slider-content, .content) { width: 100%; max-width: none; height: auto; min-height: 0; padding: 0; }
.brxe-resources_slider .rs-card {
	width: 100%; display: flex; flex-direction: column; overflow: hidden; text-align: left;
	background: var(--color-paper); border: 1px solid var(--color-hairline); border-radius: var(--radius-md);
}
.brxe-resources_slider .rs-card-image img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.brxe-resources_slider .rs-card-content { display: grid; gap: 8px; padding: 18px 20px 22px; }
.brxe-resources_slider .rs-card-content > p:empty, .brxe-resources_slider .rs-card-category:empty { display: none; }
.brxe-resources_slider .rs-card-category { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-ink-2); }
.brxe-resources_slider .rs-card-title { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--color-ink); }
.brxe-resources_slider .swiper-wrapper { align-items: flex-start; }
.brxe-resources_slider [class*="swiper-button"] { color: var(--color-ink); fill: var(--color-ink); }
/* the slider is set to 4 per view at every width (cards ~70px wide at 390): on phones use native swipe-scroll instead */
@media (max-width: 767px) {
	.brxe-resources_slider .swiper-wrapper { display: flex !important; transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.brxe-resources_slider .swiper-slide { width: 80% !important; flex-shrink: 0; scroll-snap-align: start; }
	/* Bricks sets .swiper-button display:flex !important inside a cascade layer, which beats any unlayered !important: hide with visibility */
	.brxe-resources_slider :is(.swiper-pagination, [class*="swiper-button"]) { display: none !important; visibility: hidden; pointer-events: none; }
}