/*
 * Trust stack (H-04, T-04; Phase 9): core Group with the block style
 * `trust-stack` holding one core Details block per layer, from the top layer
 * down. inc/enhancements.php numbers the layers and adds the decorative SVG
 * (`.sc-trust-stack-art`). Ported from the redesign PoC (css/site.css @
 * ed0ab9f7, "Trust stack", ".layers") using theme.json tokens and base.css
 * aliases only.
 *
 * The PoC's tab buttons become native disclosures (docs/13 §2); the open layer
 * looks like the PoC's selected layer. Breakpoint md (900px) as in the PoC.
 * Literal values kept from the PoC: 1px borders, plate stroke widths and the
 * 0.3 depth ratio of the SVG geometry.
 */

.wp-block-group.is-style-trust-stack {
	display: grid;
	grid-template-columns: var(--wp--custom--trust-stack--columns);
	gap: var(--wp--custom--trust-stack--gap);
	align-items: center;
}

/* Grid items: no flow-layout gap (WordPress adds a top margin to every child
   after the first). */
.wp-block-group.is-style-trust-stack > * {
	margin-block: 0;
}

/* ---------- Decorative diagram ---------- */

.sc-trust-stack-art svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.sc-trust-plate-top {
	fill: var(--c-panel-2);
	stroke: color-mix(in srgb, var(--c-orange) 45%, transparent);
	stroke-width: 1.5;
}

.sc-trust-plate-side {
	fill: var(--c-ink-deep);
	stroke: color-mix(in srgb, var(--c-orange) 25%, transparent);
	stroke-width: 1;
}

.sc-trust-plate text {
	font-family: var(--f-display);
	font-weight: 600;
	fill: var(--c-muted);
}

.sc-trust-plate .sc-trust-plate-number {
	fill: var(--c-orange);
}

.sc-trust-plate.is-on .sc-trust-plate-top {
	fill: color-mix(in srgb, var(--c-orange) 16%, var(--c-black));
	stroke: var(--c-orange);
	filter: drop-shadow(0 0 6px var(--c-orange));
}

.sc-trust-plate.is-on text {
	fill: var(--c-text);
}

.is-enhanced .sc-trust-plate {
	cursor: pointer;
}

.sc-trust-stack-art stop:nth-child(2) {
	stop-color: var(--wp--preset--color--amber);
	stop-opacity: 0.55;
}

.sc-trust-stack-art stop:nth-child(1) {
	stop-color: var(--c-orange);
	stop-opacity: 0;
}

.sc-trust-stack-art stop:nth-child(3) {
	stop-color: var(--wp--preset--color--yellow);
	stop-opacity: 0;
}

.sc-trust-core {
	opacity: 0.9;
}

/* ---------- Layers ---------- */

.sc-trust-stack-layers {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--trust-stack--list-gap);
}

.sc-trust-stack-layers > .wp-block-details {
	margin: 0;
	padding: var(--wp--custom--trust-stack--item-padding);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-sm);
}

.sc-trust-stack-layers > .wp-block-details[open] {
	border-color: var(--c-orange);
	background: color-mix(in srgb, var(--c-orange) 7%, transparent);
}

.sc-trust-stack-layers summary {
	display: grid;
	grid-template-columns: var(--wp--custom--trust-stack--number-column) 1fr;
	gap: var(--wp--custom--trust-stack--item-gap);
	align-items: center;
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--hero-pillar-title);
	font-weight: 600;
	color: var(--c-text);
	list-style: none;
	cursor: pointer;
}

.sc-trust-stack-layers summary::-webkit-details-marker {
	display: none;
}

.sc-trust-stack-layers summary::before {
	content: attr(data-sc-layer);
	display: grid;
	place-items: center;
	width: var(--wp--custom--trust-stack--number-size);
	height: var(--wp--custom--trust-stack--number-size);
	border: 1px solid var(--c-orange);
	border-radius: var(--wp--custom--trust-stack--number-radius);
	font-weight: 700;
	color: var(--c-orange);
}

.sc-trust-stack-layers summary:hover {
	color: var(--c-orange-hover);
}

.sc-trust-stack-layers .wp-block-details > :not(summary) {
	margin: var(--wp--custom--trust-stack--text-offset) 0 0;
	padding-left: calc(var(--wp--custom--trust-stack--number-column) + var(--wp--custom--trust-stack--item-gap));
	font-size: var(--wp--custom--font-size--layer-text);
	line-height: var(--wp--custom--line-height--compact);
	color: var(--c-muted);
}

.sc-trust-stack-layers .wp-block-details > .sc-trust-layer-provider {
	margin-top: var(--wp--custom--trust-stack--provider-offset);
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--provider);
	letter-spacing: var(--wp--custom--letter-spacing--micro);
	text-transform: uppercase;
	color: var(--c-orange);
}

@media (prefers-reduced-motion: no-preference) {

	.sc-trust-stack-layers > .wp-block-details,
	.sc-trust-plate-top,
	.sc-trust-plate text {
		transition: border-color var(--motion-fast), background var(--motion-fast), fill var(--motion-base), stroke var(--motion-base);
	}
}

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

	.wp-block-group.is-style-trust-stack {
		grid-template-columns: 1fr;
	}
}