/* ============================================================
   SIC City Themes — two parts in one block:
     1. a red band with an intro and a grid of numbered theme cards
     2. an optional dark band carrying a pull quote
   ============================================================ */

.sicthemes {
	--st-bg:      #bf1304;
	--st-text:    #ffffff;
	--st-muted:   #f2e0df;
	--st-card:    #ffffff;
	--st-title:   #021859;
	--st-body:    rgba(2,24,89,.66);
	--st-quotebg: #0c0a11;
	--st-quote:   #f2e0df;
	--st-accent:  #bf1304;

	font-family: var(--sic-body-font);
}

/* ---- part 1: themes ---- */
.sicthemes-top {
	/* Two layers: the Band background colour paints OVER the Band
	   background image. A translucent colour therefore tints the
	   photograph; an opaque one covers it, which is what makes the
	   colour alone still work exactly as before.

	   Both are given to one `background` shorthand so the layers stay in
	   step — and the image falls back to `none`, since an unset var()
	   would invalidate the whole declaration and lose the colour too. */
	background:
		linear-gradient(var(--st-bg), var(--st-bg)),
		var(--st-bgimage, none) center / cover no-repeat fixed;
	color: var(--st-text);
	/* The band opens a city page directly under the fixed header, so the
	   top padding has to clear it — 88px alone put the image and the
	   eyebrow right against the bar. Derived from the height the header
	   actually reports, with the old value as the fallback for any page
	   where that script has not run. */
	padding: calc(var(--sic-header-real, 88px) + 56px) 48px 96px;
}
/* `fixed` on the image layer is what holds the photograph still while the
   band scrolls over it: the layer is positioned against the viewport
   rather than the element, so `cover` sizes it to the screen and it never
   moves. The colour layer is a gradient with no size of its own, so it
   keeps covering the band exactly as before. */

/* Two cases where the photograph goes back to scrolling with the band:

   Touch devices — iOS Safari does not honour fixed attachment (it paints
   the image once at the wrong size, or drops it), and on Android it
   forces a repaint of the whole layer on every frame. Detected with
   `hover: none` rather than a width, so a small desktop window keeps the
   effect and a large tablet does not.

   Reduced motion — background moving at a different rate from the content
   is parallax, which is exactly what that preference asks us not to do. */
@media (hover: none), (prefers-reduced-motion: reduce) {
	.sicthemes-top { background-attachment: scroll; }
}
.sicthemes-inner { max-width: 1240px; margin: 0 auto; }

.sicthemes-eyebrow {
	display: flex; align-items: center; gap: 12px; margin: 0 0 26px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
	/* Its own token, not the intro's — see STYLE_KEYS. Both default to
	   the same colour, so this changes nothing until it is set. */
	color: var(--st-eyebrow, var(--st-muted));
}
.sicthemes-eyebrow span {
	width: 34px; height: 1px; display: inline-block;
	background: var(--st-eyebrow, var(--st-muted));
}

.sicthemes-head {
	display: grid; grid-template-columns: 1.1fr .9fr;
	gap: 56px; align-items: start;
	margin-bottom: 52px;
}
/* In the scrolling view the title block sits inside the pinned column,
   above the image, so the intro reads as a standfirst under the heading
   rather than a second column beside it — there is no room for two
   columns inside one. */
.sicthemes.is-scroll .sicthemes-head {
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin-bottom: clamp(22px, 3vw, 34px);
}
.sicthemes.is-scroll .sicthemes-intro { max-width: none; }
/* Sized for a column rather than the full width of the section. */
.sicthemes.is-scroll .sicthemes-heading { font-size: clamp(26px, 2.6vw, 40px); }
/* The title scrolls away with the card it belongs to, since the whole
   column is what sticks. */
.sicthemes.is-scroll .sicthemes-vcol > .sicthemes-eyebrow { margin-top: 0; }
.sicthemes-heading {
	margin: 0;
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(30px, 3.8vw, 54px); line-height: 1.08;
}
.sicthemes-intro {
	margin: 0; color: var(--st-muted);
	/* 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.7;
}

/* grid — the gap is what separates the cards */
.sicthemes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.sicthemes-card {
	background: var(--st-card);
	display: flex; flex-direction: column;
	overflow: hidden;
}
.sicthemes-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba(0,0,0,.15);
}
.sicthemes-media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.sicthemes-card:hover .sicthemes-media img { transform: scale(1.07); }
.sicthemes-num {
	position: absolute; right: 14px; bottom: 8px; z-index: 2;
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(38px, 4vw, 58px); line-height: 1;
	color: rgba(255,255,255,.75);
	text-shadow: 0 2px 12px rgba(0,0,0,.35);
	pointer-events: none;
}

.sicthemes-body { padding: 26px 26px 30px; }
.sicthemes-rule { width: 26px; height: 2px; background: var(--st-accent); margin-bottom: 18px; }
.sicthemes-title {
	margin: 0 0 12px;
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(18px, 1.5vw, 23px); line-height: 1.25;
	color: var(--st-title);
}
.sicthemes-text {
	margin: 0; color: var(--st-body);
	/* 20px default — the shared body size. A Design-tab Font size for
	   this element outranks the plain class, so a hand-set block keeps
	   its own value. */
	font-size: 20px; line-height: 1.65;
}

/* ---- part 2: pull quote ---- */
.sicthemes-quote {
	background: var(--st-quotebg);
	color: var(--st-quote);
	padding: 110px 48px 106px;
	text-align: center;
}
.sicthemes-qinner { max-width: 1240px; margin: 0 auto; }

/* With a portrait, the band becomes two columns: a large rectangular
   photo on the left, the quote on the right. */
.sicthemes-quote.has-photo .sicthemes-qinner {
	display: grid;
	grid-template-columns: minmax(280px, 420px) 1fr;
	gap: 64px;
	align-items: center;
	text-align: left;
}
.sicthemes-qphoto {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: rgba(255,255,255,.06);
}
.sicthemes-qphoto img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.sicthemes-quote.has-photo .sicthemes-qtext { margin-left: 0; margin-right: 0; max-width: none; }
.sicthemes-quote.has-photo .sicthemes-qby { justify-content: flex-start; }
.sicthemes-quote.has-photo .sicthemes-qby i:first-child { display: none; }
.sicthemes-qmark {
	margin: 0 0 40px;
	font-family: var(--sic-heading-font);
	font-size: 40px; line-height: 1; color: var(--st-accent);
}
.sicthemes-qtext {
	margin: 0 auto;
	max-width: 22ch;
	font-family: var(--sic-heading-font); font-style: italic; font-weight: 400;
	font-size: clamp(28px, 4.2vw, 58px); line-height: 1.16;
}
.sicthemes-qby {
	display: flex; align-items: center; justify-content: center; gap: 18px;
	margin-top: 56px;
}
.sicthemes-qby i { width: 44px; height: 1px; background: rgba(255,255,255,.35); display: inline-block; }
.sicthemes-qname {
	font-family: var(--sic-body-font); font-weight: 600;
	font-size: 15px; color: var(--st-quote);
}
.sicthemes-qrole {
	display: block; margin-top: 8px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--st-accent);
}

@media (max-width: 1000px) {
	.sicthemes-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
	.sicthemes-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
}
@media (max-width: 640px) {
	/* Same clearance rule at the smaller size: the bar is shorter here,
	   so the gap under it is too. */
	.sicthemes-top { padding: calc(var(--sic-header-real, 56px) + 32px) 24px 64px; }
	.sicthemes-grid { grid-template-columns: 1fr; gap: 20px; }
	.sicthemes-quote { padding: 72px 24px 68px; }
	.sicthemes-qtext { max-width: none; }
	.sicthemes-quote.has-photo .sicthemes-qinner { grid-template-columns: 1fr; gap: 32px; }
	.sicthemes-qphoto { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
	.sicthemes-media img { transition: none; }
	.sicthemes-card:hover .sicthemes-media img { transform: none; }
}

/* ============================================================
   Scrolling view
   ------------------------------------------------------------
   Image card pinned on the left, prose stacked on the right, the
   card swapping as each block crosses the middle of the screen.
   Same construction as the Stats block: only the card COLUMN is
   sticky — making the grid sticky unpins it at once, because the
   grid is as tall as the prose beside it.
   ============================================================ */
.sicthemes-scroll { margin-top: clamp(36px, 5vw, 64px); }
.sicthemes-sticky {
	display: grid;
	/* minmax(0, …) on both: a bare fr will not shrink below its
	   content, and a long unbroken title would widen the page. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(32px, 5vw, 76px);
	align-items: start;
}
/* ---- which side the pinned card sits on ----
   Done with `order`, not by reordering the markup: the DOM keeps reading
   heading, then prose, then cards, which is what a screen reader follows
   and what the page falls back to when the grid does not apply. The track
   widths swap too, so the prose keeps the wider column either way. */
.sicthemes.is-cardright .sicthemes-sticky {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.sicthemes.is-cardright .sicthemes-vcol  { order: 2; }
.sicthemes.is-cardright .sicthemes-steps { order: 1; }

/* The media column itself is NOT sticky: it stretches the full height of
   the scroll section so the element inside it has somewhere to travel.
   Pinning the column meant the title travelled with the image, which put
   the image a whole title block below the header and left the column too
   tall to move at all. */
.sicthemes-vcol {
	align-self: stretch;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.sicthemes-vsticky {
	position: sticky;
	/* Below the fixed header, whatever height it reports, plus a gap that
	   grows with the viewport: 24px cleared the bar but read as touching
	   it. The clamp keeps the card off the header on a short screen
	   without pushing it down the page on a tall one. */
	top: calc(var(--sic-header-real, 96px) + clamp(40px, 6vh, 76px));
}

/* The per-step image belongs to the stacked layout only: above the
   breakpoint the pinned card is showing the same picture, and two of
   them would be a duplicate. */
.sicthemes-stepimg { display: none; }

/* ---- the card stack ---- */
/* The cards are stacked in one grid cell so the column never changes
   height as they swap — a height change here would move the prose
   under the reader's cursor mid-scroll. */
.sicthemes-cards { display: grid; }
.sicthemes-vcard {
	grid-area: 1 / 1;
	position: relative;
	margin: 0;
	aspect-ratio: 1 / 1;
	border-radius: 18px;
	overflow: hidden;          /* clips the image to the rounded corners */
	/* A quiet placeholder for the moment before the image paints. There
	   is no tinted panel behind it: the photograph fills the card. */
	background: rgba(2,24,89,.06);
	opacity: 0; visibility: hidden;
	transition: opacity .45s ease;
}
.sicthemes-vcard.is-on { opacity: 1; visibility: visible; }
/* Fills the square at any aspect ratio, cropping rather than letterboxing.
   Absolute so the card's height comes from its own aspect-ratio and never
   from the image — a portrait file would otherwise stretch the column and
   shift the prose beside it. */
.sicthemes-vcard img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	/* Anchored to the top, not the centre: these are portraits, and a
	   centre crop in a short frame cuts the face off at the forehead
	   while keeping shoulders that carry nothing. Sitting the crop at
	   the top keeps the head whatever the frame's proportions. */
	object-fit: cover; object-position: top;
	display: block;
}
.sicthemes-vcount {
	position: absolute; top: 22px; left: 24px; z-index: 1;
	font-family: var(--sic-heading-font);
	font-size: 19px; color: #ffffff;
	letter-spacing: .02em;
	/* The counter now sits on a photograph rather than a flat colour, so
	   it carries its own shadow instead of relying on the panel behind. */
	text-shadow: 0 1px 10px rgba(12,10,17,.55);
}
/* A short scrim under the counter, drawn only where it is needed. */
.sicthemes-vcard::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%;
	background: linear-gradient(to bottom, rgba(12,10,17,.42), rgba(12,10,17,0));
	pointer-events: none;
}

/* ---- progress bars under the card ---- */
.sicthemes-vnav { display: flex; gap: 10px; margin-top: 22px; }
.sicthemes-vdot {
	flex: 1 1 0; height: 2px; min-width: 0;
	padding: 0; border: 0; border-radius: 2px;
	background: rgba(2,24,89,.18);
	cursor: pointer;
	transition: background .25s ease;
}
.sicthemes-vdot.is-on { background: var(--st-accent); }

/* ---- the prose column ---- */
.sicthemes-steps { min-width: 0; }
.sicthemes-step {
	/* Roughly a screen each: that is the scroll distance which drives
	   one card, so shorter blocks would flick past several at once. */
	min-height: 78svh;
	display: flex; flex-direction: column; justify-content: center;
	/* Inactive blocks recede rather than disappear, so the reader can
	   still see what is coming — as in the reference. */
	opacity: .28;
	transition: opacity .35s ease;
}
.sicthemes-step.is-on { opacity: 1; }
.sicthemes-stepnum {
	margin: 0 0 14px;
	font-family: var(--sic-label-font);
	font-size: 12px; letter-spacing: .18em;
	color: var(--st-accent);
}
.sicthemes-steptitle {
	margin: 0 0 18px;
	max-width: 20ch;
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(26px, 2.6vw, 40px); line-height: 1.15;
	color: var(--st-title);
}
.sicthemes-steptext {
	margin: 0;
	max-width: 46ch;
	/* 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(--st-body);
}

@media (max-width: 1000px) {
	/* No sticky column means nothing to scrub against, so the two
	   stack and every theme is fully readable in place. */
	.sicthemes-sticky,
	.sicthemes.is-cardright .sicthemes-sticky { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	/* One column: the side choice no longer applies, and the card leads
	   so the reader sees the image before the text it belongs to. */
	.sicthemes.is-cardright .sicthemes-vcol,
	.sicthemes.is-cardright .sicthemes-steps { order: 0; }
	.sicthemes-vcol { position: static; top: auto; }
	.sicthemes-step { min-height: 0; opacity: 1; margin-bottom: 40px; }

	/* The pinned card stack goes: stacked, it can only ever show one of
	   the six, and the other five steps would have no picture at all.
	   Each step carries its own image instead. The title and intro above
	   it stay — only the cards and their dots are dropped. */
	.sicthemes-vsticky { display: none; }
	.sicthemes-stepimg {
		display: block;
		width: 100%;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		border-radius: 4px;
		margin: 0 0 18px;
	}
}