/* ============================================================
   SIC City About — editorial intro on the left, a US map with
   this city's state highlighted on the right, and a detail card
   beneath it.
   ============================================================ */

.siccabout {
	--ca-bg:      #ffffff;
	--ca-text:    #021859;
	--ca-muted:   rgba(2,24,89,.66);
	--ca-accent:  #bf1304;
	--ca-panel:   #f2e0df;
	--ca-state:   #a64034;
	--ca-active:  #bf1304;

	background: var(--ca-bg);
	color: var(--ca-text);
	padding: 96px 48px;
	font-family: var(--sic-body-font);
}
.siccabout-inner { max-width: 1240px; margin: 0 auto; }

.siccabout-grid {
	display: grid;
	/* minmax(0, …) on both tracks: a bare fr will not shrink below its
	   content, and the map SVG is happy to claim more width than the column
	   has, which pushes the whole page sideways. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 56px;
	align-items: start;
}

/* ---- media aligned with the body ----
   With the title in the text column, that column opens with an eyebrow
   and a heading while the media column opens with the panel — so the
   image starts well above the first line of body copy. This drops the
   media by the height of the title block, measured at runtime by
   cityabout.js and published as --ca-media-top, so the top of the image
   meets the top of the body text however long the heading runs.

   Only applies while the two sit side by side; below the breakpoint the
   variable is ignored. */
.siccabout-side { margin-top: var(--ca-media-top, 0px); }

/* ---- heading over the media ----
   The eyebrow and heading move into the media column, above the image,
   leaving the body and pull quote to the other one. Independent of the
   flip: the pair simply follows the image to whichever side it is on.

   With the heading gone from the text column, that column starts with
   body copy, so its top margin is dropped — otherwise the two columns
   begin at visibly different heights. */
.siccabout.is-headmedia .siccabout-text > .siccabout-body { margin-top: 0; }
.siccabout.is-headmedia .siccabout-side > .siccabout-heading { margin-bottom: 26px; }
/* The heading is no longer narrow-measure here: it has the media column
   to itself and reads as a title over the picture. */
.siccabout.is-headmedia .siccabout-side > .siccabout-heading { max-width: none; }
/* Equal columns, since neither is now carrying noticeably more. */
.siccabout.is-headmedia .siccabout-grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
}

/* ---- flipped: map left, text right ----
   Done with `order` rather than by reversing the markup, so the DOM keeps
   reading heading-then-body-then-map: the source order is what a screen
   reader follows and what the page falls back to when the grid does not
   apply, and neither should change just because the visual sides swapped.
   The track widths swap too, so the map keeps the wider of the two columns
   whichever side it is on. */
.siccabout.is-flipped .siccabout-grid {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.siccabout.is-flipped .siccabout-side { order: 1; }
.siccabout.is-flipped .siccabout-text { order: 2; }
/* The label sits above the map and hugs the outer edge of the page, so it
   changes sides with the map rather than staying right. */
.siccabout.is-flipped .siccabout-sidelabel { text-align: left; }

/* ---- left column ---- */
.siccabout-eyebrow {
	display: flex; align-items: center; gap: 12px; margin: 0 0 30px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
	color: var(--ca-accent);
}
.siccabout-eyebrow span { width: 34px; height: 1px; background: var(--ca-accent); display: inline-block; }

.siccabout-heading {
	margin: 0 0 34px;
	max-width: 18ch;
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1;
}
/* 20px default. A Design-tab Font size for this element outranks the
   plain class, so a block set by hand keeps its own value. */
.siccabout-body { font-size: 20px; line-height: 1.75; color: var(--ca-muted); }

/* ---- pull quote, after the body ----
   A rule in the accent colour down the left edge, the quote set in the
   display serif. Blank by default, so it costs nothing on blocks that
   do not use it. */
.siccabout-pull {
	/* The same space below as above: a quote sitting between paragraphs
	   needs to be clear of both, and with a bottom margin of 0 the
	   paragraph after it ran straight into the rule. */
	margin: clamp(26px, 3vw, 38px) 0;
	padding: 2px 0 2px clamp(18px, 1.8vw, 26px);
	border-left: 3px solid var(--ca-accent);
	font-family: var(--sic-heading-font);
	font-style: italic;
	font-size: clamp(19px, 1.7vw, 26px);
	line-height: 1.4;
	color: var(--ca-text);
}
/* textToHtml wraps each paragraph, so the margins belong to the block
   rather than to its first and last lines. */
.siccabout-pull p { margin: 0; }
.siccabout-pull p + p { margin-top: .6em; }
.siccabout-body p { margin: 0 0 24px; }
.siccabout-body p:last-child { margin-bottom: 0; }
.siccabout-body strong { color: var(--ca-text); font-weight: 600; }
.siccabout-body a { color: var(--ca-accent); }

/* ---- right column ---- */
.siccabout-side { position: relative; }
.siccabout-sidelabel {
	margin: 0 0 18px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--ca-muted);
	text-align: right;
}

/* One panel holds the map and the detail card. The card sits beneath the
   map inside that panel, so they read as a single unit without the card
   ever covering the map. */
.siccabout-panel {
	background: var(--ca-panel);
	padding: 30px;
	display: flex; flex-direction: column;
}
.siccabout-map {
	/* Roughly half the screen, so the map is legible rather than a thumbnail. */
	min-height: clamp(420px, 48vh, 700px);
	display: flex; align-items: center; justify-content: center;
}
.siccabout-map svg { display: block; width: 100%; height: 100%; }

/* ---- photograph alternative to the map ----
   Same footprint as the map so switching between the two does not change
   the section's height and jolt the page. */
/* Chosen but not yet uploaded: the frame shows as a plain panel so the
   choice is visible before there is a file. */
.siccabout-figure {
	position: relative;
	margin: 0;
	/* The frame owns the height, not the image. It was a flex container
	   with the image sized by height:100% / min-height:inherit, which
	   depends on the image actually loading: a missing or still-loading
	   file collapsed the frame to a thin strip, and since the caption is
	   pinned to the frame's bottom edge, the caption ended up near the
	   TOP of the panel. Now the frame always reserves its height and the
	   image fills it absolutely, so the layout is identical whether the
	   photo has loaded, is loading, or is broken. */
	min-height: clamp(420px, 48vh, 700px);
	display: block;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(2,24,89,.06);   /* quiet placeholder while loading */
}
/* Chosen but not yet uploaded. Declared after the base rule, or it would
   simply lose to it. */
.siccabout-figure.is-empty { background: rgba(2,24,89,.06); min-height: clamp(220px, 26vh, 320px); }
/* ---- shape of the frame ----
   The image is cropped to fill whichever shape is chosen, so the choice
   decides what the reader sees rather than how the file was taken.
   aspect-ratio drives the height, so min-height is released — otherwise
   a portrait frame could never be taller than a landscape one. */
/* ---- shaped frames ----
   A chosen shape shows the WHOLE photograph: picking album or portrait
   means the picture already has that shape, so cropping it to fill would
   undo the choice.

   The frame wraps the image rather than imposing a box on it. An earlier
   version forced aspect-ratio on the figure and positioned the image
   absolutely inside — which both letterboxed the picture inside bands of
   empty frame AND, with a max-height also applied, could resolve to no
   height at all and show nothing. Sizing the image directly cannot
   collapse: no image, no height, and the picture keeps its own
   proportions. */
.siccabout-figure.is-album,
.siccabout-figure.is-portrait {
	min-height: 0;
	aspect-ratio: auto;
	background: none;
	overflow: visible;
	display: flex;
	justify-content: center;   /* centred: flush left would look accidental */
}
.siccabout-figure.is-album .siccabout-image,
.siccabout-figure.is-portrait .siccabout-image {
	position: static;
	width: auto; height: auto;
	object-fit: contain;
	/* Never wider than the column, and never taller than a screenful,
	   before the block's own ceilings are applied. */
	max-width: var(--ca-img-maxw, 100%);
	max-height: var(--ca-img-maxh, var(--ca-img-maxh-default));
}
/* The shape sets the default ceiling, so the two differ even before
   anything is typed into the size fields. */
.siccabout-figure.is-album    { --ca-img-maxh-default: clamp(240px, 34vh, 420px); }
.siccabout-figure.is-portrait { --ca-img-maxh-default: clamp(360px, 58vh, 680px); }
/* The caption rides the foot of the picture, not of an empty frame. */
.siccabout-figure.is-album .siccabout-caption,
.siccabout-figure.is-portrait .siccabout-caption { border-radius: 0 0 2px 2px; }
.siccabout-image {
	position: absolute; inset: 0;
	display: block; width: 100%; height: 100%;
	object-fit: cover;          /* fills the frame at any aspect ratio */
	object-position: center;
}
/* Captions sit over the foot of the photograph: description left, credit
   right. The scrim is part of the figcaption rather than a separate
   element, so it only exists when there is text to carry. */
.siccabout-caption {
	position: absolute; left: 0; right: 0; bottom: 0;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
	padding: 40px 18px 14px;
	background: linear-gradient(to top, rgba(12,10,17,.72), rgba(12,10,17,0));
	z-index: 1;                 /* above the absolutely-positioned image */
	font-family: var(--sic-label-font);
	font-size: 12px; line-height: 1.35;
	color: #ffffff;
	pointer-events: none;       /* never blocks a click on the photo */
}
.siccabout-caption-text { font-weight: 600; }
/* Slightly recessive: it is attribution, not description. */
.siccabout-credit { opacity: .78; white-space: nowrap; }

@media (max-width: 560px) {
	/* Stacked, because a long description and a credit side by side on a
	   narrow screen leaves each about ten characters of room. */
	.siccabout-caption { flex-direction: column; align-items: flex-start; gap: 2px; }
	.siccabout-credit { white-space: normal; }
}

/* The pin is interactive: a hit disc wide enough for a finger, and a
   tooltip matching the Map block's. The map container is the positioning
   context, so it must not be static. */
.siccabout-map { position: relative; }
.siccabout-marker { cursor: pointer; }
.siccabout-hit { fill: transparent; }
.siccabout-tip {
	position: absolute; z-index: 5; transform: translate(-50%, -100%);
	background: var(--ca-tipbg, #021859); color: var(--ca-tiptext, #ffffff);
	padding: 10px 16px; border-radius: 4px;
	text-align: center; pointer-events: none; white-space: nowrap;
	box-shadow: 0 10px 26px rgba(2,24,89,.28);
}
.siccabout-tip b { display: block; font-family: var(--sic-heading-font); font-size: 15px; font-weight: 400; }
.siccabout-tip span {
	display: block; margin-top: 3px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
	/* Derived from the tooltip text colour so it follows whatever is set. */
	color: currentColor; opacity: .72; font-family: var(--sic-label-font);
}
.siccabout-tip::after {
	content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
	border-left: 6px solid transparent; border-right: 6px solid transparent;
	border-top: 6px solid var(--ca-tipbg, #021859);
}
.siccabout-state { fill: var(--ca-state); stroke: #ffffff; stroke-width: .7; }
.siccabout-state.is-active { fill: var(--ca-active); }
/* The numbered disc IS the marker — the halo and the small dot it
   replaces read as two separate pins for one place. Same treatment as
   the Map block on the main page: a white ring keeps it legible over
   both the brick states and the blush field. */
.siccabout-badge {
	fill: var(--ca-active);
	stroke: #ffffff; stroke-width: 2;
}
.siccabout-badge-t {
	fill: #ffffff;
	font-family: var(--sic-label-font);
	/* Doubled with the disc it sits in. */
	font-size: 20px; font-weight: 600;
	pointer-events: none;   /* clicks belong to the disc under it */
}

/* ---- detail card ---- */
.siccabout-card {
	margin-top: 26px;
	padding-top: 24px;
	border-top: 1px solid rgba(22,32,63,.14);
	display: flex; gap: 14px; align-items: flex-start;
}
.siccabout-card-pin { flex: 0 0 auto; margin-top: 2px; color: var(--ca-accent); line-height: 1; font-size: 15px; }

.siccabout-card-body { min-width: 0; }
.siccabout-card-title {
	margin: 0 0 12px;
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(18px, 1.6vw, 23px); line-height: 1.2;
	color: var(--ca-text);
}
.siccabout-facts { margin: 0; padding: 0; list-style: none; }
.siccabout-facts li {
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--ca-muted);
	line-height: 1.9;
}

@media (max-width: 1000px) {
	/* Stacked: nothing to align against. */
	.siccabout-side { margin-top: 0; }
	.siccabout-grid,
	.siccabout.is-flipped .siccabout-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
	.siccabout-sidelabel { text-align: left; }
	.siccabout-heading { max-width: none; }
	/* One column, so the columns' order decides the reading order, and
	   what leads should be whichever column holds the HEADING.

	   Normally the heading sits in the text column, so dropping the flip
	   and letting the text lead is right: heading, then body, then the
	   map that illustrates it.

	   With “heading above the media” the heading moves into the side
	   column instead — and that reset then put the whole body before the
	   eyebrow and heading, so a phone read the answer before the
	   question. Those blocks lead with the side column, making the order
	   eyebrow, heading, picture, body either way. */
	.siccabout.is-flipped:not(.is-headmedia) .siccabout-text,
	.siccabout.is-flipped:not(.is-headmedia) .siccabout-side { order: 0; }
	.siccabout.is-headmedia .siccabout-side { order: 0; }
	.siccabout.is-headmedia .siccabout-text { order: 1; }
}
@media (max-width: 640px) {
	.siccabout { padding: 60px 24px; }
	.siccabout-panel { padding: 16px; }
	.siccabout-map,
	.siccabout-figure { min-height: clamp(320px, 42vh, 480px); }
	.siccabout-card { margin-top: 18px; padding-top: 18px; }
}
/* ============================================================
   The picture lifts on hover
   ------------------------------------------------------------
   A soft shadow at rest, a little deeper and 4px higher under
   the pointer — the same treatment the horizontal voice cards
   use, so the two read as one system.

   Which element carries it depends on the layout: in the default
   panel the frame IS the picture, while a shaped frame wraps an
   image that may be narrower than it, so there the image itself
   must carry the shadow or it would float around empty space.
   ============================================================ */
.siccabout-figure {
	box-shadow: 0 6px 20px rgba(2,24,89,.10);
	transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
}
.siccabout-figure:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(2,24,89,.16);
}
/* A shaped frame is transparent, so the shadow moves to the picture. */
.siccabout-figure.is-album,
.siccabout-figure.is-portrait { box-shadow: none; }
.siccabout-figure.is-album:hover,
.siccabout-figure.is-portrait:hover { box-shadow: none; transform: none; }
.siccabout-figure.is-album .siccabout-image,
.siccabout-figure.is-portrait .siccabout-image {
	border-radius: 2px;
	box-shadow: 0 6px 20px rgba(2,24,89,.10);
	transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
}
.siccabout-figure.is-album:hover .siccabout-image,
.siccabout-figure.is-portrait:hover .siccabout-image {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(2,24,89,.16);
}
/* An empty frame has nothing to lift. */
.siccabout-figure.is-empty,
.siccabout-figure.is-empty:hover { box-shadow: none; transform: none; }

/* The map gets the same treatment as the photograph, so the two sides of
   the block behave alike. The panel carries it rather than the map
   itself: the map is a bare SVG sitting on the panel, so a shadow on it
   would appear around nothing. */
.siccabout-panel:has(.siccabout-map) {
	box-shadow: 0 6px 20px rgba(2,24,89,.10);
	transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
}
.siccabout-panel:has(.siccabout-map):hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(2,24,89,.16);
}
/* :has() is recent enough to want a floor. Without it the panel simply
   sits still, which is the behaviour before this rule existed. */
@supports not (selector(:has(*))) {
	.siccabout-panel { box-shadow: 0 6px 20px rgba(2,24,89,.10); }
}

/* Declared last, so it wins on source order: media queries add no
   specificity, and an override placed earlier would simply lose to the
   rules above. The shadow stays — that is not motion — and the lift
   stops. */
@media (prefers-reduced-motion: reduce) {
	.siccabout-figure,
	.siccabout-figure .siccabout-image { transition: box-shadow .28s ease; }
	.siccabout-figure:hover,
	.siccabout-figure:hover .siccabout-image { transform: none; }
	.siccabout-panel:has(.siccabout-map) { transition: box-shadow .28s ease; }
	.siccabout-panel:has(.siccabout-map):hover { transform: none; }
}

/* ============================================================
   Custom code in the side panel
   ------------------------------------------------------------
   The panel gives the embed its width and gets out of the way:
   no tall minimum, no crop, no shadow, since whatever is placed
   here brings its own presentation.
   ============================================================ */
.siccabout-panel.is-code { background: none; padding: 0; }
.siccabout-code { width: 100%; }
/* Media inside an embed should not overflow the column. */
.siccabout-code img,
.siccabout-code video,
.siccabout-code iframe { max-width: 100%; }
.siccabout-code iframe { border: 0; }
/* An empty code field leaves an empty panel rather than a collapsed
   sliver, so it is obvious in the editor that nothing has been entered. */
.siccabout-panel.is-code .siccabout-code:empty { min-height: 220px; background: rgba(2,24,89,.06); }
/* A framed document sizes itself from the inside; this only stops it
   collapsing before the first height arrives. The max-width matters as
   much as the width: an embed that insists on being wider than its
   column would otherwise widen the page itself. */
.siccabout-codeframe { width: 100%; max-width: 100%; border: 0; display: block; min-height: 200px; }
/* The wrapper takes the scaled height when the frame is scaled down;
   a transform paints but does not reserve space, so without this the
   block would keep the unscaled height and leave a gap beneath. */
.siccabout-code { max-width: 100%; }
/* ---- phones ---- */
@media (max-width: 600px) {
	/* 16px on a phone. 20px is a desktop reading size; in a column this
	   narrow it sets only a few words to the line. Stated here as well as
	   in design.css's shared phone rule so the component carries its own
	   default, and doubled so it cannot lose to a later unqualified rule.
	   A Design-tab Phone value for this block still outranks it. */
	.siccabout-body.siccabout-body { font-size: 16px; }
}