/* ==========================================================================
   About — What 80 Years Looks Like (neilkelly/about-80-years)
   Figma: About / Section 4 What 80 Years Looks Like (4715:2207), 1440x531

   Measured:
     section   bg surface-section, pad 96 block, 72 LEFT only
     header    heading 50/800 lh 60.5 brand-black
     nav row   own full-width row between heading and strip, 24 gap;
               48x48 white circles, 1px border, right button inset 72
     strip     cards 360 wide, pad 20, radius 16, white, 1px border, 24 gap;
               starts at the left gutter and bleeds off the RIGHT edge only
     card      badge 32x32 circle brand-red, 16/600 white; copy 16/600 brand-black
     progress  2px track border-default, fill brand-red, spans to the right edge

   The previous build put the arrows beside the heading and inset the strip on
   both sides, which clipped the first and last card.
   ========================================================================== */

.nk-about-timeline {
	/* WP core gives blocks a 24px margin-block-start; these are full-bleed
	   panels that must butt against their neighbours. */
	margin: 0;
	--nk-about-timeline-heading-size: var(--wp--preset--font-size--xxl);
	--nk-about-timeline-card-width: var(--wp--custom--components--about--timeline-card-width);
	--nk-about-timeline-nav-size: var(--wp--custom--components--about--timeline-nav-size);
	--nk-about-timeline-inset: var(--wp--preset--spacing--gutter);
	/* Distance from the centred content box's right edge to the window's. The strip
	   and its progress bar give this back as negative margin so they still reach the
	   window edge after the container was capped (see below). Floors at 0 up to 1440,
	   where the cap doesn't bind and none of this applies. */
	--_bleed: max(0px, (100vw - var(--wp--custom--layout--max-width)) / 2);

	box-sizing: border-box;
	width: 100%;
	padding-block: var(--wp--preset--spacing--24);
	background-color: var(--wp--preset--color--surface-section);
	font-family: var(--wp--preset--font-family--inter);
}

/* Left gutter only — the strip runs off the right edge by design.
   Capped at the layout max-width and centred so the heading's left edge lands on the
   same line as the other sections' text: gutter alone pins it to the window, which
   above 1440 matches neither service-process nor service-cta-close (both centre a
   1440 box), nor about-one-team since it was brought onto that box. Identical below
   1440. The strip and progress bar re-bleed rightward, so the composition is
   unchanged — only the text moved. */
.nk-about-timeline__container {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
	box-sizing: border-box;
	max-width: var(--wp--custom--layout--max-width);
	margin-inline: auto;
	padding-left: var(--nk-about-timeline-inset);
}

/* ---------- Header ---------- */

.nk-about-timeline__heading {
	margin: 0;
	font-size: var(--nk-about-timeline-heading-size);
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--lg-tight);
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-black);
}

/* ---------- Nav row ---------- */

.nk-about-timeline__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* Keeps the right-hand button 72px in from the content box's right edge — mirroring
	   the heading's left inset — while the strip below it still bleeds to the window. */
	padding-right: var(--nk-about-timeline-inset);
}

.nk-about-timeline__nav-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--nk-about-timeline-nav-size);
	height: var(--nk-about-timeline-nav-size);
	padding: 0;
	border: 1px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--brand-white);
	color: var(--wp--preset--color--brand-black);
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}

.nk-about-timeline__nav-button:hover:not( [aria-disabled="true"] ),
.nk-about-timeline__nav-button:focus-visible:not( [aria-disabled="true"] ) {
	background-color: var(--wp--preset--color--brand-black);
	border-color: var(--wp--preset--color--brand-black);
	color: var(--wp--preset--color--brand-white);
}

/* aria-disabled rather than :disabled — view.js keeps the button focusable at the
   ends of the strip so keyboard focus is never dropped (see the note there). It
   still has to LOOK spent, and stop inviting a click. */
.nk-about-timeline__nav-button[aria-disabled="true"] {
	opacity: 0.4;
	cursor: default;
}

/* ---------- Track ----------
   proximity, not mandatory — matches blocks/services: mandatory snapping can
   trap the scroll and leave the last card unreachable. */

.nk-about-timeline__track {
	display: flex;
	gap: var(--wp--preset--spacing--6);
	margin: 0;
	/* Runs off the right window edge, as it did before the container was capped. */
	margin-right: calc(-1 * var(--_bleed));
	padding: 0;
	list-style: none;
	align-items: flex-start;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.nk-about-timeline__track::-webkit-scrollbar {
	display: none;
}

.nk-about-timeline__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	box-sizing: border-box;
	flex: 0 0 var(--nk-about-timeline-card-width);
	width: var(--nk-about-timeline-card-width);
	padding: var(--wp--preset--spacing--5);
	/* Inset shadow rather than a border: Figma's stroke is centre-aligned and
	   doesn't consume the frame, so a border-box border would cut the copy
	   measure from 320px to 318px. */
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--brand-white);
	scroll-snap-align: start;
}

.nk-about-timeline__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--components--about--timeline-badge-size);
	height: var(--wp--custom--components--about--timeline-badge-size);
	flex-shrink: 0;
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--brand-red);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--none);
	color: var(--wp--preset--color--brand-white);
	font-variant-numeric: tabular-nums;
}

.nk-about-timeline__copy {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--brand-black);
	text-wrap: pretty;
}

/* ---------- Progress ---------- */

/* Bleeds with the strip it measures — the bar ending short of the cards it reports on
   would read as a mistake. */
.nk-about-timeline__progress {
	position: relative;
	height: var(--wp--preset--spacing--0-5);
	margin-right: calc(-1 * var(--_bleed));
	background-color: var(--wp--preset--color--border-default);
	overflow: hidden;
}

/* --nk-timeline-progress (0 -> 1) is written by view.js from the real scroll
   offset, so the fill tracks touch and keyboard scrolling too. The 25% floor
   keeps a visible thumb when the track barely overflows. */
.nk-about-timeline__progress-fill {
	position: absolute;
	inset-block: 0;
	left: 0;
	display: block;
	width: calc( 25% + ( var(--nk-timeline-progress, 0) * 75% ) );
	background-color: var(--wp--preset--color--brand-red);
	transition: width 120ms linear;
}

@media (prefers-reduced-motion: reduce) {
	.nk-about-timeline__progress-fill {
		transition: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1023px) {
	.nk-about-timeline {
		--nk-about-timeline-heading-size: var(--wp--preset--font-size--xl);
		--nk-about-timeline-card-width: var(--wp--custom--components--about--timeline-card-width-tablet);
		--nk-about-timeline-inset: var(--wp--preset--spacing--12);

		padding-block: var(--wp--preset--spacing--20);
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.nk-about-timeline {
		--nk-about-timeline-heading-size: var(--wp--preset--font-size--xl-sm);
		--nk-about-timeline-card-width: var(--wp--custom--components--about--timeline-card-width-mobile);
		--nk-about-timeline-inset: var(--wp--preset--spacing--6);

		padding-block: var(--wp--preset--spacing--12);
	}

	/* Redundant once the track is touch-scrollable. */
	.nk-about-timeline__nav {
		display: none;
	}
}