/* ============================================================
   SIC Stories — scroll-driven youth voices component
   ============================================================ */

.sicstories {
	--ss-bg:     #021859;
	--ss-accent: #bf1304;
	--ss-hl:     #2481a6;
	--ss-text:   #ffffff;
	--ss-muted:  rgba(255,255,255,.55);

	position: relative;
	background: var(--ss-bg);
	color: var(--ss-text);
}

.sicstories-sticky {
	position: sticky;
	top: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 40px;
	box-sizing: border-box;
	overflow: hidden;
}
.admin-bar .sicstories-sticky { top: 32px; }

/* ---- header ---- */
.sicstories-head { max-width: 1240px; margin: 0 auto 40px; width: 100%; }
.sicstories-eyebrow {
	display: flex; align-items: center; gap: 14px;
	margin: 0 0 18px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--ss-accent);
}
.sicstories-eyebrow::before {
	content: ""; width: 34px; height: 2px; background: var(--ss-accent); flex: 0 0 auto;
}
.sicstories-title {
	margin: 0;
	font-family: var(--sic-heading-font);
	font-size: clamp(28px, 3.4vw, 54px);
	line-height: 1.14;
	font-weight: 400;
	/* No 20ch cap. That measure was what broke this headline over three
	   rows while the row it sits in was nowhere near full — the width
	   was the constraint, not the type size. It now runs to the head's
	   own 1240px and wraps only when the words genuinely do not fit. */
	max-width: 100%;
	/* When it does wrap, whole words move down together and the rows
	   are evened out rather than one word being left alone. A break
	   typed in the editor is rendered as a <br> and still wins. */
	text-wrap: balance;
}
.sicstories-title em { font-style: italic; color: var(--ss-hl); }

/* ---- body ---- */
.sicstories-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
	max-width: 1240px;
	margin: 0 auto;
	width: 100%;
	padding-top: 28px;
	border-top: 1px solid rgba(255,255,255,.14);
}

/* ---- photo mosaic ---- */
.sicstories-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.sicstories-grid.is-mosaic {
	/* The row count comes from the component, which knows how many
	   photographs there are: the lead costs four cells and the rest one
	   each, so three columns hold exactly six and more need more rows.

	   The HEIGHT does not follow the row count. Holding it means the
	   cells shrink to fit instead of the mosaic growing down the page,
	   which keeps the block the same shape however many photographs are
	   in it — and keeps the lead in proportion to the column beside it. */
	grid-template-columns: repeat(var(--ss-cols, 3), 1fr);
	grid-template-rows: repeat(var(--ss-rows, 3), 1fr);
	height: 480px;
	/* A photograph that will not fit the next cell drops into an earlier
	   hole instead of leaving one — with the lead spanning two columns
	   there is often exactly one. */
	grid-auto-flow: dense;
}
.sicstories-grid.is-mosaic .sicstories-fig:first-child {
	grid-column: span 2;
	grid-row: span 2;
}
.sicstories-grid:not(.is-mosaic) .sicstories-fig { aspect-ratio: 3 / 4; }

.sicstories-fig {
	position: relative;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	background: rgba(255,255,255,.05);
	outline: 2px solid transparent;
	outline-offset: -2px;
	transition: outline-color .35s ease;
}
.sicstories-fig img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(1) brightness(.5);
	transform: scale(1.02);
	transition: filter .5s ease, transform .5s ease;
}
.sicstories-fig.is-active { outline-color: var(--ss-accent); }
.sicstories-fig.is-active img { filter: none; transform: scale(1); }

.sicstories-cap {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 16px 16px 14px;
	background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
	opacity: 0; transform: translateY(6px);
	transition: opacity .35s ease, transform .35s ease;
	pointer-events: none;
}
.sicstories-fig.is-active .sicstories-cap { opacity: 1; transform: translateY(0); }
.sicstories-cap b {
	display: block;
	font-family: var(--sic-heading-font); font-weight: 400; font-size: 17px; color: #ffffff;
}
.sicstories-cap span {
	display: block; margin-top: 3px;
	font-family: var(--sic-label-font);
	font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--ss-accent);
}

/* ---- dots ---- */
.sicstories-dots {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	margin-top: 22px;
}
.sicstories-dot {
	width: 7px; height: 7px; border-radius: 99px; border: 0; padding: 0;
	background: rgba(255,255,255,.28); cursor: pointer;
	transition: width .3s ease, background .3s ease;
}
.sicstories-dot.is-active { width: 26px; background: var(--ss-accent); }

/* ---- quote panel ---- */
.sicstories-panel { min-height: 380px; }
.sicstories-fade { transition: opacity .28s ease; }
.sicstories-fade.is-out { opacity: 0; }

.sicstories-mark {
	font-family: var(--sic-heading-font); font-size: 46px; line-height: 1;
	color: var(--ss-accent); margin-bottom: 18px;
}
.sicstories-quote {
	margin: 0 0 26px;
	font-family: var(--sic-heading-font);
	font-style: italic;
	font-size: clamp(19px, 1.65vw, 27px);
	line-height: 1.5;
	color: var(--ss-text);
}
.sicstories-by {
	margin: 0 0 5px;
	font-family: var(--sic-heading-font); font-size: 17px; color: var(--ss-text);
}
.sicstories-meta {
	margin: 0 0 20px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ss-accent);
}

.sicstories-tags { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0 0 26px; padding: 0; }
.sicstories-tags li {
	padding: 7px 14px; border-radius: 99px;
	border: 1px solid rgba(255,255,255,.26);
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .06em;
	color: var(--ss-muted);
}

/* ---- audio ---- */
.sicstories-audio {
	display: flex; align-items: center; gap: 16px;
	padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
}
.sicstories-audio[hidden] { display: none; }
.sicstories-play {
	flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
	border: 0; cursor: pointer; background: var(--ss-accent); color: #ffffff;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; line-height: 1; transition: filter .15s ease;
}
.sicstories-play:hover { filter: brightness(1.12); }
.sicstories-audio-main { flex: 1 1 auto; min-width: 0; }
.sicstories-audio-label {
	display: block; margin-bottom: 7px;
	font-family: var(--sic-label-font);
	font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ss-muted);
}
.sicstories-wave { display: flex; align-items: flex-end; gap: 2px; height: 26px; }
.sicstories-wave i {
	flex: 1 1 auto; min-width: 2px; max-width: 4px;
	background: rgba(255,255,255,.42);
	border-radius: 1px;
	transform-origin: bottom;
}
.sicstories-audio.is-playing .sicstories-wave i {
	background: var(--ss-accent);
	animation: sicwave .9s ease-in-out infinite alternate;
}
@keyframes sicwave { from { transform: scaleY(.45); } to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
	.sicstories-audio.is-playing .sicstories-wave i { animation: none; }
	.sicstories-fig img, .sicstories-cap, .sicstories-fade { transition: none; }
}

/* ---- responsive ---- */
@media (max-width: 900px) {
	/* Close under the header, not centred in the screen: the picture and
	   the words together are taller than a phone, so centring pushed the
	   quote off the bottom. Starting at the top gives the words the space
	   that was being spent above the picture. */
	.sicstories-sticky {
		/* Almost nothing above the picture: the header sits directly on
		   its top edge, and every pixel saved here is one the quote
		   below gets instead. */
		padding: 4px 18px 24px;
		justify-content: flex-start;
	}
	.sicstories-body { grid-template-columns: 1fr; gap: 14px; }
	/* The block's own heading sits above the picture and was taking a
	   third of what is left; it is a label here, not a display line. */
	.sicstories-head { margin-bottom: 10px; }
	.sicstories-title { font-size: clamp(22px, 6vw, 30px); line-height: 1.12; }
	.sicstories-panel { min-height: 0; }

	/* ---- one photograph at a time ----
	   The design is unchanged: the picture above, the quote below it in
	   the same panel. What changes is how many pictures are on screen.
	   A mosaic needs width — on a phone it put nine thumbnails barely a
	   hundred pixels tall in a column, none of them readable. Here the
	   frame holds a single photograph and the scroll swaps it, so the
	   picture and the quote change together exactly as they do beside
	   the mosaic on a wide screen. */
	.sicstories-grid,
	.sicstories-grid.is-mosaic {
		display: block;
		height: auto;
		gap: 0;
	}
	/* Only the current one is drawn. The others keep their place in the
	   markup — the dots and the scroll logic count them — they are simply
	   not shown until the scroll reaches them. */
	.sicstories-grid .sicstories-fig { display: none; }
	.sicstories-grid .sicstories-fig.is-active {
		display: block;
		/* The lead's two-by-two span means nothing outside a grid. */
		grid-column: auto; grid-row: auto;
		margin: 0;
	}
	.sicstories-grid .sicstories-fig.is-active img {
		/* Sized against the SCREEN rather than the width, so the quote
		   below it always has room. A 4:3 picture across a narrow phone is
		   most of the viewport on its own; capping it by height leaves the
		   words a predictable share whatever the device. */
		aspect-ratio: 4 / 3;
		height: auto;
		max-height: clamp(120px, 24svh, 240px);
		/* contain, not cover: the crop was cutting heads off. These
		   are portraits, and on a phone the frame is too small to
		   lose any of the face to a fixed 4:3 crop — the whole
		   picture is fitted inside instead. */
		object-fit: contain;
		/* The dimming exists to pick one photograph out of several. With
		   one on screen there is nothing to pick it out from. */
		filter: none;
		transform: none;
	}
	/* Shorter screens give the picture less; there is no room to spare. */
	/* Superseded on phones by the 250px step in the phone block below,
	   which loads later; kept for the 601–900px band, where the picture
	   still shares the screen with a taller layout. */
	@media (max-height: 700px) and (min-width: 601px) {
		.sicstories-grid .sicstories-fig.is-active img { max-height: 19svh; }
	}
	/* Nothing to outline either, for the same reason. */
	.sicstories-grid .sicstories-fig.is-active { outline-color: transparent; }
}

/* ---- phones ---- */
@media (max-width: 600px) {
	/* The quote mark is decoration, and at its desktop size it was taking
	   a screenful before the words began. Bigger but pulled back up: the
	   negative margin lets the first line of the quote sit inside the
	   mark's own whitespace rather than below it. */
	.sicstories-mark {
		font-size: 100px;
		margin-bottom: -40px;
	}
	/* A portrait fitted whole, at a size that leaves the quote its share
	   of the screen. Both axes are capped so a landscape frame cannot
	   widen past the same box, and aspect-ratio is released so the frame
	   follows the picture instead of a fixed 4:3. */
	.sicstories-grid .sicstories-fig.is-active img,
	.sicstories-fig img {
		object-fit: contain;
		/* No width cap: the height decides the size and the picture's own
		   proportions decide the width, so a portrait is not squeezed into
		   a square and a landscape is not needlessly narrowed. */
		max-width: none;
		/* Height follows the SCREEN, not the window width: a tall phone
		   gives the picture up to 400px, a short one gives that space back
		   to the quote. 44svh reaches the 400px ceiling at about 900px of
		   screen height and eases down from there — a continuous curve
		   rather than steps, so no device lands on a size that looks wrong.
		   svh measures the screen with the browser chrome showing, so the
		   picture does not jump when the address bar collapses on scroll;
		   the vh line above is the fallback where svh is unsupported. */
		max-height: clamp(140px, 44vh, 400px);
		max-height: clamp(140px, 44svh, 400px);
		height: auto;
		aspect-ratio: auto;
		/* Centred rather than left-aligned: contain leaves empty space
		   beside a portrait, and the picture against the left edge read as
		   a mistake next to the centred quote below. The element itself is
		   centred, so nothing depends on how wide the figure happens to be. */
		width: auto;
		margin-left: auto;
		margin-right: auto;
	}
	/* Short screens get a flat 150px rather than the curve: below about
	   667px of screen height every pixel the picture takes is one the
	   quote loses, and the quote is the point of the section — the
	   portrait only needs to be recognisable. Nested inside the phone
	   query and after the rule above, so it replaces the height only,
	   and only where it applies. */
	@media (max-height: 667px) {
		.sicstories-grid .sicstories-fig.is-active img,
		.sicstories-fig img {
			max-height: 150px;
		}
	}
	/* No plate behind it. The pale panel existed to hold a cropped photo
	   inside a grid cell; with one contained portrait there is no cell to
	   fill and the panel showed as an empty band beside the picture. The
	   active outline goes with it, for the same reason. */
	.sicstories-fig,
	.sicstories-grid .sicstories-fig.is-active {
		background: transparent;
		outline-color: transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sicstories-audio.is-playing .sicstories-wave i { animation: none; }
	.sicstories-fig img, .sicstories-cap, .sicstories-fade { transition: none; }
}

/* ---- responsive ---- */

/* Inside the editor preview the section must not be full height. */
.sicstories.is-static { height: auto !important; }
.sicstories.is-static .sicstories-sticky {
	position: static; min-height: 0; padding: 36px 28px;
}
/* ============================================================
   Phones: the stacked list
   ------------------------------------------------------------
   The interactive half (mosaic, dots, sticky panel, scroll
   driving) is hidden below 600px and the list shown instead;
   above 600px the reverse. Both are in the DOM, so a rotation
   swaps them with no rebuild and no flash.
   ============================================================ */
.sicstories-stack { display: none; }

@media (max-width: 600px) {
	/* The list replaces the machine. */
	.sicstories-stack { display: block; }
	.sicstories-body { display: none; }
	.sicstories { height: auto !important; }
	.sicstories-sticky {
		position: static;
		min-height: 0;
		height: auto;
		padding: 4px 18px 32px;
	}

	/* One story: portrait, mark, quote, name, place. The rule under
	   each item separates them without a heavy divider. */
	.sicstories-item {
		padding: 26px 0 0;
	}
	.sicstories-item + .sicstories-item {
		margin-top: 26px;
		border-top: 1px solid rgba(255,255,255,.14);
	}
	.sicstories-ifig {
		margin: 0 0 14px;
		text-align: center;
	}
	.sicstories-ifig img {
		/* Same sizing the single picture had: height follows the screen,
		   width follows the picture, centred. */
		display: block;
		width: auto;
		max-width: none;
		height: auto;
		max-height: clamp(140px, 44vh, 400px);
		max-height: clamp(140px, 44svh, 400px);
		margin-left: auto;
		margin-right: auto;
		object-fit: contain;
		/* No dimming: with one picture per story there is nothing to pick
		   it out from. */
		filter: none;
	}
	@media (max-height: 667px) {
		.sicstories-ifig img { max-height: 150px; }
	}
	.sicstories-item .sicstories-mark { margin-bottom: -40px; }
	.sicstories-item .sicstories-quote { margin-bottom: 14px; }
	.sicstories-item .sicstories-by { margin: 0 0 4px; }
	.sicstories-item .sicstories-meta { margin: 0; }
}