/*
 * Architecture modules (T-05; Phase 9 component, pattern in Phase 12): core
 * Details blocks with the block style `arch-module`, grouped in
 * `sc-arch-layer` groups (a heading and a `sc-arch-modules` group) inside a
 * `sc-architecture` group. Ported from the redesign PoC (css/site.css @
 * ed0ab9f7, "Architecture") using theme.json tokens and base.css aliases only.
 *
 * Without JavaScript a module expands in place. With enhance-disclosure.js
 * (`.is-enhanced`), the open module's text is shown in the shared panel
 * below, as in the PoC, and the inline text is hidden.
 *
 * Layer variants: `sc-arch-layer-platform` (orange) and `sc-arch-layer-trust`
 * (gold); other layers use the blue accent. Column counts per layer as the
 * PoC with `sc-arch-modules-3/-5/-8` (Phase 12); without a modifier, one row
 * on wide screens. All: four columns below lg (the 3- and 5-column layers
 * keep theirs, as the PoC), two below sm (PoC: 640px). Arrows between layers
 * are decorative CSS. Literal values kept from the PoC: 1px borders.
 */

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

.sc-architecture > * {
	margin: 0;
}

.sc-arch-layer {
	--sc-arch-accent: var(--c-blue);
	position: relative;
	padding: var(--wp--custom--architecture--layer-padding);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-card);
	background: var(--c-panel);
}

.sc-arch-layer-platform {
	--sc-arch-accent: var(--c-orange);
	border-color: var(--c-orange);
	background: linear-gradient(180deg, color-mix(in srgb, var(--c-orange) 10%, transparent), color-mix(in srgb, var(--c-orange) 2%, transparent));
	box-shadow: var(--shadow-glow);
}

.sc-arch-layer-trust {
	--sc-arch-accent: var(--c-gold);
}

/* Decorative down arrow between layers (the PoC's .arch-arrow, Phase 12). */
.sc-architecture > .sc-arch-layer + .sc-arch-layer {
	margin-top: calc(var(--wp--custom--architecture--arrow-size) + var(--wp--custom--architecture--gap));
}

.sc-architecture > .sc-arch-layer + .sc-arch-layer::before {
	content: "";
	position: absolute;
	top: calc(-1 * (var(--wp--custom--architecture--arrow-size) + var(--wp--custom--architecture--gap)) - 1px);
	left: 50%;
	width: var(--wp--custom--architecture--arrow-size);
	height: var(--wp--custom--architecture--arrow-size);
	background-color: var(--c-orange);
	transform: translateX(-50%);
	mask: var(--sc-icon-down) center / contain no-repeat;
}

.sc-arch-layer > :where(h3, h4) {
	margin: 0 0 var(--wp--custom--architecture--layer-heading-offset);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: var(--wp--custom--footer--heading-letter-spacing);
	text-transform: uppercase;
	color: var(--sc-arch-accent);
}

.sc-arch-modules {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: var(--wp--custom--architecture--modules-gap);
}

.sc-arch-modules > * {
	margin: 0;
}

/* Below the heading's own offset, without the flow-layout block gap. */
.sc-arch-layer > .sc-arch-modules {
	margin: 0;
}

details.is-style-arch-module {
	border: 1px solid var(--line-soft);
	border-radius: var(--r-input);
	background: var(--c-ink-deep);
	text-align: center;
}

/* The icon class is on the Details block; draw the icon in the summary. */
details.is-style-arch-module::before {
	content: none;
}

/* The PoC's `.mod` sets 0.9rem and weight 500 and then `font: inherit`, so
   its labels take the body size, line height and weight (Phase 12
   measurement). */
.is-style-arch-module > summary {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--custom--architecture--module-gap);
	padding: var(--wp--custom--architecture--module-padding);
	font-family: var(--f-display);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	font-weight: inherit;
	color: var(--c-text);
	list-style: none;
	cursor: pointer;
}

.is-style-arch-module > summary::-webkit-details-marker {
	display: none;
}

.is-style-arch-module > summary::before {
	content: "";
	width: var(--wp--custom--architecture--module-icon-size);
	height: var(--wp--custom--architecture--module-icon-size);
	background-color: var(--sc-arch-accent, var(--c-orange));
	mask: var(--sc-icon) center / contain no-repeat;
}

.is-style-arch-module:not([class*="has-sc-icon-"]) > summary::before {
	content: none;
}

.is-style-arch-module:hover,
.is-style-arch-module[open] {
	border-color: var(--c-orange);
	background: color-mix(in srgb, var(--c-orange) 8%, var(--c-ink-deep));
}

.is-style-arch-module > :not(summary) {
	margin: 0;
	padding: 0 var(--wp--custom--architecture--layer-padding) var(--wp--custom--architecture--layer-padding);
	font-size: var(--wp--custom--font-size--layer-text);
	color: var(--c-muted);
	text-align: left;
}

/* ---------- Shared panel (enhanced) ---------- */

.sc-architecture.is-enhanced .is-style-arch-module > :not(summary) {
	display: none;
}

/* The panel is the last item of the .sc-architecture flex column, so its
   offset excludes the column gap (PoC: 1rem below the last layer). */
.sc-arch-panel {
	min-height: var(--wp--custom--architecture--panel-min-height);
	margin-top: calc(var(--wp--custom--architecture--panel-offset) - var(--wp--custom--architecture--gap));
	padding: var(--wp--custom--architecture--panel-padding);
	border: 1px dashed var(--line);
	border-radius: var(--r-sm);
	font-size: var(--wp--custom--font-size--panel);
	color: var(--c-muted);
}

.sc-arch-panel > * {
	margin: 0;
}

.sc-arch-panel-title {
	margin-bottom: var(--wp--custom--architecture--panel-title-offset);
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--hero-pillar-title);
	font-weight: 600;
	color: var(--c-text);
}

.sc-arch-panel-layer {
	margin-left: var(--wp--custom--architecture--panel-layer-offset);
	font-size: var(--wp--custom--font-size--panel-layer);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--c-orange);
}

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

	details.is-style-arch-module {
		transition: border-color var(--motion-fast), background var(--motion-fast);
	}
}

/* Per-layer column counts, as the PoC's .mods.m3/.m5/.m8 (Phase 12). */
.sc-arch-modules.sc-arch-modules-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-flow: row;
}

.sc-arch-modules.sc-arch-modules-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	grid-auto-flow: row;
}

.sc-arch-modules.sc-arch-modules-8 {
	grid-template-columns: repeat(8, minmax(0, 1fr));
	grid-auto-flow: row;
}

/* lg */
@media (max-width: 1080px) {

	.sc-arch-modules,
	.sc-arch-modules.sc-arch-modules-8 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-flow: row;
	}
}

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

	.sc-arch-modules,
	.sc-arch-modules.sc-arch-modules-3,
	.sc-arch-modules.sc-arch-modules-5,
	.sc-arch-modules.sc-arch-modules-8 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}