/**
 * File: /main/origin/origin.css
 *
 * MICROBA Origin Page
 * Version: 1.1.0
 * Revision: 2026-07-24
 *
 * @package Microba_Outlook
 */

.mo-detail--origin {
	--mo-origin-mask: #06100b;
}

/*
 * The supplied hero artwork contains presentation text on its left side.
 * This origin-specific mask suppresses that embedded text so the canonical
 * HTML heading remains the only readable page title.
 */
.mo-detail--origin .mo-origin-hero {
	background-position: center center;
}

.mo-detail--origin .mo-origin-hero::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background:
		linear-gradient(
			90deg,
			rgba(6, 16, 11, .98) 0%,
			rgba(6, 16, 11, .96) 24%,
			rgba(6, 16, 11, .82) 42%,
			rgba(6, 16, 11, .24) 66%,
			rgba(6, 16, 11, .04) 100%
		);
	pointer-events: none;
}

.mo-detail--origin .mo-origin-hero::after {
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(2, 8, 5, .12), rgba(2, 8, 5, .84)),
		linear-gradient(90deg, rgba(4, 11, 7, .22), rgba(4, 11, 7, .02) 72%);
}

.mo-detail--origin .mo-origin-hero__content {
	z-index: 2;
	max-width: 760px;
}

.mo-detail--origin .mo-origin-hero__content h1 {
	font-size: clamp(3.7rem, 7.2vw, 7.15rem);
	text-shadow: 0 4px 28px rgba(0, 0, 0, .34);
}

.mo-detail--origin .mo-origin-story__media {
	background-position: 48% center;
}

/*
 * Quote artwork calibration.
 * The left side remains masked to suppress typography embedded in the image,
 * while the centre and right side stay visible as the third editorial image.
 */
.mo-detail--origin .mo-origin-quote {
	position: relative;
	isolation: isolate;
	min-height: clamp(620px, 70vw, 860px);
	display: grid;
	align-items: center;
	padding-block: clamp(100px, 13vw, 170px);
	/* Override the dark shared quote gradient so the third image remains visible. */
	background:
		var(--mo-detail-cta-image),
		#07100b;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: left;
}

.mo-detail--origin .mo-origin-quote::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background:
		linear-gradient(
			90deg,
			rgba(4, 10, 7, .72) 0%,
			rgba(4, 10, 7, .54) 24%,
			rgba(4, 10, 7, .22) 46%,
			rgba(4, 10, 7, .06) 70%,
			rgba(4, 10, 7, 0) 100%
		),
		linear-gradient(
			180deg,
			rgba(4, 10, 7, .04) 0%,
			rgba(4, 10, 7, .08) 62%,
			rgba(4, 10, 7, .18) 100%
		);
	pointer-events: none;
}

.mo-detail--origin .mo-origin-quote__inner {
	display: flex;
	justify-content: flex-end;
}

.mo-detail--origin .mo-origin-quote blockquote {
	max-width: 720px;
	margin: 0;
	padding: clamp(24px, 3vw, 42px);
	border: 1px solid rgba(199, 164, 90, .12);
	background: rgba(4, 10, 7, .12);
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
	font-size: clamp(2.5rem, 4.5vw, 4.9rem);
	text-align: left;
	text-shadow: 0 4px 24px rgba(0, 0, 0, .72);
}

@media (max-width: 980px) {
	.mo-detail--origin .mo-origin-hero::before {
		background: linear-gradient(
			90deg,
			rgba(6, 16, 11, .98) 0%,
			rgba(6, 16, 11, .92) 48%,
			rgba(6, 16, 11, .34) 78%,
			rgba(6, 16, 11, .10) 100%
		);
	}

	.mo-detail--origin .mo-origin-quote::before {
		background:
			linear-gradient(
				90deg,
				rgba(4, 10, 7, .58) 0%,
				rgba(4, 10, 7, .28) 46%,
				rgba(4, 10, 7, .06) 100%
			),
			linear-gradient(180deg, rgba(4, 10, 7, .03), rgba(4, 10, 7, .18));
	}

	.mo-detail--origin .mo-origin-quote__inner {
		justify-content: center;
	}

	.mo-detail--origin .mo-origin-quote blockquote {
		max-width: 780px;
		text-align: center;
	}
}

@media (max-width: 620px) {
	.mo-detail--origin .mo-origin-hero {
		background-position: 62% center;
	}

	.mo-detail--origin .mo-origin-hero::before {
		background: linear-gradient(
			180deg,
			rgba(6, 16, 11, .48) 0%,
			rgba(6, 16, 11, .78) 48%,
			rgba(6, 16, 11, .97) 100%
		);
	}

	.mo-detail--origin .mo-origin-hero__content {
		max-width: 100%;
	}

	.mo-detail--origin .mo-origin-hero__content h1 {
		font-size: clamp(3.25rem, 15vw, 5rem);
	}

	.mo-detail--origin .mo-origin-quote {
		min-height: 660px;
		background-position: 68% center;
	}

	.mo-detail--origin .mo-origin-quote::before {
		background: linear-gradient(
			180deg,
			rgba(4, 10, 7, .06) 0%,
			rgba(4, 10, 7, .20) 48%,
			rgba(4, 10, 7, .48) 100%
		);
	}

	.mo-detail--origin .mo-origin-quote blockquote {
		padding: 24px 18px;
		font-size: clamp(2.35rem, 11vw, 3.6rem);
		text-align: center;
	}
}