/* [sih_stats] — the landing page's number tiles, embedded in page-builder layouts.
   Selectors are prefixed with .sih-embed so theme rules on spans/divs inside
   WPBakery Text Blocks cannot override them. */

.sih-embed {
	--sih-ink: #10231f;
	--sih-muted: #55665f;
	--sih-forest: #0f3b3a;
	--sih-leaf: #c9e265;
	--sih-radius: 18px;
	--sih-display: "Bai Jamjuree", "Sis-Bold", system-ui, sans-serif;
	--sih-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	container-type: inline-size;
	margin-top: 3px;
	font-family: var(--sih-body);
	line-height: 1.4;
	text-align: left;
}
.sih-embed *,
.sih-embed *::before,
.sih-embed *::after { box-sizing: border-box; }

.sih-embed .sih-embed__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 4px 16px;
	margin: 0 0 10px;
}
.sih-embed .sih-embed__title {
	font-family: var(--sih-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 6cqi, 2.2rem);
	line-height: 1.1;
	color: var(--sih-forest);
}
.sih-embed .sih-embed__title span { color: #8fa81a; }
.sih-embed .sih-embed__tagline {
	font-size: clamp(.62rem, 1.9cqi, .8rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sih-muted);
}

/* Separate rounded tiles, 4 across × 2 rows, like the old "in Numbers" graphic. */
.sih-embed .sih-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	margin: 0;
	color: #fff;
}
.sih-embed .sih-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 118px;
	padding: 14px 8px;
	border-radius: 12px;
	background: var(--sih-forest);
	text-align: center;
}
/* Shades vary per tile, as in the graphic. */
.sih-embed .sih-stat:nth-child(2),
.sih-embed .sih-stat:nth-child(8) { background: #19636b; }
.sih-embed .sih-stat:nth-child(3),
.sih-embed .sih-stat:nth-child(7) { background: #145250; }
.sih-embed .sih-stat:nth-child(4),
.sih-embed .sih-stat:nth-child(5) { background: #1d7a6e; }
.sih-embed .sih-stat:nth-child(6) { background: var(--sih-leaf); color: var(--sih-forest); }

.sih-embed .sih-stat__value {
	display: block;
	font-family: var(--sih-display);
	font-weight: 700;
	font-size: clamp(1.7rem, 7.5cqi, 3rem);
	line-height: 1;
	color: var(--sih-leaf);
	font-variant-numeric: tabular-nums;
}
.sih-embed .sih-stat:nth-child(6) .sih-stat__value { color: var(--sih-forest); }
.sih-embed .sih-stat__label {
	display: block;
	margin-top: 6px;
	color: inherit;
	opacity: .85;
	font-size: 11px;
	line-height: 1.25;
}

/* First tile: year sits on a pill, like the graphic. */
.sih-embed .sih-stat:nth-child(1) .sih-stat__value {
	padding: 4px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
}
/* Fifth tile: number beside its (long) label, only when tiles are wide enough
   (a ~138px tile squeezed the label to 4 lines). */
@container (min-width: 720px) {
	.sih-embed .sih-stat:nth-child(5) {
		flex-direction: row;
		gap: 10px;
		text-align: left;
	}
	.sih-embed .sih-stat:nth-child(5) .sih-stat__label { margin-top: 0; }
}
.sih-embed .sih-note {
	margin: 8px 0 0;
	font-size: .8rem;
	line-height: 1.4;
	color: var(--sih-muted);
	text-align: right;
}

/* Phone width: 2 across. */
@container (max-width: 420px) {
	.sih-embed .sih-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sih-embed .sih-stat__value { font-size: 2.2rem; }
	.sih-embed .sih-stat__label { font-size: .8rem; }
}