/**
 * PLP banner + breadcrumb
 *
 * Design ref: Figma Frame 2 (1061:2287) — 1440 × 309.
 *
 * Grey-mud fix: do NOT paint semi-transparent white over the photo (that
 * greys midtones). Fade the *image* out with a mask so pure white banner
 * background shows through on the left — matches Figma’s clean white→photo.
 */

.plp-banner {
	position: relative;
	width: 100%;
	height: var(--plp-banner-height);
	min-height: var(--plp-banner-height);
	overflow: hidden;
	background: var(--color-white);
	box-sizing: border-box;
}

.plp-banner__media {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/*
 * Full-bleed photo; subject sits on the right (Figma).
 * Soft left mask only — Figma’s left wash is subtle, not a solid white panel.
 */
.plp-banner__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 72% 28%;
	-webkit-mask-image: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.12) 0%,
		rgba(0, 0, 0, 0.35) 12%,
		rgba(0, 0, 0, 0.65) 24%,
		rgba(0, 0, 0, 0.9) 36%,
		#000 48%,
		#000 100%
	);
	mask-image: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.12) 0%,
		rgba(0, 0, 0, 0.35) 12%,
		rgba(0, 0, 0, 0.65) 24%,
		rgba(0, 0, 0, 0.9) 36%,
		#000 48%,
		#000 100%
	);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.plp-banner__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center; /* vertically center copy block (Figma mid-banner) */
	width: min(var(--header-content-max), 100%);
	max-width: var(--header-content-max);
	min-height: var(--plp-banner-height);
	height: var(--plp-banner-height);
	margin: 0 auto;
	padding: 0 var(--section-inline-pad);
	box-sizing: border-box;
}

/*
 * Copy block — left-aligned, vertically centered in the 309px banner.
 * Internal rhythm from Figma: title 6px under breadcrumb row; description ~22px under title.
 */
.plp-banner__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	max-width: 460px;
}

.plp-banner .kaahel-breadcrumb {
	position: static;
}

.plp-banner__title {
	margin: 6px 0 0;
	font-family: var(--font-heading);
	font-size: var(--plp-banner-title-size);
	font-weight: 400;
	line-height: var(--plp-banner-title-lh);
	color: var(--color-plp-banner-heading);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/*
 * Tagline between the title and the sentence. Not in the Figma banner frame,
 * which carries breadcrumb + H1 + description only — it is a per-category
 * addition, so rather than invent a voice for it this reuses the hero's eyebrow
 * idiom (body face, 700, uppercase, accent) that the theme already uses for a
 * short line set against a large heading.
 */
.plp-banner__description {
	margin: 28px 0 0;
	font-family: var(--font-body);
	font-size: var(--plp-banner-tagline-size);
	font-weight: 700;
	line-height: var(--plp-banner-tagline-lh);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-accent);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/* Sits tighter under the tagline than it did under the title alone. */
.plp-banner__description + .plp-banner__subdescription {
	margin-top: 10px;
}

.plp-banner__subdescription {
	margin: 22px 0 0;
	max-width: 460px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	color: var(--color-body-88);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/* Breadcrumb component lives in assets/css/breadcrumb.css (shared with About Us). */

@media (max-width: 991px) {
	.plp-banner {
		height: auto;
		min-height: 260px;
	}

	.plp-banner__inner {
		height: auto;
		min-height: 260px;
		padding-top: 24px;
		padding-bottom: 32px;
	}

	.plp-banner__content {
		max-width: 100%;
	}

	.plp-banner__title {
		font-size: 42px;
		line-height: 1.15;
	}

	.plp-banner__description {
		margin-top: 22px;
	}

	.plp-banner__subdescription {
		margin-top: 16px;
	}

	.plp-banner__image {
		object-position: 80% 30%;
		-webkit-mask-image: linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.2) 0%,
			rgba(0, 0, 0, 0.5) 20%,
			rgba(0, 0, 0, 0.85) 40%,
			#000 55%,
			#000 100%
		);
		mask-image: linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.2) 0%,
			rgba(0, 0, 0, 0.5) 20%,
			rgba(0, 0, 0, 0.85) 40%,
			#000 55%,
			#000 100%
		);
	}
}

@media (max-width: 575px) {
	.plp-banner {
		min-height: 220px;
	}

	.plp-banner__inner {
		min-height: 220px;
		padding-top: 20px;
		padding-bottom: 24px;
	}

	.plp-banner__title {
		font-size: 34px;
	}

	.plp-banner__description {
		font-size: 15px;
		line-height: 24px;
	}

	.plp-banner__subdescription {
		font-size: 15px;
		line-height: 24px;
	}

	.plp-banner__image {
		-webkit-mask-image: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.25) 0%,
			rgba(0, 0, 0, 0.55) 40%,
			#000 100%
		);
		mask-image: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.25) 0%,
			rgba(0, 0, 0, 0.55) 40%,
			#000 100%
		);
		opacity: 0.55;
	}
}