/* Place single page — chapter looks on the is-* hooks (standard
 * section DOM: main/post-content own the width system; each chapter's
 * padding-top owns the vertical rhythm; headings sit in grid columns
 * BESIDE the text, so they carry no padding of their own). */

article figure {
	margin-block: var(--wp--preset--spacing--40);
}

/* Fixed-surface bands follow the scheme's "white": the carbonio bands
 * keep their surface in both modes, but their text tracks the semantic
 * --color-white token (bianco in light, the standard light gray in
 * dark) — the same flip every other heading and body line makes. The
 * markup stays block-native (bianco preset); only the meaning of
 * "white" is scheme-aware. */
.is-circuit-design .has-bianco-color,
.is-corner-guide .has-bianco-color,
.cs-circuit-stats .has-bianco-color {
	color: var(--color-white) !important;
}

/* Auto-activation: every circuit body carries the Corner Guide band as
 * a scaffold, but until its racetrack data exists the cs/corner-guide
 * block renders nothing — and a dark band holding only its heading
 * must not render hollow. The chapter appears by itself the moment
 * the block has output (data filled in on live) or when an editor has
 * written walkthrough prose into it. */
.is-corner-guide:not(:has(.wp-block-cs-corner-guide)):not(:has(p, h3, h4, ul, ol, figure)) {
	display: none;
}

/* Sub-headings inside the dark bands (corner-by-corner walkthroughs):
 * the global heading rule paints h3/h4 with --color-heading, which is
 * dark-on-dark here — lift them to the scheme white. */
.is-circuit-design h3,
.is-circuit-design h4,
.is-corner-guide h3,
.is-corner-guide h4 {
	color: var(--color-white);
}

/* Same idea for the accent colours: dark mode dims giallo and rosso
 * (the --color-yellow / --color-red semantic tokens), so the bands'
 * fixed presets map onto them — identical in light mode, calmer in
 * dark. */
.is-significance.has-giallo-background-color {
	background-color: var(--color-yellow) !important;
}

.is-circuit-design .has-giallo-color,
.is-corner-guide .has-giallo-color,
.cs-circuit-stats .has-giallo-color {
	color: var(--color-yellow) !important;
}

/* Colored bands stack flush: when a colored-background chapter follows
 * another, the follower's margin-top (the white gap) disappears — the
 * bands read as stacked surfaces, kerb to kerb. Following a LIGHT
 * chapter the margin stays: there the gap IS the design. Extend the
 * set when a new colored chapter is born. */
:is(.wp-block-cs-circuit-stats, .is-corner-guide, .is-circuit-design, .is-significance)
+ :is(.wp-block-cs-circuit-stats, .is-corner-guide, .is-circuit-design, .is-significance) {
	margin-block-start: 0 !important;
}

/* Same-surface fusion: the carbonio pair shares ONE padding at the
 * seam — the follower yields. Different-colored neighbours (giallo
 * after carbonio) each keep their interior padding; only the gap goes. */
.wp-block-cs-circuit-stats + .is-corner-guide {
	padding-top: 0 !important;
}

.is-corner-guide + .cs-circuit-stats {
	padding-top: 0 !important;
}

/* Newspaper text flow: one group of plain paragraphs, balanced by the
 * browser across three columns. column-gap = the track gap, so each
 * column computes to exactly one track of the 3-track grid — flowing
 * text aligns with every other chapter row. Breakpoints mirror the
 * card grid (3 -> 2 -> 1). */
.is-text-flow {
	columns: 3;
	column-gap: var(--wp--preset--spacing--40);
}

/* True newspaper balancing: paragraphs may break mid-flow so all
 * columns end up with a similar line count; orphans/widows keep at
 * least two lines on each side of a break. */
/* Standard paragraph rhythm (the theme block gap), carried as
 * margin-bottom so every column starts flush at the top. */
.is-text-flow p {
	margin-block-start: 0;
	margin-block-end: var(--wp--style--block-gap);
	orphans: 2;
	widows: 2;
}

@media (max-width: 1024px) {
	.is-text-flow {
		columns: 2;
	}
}

@media (max-width: 782px) {
	.is-text-flow {
		columns: 1;
	}
}

/* ---------------------------------------------------------------
 * Chapter roster: .is-history, .is-architecture, .is-significance,
 * .is-visitor-experience, .is-location, .is-circuit-design,
 * .is-corner-guide, generic .is-1-column/.is-2-column (scaffolds:
 * the text-place-* patterns; dynamic facts: cs/place-facts inside
 * .is-location). Chapter looks are styled HERE, on those hooks only.
 * ------------------------------------------------------------- */

/* "Opens in a new window" affordance on the facts row's external
 * links (Website). Self-contained inline-SVG via CSS mask so it
 * inherits the link colour in both schemes - no icon font. */
.cs-place-facts a[target="_blank"]::after {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-inline-start: 0.35em;
	vertical-align: -0.05em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M14%203h7v7h-2V6.41l-9.29%209.3-1.42-1.42%209.3-9.29H14V3zM5%205h5v2H7v10h10v-3h2v5H5V5z%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M14%203h7v7h-2V6.41l-9.29%209.3-1.42-1.42%209.3-9.29H14V3zM5%205h5v2H7v10h10v-3h2v5H5V5z%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}