/* Module: Hero Breadcrumb — internal-page hero (photo + breadcrumb trail +
   heading). Overlay/photo treatment matches this theme's other full-bleed
   photo sections (.hero, .sustainable), not h2-conveyancing's red/diagonal
   brand motif that the module was ported from. */
.hero-breadcrumb {
	position: relative;
	height: 380px;
	overflow: hidden;
	display: flex;
	align-items: center;
	background: var(--skin-dark);
}
.hero-breadcrumb__bg {
	order: 2;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero-breadcrumb__overlay {
	inset: 0;
	background: rgba(0,0,0,0.4);
}
.hero-breadcrumb__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;	
	min-width: 960px;
}
.hero-breadcrumb__inner h1 { color: var(--skin-white); margin: 0; }

/* Breadcrumb trail sits on a dark photo here, unlike its default (light
   page background) context — design-system.css's .breadcrumb-item has no
   color of its own, so it otherwise inherits the dark body text color. */
.hero-breadcrumb .site-breadcrumbs { margin: 0; }
.hero-breadcrumb .breadcrumb-item,
.hero-breadcrumb .breadcrumb-item a { color: var(--skin-white); text-decoration: none; }
.hero-breadcrumb .breadcrumb-item a { opacity: 0.85; }
.hero-breadcrumb .breadcrumb-item a:hover { opacity: 1; text-decoration: underline; }

/* Alignment — controls both the breadcrumb row and the heading. */
.hero-breadcrumb--align-left   .hero-breadcrumb__inner { align-items: flex-start; text-align: left; }
.hero-breadcrumb--align-center .hero-breadcrumb__inner { align-items: center; text-align: center; }
.hero-breadcrumb--align-right  .hero-breadcrumb__inner { align-items: flex-end; text-align: right; }
.hero-breadcrumb--align-left   .breadcrumb-list { justify-content: flex-start; }
.hero-breadcrumb--align-center .breadcrumb-list { justify-content: center; }
.hero-breadcrumb--align-right  .breadcrumb-list { justify-content: flex-end; }
@media and (max-width: 1280px) {
	.hero-breadcrumb__inner {
		min-width: 100%;
	}	
}	

@media and (max-width: 1024px) {

}

/* No-image variant — plain compact breadcrumb bar on the page's own light
   background instead of the fixed-height dark photo band (Product Detail
   page — see single-marcoeco_product.php's 'show_image' => false call).
   Breadcrumb/heading colour overrides above are scoped to .hero-breadcrumb
   without this modifier, so both simply inherit the page's normal text
   colour here instead. */
.hero-breadcrumb--no-image {
	height: auto;
	background: none;
	padding: 32px 0 24px;
}
.hero-breadcrumb--no-image .breadcrumb-item,
.hero-breadcrumb--no-image .breadcrumb-item a { color: inherit; }
.hero-breadcrumb--no-image .breadcrumb-item a { opacity: 0.7; }
.hero-breadcrumb--no-image .breadcrumb-item a:hover { opacity: 1; }
.hero-breadcrumb--no-image .hero-breadcrumb__inner h1 { color: inherit; }