/* Home-only sections: S01 hero and S03 stats. Loaded on the front page and wherever the content uses them. */

/* stylelint-disable no-descending-specificity, selector-class-pattern -- core's wp-block-button__link; section rules are grouped by section, not by specificity */

@media (max-width: 29.99rem) {

	.nbt-hero-actions .wp-block-button,
	.nbt-hero-actions .wp-block-button__link {
		width: 100%;
	}
}

/* S01 hero: night band, grid paper, rack ruler (lg and up), rack drawing, fibre band on small screens. */
.nbt-section.alignfull.nbt-hero {
	overflow: hidden;
	padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(5rem, 4rem + 6vw, 9rem);
	background-color: var(--c-night-950);
	background-image: linear-gradient(var(--c-night-line-2) 1px, transparent 1px), linear-gradient(90deg, var(--c-night-line-2) 1px, transparent 1px);
	background-position: -1px -1px;
	background-size: 48px 48px;
}

.nbt-hero > * {
	position: relative;
	z-index: 1;
	max-width: 46rem;
}

.nbt-hero-title {
	margin-bottom: 0;
	font-size: var(--text-5xl);
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.nbt-hero-kw {
	display: block;
	margin-top: var(--space-4);
	color: var(--c-cyan);
	font: 500 var(--text-lg) / 1.3 var(--font-mono);
	letter-spacing: 0;
}

.nbt-hero .nbt-lead {
	margin-block-start: var(--space-6);
}

.nbt-section.nbt-hero::after {
	content: "";
	display: block;
	height: 96px;
	margin-top: var(--space-8);
	background: url(../img/hero-band.svg) left center / auto 100% no-repeat;
}

@media (min-width: 64rem) {

	.nbt-section.alignfull.nbt-hero {
		min-height: min(86svh, 760px);
	}

	.nbt-hero > * {
		max-width: min(46rem, 58%);
	}

	.nbt-section.nbt-hero::after {
		position: absolute;
		inset-block: var(--space-8);
		right: max(var(--gutter), calc((100% - var(--container)) / 2));
		width: min(36%, 440px);
		height: auto;
		margin: 0;
		background: url(../img/hero-rack.svg) right center / contain no-repeat;
	}

	/* Rack-unit ruler: a rail with a short tick per 12px and a long tick per 36px (1U). Decorative. */
	.nbt-section.nbt-hero::before {
		content: "";
		position: absolute;
		inset-block: 0;
		left: 0;
		width: 24px;
		background:
			linear-gradient(var(--c-on-night-3), var(--c-on-night-3)) right / 1px 100% no-repeat,
			repeating-linear-gradient(to bottom, var(--c-on-night-3) 0 1px, transparent 1px 36px) right / 12px 100% no-repeat,
			repeating-linear-gradient(to bottom, var(--c-on-night-3) 0 1px, transparent 1px 12px) right / 6px 100% no-repeat;
		opacity: 0.5;
	}
}

/* S03 stats: patch panel with port LEDs, overlapping the hero edge. */
.nbt-section.alignfull.nbt-stats {
	z-index: 2;
	padding-block: 0;
	background: transparent;
}

.nbt-hero + .nbt-section.alignfull.nbt-stats {
	margin-top: calc(-1 * var(--space-8));
}

.nbt-stat-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	overflow: hidden;
	border: var(--border);
	border-radius: var(--radius-sm);
	background: var(--c-line);
	box-shadow: var(--shadow-2);
}

.nbt-stat {
	display: grid;
	align-content: start;
	gap: var(--space-2);
	padding: var(--space-5) var(--space-6);
	background: var(--c-paper);
}

.nbt-stat > * {
	margin: 0;
}

.nbt-stat-label {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--c-ink-3);
	font: 500 var(--text-xs) / 1.2 var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nbt-stat-label::before {
	content: "";
	width: 10px;
	height: 10px;
	flex: none;
	border-radius: var(--radius-full);
	background: var(--c-ok);
}

.nbt-stat:first-child .nbt-stat-label::before {
	background: var(--c-amber);
}

.nbt-stat-value {
	color: var(--c-ink);
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: 1.2;
}

.nbt-stat::after {
	content: "";
	width: 14px;
	height: 6px;
	margin-top: var(--space-1);
	background: var(--c-surface-2);
}

.nbt-hero + .nbt-stats + .nbt-section.alignfull {
	padding-block-start: calc(var(--section-y) + var(--space-8));
}

@media (min-width: 30rem) {

	.nbt-stat-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {

	.nbt-hero + .nbt-section.alignfull.nbt-stats {
		margin-top: -3.5rem;
	}

	.nbt-stat-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.nbt-stat {
		padding: var(--space-6) 28px;
	}

	.nbt-hero + .nbt-stats + .nbt-section.alignfull {
		padding-block-start: calc(var(--section-y) + 3.5rem);
	}
}


/* Motion: the first LED blinks. */
@media screen and (prefers-reduced-motion: no-preference) {

	.nbt-stat:first-child .nbt-stat-label::before {
		animation: nbt-blink 2.4s ease-in-out infinite;
	}
}

@keyframes nbt-blink {

	50% {
		opacity: 0.45;
	}
}