/**
 * AION Theme — Nexus walkthrough pages
 *
 * Shared by /nexus/crm/walkthrough and
 * /nexus/financial-operations/walkthrough. Both pages are a hero, a numbered
 * run of capability bands, and a CTA — the bands themselves are already styled
 * by nexus-shared.css, so this file only adds the step numbering, the banding
 * that keeps a long run of steps readable, and the hero's disclosure pill.
 *
 * Depends on variables.css, global.css, components.css and nexus-shared.css.
 *
 * @package aion-theme
 * @since   1.3.0
 */

/* =========================================================================
   Hero
   ========================================================================= */

.nexus-walkthrough-hero .page-hero__subtitle {
	max-width: 62ch;
}

/* The demonstration-data statement. Deliberately not styled as fine print:
   a reader who misses it may take these screenshots for a live customer's
   data, which is the one misreading this page must not allow. */
.nexus-walkthrough-hero__note {
	margin-top: var(--space-5);
	max-width: 62ch;
	text-align: left;
}

/* =========================================================================
   Steps
   ========================================================================= */

.nexus-walkthrough__step {
	/* The number's container adds the top space; the band below it then needs
	   less of its own so a step does not read as two separate blocks. */
	padding-top: var(--space-10);
}

@media (min-width: 1024px) {
	.nexus-walkthrough__step {
		padding-top: var(--space-12);
	}
}

/*
 * Alternate the background down the run. Eight or nine identical bands in a
 * column stop reading as separate steps, and the capability band itself has no
 * banding of its own because its other two callers place it among sections
 * that already alternate.
 */
.nexus-walkthrough__step:nth-child(even) {
	background-color: var(--color-light-bg);
}

/*
 * The step number.
 *
 * Rendered by the template rather than written into the copy, so re-ordering a
 * step cannot leave the numbering wrong. It is aria-hidden — the heading order
 * already conveys sequence to a screen reader, and "1" announced before every
 * heading is noise rather than information.
 *
 * It sits in the flow, inside a container of its own, so it aligns with the
 * text column at every width. An earlier version positioned it absolutely in
 * the page gutter, which collided with the step eyebrow as soon as the viewport
 * narrowed to the container's own max-width and there was no gutter left.
 */
.nexus-walkthrough__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;

	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--color-accent-text);

	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 999px;
}

@media (min-width: 1024px) {
	.nexus-walkthrough__number {
		width: 3rem;
		height: 3rem;
		font-size: var(--text-base);
	}
}

/*
 * The band supplies its own generous vertical rhythm, and the step wrapper has
 * already opened the space the number sits in — so trim the band's top padding
 * to keep the number visually attached to the heading it belongs to.
 */
.nexus-walkthrough__step .nexus-capability {
	padding-top: var(--space-5);
	padding-bottom: var(--space-12);
}

@media (min-width: 1024px) {
	.nexus-walkthrough__step .nexus-capability {
		padding-top: var(--space-6);
		padding-bottom: var(--space-16);
	}
}

/* =========================================================================
   Screenshots
   ========================================================================= */

/*
 * These are real product captures at 1440x900 rather than the wireframe
 * placeholder, and they carry their own dark chrome. Drop the frame's own
 * background so it does not read as a second border around an image that
 * already has one.
 */
.nexus-walkthrough .media-shot__img {
	background-color: transparent;
}

/* Captions here carry the demonstration-data disclosure and several run to two
   lines, so they need the full column rather than being centred and clipped. */
.nexus-walkthrough .media-shot__caption {
	text-align: left;
	max-width: none;
}