/* ============================================================
   SIC City Hero — the opening block for an individual city page.
   Photo fills the frame, a tinted scrim carries the text, and a
   stat bar sits across the bottom.
   ============================================================ */

.siccity {
	--sc-bg:      #021859;
	--sc-title:   #f2e0df;
	--sc-text:    rgba(255,255,255,.88);
	--sc-muted:   rgba(255,255,255,.72);
	--sc-accent:  #bf1304;
	/* Transparent by default: the spread bar sits on the section
	   background rather than painting its own block of colour. Still a
	   token, so the Stat bar control can fill it when a page wants one. */
	--sc-bar:     transparent;

	/* How much room the fixed city bar actually takes. The header script
	   measures itself and publishes --sic-header-real; the fallback is the
	   old assumption, so this still behaves if that script never runs.
	   Everything below positions against this rather than a hand-tuned
	   number, which is what let the bar overlap the breadcrumbs when the
	   bar grew — a logo instead of a wordmark, a wrapped place pill, the
	   webfont swapping in, or the wp-admin bar. */
	--sc-header-real: var(--sic-header-real, calc(var(--sic-header-h, 44px) + 44px));
	/* Clear space between the bottom of the bar and the breadcrumbs. */
	--sc-crumb-gap: 30px;
	/* Height reserved for the pinned breadcrumb row at the top of the
	   content column. The crumb sits at the very top of that column, just
	   below the header clearance; this keeps a tall copy from riding up
	   under it. Raise --sc-crumb-gap to move the crumb closer to or
	   further from the header bar. */
	--sc-crumb-space: clamp(26px, 4svh, 40px);

	position: relative;
	background: var(--sc-bg);
	color: var(--sc-text);
	font-family: var(--sic-body-font);
	overflow: hidden;

	/* Light type on a dark photo is rendered with subpixel antialiasing by
	   default, which puts coloured fringes on the edges of every letter and
	   reads as an outline. Greyscale smoothing removes them. Applies to the
	   whole section, so the stats bar and the headline match. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* Fills the screen, with the stats bar sitting at the bottom of it
	   rather than leaving a band of page showing beneath. svh rather than
	   vh so a mobile browser's collapsing toolbar does not leave a gap.
	   The stage takes whatever height the bar does not. */
	min-height: 100vh;
	min-height: 100svh;
	display: flex; flex-direction: column;
}

/* ---- stage ---- */
.siccity-stage {
	position: relative;
	flex: 1 1 auto;              /* takes the space the stats bar leaves */
	/* 620px was a floor the stage could never go below, so on any screen
	   shorter than roughly 760px the stage alone was taller than the
	   viewport and the stats bar was pushed off the bottom of the screen.
	   Capping the floor against the viewport lets the stage give way, so
	   the bar is always the last thing visible instead of the first thing
	   lost. min-height:0 is what actually allows a flex item to shrink. */
	min-height: min(620px, 58svh);
	/* stretch, not center: the inner column then owns the full stage
	   height, which is what lets the condensed stat row drop to the foot
	   of the photo. Centring moves to .siccity-inner, so the copy sits
	   exactly where it did when there is no condensed row. */
	display: flex; align-items: stretch;

	/* The city header is fixed and floats over this section, so the top
	   padding has to clear it or the breadcrumbs sit underneath the bar.
	   Derived from the measured header height plus the breadcrumb row, so
	   the copy sits below the breadcrumbs however tall the bar becomes. */
	/* The crumb row is inside the copy now, so this only has to clear the
	   fixed bar itself — the extra 44px that used to reserve a separate
	   absolutely-positioned crumb line would now be dead space. */
	--sc-header-clear: calc(var(--sc-header-real) + var(--sc-crumb-gap));
	/* The bottom padding shrinks first on a short screen: it is empty
	   space, and giving it up is what keeps the stats bar on screen. */
	padding: var(--sc-header-clear) 48px clamp(40px, 9svh, 96px);
	box-sizing: border-box;
}
.siccity-photo {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Tint plus a left-weighted gradient so the copy stays readable. */
.siccity-scrim {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(90deg, rgba(27,36,80,.94) 0%, rgba(27,36,80,.72) 46%, rgba(27,36,80,.30) 100%),
		linear-gradient(0deg, rgba(20,27,51,.85) 0%, rgba(20,27,51,0) 55%);
}
.siccity-inner {
	position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; width: 100%;
	/* Column flex with centred content: identical to the old behaviour
	   when the only child is the copy. */
	display: flex; flex-direction: column; justify-content: center;
}
/* Only when a breadcrumb is present: reserves its row so the centred copy
   cannot overlap the pinned line above it. */
.siccity-inner.has-crumbs { padding-top: var(--sc-crumb-space); }
.siccity-copy { max-width: 620px; }

/* ---- breadcrumb, leading the copy ---- */
/* In the normal flow now, as the first line of the copy block. It used to
   be absolutely positioned against the stage, which meant it sat at the
   stage's left padding while the headline sat in the centred content
   column — two different left edges. Being in the flow, it inherits the
   copy's alignment and needs no offset of its own, so the header
   clearance is handled once by the stage's top padding. */
.siccity-crumbs {
	/* Pinned to the top-left of the content column: `top: 0` is the top of
	   .siccity-inner, which the stage's padding has already pushed clear of
	   the fixed header, and `left: 0` is the same left edge the eyebrow and
	   headline use. Absolute, so the copy centres independently of it. */
	position: absolute; top: 0; left: 0; z-index: 2;
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin: 0;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
	color: rgba(255,255,255,.62);
}
.siccity-crumbs a { color: rgba(255,255,255,.62); text-decoration: none; transition: color .15s ease; }
.siccity-crumbs a:hover { color: #ffffff; }
/* The current step matches the links rather than standing out in the
   accent colour: it is the same line of text, not a highlight. */
.siccity-crumbs .is-here { color: rgba(255,255,255,.62); }
.siccity-crumb-sep { opacity: .4; }

/* ---- badge ---- */
/* The badge was replaced by the eyebrow below, which matches the
   eyebrow in every other block instead of being a one-off pill. */

/* ---- title ---- */
.siccity-name {
	margin: 0;
	font-family: var(--sic-heading-font); font-weight: 400;
	/* Width alone used to drive this, so a wide-but-short window (a laptop,
	   or any browser with several toolbars) got a 150px headline in a 600px
	   viewport and the stats bar had nowhere left to go. min() takes
	   whichever of the two the screen can actually afford. */
	font-size: clamp(48px, min(11vw, 17svh), 150px);
	line-height: .92;
	letter-spacing: -.01em;
	color: var(--sc-title);
}
.siccity-state {
	display: block; margin: 8px 0 0;
	/* Body font, upright, and a good deal smaller: it is a locator under
	   the city name, not a second headline. It used to be an italic
	   display serif at up to 40px, which read as a competing title. */
	font-family: var(--sic-body-font); font-style: normal; font-weight: 500;
	font-size: clamp(13px, 1.1vw, 17px);
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--sc-muted);
}

/* ---- eyebrow + intro ---- */
/* Leads the block, in the accent colour, identical in metrics to the
   eyebrow in City About and the other components. */
.siccity-eyebrow {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 clamp(16px, 3svh, 30px);
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
	color: var(--sc-accent);
}
.siccity-eyebrow span { width: 34px; height: 1px; background: var(--sc-accent); display: inline-block; }

/* Optional display line under the city name. Sized well below the city
   name so the two never compete, and capped in width because a long
   question set full-bleed is unreadable. */
.siccity-headline {
	margin: clamp(14px, 2.4svh, 22px) 0 0;
	max-width: 20ch;
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(26px, min(3.4vw, 6svh), 46px);
	line-height: 1.12;
	/* No colour of its own: it inherits, so the Design tab's Text control
	   on the section reaches it. Hard-coding --sc-title meant the City
	   name colour silently drove the headline too. */
}
/* The picked-out words. Italic serif in the accent colour, as in the
   reference — the one place italic on the display serif is intended. */
.siccity-hl { font-style: italic; color: var(--sc-accent); }
.siccity-intro {
	margin: 0;
	/* 20px default, matching About and City About. A Design-tab Font
	   size for this element outranks the plain class, so a block set
	   by hand keeps its own value. */
	font-size: 20px; line-height: 1.75;
	color: var(--sc-text);
}

/* ---- photo credit ---- */
.siccity-credit {
	position: absolute; right: 26px; bottom: 22px; z-index: 2;
	font-family: var(--sic-label-font);
	font-size: 10px; letter-spacing: .1em; color: rgba(255,255,255,.55);
}

/* ---- scroll rail ---- */
.siccity-rail {
	position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
	z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.siccity-rail b {
	writing-mode: vertical-rl;
	font-family: var(--sic-label-font); font-weight: 400;
	font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
	color: rgba(255,255,255,.5); margin-bottom: 8px;
}
.siccity-rail i { width: 3px; height: 3px; border-radius: 999px; background: rgba(255,255,255,.35); }
.siccity-rail i.is-on { background: var(--sc-title); width: 5px; height: 5px; }

/* ---- stat bar ---- */
.siccity-stats {
	position: relative; z-index: 3;
	/* minmax(0, 1fr), not 1fr: a bare 1fr track will not shrink below its
	   content, so one long stat label widens the bar past the viewport and
	   pushes the whole page sideways. */
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	background: var(--sc-bar);
	border-top: 1px solid rgba(255,255,255,.10);
}
.siccity-stat {
	/* Vertical padding tracks the viewport so the bar stays compact on a
	   short screen instead of being the reason it does not fit. */
	padding: clamp(18px, 3.4svh, 30px) 32px;
	border-left: 1px solid rgba(255,255,255,.10);
	/* Centred in its cell. Left-aligned figures drifted away from the
	   dividers on wide screens, so each cell looked lopsided. */
	text-align: center;
}
.siccity-stat:first-child { border-left: 0; }

/* ---- condensed arrangement ----
   Inside the photo at content width: no fill, no cell dividers, a single
   hairline above the row, and the figures aligned left with the copy
   rather than centred — they read as a continuation of the text block,
   not as a separate bar. */
.siccity-stats.is-condensed {
	background: transparent;
	border-top: 1px solid rgba(255,255,255,.22);
	/* auto pushes the row to the bottom of the stage, level with where
	   the spread bar sits, instead of trailing the copy by a fixed gap.
	   The auto margin absorbs the free space, so the copy rises to the
	   top of the stage — the arrangement in the reference. */
	margin-top: auto;
	padding-top: 0;
	column-gap: 24px;
}
.siccity-stats.is-condensed .siccity-stat {
	padding: clamp(14px, 2.4svh, 22px) 0 0;
	border-left: 0;
	text-align: left;
}
.siccity-stat-value {
	display: block;
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(26px, 2.6vw, 38px); line-height: 1;
	/* Inherits, as above — the stat bar sets its own text colour. */
}
.siccity-stat-label {
	display: block; margin-top: 9px;
	font-family: var(--sic-label-font);
	font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--sc-muted);
}

@media (max-width: 900px) {
	.siccity {
		/* A tighter gap: the bar is shorter here and vertical space is
		   scarcer, but it is still measured rather than assumed. */
		--sc-crumb-gap: 20px;
	}
	.siccity-stage {
		min-height: min(420px, 52svh);
		--sc-header-clear: calc(var(--sc-header-real) + var(--sc-crumb-gap));
		padding: var(--sc-header-clear) 24px clamp(28px, 6svh, 56px);
	}
	.siccity { --sc-crumb-space: clamp(20px, 3svh, 30px); }
	.siccity-crumbs { font-size: 10px; letter-spacing: .1em; }
	.siccity-rail { display: none; }
	.siccity-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.siccity-stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.10); padding: clamp(14px, 2.6svh, 22px) 24px; }
	.siccity-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.10); }
	/* Condensed keeps its own treatment on mobile: two columns, but still
	   no cell borders and no fill — the borders above are for the bar. */
	.siccity-stats.is-condensed .siccity-stat {
		border-top: 0; border-right: 0; padding: clamp(12px, 2.2svh, 18px) 0 0;
	}
	.siccity-stats.is-condensed { row-gap: 4px; }
}
/* ---- phones ---- */
@media (max-width: 600px) {
	/* Two stat cells across a phone leave each about 150px wide, and the
	   fluid size still resolves near its 26px floor there — enough for a
	   figure like "1,200+" to fill the cell and crowd the label under it.
	   A flat 18px keeps the bar to one comfortable row per cell. The
	   label is untouched: at 10px it is already a caption. */
	.siccity-stat-value { font-size: 18px; }
}

/* ---- desktop ---- */
@media (min-width: 901px) {
	/* A flat 26px rather than the fluid 26–38px: the figures are set to
	   read as a row of equals across the bar, and the top of that range
	   made a wide screen's stats compete with the city name above them.
	   26px is the range's own floor, so nothing gets smaller than it was.
	   Scoped above the tablet breakpoint; narrower widths keep the fluid
	   value, and phones their 18px. The label is untouched. */
	.siccity-stat-value { font-size: 26px; }
}