/*
 * ntw_tech_layers — port of `.a-tech__grid` / `.a-stage` (renamed
 * `ntw-tech__stage`, see the widget header) / `.a-stack` / `.a-slab`.
 *
 * `--tp` (0 → 1) is written by tech-layers-widget.js as the stage scrolls into view;
 * its fallback is 1, so with no script the shell already sits lifted off the core
 * and both labels are visible — the drawing is complete, just not animated.
 */

.ntw-tech__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.ntw-tech__copy { position: sticky; top: 120px; }
.ntw-tech__copy .ntw-lead + .ntw-lead { margin-top: 16px; }

.ntw-tech__stage { position: relative; height: clamp(360px, 44vw, 560px); display: grid; place-items: center; perspective: 1600px; }
.ntw-stack {
	position: relative; width: min(78%, 460px); aspect-ratio: 2.3 / 1;
	transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-34deg);
}
.ntw-slab { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(var(--z, 0px)); transition: transform .2s linear; }
.ntw-slab i { position: absolute; inset: 0; border-radius: 3px; transform: translateZ(calc(var(--k) * -2px)); }
.ntw-slab--core i { background: #5b4b3a; }
.ntw-slab--core i:first-child { background: linear-gradient(135deg, #7a6650, #4c3d2f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ntw-slab--core i:last-child { box-shadow: 0 40px 60px rgba(0, 0, 0, .6); }
.ntw-slab--shell { --z: calc(34px + var(--tp, 1) * 96px); }
.ntw-slab--shell i { background: #3d2616; }
/* The wood grain: the uploaded texture or the first standard swatch, else a teak tone. */
.ntw-slab--shell i:first-child {
	background-color: #7F4B2C; background-image: var(--ntw-shell-tex, none);
	background-size: cover; background-position: center;
	box-shadow: inset 0 0 0 1px rgba(255, 220, 180, .18);
}

.ntw-tag {
	position: absolute; display: flex; align-items: center; gap: 12px; margin: 0;
	font-size: 13px; opacity: var(--tp, 1); transition: opacity .2s linear;
}
.ntw-tag b { display: block; font-weight: 500; font-size: 15px; }
.ntw-tag::before { content: ''; flex: none; width: 46px; height: 1px; background: var(--ntw-w-accent, var(--green)); }
.ntw-tag--shell { top: 8%; right: 0; }
.ntw-tag--core { bottom: 12%; left: 0; flex-direction: row-reverse; text-align: right; }

@media (max-width: 960px) {
	.ntw-tech__grid { grid-template-columns: minmax(0, 1fr); }
	.ntw-tech__copy { position: static; }
}