/* Project Sections — sections and the left-hand section navigation.
   Colours are read from the theme's tokens, falling back to a neutral palette. */

.project-section,
.project-rail {
	--psec-paper: var(--paper, #ffffff);
	--psec-bone: var(--bone, #ece8e1);
	--psec-ink: var(--ink, #15161a);
	--psec-ink-mute: var(--ink-mute, #6a6c73);
	--psec-rule: var(--rule, #ddd9d2);
	--psec-mono: var(--mono, "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace);
	--psec-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Utility for anchors the plugin does not render itself — the element the rail's
   intro item points at, e.g. <div id="information" class="project-anchor">. */
.project-anchor {
	scroll-margin-top: calc(var(--header-h, 72px) + 24px);
}

/* --- section ------------------------------------------------------------- */

.project-section {
	/* Keep the heading clear of a sticky header when scrolling to the anchor. */
	scroll-margin-top: calc(var(--header-h, 72px) + 24px);
	margin-block: clamp(40px, 6vw, 96px);
}

.project-section:first-child { margin-top: 0; }


/* --- left rail ----------------------------------------------------------- */

.project-rail {
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 50;
	display: flex;
	flex-direction: column;
	/* Without this the column stretches every item to the width of the widest one, so
	   opening one label left the others looking like wide empty boxes. */
	align-items: flex-start;
	gap: 2px;
	pointer-events: none;   /* do not trap clicks on the content behind the rail */
}

.project-rail__item {
	pointer-events: auto;
	display: flex;
	align-items: stretch;
	text-decoration: none;
	color: var(--psec-ink);
	background: var(--psec-bone);
	box-shadow: none;
	transition: background 0.25s var(--psec-ease), color 0.25s var(--psec-ease);
}

.project-rail__num {
	flex: 0 0 auto;
	min-width: 26px;
	padding: 5px 6px;
	font-family: var(--psec-mono);
	font-size: 0.6875rem;
	line-height: 1.2;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.project-rail__label {
	/* Closed by default; opens on the active, hovered or focused item. */
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	padding-block: 5px;
	font-family: var(--psec-mono);
	font-size: 0.6875rem;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: max-width 0.35s var(--psec-ease), opacity 0.25s var(--psec-ease),
		padding 0.35s var(--psec-ease);
}

.project-rail__item:hover,
.project-rail__item:focus-visible,
.project-rail__item[aria-current="true"] {
	background: var(--psec-ink);
	color: var(--psec-paper);
}

.project-rail__item:hover .project-rail__label,
.project-rail__item:focus-visible .project-rail__label,
.project-rail__item[aria-current="true"] .project-rail__label {
	max-width: 16rem;
	opacity: 1;
	padding-inline: 2px 10px;
}

.project-rail__item:focus-visible {
	outline: 2px solid var(--psec-ink);
	outline-offset: 2px;
}

/* A section with no label never opens a text box. */
.project-rail__label:empty { display: none; }

/* --- narrow screens: the rail becomes a horizontal strip ----------------- */

@media (max-width: 900px) {
	/* The rail prints at the very top of the body; on narrow screens pinning it to the
	   bottom is more predictable than sticking it to the top, and it covers no header. */
	.project-rail {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		transform: none;
		flex-direction: row;
		/* Back to stretch in a row: the chips should share one height. */
		align-items: stretch;
		gap: 4px;
		padding: 8px var(--gutter, 20px);
		background: var(--psec-paper);
		border-top: 1px solid var(--psec-rule);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Labels stay open on narrow screens — numbers alone are not enough to navigate by. */
	.project-rail__label {
		max-width: none;
		opacity: 1;
		padding-inline: 2px 10px;
	}
}

/* --- rows ---------------------------------------------------------------- */

.project-row {
	display: grid;
	grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
	gap: clamp(12px, 2vw, 28px);
	margin-bottom: clamp(12px, 2vw, 28px);
}

.project-row:last-child { margin-bottom: 0; }

.project-row__cell { margin: 0; }

/* Only present when a lightbox is available; see psec_wrap_image(). */
.project-row__link {
	display: block;
	cursor: zoom-in;
}

.project-row__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Multi-column rows collapse to one column on narrow screens. */
@media (max-width: 700px) {
	.project-row { grid-template-columns: 1fr; }
}

/* --- reduced motion / print ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.project-rail__item,
	.project-rail__label { transition-duration: 0.001ms; }
}

@media print {
	.project-rail { display: none !important; }
}