/* ============================================================
   City Stats
   ------------------------------------------------------------
   A row of figures, each with a dot counter, and one feature
   percentage that fills as it comes into view — inside a ring
   (Circle) or along a bar (Horizontal).
   ============================================================ */
.sicstats2 {
	/* Two layers: the Background colour paints OVER the image, so a
	   translucent colour tints the photograph and an opaque one covers
	   it. One shorthand keeps the layers in step, and the image falls
	   back to `none` — an unset var() would invalidate the whole
	   declaration and lose the colour with it. */
	background:
		linear-gradient(var(--s2-bg), var(--s2-bg)),
		var(--s2-bgimage, none) center / cover no-repeat;
	color: var(--s2-text);
	padding: clamp(64px, 8vw, 118px) 48px;
}
.sicstats2-inner { max-width: 1240px; margin: 0 auto; }

.sicstats2-eyebrow {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 18px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
	color: var(--s2-eyebrow);
}
.sicstats2-eyebrow span {
	width: 34px; height: 1px; display: inline-block;
	background: var(--s2-eyebrow);
}
.sicstats2-heading {
	margin: 0 0 clamp(40px, 6vw, 80px);
	max-width: 18ch;
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(30px, 4vw, 58px); line-height: 1.06;
	color: var(--s2-text);
}

/* ---- the figures beside the feature ---- */
.sicstats2-body {
	display: grid;
	/* minmax(0, …): a bare fr will not shrink below its content, and a
	   long label would widen the page. */
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.sicstats2-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(24px, 3vw, 44px);
	align-items: start;
}
.sicstats2-value {
	margin: 0 0 10px;
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(38px, 4.4vw, 62px); line-height: 1;
	color: var(--s2-value);
}
.sicstats2-label {
	margin: 0 0 14px;
	max-width: 16ch;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	line-height: 1.6;
	color: var(--s2-muted);
}

/* ---- dot counter: one dot per unit ---- */
.sicstats2-dots {
	display: flex; flex-wrap: wrap;
	gap: 8px;
	max-width: 190px;          /* wraps into tidy rows rather than one long line */
}
.sicstats2-dots i {
	width: 10px; height: 10px;
	border-radius: 999px;
	/* The number's own colour: the dots are a reading of it, so they
	   follow whatever Stat numbers is set to rather than needing a
	   second control kept in step by hand. */
	background: var(--s2-value);
	display: block;
}

/* ---- the feature percentage ---- */
.sicstats2-fvalue {
	margin: 0;
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(56px, 7vw, 104px); line-height: 1;
	color: var(--s2-accent);
	/* The digits change width as the number counts up; tabular figures
	   stop the whole line shuffling on every frame. */
	font-variant-numeric: tabular-nums;
}
.sicstats2-flabel {
	margin: 14px 0 0;
	font-family: var(--sic-label-font);
	font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
	line-height: 1.7;
	color: var(--s2-muted);
}

/* --- Circle --- */
.sicstats2-feature.is-circle {
	position: relative;
	display: grid; place-items: center;
	aspect-ratio: 1 / 1;
	max-width: 540px;
	margin-inline: auto;
	width: 100%;
}
.sicstats2-ring {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	/* Start the stroke at twelve o'clock and run clockwise. */
	transform: rotate(-90deg);
}
.sicstats2-ring-track,
.sicstats2-ring-fill {
	fill: none;
	stroke-width: 1.5;
	/* The ring is drawn in user units on a 200-unit box, so the stroke
	   scales with the circle rather than staying hairline-thin. */
	vector-effect: non-scaling-stroke;
}
.sicstats2-ring-track { stroke: var(--s2-track); }
.sicstats2-ring-fill {
	stroke: var(--s2-accent);
	stroke-linecap: round;
	/* r=94 → circumference 590.6. The dash is the filled part, the gap
	   the rest, so the percentage drives the arc directly. */
	stroke-dasharray: 590.6;
	stroke-dashoffset: calc(590.6 - (590.6 * var(--s2-pct, 0) / 100));
}
.sicstats2-fcopy { position: relative; text-align: center; padding: 0 16%; }

/* --- Horizontal --- */
.sicstats2-feature.is-bar { align-self: center; }
.sicstats2-track {
	margin-top: 26px;
	height: 6px;
	border-radius: 999px;
	background: var(--s2-track);
	overflow: hidden;
}
.sicstats2-fill {
	display: block;
	height: 100%;
	width: calc(var(--s2-pct, 0) * 1%);
	border-radius: 999px;
	background: var(--s2-accent);
}

/* ---- Horizontal: one row of figures ----
   Every figure is a percentage read against its neighbours, so they get
   equal columns on one line with a hairline above each, and no feature
   is singled out. `1fr` per figure rather than auto-fit, which would
   wrap them onto a second row as soon as the column got tight. */
.sicstats2.is-bar .sicstats2-body { grid-template-columns: minmax(0, 1fr); }
.sicstats2.is-bar .sicstats2-grid {
	grid-template-columns: repeat(var(--s2-cols, 4), minmax(0, 1fr));
	gap: clamp(20px, 3vw, 48px);
}
.sicstats2.is-bar .sicstats2-cell {
	border-top: 1px solid var(--s2-track);
	padding-top: clamp(18px, 2vw, 28px);
}
.sicstats2.is-bar .sicstats2-value { color: var(--s2-accent); }
.sicstats2.is-bar .sicstats2-label { margin-bottom: 0; }

@media (max-width: 900px) {
	/* Two per row, then one: four percentages on a phone would leave no
	   room for their labels. */
	.sicstats2.is-bar .sicstats2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.sicstats2.is-bar .sicstats2-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1000px) {
	/* Stacked: the figures first, then the feature they add up to. */
	.sicstats2-body { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.sicstats2-feature.is-circle { max-width: 380px; }
}
@media (max-width: 640px) {
	.sicstats2 { padding: 56px 24px; }
	.sicstats2-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
	.sicstats2-dots { max-width: 150px; gap: 7px; }
}

/* Declared last so it wins on source order: media queries add no
   specificity, and an override placed earlier would simply lose. The
   count-up is skipped in JS; this covers the CSS transition. */


/* ============================================================
   Photo with caption
   ------------------------------------------------------------
   The picture is the statement, so it runs edge to edge with no
   inner column and no figures. A single colour is laid over it
   and fades to nothing, so the caption stays legible where it
   sits without tinting the whole photograph.
   ============================================================ */
.sicstats2.is-photo {
	padding: 0;
	background: none;
}
.sicstats2-photo {
	position: relative;
	margin: 0;
	display: block;
	overflow: hidden;
	background: var(--s2-bg, #021859);
}
.sicstats2-photoimg {
	display: block;
	width: 100%;
	/* Height follows the picture until it would be taller than the
	   screen, then stops. A wide photograph at full width is otherwise
	   enormous — a 2231x1352 file across a 1900px window is 1150px tall,
	   so the reader sees a band of picture and has to scroll to find the
	   caption underneath it.

	   object-fit only takes effect once the cap bites: below it the box
	   still matches the file's own proportions and nothing is cropped. */
	height: auto;
	max-height: min(76vh, 760px);
	object-fit: cover;
	object-position: center;
}

/* The veil. It ends fully transparent by construction — the author sets
   the colour and the direction, never the far end — which is what keeps
   it a veil rather than a second background laid over the picture. */
.sicstats2-photoveil {
	position: absolute; inset: 0;
	pointer-events: none;
	background: linear-gradient(
		var(--s2-veildir, to top),
		var(--s2-veil, rgba(2,24,89,.92)) 0%,
		transparent var(--s2-veilreach, 65%)
	);
}

.sicstats2-caption {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 0 clamp(20px, 5vw, 64px) clamp(20px, 4vw, 44px);
	text-align: center;
	font-family: var(--sic-body-font);
	font-size: clamp(14px, 1.35vw, 19px);
	line-height: 1.5;
	color: var(--s2-text, #ffffff);
}

/* A caption reading up the side of a tall picture would run out of room,
   so the veil is turned upright and the caption pinned to the foot
   regardless of which way the fade runs. */
@media (max-width: 700px) {
	.sicstats2-caption { font-size: 13px; padding-bottom: 18px; }
	/* More of the screen on a phone, where there is less of it and the
	   picture is the whole point of the block. */
	.sicstats2-photoimg { max-height: 68vh; }
}

/* Declared last on purpose: these override the animations and transitions
   above by source order, so anything added after them would win instead.
   A new block belongs ABOVE this one. */
@media (prefers-reduced-motion: reduce) {
	.sicstats2-fill,
	.sicstats2-ring-fill { transition: none; }
}