/**
 * Single brand page (single-gdv_cm_brand.php, workstream ③).
 * Per-brand colours arrive as --brand-color / --brand-color-2 inline on .mp-brand.
 */

.mp-brand {
	--brand-color: var(--mp-forest, #2f5d44);
	--brand-color-2: var(--mp-amber, #c98a2b);
	/* Feeds the shared .mp-single__section-title heading colour (single-common.css). */
	--mp-single-accent: var(--brand-color);
}

.mp-brand__hero {
	position: relative;
	/* Immersive header: scales with the viewport (clamped) so the hero image gets
	   real presence on desktop while still leaving content above the fold. */
	min-height: clamp(360px, 46vh, 620px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--brand-color);
}

.mp-brand__hero--plain {
	min-height: 220px;
}

@media (max-width: 680px) {

	.mp-brand__hero {
		min-height: clamp(240px, 42vh, 360px);
	}
}

.mp-brand__hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.mp-brand__hero-overlay {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 48px 24px 28px;
}

.mp-brand__hero-inner {
	max-width: var(--single-content-width);
	margin: 0 auto;
}

/* Title contrast variants (hero_overlay), so the brand name stays readable on
   both dark and light hero images. */
.mp-brand__hero--overlay-dark .mp-brand__hero-overlay {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
}

.mp-brand__hero--overlay-dark .mp-brand__hero-inner {
	color: #fff;
}

.mp-brand__hero--overlay-light .mp-brand__hero-overlay {
	background: linear-gradient(to top, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0));
}

.mp-brand__hero--overlay-light .mp-brand__hero-inner {
	color: #1a1a1a;
}

.mp-brand__hero--overlay-none .mp-brand__hero-inner {
	color: #fff;
}

/* The title colour must be set on the heading itself — the theme styles h1
   directly, so it never inherits the hero-inner colour. A text-shadow keeps it
   legible regardless of the image behind it; stronger when there is no veil. */
.mp-brand__hero--overlay-dark .mp-brand__title,
.mp-brand__hero--overlay-none .mp-brand__title {
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.mp-brand__hero--overlay-none .mp-brand__title {
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

.mp-brand__hero--overlay-light .mp-brand__title {
	color: #1a1a1a;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

/* Tagline + verified badge follow the same contrast (they are not h1, so the
   inner colour reaches them, but set explicitly for the light variant). */
.mp-brand__hero--overlay-light .mp-brand__tagline {
	color: #1a1a1a;
}

.mp-brand__hero--plain .mp-brand__hero-overlay {
	background: none;
}

.mp-brand__logo {
	max-height: 72px;
	max-width: 220px;
	margin-bottom: 12px;
	background: #fff;
	border-radius: 8px;
	padding: 6px 10px;
}

.mp-brand__title {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
}

.mp-brand__tagline {
	margin: 8px 0 0;
	font-size: 1.15rem;
	opacity: 0.95;
	max-width: 60ch;
}

/* The verified-producer and featured-producer badges are reusable components
   (marketplace_verified_badge() / marketplace_featured_badge(), styled in the
   theme style.css). The wrapper lays them out side by side, wrapping on narrow
   heroes; each badge keeps its own optional help disclosure underneath. */
.mp-brand__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
}

/* Body, lede grid, sticky sidebar card and the in-card section dividers are
   shared with the sales-point page (single-common.css: .mp-single__body /
   __lede / __aside / __aside-section). Only brand-specific styling lives here. */

/* Prose stays at a comfortable reading measure even though the body is wide;
   the facts row and the product grid below use the full width. */
.mp-brand__intro,
.mp-brand__description,
.mp-brand__story {
	max-width: 68ch;
}

/* Producer one-liner above the description: the prominent lead, so the eye lands
   on the standfirst before the body prose (which stays at the default size). */
.mp-brand__intro {
	margin: 0 0 1rem;
	font-size: 1.25rem;
	line-height: 1.5;
	font-weight: 500;
	color: #2c2c2c;
}

/* The facts row (.mp-brand__facts / .mp-single__facts) is now defined in the
   shared single-common.css so the brand and product single pages render it
   identically. */

/* Basic-HTML description at the theme's default body size (the short tagline
   carries the prominent intro styling, not this). Space the block children and
   keep the last one flush with the section below. */
.mp-brand__description {
	line-height: 1.7;
	color: #333;
}

.mp-brand__description p,
.mp-brand__description ul,
.mp-brand__description ol {
	margin: 0 0 0.9em;
}

.mp-brand__description :last-child {
	margin-bottom: 0;
}

.mp-brand__description ul,
.mp-brand__description ol {
	padding-left: 1.4em;
}

.mp-brand__description a {
	color: var(--brand-color);
}

.mp-brand__story {
	font-size: 1.05rem;
	line-height: 1.8;
	color: #333;
}

.mp-brand__story p {
	margin: 0 0 1.1em;
}

.mp-brand__actions {
	margin: 32px 0;
}

/* The "Follow us" links and the Contact actions are shared pill links
   (.mp-single__pill-row / .mp-single__pill in single-common.css), coloured by
   --mp-single-accent. Only the contact note keeps a brand-local style. */
.mp-brand__contact-note {
	margin: 0 0 14px;
	color: #6b6b6b;
}

/* Credited-products section (④). Top spacing + separator come from the shared
   .mp-single__section rule (single-common.css). */
.mp-brand__products {
	margin: 0 0 8px;
}

/* Where-to-buy section — the stores carrying this brand render with the shared
   store card (store-card.css) + .mp-sp-grid, identical to the product page. Top
   spacing + separator come from the shared .mp-single__section rule. */

/* Hero gallery — hero images beyond the first */
.mp-brand__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	margin: 0 0 32px;
}

.mp-brand__gallery-item {
	margin: 0;
}

.mp-brand__gallery-img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.mp-brand__gallery-caption {
	font-size: 0.8rem;
	color: #6b6b6b;
	margin-top: 4px;
}

/* The primary brand colour also carries the main CTA, so setting it has a clear
   visible effect even when a hero image hides the hero background band. */
.mp-brand .marketplace-btn--primary {
	background: var(--brand-color);
	border-color: var(--brand-color);
	color: #fff;
}

.mp-brand .marketplace-btn--primary:hover,
.mp-brand .marketplace-btn--primary:focus {
	filter: brightness(0.92);
}