/**
 * Collaborate page (design files): the collaborate-* patterns on the Full Width page. The
 * page header band (the hero is one), sections, section headers and the subtle band
 * (.nm-section--band) are shared (components.css, utilities.css); the form and the
 * contact card come from about-contact.css. Palette tokens only, so the page follows the light and
 * dark colour schemes.
 *
 * Loaded only on /collaborate/.
 */

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */

/* A page header (.nm-page-header) with more room, a display-size title and two leads. */
.nm-page-header.nm-collab-hero {
	padding-block: clamp(var(--wp--preset--spacing--70), 7vw, var(--wp--preset--spacing--100));
}

.nm-collab-hero .nm-collab-hero__title {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--display);
	line-height: var(--nm-leading-display);
}

.nm-collab-hero .nm-collab-hero__tagline {
	margin-top: var(--wp--preset--spacing--40);
	color: var(--nm-color-accent-text);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 600;
	line-height: 1.15;
}

.nm-collab-hero .nm-collab-hero__leads {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	max-width: 64rem;
	margin-top: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--prose-ink);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
}

.nm-collab-hero__leads > * {
	margin: 0;
}

.nm-collab-hero .nm-collab-hero__actions {
	margin-top: var(--wp--preset--spacing--60);
}

/* The large buttons (.nm-button--lg). */
.nm-collab-hero__actions .wp-block-button__link {
	min-height: var(--nm-control-lg);
	padding-inline: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--body);
}

/* -------------------------------------------------------------------------
 * The tools: three screenshots in a browser frame, then the steps
 * ---------------------------------------------------------------------- */

.nm-page-section__inner > .nm-collab-shots {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.nm-collab-shots > .nm-collab-shot,
.nm-collab-shot > * {
	margin: 0;
}

/* The browser frame: three dots and the address. */
.nm-collab-shot .nm-collab-shot__chrome {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	height: var(--wp--preset--spacing--60);
	padding: 0 var(--wp--preset--spacing--30);
	border: 1px solid var(--nm-color-border);
	border-radius: var(--nm-radius-button) var(--nm-radius-button) 0 0;
	background: var(--wp--preset--color--white-surface);
}

.nm-collab-shot__chrome::before {
	flex: none;
	width: 8px;
	height: 8px;
	margin-right: 28px;
	border-radius: var(--nm-radius-full);
	background: var(--nm-color-border);
	box-shadow: 14px 0 0 var(--nm-color-border), 28px 0 0 var(--nm-color-border);
	content: "";
}

.nm-collab-shot__chrome code {
	overflow: hidden;
	background: none;
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--technical-xs);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nm-collab-shot img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--nm-color-border);
	border-top: 0;
	border-radius: 0 0 var(--nm-radius-button) var(--nm-radius-button);
	object-fit: cover;
	object-position: top;
}

/* A screenshot not chosen yet (the pattern's empty image) takes no space. */
.nm-collab-shot .wp-block-image:not(:has(img[src])) {
	display: none;
}

.nm-collab-shot .nm-figure-caption {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
}

.nm-collab-shot .nm-figure-caption strong {
	margin-right: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--deep-teal);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--technical-xs);
	font-weight: 500;
	letter-spacing: var(--nm-tracking-label);
	text-transform: uppercase;
}

/* The steps from browser to print, joined by brass rules. */
.nm-page-section__inner > .nm-flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20) calc(var(--wp--preset--spacing--60) + 2 * var(--wp--preset--spacing--30));
	margin-top: var(--wp--preset--spacing--60);
	padding: 0;
	overflow: hidden;
	list-style: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--technical-xs);
	letter-spacing: var(--nm-tracking-label);
	text-transform: uppercase;
}

.nm-flow > li {
	position: relative;
	margin: 0;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border: 1px solid var(--nm-color-border);
	border-radius: var(--nm-radius-tag);
	background: var(--wp--preset--color--white-surface);
	color: var(--wp--preset--color--deep-teal);
}

.nm-flow > li + li::before {
	position: absolute;
	top: 50%;
	right: calc(100% + 1px + var(--wp--preset--spacing--30));
	width: var(--wp--preset--spacing--60);
	height: 1px;
	background: var(--wp--preset--color--soft-brass);
	content: "";
}

/* -------------------------------------------------------------------------
 * The platform beside the reach, on the subtle band
 * ---------------------------------------------------------------------- */

.nm-page-section__inner.nm-collab-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(var(--wp--preset--spacing--60), 6vw, var(--wp--preset--spacing--100));
	align-items: start;
}

.nm-collab-split__text > * {
	margin: 0;
}

.nm-collab-split__text h2 {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--heading-2);
}

.nm-collab-split__text p:not(.nm-eyebrow) {
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--prose-ink);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
}

.nm-proof {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.nm-proof > * {
	margin: 0;
}

.nm-proof .nm-stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nm-proof .nm-stat > * {
	margin: 0;
}

.nm-proof .nm-stat__value {
	font-size: var(--wp--preset--font-size--heading-3);
}

.nm-proof .nm-stat__link {
	margin-top: var(--wp--preset--spacing--20);
}

/* -------------------------------------------------------------------------
 * Validation, on the dark band
 * ---------------------------------------------------------------------- */

.nm-collab-hardware .nm-collab-statement {
	max-width: 24ch;
	color: var(--nm-color-on-dark);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 700;
	line-height: 1.05;
}

.nm-collab-hardware .nm-collab-band__text {
	max-width: var(--nm-measure-prose);
	margin-top: var(--wp--preset--spacing--50);
	color: var(--nm-color-on-dark-muted);
	font-size: var(--wp--preset--font-size--lead);
}

/* -------------------------------------------------------------------------
 * Formats, numbered, and the independence note
 * ---------------------------------------------------------------------- */

.nm-page-section__inner > .nm-formats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	counter-reset: format;
}

.nm-formats > .nm-format {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	align-content: start;
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--nm-color-border);
	border-radius: var(--nm-radius-card);
	background: var(--wp--preset--color--white-surface);
	counter-increment: format;
}

.nm-format::before {
	color: var(--wp--preset--color--brass-ink);
	content: counter(format, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--technical-xs);
	letter-spacing: var(--nm-tracking-label);
}

.nm-format > * {
	margin: 0;
}

.nm-format h3 {
	font-size: var(--wp--preset--font-size--heading-5);
}

.nm-format p {
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.nm-page-section__inner > .nm-callout {
	margin-top: var(--wp--preset--spacing--70);
}

/* -------------------------------------------------------------------------
 * The enquiry
 * ---------------------------------------------------------------------- */

.nm-collab-contact {
	scroll-margin-top: var(--nm-header-height);
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 960px) {
	.nm-page-section__inner > .nm-collab-shots,
	.nm-page-section__inner > .nm-formats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nm-page-section__inner.nm-collab-split,
	.nm-collab-hero .nm-collab-hero__leads {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 560px) {
	.nm-page-section__inner > .nm-collab-shots,
	.nm-page-section__inner > .nm-formats {
		grid-template-columns: minmax(0, 1fr);
	}
}