/* ──────────────────────────────────────────────
   SIA Heading — frontend
   Three-zone block: pill label, headline, subtitle paragraph.
   `align-items` + `text-align` are owned by the Layout → Alignment control
   (responsive). All other visual properties flow from Elementor.
   ────────────────────────────────────────────── */

.sia-h {
	display: flex;
	flex-direction: column;
	align-items: center;             /* default — overridden responsively by alignment control */
	text-align: center;
	width: 100%;
}
.sia-h * { box-sizing: border-box; }

/* ─── Label (pill) ─── */
.sia-h__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 18px;
	border-radius: 99px;
	background-color: color-mix(in srgb, var(--sia-color-secondary, #54595F), transparent 80%);
	color: var(--sia-color-primary, #c5ed3b);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
	/* Constrain so the pill hugs the text rather than stretching to the
	   container's width when the heading container is full-width. */
	width: auto;
	max-width: 100%;
}
.sia-h__label-text {
	display: inline-block;
	line-height: 1;
}
.sia-h__label-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 0;
}
.sia-h__label-icon i,
.sia-h__label-icon svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.sia-h__label-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ─── Title ─── */
.sia-h__title {
	margin: 16px 0 0;          /* default gap below label — overridden by control */
	font-size: 48px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--sia-color-text, #1A1718);
	max-width: 100%;
}

/* ─── Subtitle ─── */
.sia-h__subtitle {
	margin: 12px 0 0;          /* default gap below title — overridden by control */
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.7);
	max-width: 640px;
}

/* ─── Responsive type scale ─── */
@media (max-width: 768px) {
	.sia-h__title { font-size: 36px; }
}
@media (max-width: 480px) {
	.sia-h__title { font-size: 28px; }
	.sia-h__subtitle { font-size: 14px; }
}