/*
 * Home sections H-02, H-05…H-09, H-11…H-14 (Phase 10): the patterns
 * band-orange, wisesat (section wrapper; the embed itself is wisesat.css),
 * video-split, partners, proof-strip, whitepaper-cta, logos, token-band and
 * builder-cta. Ported from the redesign PoC (css/site.css @ ed0ab9f7, ".band",
 * ".hndl", ".split", ".partners", ".proof", ".logos", ".token",
 * ".split-entities", ".builder") using theme.json tokens and base.css aliases
 * only. One file for all of them, loaded only on pages that use one
 * (functions.php), to keep the request count down (docs/12).
 *
 * Breakpoints follow docs/05 §3.1: the PoC's 860px becomes md (900px), 640px
 * and 560px become sm (760px) and xs (520px). Hover only outlines or
 * brightens links (G-12). Literal values kept from the PoC: 1px borders, the
 * logo filters and the token art's drop shadow offsets.
 */

/* Margin resets (one class: they must beat WordPress's flow-layout gaps,
   `:root :where(.is-layout-flow) > *`); component rules below win. */
:is(.sc-band, .sc-wisesat-section, .sc-video-section, .sc-proof-section, .sc-cta-band, .sc-logos-section, .sc-token-section, .sc-builder-section) :where(.wrap, .sc-band-grid, .sc-band-copy, .sc-split, .sc-split-head, .sc-split-head-title, .sc-split-text, .sc-proof, .sc-proof-item, .sc-logos, .sc-partners, .sc-token, .sc-token-copy, .sc-entities, .sc-builder, .sc-builder-inner, .sc-builder-copy, .sc-builder-cols, .sc-builder-col) > * {
	margin-block: 0;
}

.sc-muted {
	color: var(--c-muted);
}

/* ---------- Shared: split layout ---------- */

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

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

.sc-split-head {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--custom--gap--split);
	align-items: center;
	margin-bottom: var(--wp--custom--sections--split-head-offset);
}

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

.sc-section-head.sc-center {
	align-items: center;
	margin-inline: auto;
	text-align: center;
}

.sc-section-head.sc-center .is-style-lead {
	margin-inline: auto;
}

/* As in the PoC, a link that ends a text column spans the column (a larger
   target); its label stays left-aligned. */
.sc-split-text > .is-style-arrow-link a {
	display: flex;
}

.sc-section-actions {
	margin-top: var(--wp--preset--spacing--xl);
}

/* ---------- Buttons with a leading icon (whitepaper, external link) ---------- */

:where(.sc-button-icon-doc, .sc-button-icon-ext) .wp-element-button {
	display: inline-flex;
	gap: var(--wp--custom--hero--button-icon-gap);
	align-items: center;
}

:where(.sc-button-icon-doc, .sc-button-icon-ext) .wp-element-button::before,
.sc-button-icon-ext .wp-element-button::after {
	width: var(--wp--custom--sections--button-icon-size);
	height: var(--wp--custom--sections--button-icon-size);
	flex: none;
	background-color: currentcolor;
}

.sc-button-icon-doc .wp-element-button::before {
	content: "";
	mask: var(--sc-icon-doc) center / contain no-repeat;
}

/* "(PDF, 1.2 MB)" added by sealcoin-core (Phase 13) stays on one line. */
.wp-element-button .sc-file-meta {
	white-space: nowrap;
}

/* The PoC puts the external-link icon after the label. */
.sc-button-icon-ext .wp-element-button::after {
	content: "";
	mask: var(--sc-icon-ext) center / contain no-repeat;
}

/* ---------- H-02 orange band ---------- */

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

.sc-callout {
	padding: var(--wp--custom--sections--callout-padding);
	border: 1px solid color-mix(in srgb, var(--c-black) 18%, transparent);
	border-radius: var(--r-sm);
	background: color-mix(in srgb, var(--c-black) 8%, transparent);
	font-size: var(--wp--custom--font-size--callout);
}

.sc-callout strong {
	font-family: var(--f-display);
}

/* ---------- H-07 partners ---------- */

.sc-partners-band .wrap {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--sections--stack-gap);
	align-items: center;
}

/* The PoC's partners band is a centred stack without the section-head measure. */
.sc-partners-band .sc-section-head {
	gap: var(--wp--custom--sections--stack-gap);
	max-width: none;
}

.sc-partners-band .sc-section-head .is-style-lead {
	max-width: var(--wp--custom--sections--lead-wide);
}

.sc-partners-band .wrap > .sc-section-head {
	margin-bottom: 0;
}

.sc-partners {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--sections--partners-gap);
	align-items: center;
	justify-content: center;
	margin-top: var(--wp--custom--sections--partners-offset);
}

/* ---------- Logos (H-07 partners, H-12 media) ---------- */

.wp-block-image.sc-logo {
	margin: 0;
	line-height: 0;
}

.wp-block-image.sc-logo a {
	display: block;
}

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

.sc-logo-h22 {
	--sc-logo-height: var(--wp--custom--logo--h-22);
}

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

.sc-logo-h26 {
	--sc-logo-height: var(--wp--custom--logo--h-26);
}

.sc-logo-h28 {
	--sc-logo-height: var(--wp--custom--logo--h-28);
}

.sc-logo-h30 {
	--sc-logo-height: var(--wp--custom--logo--h-30);
}

.sc-logo-h34 {
	--sc-logo-height: var(--wp--custom--logo--h-34);
}

.sc-logo-h40 {
	--sc-logo-height: var(--wp--custom--logo--h-40);
}

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

.sc-logo-h52 {
	--sc-logo-height: var(--wp--custom--logo--h-52);
}

/* Partner logos on the orange band are shown in black. */
.wp-block-image.sc-logo-dark img {
	filter: brightness(0);
}

/* ---------- H-08 proof strip ---------- */

.sc-proof {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
}

.sc-proof-item {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--sections--proof-gap);
	padding: var(--wp--custom--sections--proof-padding);
	border-right: 1px solid var(--line-soft);
}

.sc-proof-item:last-child {
	border-right: 0;
}

.sc-proof-key {
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--proof-key);
	font-weight: 700;
	line-height: 1.1;
	color: transparent;
}

.sc-proof-value {
	font-size: var(--wp--custom--font-size--proof-value);
	line-height: 1.45;
	color: var(--c-muted);
}

.sc-proof-item > .sc-proof-link {
	margin-top: auto;
	font-size: var(--wp--custom--font-size--proof-link);
}

.sc-proof-item .sc-proof-link a {
	display: block;
	color: var(--c-orange);
	text-decoration: none;
}

.sc-proof-item .sc-proof-link a:hover {
	text-decoration: underline;
}

/* ---------- H-09 whitepaper call to action ---------- */

.sc-cta-band {
	padding-block: var(--wp--preset--spacing--section-compact);
}

.sc-cta-band .sc-split-text {
	gap: var(--wp--custom--sections--stack-gap);
}

.sc-cta-actions {
	justify-content: flex-end;
}

/* ---------- H-12 media logos ---------- */

.sc-logos-section {
	padding-block: var(--wp--preset--spacing--section-compact);
}

.sc-logos-section .sc-logos-label {
	margin-bottom: var(--wp--custom--sections--logos-label-offset);
	color: var(--c-muted);
	text-align: center;
}

.sc-logos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--sections--logos-gap);
	align-items: center;
	justify-content: center;
}

.sc-logos .sc-logo img {
	filter: grayscale(1) brightness(0) invert(1);
	opacity: var(--wp--custom--sections--logo-opacity);
}

/* Pre-converted monochrome logos keep their own colours. */
.sc-logos .sc-logo-mono img {
	filter: none;
}

/* ---------- H-13 token band ---------- */

.wp-block-cover.sc-token-section {
	min-height: 0;
	padding: var(--wp--preset--spacing--section) 0;
	background-color: var(--c-black);
}

/* The Cover's inner container (as hero.css). */
.wp-block-cover.sc-token-section > div {
	width: 100%;
	color: inherit;
}

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

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

.wp-block-image.sc-token-art img {
	display: block;
	width: var(--wp--custom--sections--token-art-width);
	height: auto;
	filter: drop-shadow(0 20px 50px color-mix(in srgb, var(--c-orange) 35%, transparent));
}

.sc-token-copy {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--sections--stack-lg-gap);
}

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

.sc-token-copy > .sc-entities {
	margin-top: var(--wp--custom--sections--entities-offset);
}

.sc-entity {
	padding: var(--wp--custom--sections--entity-padding);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-sm);
	font-size: var(--wp--custom--font-size--entity);
	color: var(--c-muted);
}

.sc-entity strong {
	display: block;
	font-family: var(--f-display);
	font-weight: 600;
	color: var(--c-text);
}

/* ---------- H-14 builder call to action ---------- */

.sc-builder {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--c-orange);
	border-radius: var(--r-builder);
	background: radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--c-orange) 22%, transparent), transparent 60%), var(--c-navy);
}

.sc-builder-inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--custom--sections--builder-gap);
	align-items: center;
	padding: var(--wp--custom--sections--builder-padding);
}

/* S-06: the builder call to action with an image instead of the two
   columns (Phase 13). */
.wp-block-image.sc-builder-art {
	margin: 0;
}

.wp-block-image.sc-builder-art img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--sections--builder-art-radius);
}

.sc-builder-copy {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--sections--stack-lg-gap);
}

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

.sc-builder-col {
	padding: var(--wp--custom--sections--builder-col-padding);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-sm);
	background: color-mix(in srgb, var(--c-black) 35%, transparent);
}

.sc-builder-col-you {
	border-color: var(--line);
}

.sc-builder-col h3 {
	margin-bottom: var(--wp--custom--sections--builder-col-heading-offset);
	font-size: var(--wp--custom--font-size--builder-col-heading);
}

.sc-builder-col ul {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--sections--builder-list-gap);
	margin: 0;
	padding-left: var(--wp--custom--sections--builder-list-indent);
	font-size: var(--wp--custom--font-size--builder-list);
	color: var(--c-muted);
}

.sc-builder-col li {
	margin: 0;
}

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

.wp-block-image.sc-builder-strip img {
	display: block;
	width: 100%;
	opacity: 0.9;
}

/* md (PoC: 860px and 900px) */
@media (max-width: 900px) {

	.sc-band-grid,
	.sc-split,
	.sc-split-head,
	.sc-builder-inner,
	.sc-builder-cols {
		grid-template-columns: 1fr;
	}

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

	.sc-proof-item:nth-child(2) {
		border-right: 0;
	}

	.sc-proof-item:nth-child(-n + 2) {
		border-bottom: 1px solid var(--line-soft);
	}

}

/* sm (PoC: 760px) */
@media (max-width: 760px) {

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

	.wp-block-image.sc-token-art img {
		width: var(--wp--custom--sections--token-art-width-small);
	}
}

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

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

	.sc-proof-item {
		border-right: 0;
		border-bottom: 1px solid var(--line-soft);
	}

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