/**
 * Full-width banner image at the top of a product category archive page
 * (e.g. the NMB category page) -- see the woocommerce_before_main_content
 * hook in functions.php. Shown edge-to-edge above the breadcrumb/title,
 * echoing the Home page hero's full-bleed treatment (.lp-hero) but for an
 * actual supplied image instead of CSS-only text.
 *
 * Kept in its own small file rather than appended to the (already large)
 * custom.css, same reasoning as product-page-updates.css.
 *
 * height uses clamp() so it scales smoothly between a short strip on
 * mobile and a hero-sized band on desktop, cropping the source image via
 * object-fit rather than stretching it.
 *
 * Full-bleed fix, corrected three times over (2026-09-17): the site runs
 * a boxed layout -- custom.css's "main.wp-block-group { max-width: 85%;
 * background: #fff }" -- with Chris's own sitewide background image
 * showing on either side of that white 85% box on wide screens.
 *
 * Attempt 1 used the classic 100vw + negative-viewport-margin full-bleed
 * trick, which broke the banner out past the white box entirely, onto
 * Chris's background image -- too far.
 *
 * Attempt 2 set width/max-width to 100% of the boxed <main> instead, but
 * that <main> also carries WordPress's "has-global-padding" class, which
 * applies its own left/right padding (a clamp(30px, 5vw, 50px) gutter, via
 * the --wp--style--root--padding-left/-right custom properties) -- with
 * just width:100%, the banner still sat inset by that padding on both
 * sides, short of the white box's true edges.
 *
 * Attempt 3 added negative margins to cancel that padding, but a
 * percentage width is resolved against the parent's *content* box (i.e.
 * already excluding the parent's own padding), so shifting via
 * margin-left alone just slid the whole box left by one padding's worth
 * without making it any wider -- fixed the left edge, left the right edge
 * short by both paddings combined (confirmed live).
 *
 * This final version does both halves of the actual trick together:
 * widen the box by exactly the two paddings' worth (so its border-box
 * matches the white box's own full border-box width) *and* pull it back
 * with matching negative margins -- the same mechanism WordPress core
 * itself uses for a real ".alignfull" block under "has-global-padding",
 * applied directly to this element instead of relying on that class
 * (custom.css's own ".alignfull" override further down zeroes those
 * margins for its own, different reasons, so reusing that class here
 * would have undone this).
 */
main.wp-block-group.is-layout-constrained > .lp-category-banner {
	width: calc(100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px)) !important;
	max-width: none !important;
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important;
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
}

.lp-category-banner {
	overflow: hidden;
	background: #0a0a0a;
	line-height: 0;
}

.lp-category-banner-img {
	display: block;
	width: 100%;
	height: clamp(160px, 28vw, 420px);
	object-fit: cover;
	object-position: center;
}

/* Black strip above the photo (2026-09-17): WooCommerce's block-based
 * "Store Notices" placeholder was landing inside this banner div, empty
 * but still taking up its own bit of vertical space -- which showed as an
 * extra dark strip above the actual image, since the banner's own
 * background is also near-black. Collapses it whenever it's genuinely
 * empty (no real notice inside), so a real notice -- if one ever does
 * need to show here -- still displays normally. */
.lp-category-banner .wc-block-components-notices:not(:has(> *)) {
	display: none;
}