/**
 * GEOCIKLO Core — Editorial Context Block layout.
 *
 * Pure spacing/rhythm for the "why this automation matters" block. Typography
 * (eyebrow, title, lead, small body) comes entirely from geociklo-typography.css;
 * this file never redefines font-family, size, weight or color of text.
 */

.gc-context-block {
	max-width: var(--gc-prose-lead-max, 820px);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: clamp(28px, 4vw, 44px);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.gc-context-block__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	text-align: center;
}

.gc-context-block__title {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 14px;
	text-align: center;
	max-width: 100%;
}

.gc-context-block__desc {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	text-align: center;
	max-width: 740px;
}

.gc-context-block__micro {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
	margin-bottom: 0;
	font-style: italic;
	text-align: center;
}

.gc-context-block__micro-mark {
	flex-shrink: 0;
	width: 14px;
	height: 1px;
	margin-top: 0;
	background: var(--gc-accent, #3fae6a);
}

/* Optional left-aligned variant */
.gc-context-block--left {
	margin-left: 0;
	margin-right: auto;
	text-align: left;
	align-items: flex-start;
}

.gc-context-block--left .gc-context-block__eyebrow,
.gc-context-block--left .gc-context-block__title,
.gc-context-block--left .gc-context-block__desc {
	text-align: left;
	margin-left: 0;
}

.gc-context-block--left .gc-context-block__micro {
	justify-content: flex-start;
	text-align: left;
}

/* Dark variant: block sits over an image/video background. */
.gc-context-block--dark .gc-context-block__eyebrow {
	color: var(--gc-text-on-dark, #ffffff);
	opacity: 0.85;
}

.gc-context-block--dark .gc-context-block__title {
	color: var(--gc-text-on-dark, #ffffff);
}

.gc-context-block--dark .gc-context-block__desc {
	color: var(--gc-text-on-dark-muted, rgba(255, 255, 255, 0.78));
}

.gc-context-block--dark .gc-context-block__micro {
	color: var(--gc-text-on-dark-muted, rgba(255, 255, 255, 0.78));
}

.gc-context-block--dark .gc-context-block__micro-mark {
	background: var(--gc-text-on-dark, #ffffff);
	opacity: 0.6;
}