/*
 * Inner-page sections (Phase 11, About A-01…A-08): the patterns
 * page-hero-art, ecosystem-chain, vision, pillars-3, governance and team, and
 * the About compositions (intro columns, video band). Phase 12 adds the
 * Technology sections; Phase 13 the Solutions sections (S-01 hero tiles,
 * S-02 four cards, S-04 shorts-series, S-05 deep-dive-card). Ported from the
 * redesign PoC (css/site.css @ ed0ab9f7, ".page-hero", ".chain", ".tech",
 * ".card", ".team", ".person", ".grid.g2/.g3", ".split.top") using theme.json
 * tokens and base.css aliases only. Loaded only on pages that use one of
 * these sections (functions.php). Shared section pieces (split, centred head,
 * whitepaper call to action) are in sections.css.
 *
 * Breakpoints follow docs/05 §3.1: the PoC's 860px becomes md (900px). Hover
 * only outlines links (G-12). Literal values kept from the PoC: 1px borders,
 * the dashed side-chain border, the portrait filter and the drop-shadow
 * offsets.
 */

/* Margin resets (one class: they must beat WordPress's flow-layout gaps). */
:is(.sc-page-hero, .sc-industries-section, .sc-shorts-section, .sc-deep-dive-section, .sc-intro-section, .sc-video-band, .sc-chain-section, .sc-vision-section, .sc-pillars-section, .sc-governance-section, .sc-team-section, .sc-features-section, .sc-hndl-section, .sc-architecture-section, .sc-lifecycle-section, .sc-broker-section) :where(.wrap, .sc-split, .sc-split-text, .sc-split-head, .sc-split-head-title, .sc-page-hero-tiles, .sc-shorts, .sc-deep-dives, .sc-deep-dive-card, .sc-deep-dive-body, .sc-hndl-figure, .sc-broker, .sc-broker-side, .sc-broker-node, .sc-page-hero-grid, .sc-page-hero-copy, .sc-columns, .sc-stack, .sc-ecosystem, .sc-chain, .sc-chain-col, .sc-chain-side, .sc-chain-item, .sc-chain-text, .sc-pillars, .sc-tech-card, .sc-governance-cards, .sc-governance-card, .sc-team, .sc-person, .sc-person-text) > * {
	margin-block: 0;
}

.sc-split.sc-split-top {
	align-items: start;
}

.sc-stack,
.sc-split-text.sc-stack {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--sections--stack-gap);
}

/* ---------- A-01 page hero with art ---------- */

/* A Cover (A-01, hex surface), a Group with the glow style (S-01) or the
   listing hero of archives and search (Phase 14, parts/news-hero.php). */
:is(.wp-block-cover, .wp-block-group, .sc-listing-hero).sc-page-hero {
	isolation: isolate;
	min-height: 0;
	padding: 0;
	overflow: hidden;
	border-bottom: 1px solid var(--line-soft);
	background-color: var(--c-black);
}

.wp-block-cover.sc-page-hero > div {
	width: 100%;
	color: inherit;
}

.sc-page-hero-grid {
	display: grid;
	grid-template-columns: var(--wp--custom--pages--hero-columns);
	gap: var(--wp--custom--pages--hero-gap);
	align-items: center;
	padding-block: var(--wp--custom--pages--hero-padding);
}

.sc-page-hero-copy {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--hero--copy-gap);
	max-width: var(--wp--custom--pages--hero-copy-width);
}

.wp-block-image.sc-page-hero-art {
	justify-self: end;
	width: 100%;
	max-width: var(--wp--custom--pages--hero-art-width);
	margin: 0;
}

.wp-block-image.sc-page-hero-art img {
	display: block;
	width: var(--wp--custom--pages--hero-mark-width);
	max-width: 100%;
	filter: drop-shadow(0 0 60px color-mix(in srgb, var(--c-orange) 45%, transparent));
}

/* An SVG file has no width and height attributes; reserve the hex mark's
   space (its viewBox ratio) so the page does not shift when it loads. */
.wp-block-image.sc-art-mark img {
	aspect-ratio: var(--wp--custom--pages--hero-mark-ratio);
	height: auto;
}

/* S-01: six image tiles as the hero art. */
.sc-page-hero-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--custom--pages--hero-tiles-gap);
	justify-self: end;
	width: 100%;
	max-width: var(--wp--custom--pages--hero-tiles-width);
}

.sc-page-hero-tiles > .wp-block-image {
	margin: 0;
}

.sc-page-hero-tiles > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-card);
	filter: drop-shadow(0 30px 60px color-mix(in srgb, var(--c-orange) 25%, transparent));
}

/* ---------- A-02 intro columns ---------- */

.sc-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--custom--pages--columns-gap);
}

/* ---------- A-03 video band ---------- */

.sc-video-band {
	padding-block: var(--wp--custom--pages--video-band-padding);
}

/* ---------- A-04 ecosystem chain ---------- */

.sc-ecosystem > .sc-ecosystem-label {
	margin-bottom: var(--wp--custom--pages--chain-label-offset);
}

.sc-chain {
	display: grid;
	grid-template-columns: var(--wp--custom--pages--chain-columns);
	gap: var(--wp--custom--pages--chain-gap);
	align-items: center;
}

.sc-chain-col {
	display: flex;
	flex-direction: column;
	gap: calc(2 * var(--wp--custom--pages--chain-col-gap) + var(--wp--custom--pages--chain-arrow-size));
}

.sc-chain-side {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--pages--chain-side-gap);
}

.sc-chain-item {
	position: relative;
	display: grid;
	grid-template-columns: var(--wp--custom--pages--chain-item-columns);
	gap: var(--wp--custom--pages--chain-item-gap);
	align-items: center;
	padding: var(--wp--custom--pages--chain-item-padding);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-sm);
	background: var(--c-panel);
}

/* Decorative arrow between chain cards (the PoC's chain-arrow). */
.sc-chain-col > .sc-chain-item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(100% + 1px + var(--wp--custom--pages--chain-col-gap));
	left: var(--wp--custom--pages--chain-arrow-offset);
	width: var(--wp--custom--pages--chain-arrow-size);
	height: var(--wp--custom--pages--chain-arrow-size);
	background-color: var(--c-orange);
	mask: var(--sc-icon-down) center / contain no-repeat;
}

.sc-chain-item:hover {
	border-color: var(--c-orange);
}

.sc-chain-item.sc-chain-item-core {
	border-color: var(--c-orange);
	background: linear-gradient(90deg, color-mix(in srgb, var(--c-orange) 16%, transparent), color-mix(in srgb, var(--c-orange) 3%, transparent));
	box-shadow: var(--shadow-glow);
}

.sc-chain-side .sc-chain-item {
	border-style: dashed;
	border-color: color-mix(in srgb, var(--c-blue) 40%, transparent);
}

.wp-block-image.sc-chain-logo {
	display: grid;
	place-items: center;
	height: var(--wp--custom--pages--chain-logo-box);
	margin: 0;
}

.wp-block-image.sc-chain-logo img {
	width: auto;
	max-height: var(--sc-chain-logo-height, var(--wp--custom--chain-logo--h-44));
}

.sc-chain-logo-h14 {
	--sc-chain-logo-height: var(--wp--custom--chain-logo--h-14);
}

.sc-chain-logo-h18 {
	--sc-chain-logo-height: var(--wp--custom--chain-logo--h-18);
}

.sc-chain-logo-h24 {
	--sc-chain-logo-height: var(--wp--custom--chain-logo--h-24);
}

.sc-chain-logo-h36 {
	--sc-chain-logo-height: var(--wp--custom--chain-logo--h-36);
}

.sc-chain-logo-h44 {
	--sc-chain-logo-height: var(--wp--custom--chain-logo--h-44);
}

.sc-chain-name {
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--chain-name);
	font-weight: 600;
}

.sc-chain-name a {
	color: var(--c-text);
	text-decoration: none;
}

/* The name link covers the card (one link per card). */
.sc-chain-name a::before {
	content: "";
	position: absolute;
	inset: 0;
}

.sc-chain-item:has(a:focus-visible) {
	outline: 2px solid var(--c-orange-hover);
	outline-offset: 3px;
}

.sc-chain-name a:focus-visible {
	outline: none;
}

.sc-chain-desc {
	font-size: var(--wp--custom--font-size--chain-desc);
	color: var(--c-muted);
}

.sc-chain-side > .sc-chain-conn {
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--chain-conn);
	letter-spacing: var(--wp--custom--wisesat--letter-spacing);
	text-transform: uppercase;
	color: var(--c-blue);
}

/* ---------- A-05 vision ---------- */

.sc-vision-section {
	padding-block: var(--wp--custom--pages--vision-padding);
}

.wp-block-image.sc-vision-image {
	margin: 0;
}

.wp-block-image.sc-vision-image img {
	display: block;
	width: 100%;
	border: 1px solid var(--line-soft);
	border-radius: var(--r-card);
}

/* ---------- A-06 three pillars (tech cards) ---------- */

.sc-pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--custom--gap--grid);
}

.sc-tech-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--pages--tech-gap);
}

.sc-tech-icon {
	display: grid;
	place-items: center;
	width: var(--wp--custom--pages--tech-icon-box);
	height: var(--wp--custom--pages--tech-icon-box);
	border: 1px solid var(--line);
	border-radius: var(--wp--custom--pages--tech-icon-radius);
	background: color-mix(in srgb, var(--c-orange) 10%, transparent);
	color: var(--c-orange);
	--sc-icon-size: var(--wp--custom--pages--tech-icon-size);
}

/* PoC: the card's flex gap plus `.card h3 { margin-bottom: .6rem }`. */
.sc-tech-card > h3 {
	margin-bottom: var(--wp--custom--pages--card-heading-offset);
}

.sc-tech-card > .sc-muted,
.sc-governance-card > .sc-muted,
.sc-deep-dive-body > .sc-muted {
	font-size: var(--wp--custom--font-size--usecase-text);
}

/* T-02 badge on the first technology card (PoC `.badge`). */
.sc-tech-card .sc-badge {
	position: absolute;
	top: var(--wp--custom--pages--badge-offset);
	right: var(--wp--custom--pages--badge-offset);
	margin: 0;
	padding: var(--wp--custom--pages--badge-padding);
	border-radius: var(--r-pill);
	background: var(--c-orange);
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--badge);
	font-weight: 600;
	letter-spacing: var(--wp--custom--wisesat--letter-spacing);
	text-transform: uppercase;
	color: var(--c-on-orange);
}

/* T-06 feature cards: plain cards (no tech gap), icon tile then heading. */
.sc-tech-card.sc-feature-card {
	gap: 0;
}

.sc-feature-card > .sc-tech-icon {
	margin-bottom: var(--wp--custom--pages--feature-icon-offset);
}

/* ---------- T-03 HNDL chart ---------- */

.sc-hndl-figure {
	padding: var(--wp--custom--pages--hndl-padding);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--c-panel);
}

.wp-block-image.sc-hndl-chart {
	margin: 0;
}

/* Inline, as the PoC's inline SVG (it keeps the line box's descender gap). */
.wp-block-image.sc-hndl-chart img {
	width: 100%;
	height: auto;
	aspect-ratio: 520 / 250;
	vertical-align: baseline;
}

.sc-hndl-figure > .sc-hndl-note {
	margin-top: var(--wp--custom--pages--hndl-note-offset);
	font-size: var(--wp--custom--font-size--hndl-note);
	color: var(--c-muted);
}

/* ---------- T-05 architecture video ---------- */

.sc-architecture-section .sc-architecture + .sc-split {
	margin-top: var(--wp--custom--pages--arch-video-offset);
}

.sc-split-text > .sc-h3-large {
	font-size: var(--wp--custom--font-size--h-3-large);
}

/* ---------- T-08 broker nodes ---------- */

.sc-broker {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: var(--wp--custom--pages--broker-gap);
	align-items: center;
}

.sc-broker-side > h3 {
	margin-bottom: var(--wp--custom--pages--broker-heading-offset);
	font-size: var(--wp--custom--font-size--broker-heading);
	letter-spacing: var(--wp--custom--footer--heading-letter-spacing);
	text-transform: uppercase;
}

.sc-broker-blocked > h3 {
	color: color-mix(in srgb, var(--c-bad) 70%, var(--c-text));
}

.sc-broker-enabled > h3 {
	color: var(--c-ok);
}

.sc-broker-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--pages--broker-list-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-broker-list > li {
	display: flex;
	gap: var(--wp--custom--pages--broker-item-gap);
	align-items: center;
	padding: var(--wp--custom--pages--broker-item-padding);
	border-radius: var(--r-input);
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--broker-item);
	font-weight: 500;
}

.sc-broker-list > li::before {
	content: "";
	flex: none;
	width: var(--wp--custom--pages--broker-icon-size);
	height: var(--wp--custom--pages--broker-icon-size);
	background-color: currentcolor;
}

.sc-broker-blocked .sc-broker-list > li {
	border: 1px solid color-mix(in srgb, var(--c-bad) 35%, transparent);
	background: color-mix(in srgb, var(--c-bad) 6%, transparent);
	color: color-mix(in srgb, var(--c-bad) 45%, var(--c-text));
}

.sc-broker-blocked .sc-broker-list > li::before {
	mask: var(--sc-icon-x) center / contain no-repeat;
}

.sc-broker-enabled .sc-broker-list > li {
	border: 1px solid color-mix(in srgb, var(--c-ok) 35%, transparent);
	background: color-mix(in srgb, var(--c-ok) 6%, transparent);
	color: color-mix(in srgb, var(--c-ok) 40%, var(--c-text));
}

.sc-broker-enabled .sc-broker-list > li::before {
	mask: var(--sc-icon-checkc) center / contain no-repeat;
}

.sc-broker-node {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--pages--broker-node-gap);
	align-items: center;
	width: var(--wp--custom--pages--broker-node-width);
	text-align: center;
}

.wp-block-image.sc-broker-image {
	margin: 0;
}

.wp-block-image.sc-broker-image img {
	display: block;
	width: var(--wp--custom--pages--broker-image-width);
	border-radius: var(--wp--custom--pages--broker-image-radius);
}

.sc-broker-node > .sc-broker-node-title {
	font-family: var(--f-display);
	font-weight: 600;
	color: var(--c-orange);
}

.sc-broker-node > .sc-broker-node-text {
	font-size: var(--wp--custom--font-size--broker-node);
	line-height: 1.45;
	color: var(--c-muted);
}

/* ---------- A-07 governance ---------- */

.sc-governance-section {
	padding-block: var(--wp--custom--pages--governance-padding);
}

.sc-governance-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--custom--gap--grid);
}

/* The PoC's card labels are inline spans: the card's body line box and the
   label's own width. */
.sc-governance-card > .is-style-eyebrow {
	width: fit-content;
	line-height: calc(var(--wp--preset--font-size--body) * var(--wp--custom--line-height--body));
}

.sc-governance-card > h3 {
	margin-top: var(--wp--custom--pages--governance-heading-offset);
	margin-bottom: var(--wp--custom--pages--card-heading-offset);
}

.sc-governance-card > .sc-link-ext {
	margin-top: var(--wp--custom--pages--link-offset);
}

/* External link with an icon (governance card; PoC `.link` + ext icon). */
.sc-governance-card .sc-link-ext a {
	display: inline-flex;
	gap: var(--wp--custom--gap--icon-text);
	align-items: center;
	font-family: var(--f-display);
	font-weight: 600;
	color: var(--c-orange);
	text-decoration: none;
}

.sc-governance-card .sc-link-ext a::after {
	content: "";
	width: var(--wp--custom--pages--link-icon-size);
	height: var(--wp--custom--pages--link-icon-size);
	background-color: currentcolor;
	mask: var(--sc-icon-ext) center / contain no-repeat;
}

.sc-governance-card .sc-link-ext a:hover {
	color: var(--c-orange-hover);
	text-decoration: underline;
}

/* ---------- A-08 team ---------- */

.sc-team {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--custom--pages--team-gap);
}

.sc-person {
	display: grid;
	grid-template-columns: var(--wp--custom--pages--person-columns);
	gap: var(--wp--custom--pages--person-gap);
	align-items: center;
	padding: var(--wp--custom--pages--person-padding);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-card);
	background: var(--c-panel);
}

.wp-block-image.sc-person-photo {
	margin: 0;
}

.wp-block-image.sc-person-photo img {
	display: block;
	width: var(--wp--custom--pages--person-photo-width);
	height: var(--wp--custom--pages--person-photo-height);
	object-fit: cover;
	border-radius: var(--wp--custom--pages--person-photo-radius);
	filter: grayscale(1) contrast(1.05);
}

.sc-person-name {
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--person-name);
	font-weight: 600;
}

.sc-person-text > .sc-person-role {
	margin-top: var(--wp--custom--pages--person-role-offset);
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--person-role);
	line-height: 1.4;
	letter-spacing: var(--wp--custom--letter-spacing--micro);
	text-transform: uppercase;
	color: var(--c-orange);
}

/* ---------- S-02 four cards ---------- */

.sc-pillars.sc-pillars-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wp-block-buttons.sc-center-actions {
	justify-content: center;
	margin-top: var(--wp--custom--pages--center-actions-offset);
}

/* ---------- S-04 shorts series ---------- */

.sc-split-head.sc-shorts-head {
	align-items: end;
	margin-bottom: var(--wp--custom--pages--shorts-head-offset);
}

.sc-shorts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--custom--gap--grid);
}

.wp-block-image.sc-video-featured {
	border-color: var(--c-orange);
	box-shadow: var(--shadow-glow);
}

/* ---------- S-05 deep dives ---------- */

.sc-deep-dives {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--custom--gap--grid);
}

.sc-deep-dive-card {
	display: grid;
	grid-template-columns: var(--wp--custom--pages--deep-dive-image-width) 1fr;
	gap: var(--wp--custom--pages--deep-dive-gap);
	align-items: start;
}

.wp-block-image.sc-deep-dive-image {
	margin: 0;
}

/* The PoC keeps the 72px image column at every width (its inline grid
   columns override the .card-row breakpoint). */
.wp-block-image.sc-deep-dive-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-sm);
}

.sc-deep-dive-body > h3 {
	margin-bottom: var(--wp--custom--pages--card-heading-offset);
}

.sc-deep-dive-body > .wp-block-buttons {
	margin-top: var(--wp--custom--pages--deep-dive-actions-offset);
}

/* lg (PoC: .g4 at 1080px) */
@media (max-width: 1080px) {

	.sc-pillars.sc-pillars-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* md (PoC: 860px for the hero and chain, 900px for the team) */
@media (max-width: 900px) {

	.sc-page-hero-grid,
	.sc-chain,
	.sc-broker {
		grid-template-columns: 1fr;
	}

	.sc-broker-node {
		width: auto;
	}

	.wp-block-image.sc-page-hero-art {
		justify-self: start;
		max-width: var(--wp--custom--pages--hero-art-width-small);
	}

	.sc-page-hero-tiles {
		justify-self: start;
	}

	.sc-team {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* sm (PoC: .g2 and .g3 at 760px) */
@media (max-width: 760px) {

	.sc-columns,
	.sc-pillars,
	.sc-pillars.sc-pillars-4,
	.sc-governance-cards,
	.sc-shorts,
	.sc-deep-dives {
		grid-template-columns: 1fr;
	}
}

/* xs */
@media (max-width: 520px) {

	.sc-team {
		grid-template-columns: 1fr;
	}
}