/* ──────────────────────────────────────────────────────────────────────────
   MTP Manufaktur — Surfaces & strukturelle Bausteine
   Designrichtung „Instrumentenlicht" (design.md §10).

   Stellt die wiederverwendbaren Dark→Light-Bausteine bereit:
     .mtp-dark / .mtp-light  — Surface-Grund (kippt die semantischen Tokens, tokens.css)
     .mtp-section / .mtp-wrap — vertikaler Rhythmus + zentrierter Container
     .mtp-glow                — radialer Brass-Lichtkegel (Hero auf Dark)
     .mtp-seam                — gefederte 50px-Naht Dark→Light (+ Sentinel für Header-Swap)
     .mtp-waterline           — Brass-Hairline + Mono-Label + Diamant (Artikel, vor der Naht)

   Komponenten in components.css referenzieren NUR semantische Tokens und sitzen
   in einer dieser Surfaces — sie werden dadurch automatisch hell oder dunkel.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Surface-Grund ───────────────────────────────────────────────────────── */
/* Wendet die in tokens.css je Surface gesetzten semantischen Tokens an. */
.mtp-dark,
.mtp-light {
	background-color: var(--mtp-bg);
	color: var(--mtp-fg);
}

/* ── Section: vertikaler Rhythmus, full-bleed-fähig ──────────────────────── */
.mtp-section {
	padding-block: clamp(64px, 9vw, 120px);
}
.mtp-section--tight {
	padding-block: clamp(40px, 6vw, 72px);
}
.mtp-section--flush-top    { padding-block-start: 0; }
.mtp-section--flush-bottom { padding-block-end: 0; }

/* ── Wrap: zentrierter Inner-Container mit Gutter ────────────────────────── */
.mtp-wrap {
	width: 100%;
	max-width: var(--mtp-maxw);
	margin-inline: auto;
	padding-inline: var(--mtp-gutter);
}
/* Lese-Spalte (Artikel-Prosa): measure + Gutter. */
.mtp-wrap--measure {
	max-width: calc(var(--mtp-measure) + 2 * var(--mtp-gutter));
}
/* Content-Breite wie klassische Pages. */
.mtp-wrap--content {
	max-width: calc(var(--mtp-container-content) + 2 * var(--mtp-gutter));
}

/* ── Brass-Glow: radialer Lichtkegel (Hero auf Dark, §10) ────────────────── */
/* „Brass wird auf Dunkel zu Licht" — monochromer Glow, keine Fläche. */
.mtp-glow {
	position: relative;
	isolation: isolate;
}
.mtp-glow > * {
	position: relative;
	z-index: 1;
}
.mtp-glow::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(60% 65% at 78% 52%,
		rgba(232, 196, 98, 0.30) 0%,
		rgba(180, 151, 16, 0.13) 20%,
		rgba(40, 30, 15, 0) 50%,
		rgba(23, 22, 23, 0) 100%);
}
/* Gedämpftere Glow-Variante (Artikel-Auftakt, höher positioniert). */
.mtp-glow--soft::before {
	background: radial-gradient(50% 60% at 80% 35%,
		rgba(232, 196, 98, 0.18) 0%,
		rgba(180, 151, 16, 0.08) 25%,
		rgba(40, 30, 15, 0) 55%);
}

/* ── Gefederte Naht: warmer Übergang Dark→Light (§10) ─────────────────────── */
/* Ruhig getönt (nie neutralgrau). Sentinel in der Mitte triggert den Header-Swap. */
.mtp-seam {
	position: relative;
	height: 72px;
	margin-block: 0;
	padding: 0 !important; /* gegen Astra/root-padding — Naht geht edge-to-edge */
	background: linear-gradient(180deg,
		var(--mtp-ink-0)     0%,
		#191713            34%,
		rgba(90, 76, 42, 0.62) 58%,
		rgba(194, 181, 142, 0.52) 82%,
		var(--mtp-paper-bg) 100%);
}
/* Naht aus tieferem Panel-Grund (Artikel). */
.mtp-seam--panel {
	background: linear-gradient(180deg,
		var(--mtp-ink-panel) 0%,
		#191713            34%,
		rgba(90, 76, 42, 0.62) 58%,
		rgba(194, 181, 142, 0.52) 82%,
		var(--mtp-paper-bg) 100%);
}
/* Unsichtbarer Sentinel auf 50% — IntersectionObserver-Ziel (sticky-header.js). */
.mtp-seam__sentinel {
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

/* ── Waterline: Brass-Hairline + Mono-Label + Diamant (Artikel, auf Dark) ── */
.mtp-waterline {
	background-color: var(--mtp-bg);
	padding-block-end: 28px;
}
.mtp-waterline__inner {
	display: flex;
	align-items: center;
	gap: 22px;
	max-width: var(--mtp-maxw);
	margin-inline: auto;
	padding-inline: var(--mtp-gutter);
}
.mtp-waterline__rule {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--mtp-brass-light) 50%,
		transparent 100%);
	opacity: 0.7;
}
.mtp-waterline__label {
	font-family: var(--mtp-font-mono);
	font-size: 10.5px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--mtp-brass-light);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 14px;
}
.mtp-waterline__label::before,
.mtp-waterline__label::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--mtp-brass-light);
	transform: rotate(45deg);
}

/* ── Eyebrow & Meta — surface-aware (Akzentfarbe kippt mit der Surface) ──── */
/* Eyebrow: Instrument-Serif italic + Hairline (§10, ersetzt die alte Mono-Caps-Variante). */
.mtp-eyebrow {
	font-family: var(--mtp-font-display);
	font-style: italic;
	font-size: 22px;
	line-height: 1;
	letter-spacing: 0.005em;
	color: var(--mtp-accent);
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
.mtp-eyebrow::before {
	content: "";
	width: 36px;
	height: 1px;
	background: var(--mtp-accent);
	opacity: 0.85;
}
/* Mono-Meta-Label (Eyebrows alt / Daten / Tags). */
.mtp-meta {
	font-family: var(--mtp-font-mono);
	font-size: 10.5px;
	letter-spacing: var(--mtp-tracking-mono);
	text-transform: uppercase;
	color: var(--mtp-fg-quiet);
	white-space: nowrap;
}