/* ============================================================
   SIC Hero — scroll-driven background video with chapter text
   ============================================================ */

.sichero {
	--sh-bg:     #a64034;
	--sh-accent: #bf1304;
	--sh-text:   #ffffff;

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

.sichero-sticky {
	position: sticky;
	/* --sh-top is measured from the site header at runtime so the hero
	   fills exactly the space beneath it instead of overflowing. */
	top: var(--sh-top, 0px);
	height: calc(100vh - var(--sh-top, 0px));
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Where the chapter text sits over the video. The video always fills the
   section; only the text block moves. */
.sichero.is-pos-top    .sichero-sticky { align-items: flex-start; padding-top: clamp(24px, 10vh, 110px); }
.sichero.is-pos-center .sichero-sticky { align-items: center; }
.sichero.is-pos-lower  .sichero-sticky { align-items: flex-end; padding-bottom: clamp(24px, 9vh, 100px); }
.sichero.is-pos-bottom .sichero-sticky { align-items: flex-end; padding-bottom: clamp(16px, 4vh, 46px); }

.admin-bar .sichero-sticky {
	top: calc(var(--sh-top, 0px) + 32px);
	height: calc(100vh - var(--sh-top, 0px) - 32px);
}

/* ---- video layer ---- */
.sichero-video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	z-index: 0;
}
.sichero-scrim {
	position: absolute; inset: 0;
	background: var(--sh-bg);
	z-index: 1;
	pointer-events: none;
}

/* ---- chapter content ---- */
.sichero-content {
	position: relative;
	z-index: 2;
	width: 100%;
	/* The chapter type needs about 1030px to set "Young people are
	   already shaping civic life." on one line at its largest size; the
	   old 820px box left 756px after padding, so it wrapped on a
	   1920px screen with room to spare on either side. Widened to fit
	   the line, and capped at 92vw so narrow screens still wrap (into
	   balanced rows, per the title rule). The body copy keeps its own
	   44ch measure below, so widening the stage does not stretch the
	   paragraph into an unreadable line. */
	max-width: min(1180px, 92vw);
	max-height: 100%;
	padding: 0 32px;
	box-sizing: border-box;
	text-align: center;
	overflow-wrap: break-word;
	transition: opacity .35s ease, transform .35s ease;
}
.sichero-content.is-out { opacity: 0; transform: translateY(14px); }

.sichero-kicker {
	margin: 0 0 clamp(10px, 2vh, 20px);
	font-family: var(--sic-label-font);
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--sh-chapter, var(--sh-accent));
}
.sichero-title {
	margin: 0 0 clamp(12px, 2.2vh, 22px);
	font-family: var(--sic-heading-font);
	font-weight: 400;
	/* scales with width AND height, so it never outgrows the viewport */
	font-size: clamp(24px, min(3.2vw, 5.4vh), 50px);
	line-height: 1.12;
	color: var(--sh-text);
	/* One line wherever the width allows, and when it does not, whole
	   words move down together and the rows are evened out — rather than
	   the last word being left alone under a full row, which is what a
	   plain wrap produced. The size is deliberately NOT reduced to force
	   one line: the chapter type is the hero's voice, and shrinking it to
	   fit costs more than a second row does. Where text-wrap is
	   unsupported this falls back to the wrap it replaces. */
	text-wrap: balance;
	/* Never mid-word while space remains; the content box's own
	   break-word stays the last resort for a single long word. */
	word-break: normal;
}
.sichero-text {
	margin: 0 auto;
	max-width: 44ch;
	/* Defaults only. A Design-tab value for this element is emitted as a
	   per-block rule and outranks this, so a chapter saved with its own
	   size or weight keeps it; clearing that value falls back to here. */
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .5px;
	line-height: 1.6;
	color: rgba(255,255,255,.82);
}
.sichero-cta {
	display: inline-block;
	margin-top: clamp(14px, 2.4vh, 28px);
	padding: 14px 26px;
	background: var(--sh-chapter, var(--sh-accent));
	color: #ffffff;
	text-decoration: none;
	font-family: var(--sic-label-font);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: filter .15s ease;
}
.sichero-cta:hover { filter: brightness(1.12); }
.sichero-cta[hidden] { display: none; }

/* ---- chapter dots (right edge) ---- */
.sichero-dots {
	position: absolute;
	right: 26px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.sichero-dot {
	width: 7px; height: 7px;
	padding: 0; border: 0; border-radius: 99px;
	background: rgba(255,255,255,.4);
	cursor: pointer;
	transition: height .3s ease, background .3s ease;
}
.sichero-dot.is-active {
	height: 26px;
	background: var(--sh-chapter, var(--sh-accent));
}

/* ---- progress bar ---- */
.sichero-bar {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: rgba(255,255,255,.16);
	z-index: 3;
}
.sichero-bar i {
	display: block; height: 100%; width: 0;
	background: var(--sh-chapter, var(--sh-accent));
	transition: width .12s linear;
}

@media (prefers-reduced-motion: reduce) {
	.sichero-content, .sichero-bar i { transition: none; }
}

@media (max-width: 700px) {
	.sichero-content { padding: 0 22px; }
	.sichero-dots { right: 14px; }
}

/* ---- editor preview: not sticky, not full height ---- */
.sichero.is-static { height: auto !important; }
.sichero.is-static .sichero-sticky {
	position: static;
	height: 460px;
	top: auto;
}
.sichero.is-static.is-pos-top    .sichero-sticky { padding-top: 40px; }
.sichero.is-static.is-pos-lower  .sichero-sticky { padding-bottom: 46px; }
.sichero.is-static.is-pos-bottom .sichero-sticky { padding-bottom: 24px; }
/* ============================================================
   Animated SVG background
   ------------------------------------------------------------
   Occupies exactly the space the video would. The file is
   inlined rather than used as an <img> src, because nothing
   outside an <img> can reach the elements inside it — and the
   animations have to be reachable to be paused and scrubbed.
   ============================================================ */
.sichero-svg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	display: block;
	z-index: 0;
	overflow: hidden;
}
/* The file carries its own viewBox and preserveAspectRatio; this only
   makes it fill the stage the way object-fit:cover does for the video. */
.sichero-svg > svg {
	display: block;
	width: 100%; height: 100%;
}

/* Anyone who asks for less motion gets the finished frame rather than a
   composition that assembles itself as they scroll. The scrubbing is
   driven by animation-delay, so pausing alone would strand it on the
   first frame — the fill mode is what holds the last one. */
@media (prefers-reduced-motion: reduce) {
	.sichero-svg > svg * {
		animation-delay: 0s !important;
		animation-duration: 1ms !important;
	}
}

/* ============================================================
   Scroll cue
   ------------------------------------------------------------
   Centred over the hero, telling the reader this one is scrolled
   rather than watched. It leaves on the first movement — a cue
   still saying "scroll" while somebody is scrolling reads as a
   fault rather than an instruction.
   ============================================================ */
.sichero-cue {
	position: absolute;
	/* A third of the way down the stage, not centred on it: the cue was
	   colliding with the opening chapter's copy, and the eye finds an
	   instruction sooner above the text than level with it. Anchored to
	   the stage rather than the copy, because the chapter text sits
	   lower or higher depending on the block's own setting and the cue
	   should not move with it. */
	left: 50%; top: 33.333%;
	transform: translate(-50%, -50%);
	z-index: 3;
	display: flex; flex-direction: column; align-items: center; gap: 14px;
	color: #ffffff;
	pointer-events: none;   /* never in the way of a click */
	transition: opacity .4s ease, transform .4s ease;
}
.sichero-cue.is-gone {
	opacity: 0;
	transform: translate(-50%, calc(-50% + 10px));
}
.sichero-cue-t {
	font-family: var(--sic-label-font);
	font-size: 11px; font-weight: 600;
	letter-spacing: .22em; text-transform: uppercase;
	/* A rule around it, so the words read as a marker placed on the
	   picture rather than as a caption that happens to be floating in
	   the middle of it. */
	padding: 11px 20px;
	border: 1px solid rgba(255,255,255,.6);
	border-radius: 5px;
	/* The hero behind it is a photograph or a video, so the type needs
	   its own separation from whatever happens to be underneath. */
	text-shadow: 0 1px 12px rgba(0,0,0,.5);
	box-shadow: 0 2px 14px rgba(0,0,0,.28);
}
.sichero-cue-a {
	/* Sized and weighted to sit beside a line of spaced capitals rather
	   than under it as an afterthought: bigger, and a stroke heavy
	   enough to match the letterforms. */
	width: 34px; height: 34px;
	fill: none; stroke: currentColor;
	stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
	filter: drop-shadow(0 1px 8px rgba(0,0,0,.5));
	animation: sicHeroCue 1.9s ease-in-out infinite;
}
@keyframes sicHeroCue {
	0%, 100% { transform: translateY(0);   opacity: .75; }
	50%      { transform: translateY(7px); opacity: 1; }
}

@media (max-width: 700px) {
	.sichero-cue-t { font-size: 10px; padding: 9px 16px; letter-spacing: .18em; }
	.sichero-cue-a { width: 28px; height: 28px; }
}

/* Declared last so it wins on source order. */
@media (prefers-reduced-motion: reduce) {
	.sichero-cue { transition: none; }
	.sichero-cue-a { animation: none; }
}