/* Ownable engineering artefacts ---------------------------------------
 * Shared explanatory plates replace generic editorial stock photography.
 * They are deliberately models, not simulated product interfaces or proof. */
.tc-engineering-plate {
	--tc-plate-accent: var(--tc-pulse);
	position: relative;
	isolation: isolate;
	container: tc-engineering-plate / inline-size;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: clamp(20px, 3vw, 42px);
	overflow: hidden;
	color: var(--tc-white);
	background:
		radial-gradient(circle at 90% 0, color-mix(in srgb, var(--tc-plate-accent) 22%, transparent), transparent 34%),
		linear-gradient(145deg, #0d1727, #07101f 72%);
	border: 1px solid rgba(151, 171, 199, 0.28);
	border-radius: clamp(18px, 2vw, 28px);
	box-shadow: 0 26px 72px rgba(7, 16, 31, 0.16);
}

.tc-engineering-plate--architecture { --tc-plate-accent: #4d7dff; }
.tc-engineering-plate--sprint { --tc-plate-accent: #c9ff51; }
.tc-engineering-plate--insights { --tc-plate-accent: #8ca8ff; }

.tc-engineering-plate::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(155, 179, 211, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(155, 179, 211, 0.055) 1px, transparent 1px);
	background-size: 32px 32px;
	mask-image: linear-gradient(to bottom, #000, transparent 82%);
	content: "";
}

.tc-engineering-plate__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--wp--preset--font-family--geist-mono, "Geist Mono", ui-monospace, monospace);
	font-size: clamp(0.62rem, 0.58rem + 0.12vw, 0.72rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.tc-engineering-plate__meta span:last-child {
	padding: 7px 10px;
	color: #07101f;
	background: var(--tc-plate-accent);
	border-radius: 999px;
}

.tc-engineering-plate__heading {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
	gap: clamp(24px, 5vw, 72px);
	align-items: end;
	margin-top: clamp(34px, 5vw, 72px);
}

.tc-engineering-plate__heading h3 {
	max-width: 16ch;
	margin: 0;
	color: #fff;
	font-size: clamp(1.75rem, 1.32rem + 1.75vw, 3.2rem);
	font-weight: 560;
	line-height: 0.98;
	letter-spacing: -0.045em;
}

.tc-engineering-plate__heading p {
	max-width: 52ch;
	margin: 0;
	color: #b9c5d7;
	font-size: clamp(0.92rem, 0.86rem + 0.2vw, 1.05rem);
	line-height: 1.58;
}

/* The plate frequently lives in a narrow desktop hero column. Container
 * queries make its internal composition respond to that column, not viewport. */
@container tc-engineering-plate (max-width: 700px) {
	.tc-engineering-plate__heading {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.tc-engineering-plate__heading h3 {
		max-width: 18ch;
		font-size: clamp(1.75rem, 7cqi, 2.75rem);
	}

	.tc-engineering-plate__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tc-engineering-plate__stage:nth-child(odd) { border-left: 0; }
	.tc-engineering-plate__stage:nth-child(n + 3) { border-top: 1px solid rgba(151, 171, 199, 0.24); }
}

@container tc-engineering-plate (max-width: 420px) {
	.tc-engineering-plate__meta { align-items: flex-start; }
	.tc-engineering-plate__meta span:first-child { max-width: 20ch; }
	.tc-engineering-plate__heading { margin-top: 34px; }
	.tc-engineering-plate__flow,
	.tc-engineering-plate--software .tc-engineering-plate__flow { grid-template-columns: 1fr; }
	.tc-engineering-plate__stage,
	.tc-engineering-plate--software .tc-engineering-plate__stage {
		display: flex;
		min-height: 0;
		padding: 20px 10px 20px 28px;
		border-top: 1px solid rgba(151, 171, 199, 0.24);
		border-left: 0;
	}
	.tc-engineering-plate__stage:first-child { border-top: 0; }
	.tc-engineering-plate__stage::before,
	.tc-engineering-plate--software .tc-engineering-plate__stage::before {
		top: 24px;
		left: 0;
		translate: 0;
	}
	.tc-engineering-plate__stage strong { margin-top: 10px; }
	.tc-engineering-plate__stage span { margin: 0; padding-top: 8px; }
}

.tc-engineering-plate__flow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
	margin-top: clamp(30px, 4vw, 54px);
	border-top: 1px solid rgba(151, 171, 199, 0.3);
	border-bottom: 1px solid rgba(151, 171, 199, 0.3);
}

.tc-engineering-plate__stage {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 158px;
	padding: 24px clamp(16px, 2vw, 26px) 26px;
	flex-direction: column;
	border-left: 1px solid rgba(151, 171, 199, 0.24);
}

.tc-engineering-plate__stage:first-child { border-left: 0; }

.tc-engineering-plate__stage::before {
	position: absolute;
	top: -5px;
	left: clamp(16px, 2vw, 26px);
	width: 9px;
	height: 9px;
	background: var(--tc-plate-accent);
	border: 2px solid #07101f;
	border-radius: 50%;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc-plate-accent) 24%, transparent);
	content: "";
}

.tc-engineering-plate__stage small {
	color: var(--tc-plate-accent);
	font-family: var(--wp--preset--font-family--geist-mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.67rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tc-engineering-plate__stage strong {
	margin-top: 24px;
	font-size: clamp(1rem, 0.93rem + 0.25vw, 1.2rem);
	font-weight: 610;
	line-height: 1.16;
}

.tc-engineering-plate__stage span {
	margin-top: auto;
	padding-top: 18px;
	color: #aebdd2;
	font-size: 0.78rem;
	line-height: 1.45;
}

.tc-engineering-plate figcaption {
	margin-top: 18px;
	color: #8fa0b8;
	font-family: var(--wp--preset--font-family--geist-mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.67rem;
	line-height: 1.5;
}

.tc-engineering-plate--software .tc-engineering-plate__flow { grid-template-columns: 1fr; }

.tc-engineering-plate--software .tc-engineering-plate__stage {
	display: grid;
	grid-template-columns: minmax(80px, 0.22fr) minmax(140px, 0.46fr) minmax(180px, 1fr);
	gap: 24px;
	align-items: center;
	min-height: 0;
	padding-block: 18px;
	border-top: 1px solid rgba(151, 171, 199, 0.18);
	border-left: 0;
}

.tc-engineering-plate--software .tc-engineering-plate__stage:first-child { border-top: 0; }
.tc-engineering-plate--software .tc-engineering-plate__stage::before { top: 50%; translate: 0 -50%; }
.tc-engineering-plate--software .tc-engineering-plate__stage strong,
.tc-engineering-plate--software .tc-engineering-plate__stage span { margin: 0; padding: 0; }

@media (max-width: 900px) {
	.tc-engineering-plate__heading {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.tc-engineering-plate__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tc-engineering-plate__stage:nth-child(odd) { border-left: 0; }
	.tc-engineering-plate__stage:nth-child(n + 3) { border-top: 1px solid rgba(151, 171, 199, 0.24); }
}

@media (max-width: 540px) {
	.tc-engineering-plate { padding: 18px; border-radius: 18px; }
	.tc-engineering-plate__meta { align-items: flex-start; }
	.tc-engineering-plate__meta span:first-child { max-width: 20ch; }
	.tc-engineering-plate__heading { margin-top: 34px; }
	.tc-engineering-plate__flow,
	.tc-engineering-plate--software .tc-engineering-plate__flow { grid-template-columns: 1fr; }
	.tc-engineering-plate__stage,
	.tc-engineering-plate--software .tc-engineering-plate__stage {
		display: flex;
		min-height: 0;
		padding: 20px 10px 20px 28px;
		border-top: 1px solid rgba(151, 171, 199, 0.24);
		border-left: 0;
	}
	.tc-engineering-plate__stage:first-child { border-top: 0; }
	.tc-engineering-plate__stage::before,
	.tc-engineering-plate--software .tc-engineering-plate__stage::before {
		top: 24px;
		left: 0;
		translate: 0;
	}
	.tc-engineering-plate__stage strong { margin-top: 10px; }
	.tc-engineering-plate__stage span { margin: 0; padding-top: 8px; }
}