/* =============================================================================
   Mido Hasan — Unified Internal Page Header
   /assets/css/14__page-hero.css

   MIDO PHASE 10.4.2 UNIFIED HEADER SYSTEM ACTIVE

   Visual rhythm matches homepage hero (.mht-hero):
   - Same deep dark background
   - Same radial-gradient atmosphere palette (subdued for internal pages)
   - Same kicker / heading / lede type scale
   - Left-aligned, same container width as nav

   Used by: Work, Thinking, Enquiries, single project, single post,
            Templates, Thank You, generic pages.
   NOT used on homepage. NOT used on About (its own header).
   ============================================================================= */

/* --------------------------------------------------------------------------
   Section envelope — dark foundation matching homepage
   -------------------------------------------------------------------------- */
.mht-page-hero {
	position: relative;
	overflow: clip;
	isolation: isolate;
	background: var(--bg-primary, #0D0D0D);
	/* Top: clears fixed nav (≈96px) + breathing. Bottom: transitions to content. */
	padding-block: clamp(110px, 14vw, 160px) clamp(48px, 6vw, 80px);
}

/* --------------------------------------------------------------------------
   Gradient atmosphere — mirrors homepage .mht-hero::before palette
   Stronger purple/lavender at top-right, softer plum at bottom-left.
   Intentionally more contained than the homepage so it doesn't overpower.
   -------------------------------------------------------------------------- */
.mht-page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 55% 45% at 78% 8%,  rgba(142,99,163,.18), transparent 60%),
		radial-gradient(ellipse 30% 24% at 86% 22%, rgba(183,140,255,.09), transparent 64%),
		radial-gradient(ellipse 45% 36% at 10% 80%, rgba(76,52,93,.28),   transparent 66%),
		radial-gradient(ellipse 25% 20% at 50% 60%, rgba(197,166,211,.06), transparent 68%);
}

/* --------------------------------------------------------------------------
   Content — left-aligned, same width as nav bar
   -------------------------------------------------------------------------- */
.mht-page-hero__inner {
	position: relative;
	z-index: 1;
	width: var(--site-w);
	max-width: var(--site-max);
	margin-inline: auto;
	text-align: left;
}

/* Kicker — same as homepage mht-hero__eyebrow spacing */
.mht-page-hero__kicker {
	margin: 0 0 clamp(14px, 2vw, 20px);
}

/* Heading — same type scale as homepage */
.mht-page-hero__heading {
	margin: 0 0 clamp(14px, 2vw, 20px);
	/* Phase 10.9.4 (Option C): widened from 22ch so the headline fills more
	   of the available width instead of leaving a large right-side gap.
	   Stays left-aligned (editorial), just less cramped. */
	max-width: 32ch;
	text-align: left;
}

/* Meta line — for post type / date / category chips under the title */
.mht-page-hero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0 0 clamp(12px, 1.8vw, 18px);
	font-family: var(--font-sans);
	font-size: clamp(.78rem, .85vw, .88rem);
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--text-muted, #7C7284);
}
.mht-page-hero__meta-sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--text-faint, #7C7284);
	opacity: .5;
	flex-shrink: 0;
}
.mht-page-hero__meta-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	border: 1px solid rgba(183,140,255,.22);
	background: rgba(183,140,255,.06);
	color: var(--text-secondary, #AFA4B8);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
}

/* Lede — same as homepage mht-hero__subline */
.mht-page-hero__lede {
	margin: 0;
	/* Phase 10.9.4 (Option C): widened from 58ch to fill more width. */
	max-width: 72ch;
	color: var(--text-secondary, #DDD6E3);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mht-page-hero__bg { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
	.mht-page-hero {
		padding-block: clamp(96px, 22vw, 120px) clamp(32px, 8vw, 48px);
	}
	.mht-page-hero__heading {
		max-width: none;
	}
}

/* ── PHASE 10.4.3 META DOT ALIGNMENT FIX ── */
/* Force dot to always sit at exact vertical center */
.mht-page-hero__meta-sep {
	align-self: center;
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}
/* Pills inline-flex with centered content */
.mht-page-hero__meta-pill {
	align-self: center;
	line-height: 1;
}

/* =============================================================================
   MIDO PHASE 10.4.4.2 — PROJECT HEADER META ROW: TWO-PILL SYSTEM
   Types pill → pipe separator → Year pill.
   Separator is vertically centered using flexbox alignment.
   Parent .mht-page-hero__meta already has display:flex + align-items:center.
   ============================================================================= */

/* Types pill — service label */
.mht-ph-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	border: 1px solid rgba(183, 140, 255, .22);
	background: rgba(183, 140, 255, .06);
	color: var(--text-secondary, #AFA4B8);
	font-family: var(--font-sans);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1;
	white-space: nowrap;
}

/* Year pill — slightly distinct, same base style */
.mht-ph-pill--year {
	color: var(--text-muted, #7C7284);
	border-color: rgba(183, 140, 255, .12);
	background: rgba(183, 140, 255, .03);
}

/* Separator pipe — vertically centered between pills */
.mht-ph-separator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding-inline: clamp(0.75rem, 1vw, 1rem);
	font-size: .875rem;
	font-weight: 300;
	line-height: 1;
	color: var(--text-faint, #7C7284);
	opacity: .7;
	align-self: center;
	transform: none;
}

/* =====================================================
   Phase 151G — light-mode fallback for non-motion page headers
   Motion page headers already fade into the light page canvas in
   assets/css/50__motion-bg.css. This keeps the static page-header fallback
   clean when page-header motion is disabled.
   ===================================================== */
html[data-mht-theme-effective="light"] .mht-page-hero:not(.mht-page-hero--motion-bg),
html[data-mht-theme="light"] .mht-page-hero:not(.mht-page-hero--motion-bg) {
	background: var(--mht-p70-page-soft, #FBF8FD);
}

html[data-mht-theme-effective="light"] .mht-page-hero:not(.mht-page-hero--motion-bg) .mht-page-hero__bg,
html[data-mht-theme="light"] .mht-page-hero:not(.mht-page-hero--motion-bg) .mht-page-hero__bg {
	background:
		radial-gradient(ellipse 54% 44% at 78% 8%, rgba(230,216,255,.42), transparent 62%),
		radial-gradient(ellipse 34% 26% at 10% 82%, rgba(197,166,211,.22), transparent 68%),
		linear-gradient(180deg, rgba(251,248,253,0) 0%, var(--mht-p70-page-soft, #FBF8FD) 100%);
	opacity: .82 !important;
}

/* =============================================================================
   Phase 151O — global glass metadata labels
   Shared by single post heroes and project story heroes. This intentionally
   does not target nav pills, legal metadata chips, buttons, or glass cards.
   ========================================================================== */
.mht-meta-labels,
.mht-page-hero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
}

.mht-meta-label,
.mht-page-hero__meta-pill,
.mht-ph-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 26px;
	padding: 5px 11px;
	border-radius: 999px;
	border: 1px solid rgba(197, 166, 211, 0.20);
	background:
		linear-gradient(180deg, rgba(246, 242, 247, 0.095), rgba(246, 242, 247, 0.035)),
		rgba(27, 22, 32, 0.52);
	box-shadow:
		inset 0 1px 0 rgba(246, 242, 247, 0.12),
		0 14px 34px rgba(13, 13, 13, 0.18);
	-webkit-backdrop-filter: blur(18px) saturate(145%);
	backdrop-filter: blur(18px) saturate(145%);
	color: var(--text-secondary, #DDD6E3);
	font-family: var(--font-sans, "Blauer Nue", system-ui, sans-serif);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.075em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.mht-meta-label--muted,
.mht-ph-pill--year {
	color: var(--text-muted, #AFA4B8);
	border-color: rgba(197, 166, 211, 0.14);
	background:
		linear-gradient(180deg, rgba(246, 242, 247, 0.07), rgba(246, 242, 247, 0.025)),
		rgba(20, 16, 23, 0.45);
}

.mht-meta-label--accent {
	color: var(--accent-soft, #C5A6D3);
	border-color: rgba(183, 140, 255, 0.28);
	background:
		linear-gradient(180deg, rgba(183, 140, 255, 0.13), rgba(183, 140, 255, 0.045)),
		rgba(27, 22, 32, 0.56);
}

.mht-meta-labels__sep,
.mht-page-hero__meta-sep,
.mht-ph-separator {
	width: 4px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(197, 166, 211, 0.46);
	opacity: 0.8;
	font-size: 0;
	line-height: 0;
	transform: none;
}

html[data-mht-theme-effective="light"] .mht-meta-label,
html[data-mht-theme="light"] .mht-meta-label,
html[data-mht-theme-effective="light"] .mht-page-hero__meta-pill,
html[data-mht-theme="light"] .mht-page-hero__meta-pill,
html[data-mht-theme-effective="light"] .mht-ph-pill,
html[data-mht-theme="light"] .mht-ph-pill {
	border-color: rgba(76, 52, 93, 0.16);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(230, 216, 255, 0.34)),
		rgba(246, 242, 247, 0.62);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.72),
		0 12px 30px rgba(47, 31, 58, 0.08);
	color: rgba(47, 31, 58, 0.76);
}

html[data-mht-theme-effective="light"] .mht-meta-label--accent,
html[data-mht-theme="light"] .mht-meta-label--accent {
	color: #4C345D;
	border-color: rgba(142, 99, 163, 0.28);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(230, 216, 255, 0.48)),
		rgba(246, 242, 247, 0.76);
}

@media (max-width: 560px) {
	.mht-meta-label,
	.mht-page-hero__meta-pill,
	.mht-ph-pill {
		min-height: 24px;
		padding: 5px 9px;
		font-size: 0.66rem;
		letter-spacing: 0.065em;
	}
}