/* components/image-blend/image-blend.css
 *
 * Side-anchored image that dissolves into the section background via a
 * horizontal alpha gradient. The image lives in an absolutely-positioned
 * media layer; the body column sits in normal flow above it.
 *
 *   --img-left  | --img-right     which side the image anchors to
 *   --strength-soft|medium|strong how far the fade reaches into the section
 *   --blur-none|sm|md|lg          optional blur on the image
 *
 * If ib_blend_color is set the image fades INTO that solid colour via a
 * second overlay gradient. If not, the image just fades to transparent
 * (so the section background / preset / page background shows through).
 */

.mvc-image-blend {
	position: relative;
	overflow: hidden;
	/* isolation: isolate removed — it prevents adjacent sections (e.g. a
	   feature-tiles overlap with negative margin) from painting on top of
	   image-blend via z-index, because an isolated stacking context can't
	   be entered by siblings. The component's internal layering (media
	   z-index 0, overlay z-index 1, container z-index 2) works without
	   isolation because all three are inside the same .mvc-image-blend
	   positioned context. */
}

/* ── Width variants ─────────────────────────────────────────────────────── */
/* .mvc-section is 100% wide by default, so this component was always
   effectively "full-bleed" — adding a Width control means making
   "Contained" actually narrow the section's canvas (image + overlay) down
   to .mvc-container width so it lines up vertically with the sections
   above/below. The text column always lives inside .mvc-container.

   Easiest implementation: in Contained, cap the SECTION element itself at
   --container-max and centre it via auto margins. The absolutely-positioned
   media + overlay layers (inset: 0) inherit that bounded canvas
   automatically. In Full, leave the section at 100% so media bleeds to the
   viewport. */

.mvc-image-blend--width-contained {
	max-width: var(--container-max);
	margin-inline: auto;
}

.mvc-image-blend--width-full {
	max-width: none;
	margin-inline: 0;
	width: 100%;
}

/* In Full mode the text container drops the standard centred .mvc-container
   max-width and instead hugs the viewport with just a small responsive
   gutter — matches a full-bleed marketing hero. The .__body inside still
   caps at 38rem so the copy stays readable; this rule only changes WHERE
   the body sits, not how wide the copy column is. */
.mvc-image-blend--width-full .mvc-container {
	max-width: none;
	padding-inline: clamp(var(--space-4), 4vw, var(--space-12));
}

/* When the image sits on the RIGHT (text on left), default flow already
   anchors .__body to the left edge of the now-edge-to-edge container, so
   nothing more to do. When image is on the LEFT (text on right), the
   existing --img-left rule already auto-margins the body to the right edge
   of its container — combined with the wider container above, the text
   naturally hugs the right viewport gutter. */

/* ── Height variants ────────────────────────────────────────────────────── */
/* auto = content-driven (with the original min-height floor so short copy
   still leaves room for the image). The rest mirror the hero scale so the
   editor learns one vocabulary. */

.mvc-image-blend--height-auto   { min-height: clamp(360px, 50vw, 620px); }
.mvc-image-blend--height-sm     { min-height: clamp(320px, 45vh, 480px); }
.mvc-image-blend--height-md     { min-height: clamp(420px, 60vh, 640px); }
.mvc-image-blend--height-tall   { min-height: clamp(520px, 80vh, 800px); }
.mvc-image-blend--height-full   { min-height: 100dvh; }
.mvc-image-blend--height-custom { min-height: var(--ib-height-custom, 480px); }

/* Make the body column fill the section vertically when a fixed height is
   set, so the copy can anchor to top/center/bottom instead of being stuck
   to the top of a tall empty box. Skip for auto (which is sized to its
   content anyway). Default anchor is center; --valign-top / --valign-bottom
   override below. */
.mvc-image-blend--height-sm,
.mvc-image-blend--height-md,
.mvc-image-blend--height-tall,
.mvc-image-blend--height-full,
.mvc-image-blend--height-custom {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mvc-image-blend--height-sm.mvc-image-blend--valign-top,
.mvc-image-blend--height-md.mvc-image-blend--valign-top,
.mvc-image-blend--height-tall.mvc-image-blend--valign-top,
.mvc-image-blend--height-full.mvc-image-blend--valign-top,
.mvc-image-blend--height-custom.mvc-image-blend--valign-top {
	justify-content: flex-start;
}

/* When anchored top, zero the body's top padding so the headline actually
   sits at the top edge — otherwise --space-12 of internal padding makes it
   look like the centred behaviour is still in effect. Trailing padding kept
   so a CTA / search field still breathes. Mirror logic for bottom. */
.mvc-image-blend--valign-top .mvc-image-blend__body {
	padding-block-start: 0;
}

.mvc-image-blend--height-sm.mvc-image-blend--valign-bottom,
.mvc-image-blend--height-md.mvc-image-blend--valign-bottom,
.mvc-image-blend--height-tall.mvc-image-blend--valign-bottom,
.mvc-image-blend--height-full.mvc-image-blend--valign-bottom,
.mvc-image-blend--height-custom.mvc-image-blend--valign-bottom {
	justify-content: flex-end;
}

.mvc-image-blend--valign-bottom .mvc-image-blend__body {
	padding-block-end: 0;
}

.mvc-image-blend--height-sm     .mvc-container,
.mvc-image-blend--height-md     .mvc-container,
.mvc-image-blend--height-tall   .mvc-container,
.mvc-image-blend--height-full   .mvc-container,
.mvc-image-blend--height-custom .mvc-container {
	width: 100%;
}

/* ── Media layer ────────────────────────────────────────────────────────── */

.mvc-image-blend__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* ── Full-section overlay tint ──────────────────────────────────────────── */
/* Sits ABOVE the image but BELOW the text. Use when the photo is "sharp"
   (no blur) and you want a unifying colour wash over the whole section —
   the look in the user's reference where a cream tint blankets a chef
   photo without losing detail. */

.mvc-image-blend__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-color: var(--ib-overlay-color, transparent);
	opacity: var(--ib-overlay-opacity, 0.35);
}

.mvc-image-blend--has-overlay .mvc-container {
	position: relative;
	z-index: 2;
}

.mvc-image-blend__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Right-anchored image — image lives in the right half-ish, fades toward
   the left where the text sits. The mask gradient stops control the
   blend strength. */
.mvc-image-blend--img-right .mvc-image-blend__media {
	left: var(--ib-fade-start, 25%);
	right: 0;
}

.mvc-image-blend--img-right .mvc-image-blend__img {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		rgba(0, 0, 0, 0.15) var(--ib-fade-mid, 25%),
		#000 var(--ib-fade-end, 65%)
	);
	        mask-image: linear-gradient(
		to right,
		transparent 0%,
		rgba(0, 0, 0, 0.15) var(--ib-fade-mid, 25%),
		#000 var(--ib-fade-end, 65%)
	);
}

/* Left-anchored mirror */
.mvc-image-blend--img-left .mvc-image-blend__media {
	left: 0;
	right: var(--ib-fade-start, 25%);
}

.mvc-image-blend--img-left .mvc-image-blend__img {
	-webkit-mask-image: linear-gradient(
		to left,
		transparent 0%,
		rgba(0, 0, 0, 0.15) var(--ib-fade-mid, 25%),
		#000 var(--ib-fade-end, 65%)
	);
	        mask-image: linear-gradient(
		to left,
		transparent 0%,
		rgba(0, 0, 0, 0.15) var(--ib-fade-mid, 25%),
		#000 var(--ib-fade-end, 65%)
	);
}

/* ── Optional fade-into-color overlay ───────────────────────────────────── */
/* Renders only when --ib-blend-color is set on the section element. */

.mvc-image-blend[style*="--ib-blend-color"] .mvc-image-blend__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-color: var(--ib-blend-color);
	-webkit-mask-image: inherit;
	        mask-image: inherit;
}

.mvc-image-blend--img-right[style*="--ib-blend-color"] .mvc-image-blend__media::after {
	-webkit-mask-image: linear-gradient(
		to left,
		transparent 0%,
		rgba(0, 0, 0, 0.0) calc(100% - var(--ib-fade-end, 65%)),
		#000 calc(100% - var(--ib-fade-mid, 25%))
	);
	        mask-image: linear-gradient(
		to left,
		transparent 0%,
		rgba(0, 0, 0, 0.0) calc(100% - var(--ib-fade-end, 65%)),
		#000 calc(100% - var(--ib-fade-mid, 25%))
	);
}

.mvc-image-blend--img-left[style*="--ib-blend-color"] .mvc-image-blend__media::after {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		rgba(0, 0, 0, 0.0) calc(100% - var(--ib-fade-end, 65%)),
		#000 calc(100% - var(--ib-fade-mid, 25%))
	);
	        mask-image: linear-gradient(
		to right,
		transparent 0%,
		rgba(0, 0, 0, 0.0) calc(100% - var(--ib-fade-end, 65%)),
		#000 calc(100% - var(--ib-fade-mid, 25%))
	);
}

/* ── Strength variants ──────────────────────────────────────────────────── */
/* Higher strength = the visible image starts further to the right (or left)
   and the transparent zone is wider. */

.mvc-image-blend--strength-soft {
	--ib-fade-start: 10%;
	--ib-fade-mid: 15%;
	--ib-fade-end: 50%;
}

.mvc-image-blend--strength-medium {
	--ib-fade-start: 20%;
	--ib-fade-mid: 25%;
	--ib-fade-end: 65%;
}

.mvc-image-blend--strength-strong {
	--ib-fade-start: 30%;
	--ib-fade-mid: 35%;
	--ib-fade-end: 80%;
}

/* ── Blur variants ──────────────────────────────────────────────────────── */

.mvc-image-blend--blur-sm .mvc-image-blend__img { filter: blur(2px); }
.mvc-image-blend--blur-md .mvc-image-blend__img { filter: blur(5px); }
.mvc-image-blend--blur-lg .mvc-image-blend__img { filter: blur(10px); }

/* When the image is blurred, push it slightly past its container so the
   blurred edge doesn't reveal a hard transparent strip. */
.mvc-image-blend--blur-sm .mvc-image-blend__img,
.mvc-image-blend--blur-md .mvc-image-blend__img,
.mvc-image-blend--blur-lg .mvc-image-blend__img {
	transform: scale(1.04);
	transform-origin: center;
}

/* ── Body column ────────────────────────────────────────────────────────── */

.mvc-image-blend .mvc-container {
	position: relative;
	z-index: 1;
}

.mvc-image-blend__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 38rem;
	padding-block: var(--space-12);
}

.mvc-image-blend--img-left .mvc-image-blend__body {
	margin-inline-start: auto;
	text-align: left;
}

.mvc-image-blend__eyebrow {
	margin: 0;
}

.mvc-image-blend__title {
	margin: 0;
	font-size: var(--text-5xl);
	line-height: var(--leading-tight);
	color: var(--color-heading, var(--color-primary));
}

.mvc-image-blend__copy {
	color: var(--color-text-muted);
	font-size: var(--text-xl);
	line-height: var(--leading-relaxed);
}

/* ── Text color modes ───────────────────────────────────────────────────────
   Auto (no modifier) keeps the default dark-on-light treatment above.
   --text-light forces white title + copy for heroes sitting on a dark image
   or dark background. --text-dark pins dark text even if a parent scheme would
   otherwise lighten it. Eyebrow keeps its accent color in every mode. */
.mvc-image-blend--text-light .mvc-image-blend__title,
.mvc-image-blend--text-light .mvc-image-blend__copy {
	color: var(--color-text-inverse, #fff);
}

.mvc-image-blend--text-dark .mvc-image-blend__title {
	color: var(--color-heading, var(--color-primary));
}

.mvc-image-blend--text-dark .mvc-image-blend__copy {
	color: var(--color-text-muted);
}

.mvc-image-blend__copy p {
	margin: 0 0 var(--space-3);
}

.mvc-image-blend__copy p:last-child {
	margin-bottom: 0;
}

/* ── Search + CTA ───────────────────────────────────────────────────────── */

.mvc-image-blend__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-block-start: var(--space-4);
	align-items: center;
}

.mvc-image-blend__search {
	display: flex;
	align-items: stretch;
	flex: 1 1 280px;
	max-width: 420px;
	border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
	border-radius: var(--radius-md);
	background: var(--color-bg, #fff);
	overflow: hidden;
}

.mvc-image-blend__search-input {
	flex: 1;
	border: 0;
	background: transparent;
	padding: var(--space-3) var(--space-4);
	font: inherit;
	color: var(--color-text);
	min-width: 0;
}

.mvc-image-blend__search-input:focus {
	outline: 0;
}

.mvc-image-blend__search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: var(--space-3);
	border: 0;
	background: transparent;
	color: var(--color-accent, var(--color-primary));
	cursor: pointer;
}

.mvc-image-blend__search-btn:hover,
.mvc-image-blend__search-btn:focus-visible {
	color: var(--color-primary);
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	/* Mobile: collapse the auto-floor so short copy doesn't leave a tall
	   empty box. Explicit height picks are honoured (sm/md/tall/custom)
	   but capped so they never exceed the viewport awkwardly. */
	.mvc-image-blend--height-auto { min-height: 0; }
	.mvc-image-blend--height-tall { min-height: clamp(420px, 65vh, 560px); }
	.mvc-image-blend--height-full { min-height: 85dvh; }

	/* On narrow screens, drop the masked side-blend and show the image full-
	   bleed as a background. Legibility is handled by a solid dark overlay
	   on top of the image (not by fading the image itself), so the photo
	   stays crisp and the text reads cleanly.

	   !important is used on the geometry + mask reset because the desktop
	   side-blend rules (.mvc-image-blend--img-right .mvc-image-blend__media
	   etc.) live in the same stylesheet at the same specificity and would
	   otherwise tie — and because authors sometimes set ib_blend_color which
	   adds a higher-specificity attribute selector for the ::after layer. */
	.mvc-image-blend .mvc-image-blend__media {
		inset: 0 !important;
		left: 0 !important;
		right: 0 !important;
		opacity: 1 !important;
	}

	.mvc-image-blend .mvc-image-blend__img {
		-webkit-mask-image: none !important;
		        mask-image: none !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}

	/* Kill the fade-to-blend-color layer on mobile — its desktop purpose is
	   to make the image dissolve INTO the section background along a
	   horizontal mask. On mobile there is no horizontal fade, so this layer
	   just dirties the photo. */
	.mvc-image-blend .mvc-image-blend__media::after {
		display: none !important;
	}

	/* Author-set overlay div: render at solid opacity on mobile so text reads. */
	.mvc-image-blend .mvc-image-blend__overlay {
		background-color: var(--ib-overlay-color, rgba(0, 0, 0, 0.55)) !important;
		opacity: var(--ib-overlay-opacity, 0.55) !important;
	}

	/* Always-on readability scrim. Lives on the section itself via ::before so
	   it works whether or not the author enabled ib_overlay_color. Uses
	   --ib-blend-color if set (matches brand wash), else a dark fallback. */
	.mvc-image-blend::before {
		content: "" !important;
		position: absolute !important;
		inset: 0 !important;
		z-index: 1 !important;
		pointer-events: none !important;
		background-color: var(--ib-blend-color, rgba(0, 0, 0, 0.55)) !important;
		opacity: 0.55 !important;
	}

	.mvc-image-blend .mvc-container {
		position: relative !important;
		z-index: 2 !important;
	}

	.mvc-image-blend__body {
		padding-block: var(--space-10);
		max-width: none;
	}

	/* Scale the enlarged title/copy down a step on narrow screens so the
	   bigger desktop sizes don't overflow. */
	.mvc-image-blend__title { font-size: var(--text-4xl); }
	.mvc-image-blend__copy  { font-size: var(--text-lg); }
}