/**
 * MICROBA Core Footer Pages
 * Version: 1.0.0
 * Revision: 2026-07-24
 */

.mo-detail {
	--mo-detail-gold: #c7a45a;
	--mo-detail-ink: #07110c;
	--mo-detail-forest: #0b1811;
	--mo-detail-cream: #eee7d7;
	--mo-detail-text: #e9e4d8;
	background: var(--mo-detail-ink);
	color: var(--mo-detail-text);
	overflow: hidden;
}

.mo-detail *,
.mo-detail *::before,
.mo-detail *::after {
	box-sizing: border-box;
}

.mo-detail__shell {
	width: min(1180px, calc(100% - 48px));
	margin-inline: auto;
}

.mo-detail__hero {
	position: relative;
	min-height: clamp(620px, 82vh, 900px);
	display: grid;
	align-items: end;
	background:
		linear-gradient(180deg, rgba(3, 9, 6, .12), rgba(3, 9, 6, .94)),
		var(--mo-detail-hero-image),
		radial-gradient(circle at 70% 20%, #40543d 0, #101d14 38%, #050b08 78%);
	background-position: center;
	background-size: cover;
	border-bottom: 1px solid rgba(199, 164, 90, .6);
}

.mo-detail__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(4, 11, 7, .74), rgba(4, 11, 7, .05) 70%);
	pointer-events: none;
}

.mo-detail__hero-content {
	position: relative;
	z-index: 1;
	max-width: 880px;
	padding-block: clamp(120px, 18vw, 220px) clamp(72px, 9vw, 112px);
}

.mo-detail__eyebrow {
	margin: 0 0 24px;
	color: var(--mo-detail-gold);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .25em;
	text-transform: uppercase;
}

.mo-detail__hero h1,
.mo-detail__section h2,
.mo-detail__quote blockquote,
.mo-detail__cta h2 {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
}

.mo-detail__hero h1 {
	max-width: 900px;
	margin: 0;
	font-size: clamp(3.4rem, 8vw, 7.8rem);
	line-height: .94;
	letter-spacing: -.045em;
	text-wrap: balance;
}

.mo-detail__section {
	padding-block: clamp(88px, 11vw, 150px);
}

.mo-detail__section--cream {
	background: var(--mo-detail-cream);
	color: #172017;
}

.mo-detail__section--dark {
	background:
		radial-gradient(circle at 85% 10%, rgba(73, 104, 75, .18), transparent 34%),
		var(--mo-detail-forest);
}

.mo-detail__intro {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(48px, 9vw, 130px);
	align-items: start;
}

.mo-detail__section h2 {
	margin: 0;
	font-size: clamp(2.6rem, 5vw, 5rem);
	line-height: 1;
	letter-spacing: -.035em;
	text-wrap: balance;
}

.mo-detail__lead {
	margin: 0;
	font-size: clamp(1.15rem, 1.7vw, 1.45rem);
	line-height: 1.75;
}

.mo-detail__story {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
	gap: clamp(44px, 8vw, 110px);
	align-items: center;
}

.mo-detail__story-media {
	min-height: clamp(420px, 55vw, 680px);
	border: 1px solid rgba(199, 164, 90, .4);
	background:
		linear-gradient(180deg, rgba(2, 8, 5, .08), rgba(2, 8, 5, .5)),
		var(--mo-detail-story-image),
		radial-gradient(circle at 25% 20%, #6d7654, #283526 42%, #0a110d 80%);
	background-position: center;
	background-size: cover;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.mo-detail__story-copy p {
	margin: 28px 0 0;
	color: rgba(233, 228, 216, .78);
	font-size: 1.08rem;
	line-height: 1.8;
}

.mo-detail__principles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: clamp(52px, 7vw, 82px);
}

.mo-detail__card {
	min-height: 260px;
	padding: 36px;
	border: 1px solid rgba(111, 86, 39, .28);
	background: rgba(255, 255, 255, .34);
}

.mo-detail__card-number {
	display: block;
	margin-bottom: 48px;
	color: #8c6c2d;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.1rem;
}

.mo-detail__card h3 {
	margin: 0 0 16px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.8rem;
	font-weight: 400;
}

.mo-detail__card p {
	margin: 0;
	line-height: 1.7;
	color: #465047;
}

.mo-detail__quote {
	padding-block: clamp(105px, 14vw, 190px);
	background:
		linear-gradient(rgba(4, 10, 7, .82), rgba(4, 10, 7, .88)),
		var(--mo-detail-cta-image),
		#07100b;
	background-position: center;
	background-size: cover;
	text-align: center;
}

.mo-detail__quote blockquote {
	max-width: 980px;
	margin: 0 auto;
	font-size: clamp(2.4rem, 5vw, 5.2rem);
	line-height: 1.08;
	letter-spacing: -.035em;
	text-wrap: balance;
}

.mo-detail__cta {
	padding-block: clamp(86px, 11vw, 145px);
	background: #d9cfb9;
	color: #142016;
	text-align: center;
}

.mo-detail__cta p {
	max-width: 690px;
	margin: 28px auto 38px;
	font-size: 1.1rem;
	line-height: 1.75;
	color: #495149;
}

.mo-detail__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 14px 28px;
	border: 1px solid #80652e;
	color: #253025;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.mo-detail__button:hover,
.mo-detail__button:focus-visible {
	background: #16231a;
	color: #f1eadc;
	transform: translateY(-2px);
}

@media (max-width: 820px) {
	.mo-detail__shell {
		width: min(100% - 32px, 1180px);
	}

	.mo-detail__intro,
	.mo-detail__story {
		grid-template-columns: 1fr;
	}

	.mo-detail__principles {
		grid-template-columns: 1fr;
	}

	.mo-detail__story-media {
		order: -1;
		min-height: 430px;
	}
}

@media (max-width: 520px) {
	.mo-detail__hero {
		min-height: 680px;
	}

	.mo-detail__hero-content {
		padding-bottom: 64px;
	}

	.mo-detail__card {
		min-height: 0;
		padding: 28px;
	}

	.mo-detail__story-media {
		min-height: 360px;
	}
}