/*
 * Content sections, shared part (spec 6.2; design-system sections 7, 8, 11): icons, bands and tones, buttons, page header,
 * checklist, tags, CTA, placeholder. Sections are styled by class name only. Section-specific rules live in
 * sections-<name>.css and load only on pages that use the section (inc/assets.php); the editor loads them all.
 *
 * Motion is CSS-only (no script, nothing depends on the "js" class) and is switched off under prefers-reduced-motion.
 */

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

/* Icons: one rule per icon sets --nbt-icon; the component that uses it paints the mask. */
.nbt-i-fiber-deployment {
	--nbt-icon: url(../icons/fiber-deployment.svg);
}

.nbt-i-dwdm {
	--nbt-icon: url(../icons/dwdm.svg);
}

.nbt-i-copper-cabling {
	--nbt-icon: url(../icons/copper-cabling.svg);
}

.nbt-i-rack-and-stack {
	--nbt-icon: url(../icons/rack-and-stack.svg);
}

.nbt-i-smart-hands {
	--nbt-icon: url(../icons/smart-hands.svg);
}

.nbt-i-support-24x7 {
	--nbt-icon: url(../icons/support-24x7.svg);
}

.nbt-i-clipboard-list {
	--nbt-icon: url(../icons/clipboard-list.svg);
}

.nbt-i-toolbox {
	--nbt-icon: url(../icons/toolbox.svg);
}

.nbt-i-gauge-trace {
	--nbt-icon: url(../icons/gauge-trace.svg);
}

.nbt-i-tag-label {
	--nbt-icon: url(../icons/tag-label.svg);
}

.nbt-i-file-doc {
	--nbt-icon: url(../icons/file-doc.svg);
}

.nbt-i-handover {
	--nbt-icon: url(../icons/handover.svg);
}

.nbt-i-building-server {
	--nbt-icon: url(../icons/building-server.svg);
}

.nbt-i-cloud {
	--nbt-icon: url(../icons/cloud.svg);
}

.nbt-i-network-nodes {
	--nbt-icon: url(../icons/network-nodes.svg);
}

.nbt-i-antenna-tower {
	--nbt-icon: url(../icons/antenna-tower.svg);
}

.nbt-i-puzzle-link {
	--nbt-icon: url(../icons/puzzle-link.svg);
}

.nbt-i-headset-monitor {
	--nbt-icon: url(../icons/headset-monitor.svg);
}

/* Section bands: full-bleed background, content centred at the container width through side padding. */
.nbt-section.alignfull {
	position: relative;
	max-width: none;
	margin-block: 0;
	padding-block: var(--section-y);
	padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
	color: var(--c-text);
}

/* Surface tone: chosen by the page composer and written into the markup (inc/sections/compose.php). */
.nbt-section.alignfull.nbt-tone-surface {
	background: var(--c-surface);
}

.nbt-section.alignfull.nbt-tone-paper {
	background: var(--c-paper);
}

.nbt-section > * {
	margin-block: 0;
}

.nbt-section > * + * {
	margin-block-start: var(--space-4);
}

.nbt-section > h2 {
	max-width: 22ch;
	margin-block-end: 0;
	font-size: var(--text-3xl);
}

/* The "fibre stub" above section headings. */
.nbt-section > h2::before {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	margin-bottom: var(--space-3);
	background: var(--c-cyan-text);
}

.nbt-section > .nbt-intro,
.nbt-section > h2 + * {
	margin-block-start: var(--space-4);
}

.nbt-intro {
	max-width: 60ch;
	color: var(--c-ink-2);
	font-size: var(--text-lg);
	line-height: 1.5;
}

.nbt-lead {
	max-width: 60ch;
	color: var(--c-ink-2);
	font-size: var(--text-lg);
	line-height: 1.5;
}

.nbt-note {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 600;
}

.nbt-note::before {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	background-color: var(--c-cyan-text);
	mask: url(../icons/arrow-right.svg) center / contain no-repeat;
}

/* Dark bands */
.nbt-section.nbt-on-night {
	background-color: var(--c-night-950);
	color: var(--c-on-night);
}

.nbt-on-night > h2,
.nbt-on-night > h1,
.nbt-on-night h3 {
	color: var(--c-on-night);
}

.nbt-on-night > h2::before {
	background: var(--c-cyan);
}

.nbt-on-night .nbt-lead,
.nbt-on-night .nbt-intro {
	color: var(--c-on-night-2);
}

.nbt-on-night a {
	color: var(--c-cyan);
}

/* Buttons: core's button block, restyled through the registered block styles. */
.wp-block-buttons.nbt-hero-actions,
.wp-block-buttons.nbt-section-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-block-start: var(--space-8);
}

.wp-block-button[class*="is-style-nbt-"] .wp-block-button__link {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 12px 24px;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	box-shadow: none;
	font: 600 1rem/1.2 var(--font-sans);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--dur-1) var(--ease-standard), border-color var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard);
}

.wp-block-button[class*="is-style-nbt-"] .wp-block-button__link::after {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	background-color: currentcolor;
	mask: url(../icons/arrow-right.svg) center / contain no-repeat;
	transition: transform var(--dur-2) var(--ease-out);
}

.wp-block-button[class*="is-style-nbt-"] .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

.wp-block-button.is-style-nbt-primary .wp-block-button__link {
	background: var(--c-brand);
	color: #fff;
}

.wp-block-button.is-style-nbt-primary .wp-block-button__link:hover {
	background: var(--c-brand-hover);
	color: #fff;
}

.wp-block-button.is-style-nbt-secondary .wp-block-button__link {
	border-color: var(--c-brand);
	background: transparent;
	color: var(--c-brand);
}

.wp-block-button.is-style-nbt-secondary .wp-block-button__link:hover {
	background: var(--c-brand-tint);
	color: var(--c-brand);
}

.wp-block-button.is-style-nbt-link .wp-block-button__link {
	min-height: 44px;
	padding: 0;
	background: transparent;
	color: var(--c-brand);
}

.wp-block-button.is-style-nbt-link .wp-block-button__link:hover {
	color: var(--c-brand-hover);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.wp-block-button.is-style-nbt-inverse .wp-block-button__link {
	background: #fff;
	color: var(--c-brand);
}

.wp-block-button.is-style-nbt-inverse .wp-block-button__link:hover {
	background: var(--c-brand-tint);
	color: var(--c-brand);
}

.nbt-on-night .wp-block-button.is-style-nbt-primary .wp-block-button__link {
	background: var(--c-cyan);
	color: var(--c-ink);
}

.nbt-on-night .wp-block-button.is-style-nbt-primary .wp-block-button__link:hover {
	background: var(--c-cyan-hover);
	color: var(--c-ink);
}

.nbt-on-night .wp-block-button.is-style-nbt-secondary .wp-block-button__link {
	border-color: #fff;
	color: #fff;
}

.nbt-on-night .wp-block-button.is-style-nbt-secondary .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.nbt-on-night .wp-block-button.is-style-nbt-link .wp-block-button__link {
	color: var(--c-cyan);
}


/* S02 page header */
.nbt-section.alignfull.nbt-page-header {
	min-height: 220px;
	padding-block: clamp(2.5rem, 1.67rem + 4.17vw, 4.5rem);
	border-bottom: var(--border-night);
	background-color: var(--c-night-900);
	background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-position: -1px -1px;
	background-size: 48px 48px;
}

.nbt-page-header > * {
	max-width: 52rem;
}

.nbt-page-title {
	margin-bottom: 0;
	font-size: var(--text-4xl);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.nbt-page-header .nbt-lead {
	margin-block-start: var(--space-4);
}

.nbt-section.nbt-page-header::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: max(var(--gutter), calc((100% - var(--container)) / 2));
	width: 64px;
	height: 3px;
	background: var(--c-cyan);
}

@media (min-width: 64rem) {

	.nbt-section.alignfull.nbt-page-header {
		min-height: 280px;
	}
}

/* S05 checklist: a ruled matrix; the 1px gaps show the line colour. */
.wp-block-list.is-style-nbt-checklist {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	margin: var(--space-8) 0 0;
	padding: 0;
	overflow: hidden;
	border: var(--border);
	border-radius: var(--radius-sm);
	background: var(--c-line);
	list-style: none;
}

.is-style-nbt-checklist > li {
	position: relative;
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	align-items: start;
	gap: var(--space-3);
	min-height: 56px;
	padding: 16px 20px;
	background: var(--c-paper);
	font-weight: 500;
}

/* Marker: a square with a check. */
.is-style-nbt-checklist > li::before {
	content: "";
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border: 1.5px solid var(--c-brand);
	border-radius: var(--radius-xs);
}

.is-style-nbt-checklist > li::after {
	content: "";
	position: absolute;
	top: 18px;
	left: 22px;
	width: 16px;
	height: 16px;
	background: var(--c-brand);
	mask: url(../icons/check.svg) center / contain no-repeat;
}

@media (min-width: 48rem) {

	.is-style-nbt-checklist.nbt-cols-2,
	.is-style-nbt-checklist.nbt-cols-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.is-style-nbt-checklist.nbt-cols-2 > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 64rem) {

	.is-style-nbt-checklist.nbt-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.is-style-nbt-checklist.nbt-cols-3 > li:last-child:nth-child(3n + 1) {
		grid-column: 1 / -1;
	}

	.is-style-nbt-checklist.nbt-cols-3 > li:last-child:nth-child(3n + 2) {
		grid-column: span 2;
	}
}

/* S06 tags */
.wp-block-list.is-style-nbt-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-8) 0 0;
	padding: 0;
	list-style: none;
}

.is-style-nbt-pills > li {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	gap: var(--space-2);
	padding: 0 14px;
	border: var(--border-strong);
	border-radius: var(--radius-xs);
	background: var(--c-paper);
	font: 500 13px / 1 var(--font-mono);
	letter-spacing: 0.02em;
}

.is-style-nbt-pills > li::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--c-cyan-text);
}

/* S13 CTA banner */
.nbt-section.alignfull.nbt-cta {
	display: grid;
	gap: var(--space-6);
	overflow: hidden;
	padding-block: var(--section-y-sm);
	background: var(--c-brand) url(../img/cta-fibre.svg) right center / auto 100% no-repeat;
	color: #fff;
}

.nbt-cta > h2 {
	max-width: 24ch;
	color: #fff;
}

.nbt-cta > h2::before {
	background: var(--c-cyan);
}

.nbt-cta > .wp-block-buttons {
	margin: 0;
}

@media (min-width: 64rem) {

	.nbt-section.alignfull.nbt-cta {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

	.nbt-cta > * + * {
		margin-block-start: 0;
	}
}

/* S18 placeholder: unmistakable on the front end and in the editor. */
.nbt-placeholder {
	margin-block-start: var(--space-8);
	padding: var(--space-6);
	border: 1.5px dashed var(--c-ph);
	border-radius: var(--radius-sm);
	background: var(--c-ph-tint);
	color: var(--c-ph-ink);
}

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

.nbt-placeholder > * + * {
	margin-block-start: var(--space-2);
}

.nbt-placeholder-label {
	font: 600 var(--text-xs) / 1.3 var(--font-mono);
	letter-spacing: 0.06em;
}

.nbt-placeholder-image {
	display: grid;
	min-height: 220px;
	place-content: center;
	text-align: center;
}


/* S09 prose: a readable measure. */
.nbt-prose > p {
	max-width: var(--prose-measure);
}

/* S10 media: the image placeholder is a drawn tile, 16:9 from md (below that its own minimum height keeps the text in). */
.nbt-media .nbt-placeholder-image {
	max-width: 52rem;
}

@media (min-width: 48rem) {

	.nbt-media .nbt-placeholder-image {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
}

/* Motion: scroll reveal for cards and process steps. Screen only; nothing moves under prefers-reduced-motion. */
@media screen and (prefers-reduced-motion: no-preference) {

	@supports (animation-timeline: view()) {

		.nbt-card,
		.is-style-nbt-steps > li {
			animation: nbt-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 35%;
		}
	}
}

@keyframes nbt-reveal {

	from {
		opacity: 0;
		translate: 0 12px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}