/*
 * Emberloom Archive Heading — frontend
 *
 * Every declaration reads a `--eah-*` custom property with a shipped
 * fallback, so the stylesheet itself is static: global settings, presets and
 * shortcode attributes set the properties inline on `.eah`, and Elementor's
 * style controls override the properties themselves from a
 * higher-specificity selector.
 */

.eah {
	display: block;
	max-width: var(--eah-max-width, none);
}

.eah--align-center { text-align: center; margin-inline: auto; }
.eah--align-right  { text-align: right; }

/* ------------------------------------------------------------- eyebrow */

/*
 * Inline-block, not flex: the rule and the eyebrow text then follow whatever
 * `text-align` is in force, so alignment is one mechanism (a single
 * `text-align` declaration) for both the eyebrow and the heading — which is
 * also what lets Elementor's alignment control drive the whole block.
 */
.eah__eyebrow {
	margin: 0 0 var(--eah-gap-eyebrow, 1.5rem);
}

.eah__rule {
	display: inline-block;
	vertical-align: middle;
	width: var(--eah-rule-width, 2.75rem);
	height: var(--eah-rule-thickness, 1px);
	margin-right: var(--eah-rule-gap, 1.25rem);
	background: var(--eah-rule-color, currentColor);
}

/*
 * Plain inline, not inline-block. An inline-block is an atomic box: it cannot
 * break internally, so as soon as rule + gap + the whole eyebrow no longer fit
 * on one line the text dropped to a line of its own and left the rule stranded
 * above it — which is what happens on a phone with any eyebrow of a realistic
 * length. Inline lets the text wrap between words instead, and the rule keeps
 * its place at the start of the first line however long the text runs.
 */
.eah__eyebrow-text {
	display: inline;
	vertical-align: middle;
	color: var(--eah-eyebrow-color, currentColor);
	font-family: var(--eah-eyebrow-font, inherit);
	font-size: var(--eah-eyebrow-size, 0.75rem);
	font-weight: var(--eah-eyebrow-weight, 600);
	letter-spacing: var(--eah-eyebrow-spacing, 0.18em);
	text-transform: var(--eah-eyebrow-transform, uppercase);
	line-height: 1.2;
}

.eah__lead { color: var(--eah-lead-color, inherit); }
.eah__tail { color: var(--eah-tail-color, inherit); }

.eah__sep {
	margin: 0 var(--eah-separator-space, 0.55em);
	color: var(--eah-separator-color, inherit);
}

/* --------------------------------------------------------------- title */

.eah__title {
	margin: 0;
	text-wrap: balance;
	color: var(--eah-title-color, inherit);
	font-family: var(--eah-title-font, inherit);
	font-size: var(--eah-title-size, clamp(2.75rem, 7vw, 5.5rem));
	font-weight: var(--eah-title-weight, 400);
	letter-spacing: var(--eah-title-spacing, normal);
	line-height: var(--eah-title-line-height, 1.02);
}

.eah__title-main {
	/* Inline, because the <br> after it is what makes the break. A block
	   here would produce a second, uncontrollable line gap. */
	display: inline;
}

/*
 * The subhead lives inside the heading element, so it has to reset every
 * type property the heading sets rather than inherit it.
 */
.eah__title-sub,
.eah__sub-standalone .eah__title-sub {
	/* inline-block, not inline: padding on a purely inline box does not
	   push the surrounding lines apart, so the padding control below would
	   look like it did nothing. */
	display: inline-block;
	margin-top: var(--eah-gap-sub, 1.25rem);
	padding: var(--eah-sub-padding, 0);
	max-width: var(--eah-sub-max-width, 46ch);
	color: var(--eah-sub-color, inherit);
	font-family: var(--eah-sub-font, inherit);
	font-size: var(--eah-sub-size, clamp(1rem, 1.4vw, 1.35rem));
	font-weight: var(--eah-sub-weight, 400);
	letter-spacing: var(--eah-sub-spacing, normal);
	line-height: var(--eah-sub-line-height, 1.5);
	text-transform: none;
	text-wrap: pretty;
}

.eah--align-center .eah__title-sub { margin-inline: auto; }
.eah--align-right .eah__title-sub  { margin-inline-start: auto; }

.eah__sub-standalone {
	margin: 0;
}

/* ---------------------------------------------------------- small screens */

@media (max-width: 782px) {
	.eah__rule {
		width: var(--eah-rule-width, 1.75rem);
		margin-right: var(--eah-rule-gap, 0.85rem);
	}
	.eah__eyebrow-text {
		letter-spacing: var(--eah-eyebrow-spacing, 0.14em);
	}
}

/* ============================================================ stat row */

.eah-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 0;
}

.eah-stats--align-left  { justify-content: flex-start; }
.eah-stats--align-right { justify-content: flex-end; }

.eah-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 0 calc(var(--eah-stats-gap, 2.75rem) / 2);
	text-align: center;
}

/*
 * Half the gap on each item is what puts a whole gap between neighbours, but
 * on the two ends it has nothing to separate — it just insets the row from
 * whatever contains it, and Space Between Stats then moves two things at once:
 * you cannot close the outer inset without also closing up the stats. So the
 * outer edges are dropped. Padding around the row belongs to the container
 * that holds it, which can already be given its own.
 */
.eah-stats__item:first-child { padding-inline-start: 0; }
.eah-stats__item:last-child  { padding-inline-end: 0; }

/*
 * The divider hangs off every item after the first, so it only ever appears
 * *between* stats — however many there are, and however they wrap. A
 * pseudo-element rather than a border, so its height can be set independently
 * of how tall the stat happens to be.
 */
.eah-stats__item + .eah-stats__item {
	position: relative;
}

.eah-stats__item + .eah-stats__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	transform: translateY(-50%);
	width: var(--eah-stats-divider-width, 1px);
	height: var(--eah-stats-divider-height, 100%);
	background: var(--eah-stats-divider-color, currentColor);
	opacity: var(--eah-stats-divider-alpha, 0.35);
}

.eah-stats--no-divider .eah-stats__item + .eah-stats__item::before {
	content: none;
}

.eah-stats__value {
	display: block;
	color: var(--eah-stat-value-color, inherit);
	font-family: var(--eah-stat-value-font, inherit);
	font-size: var(--eah-stat-value-size, clamp(2rem, 3.5vw, 2.75rem));
	font-weight: var(--eah-stat-value-weight, 400);
	letter-spacing: var(--eah-stat-value-spacing, normal);
	line-height: 1.1;
	font-variant-numeric: lining-nums tabular-nums;
}

.eah-stats__label {
	display: block;
	margin-top: var(--eah-stat-label-gap, 0.75rem);
	color: var(--eah-stat-label-color, inherit);
	font-family: var(--eah-stat-label-font, inherit);
	font-size: var(--eah-stat-label-size, 0.75rem);
	font-weight: var(--eah-stat-label-weight, 600);
	letter-spacing: var(--eah-stat-label-spacing, 0.18em);
	text-transform: var(--eah-stat-label-transform, uppercase);
	line-height: 1.2;
}

@media (max-width: 782px) {
	.eah-stats__item {
		padding: 0 calc(var(--eah-stats-gap, 1.5rem) / 2);
	}
}