/* ==================================================================
   PAGES — one-off styles that only make sense on a specific page.

   If a rule here starts getting used on a second page, promote it
   to components.css instead of copy-pasting it.
   ================================================================== */

/* tokens.css is intentionally NOT re-imported here — see the note in
   reset.css. main.css already loads it earlier in the cascade. */


/* ------------------------------------------------------------------
   Homepage
   ------------------------------------------------------------------ */

.content-homepage {
	padding: var(--space-2xl);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-xl);
	margin-left: var(--nav-width);
	max-width: var(--max-content-width);
}

.content-homepage h1 {
	font-size: var(--font-size-header-xl);
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

@media (max-width: 900px) {
	.content-homepage {
		margin-left: 0;
		padding: var(--space-xl) var(--space-lg);
	}
}

@media (max-width: 600px) {
	.content-homepage {
		padding: var(--space-lg) var(--space-md);
		gap: var(--space-lg);
	}
}

@media (max-width: 400px) {
	.content-homepage {
		padding: var(--space-md) var(--space-sm);
	}
}


/* ------------------------------------------------------------------
   About page ("lore" section — image + bio text)
   ------------------------------------------------------------------ */

.lore {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: var(--space-2xl);
	gap: var(--space-2xl);
	max-width: var(--max-content-width);
	width: 100%;
	margin: 0 auto;
	/* width + margin: auto matches .content's centring (see
	   components.css) — without them, this only had a max-width, so
	   on any viewport wide enough to actually hit that cap, the row
	   sat flush against the nav instead of centred like every other
	   page's content column. */
}

.lore img {
	width: 50%;
	aspect-ratio: 1/1;
	object-fit: cover;
	flex-shrink: 0;
	max-width: 500px;
}

.lore-text-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--space-sm);
	width: 50%;
	max-width: 600px;
	/* Explicit width + max-width on both sides of the row, mirroring
	   the existing .pli / .pli-text-container pattern (components.css)
	   instead of a fixed-width image with the text left to shrink-wrap
	   to its own content. Note: the *severe* version of "image reads
	   as more than half" wasn't this — it was the phantom <source>
	   flex items eating extra gaps, fixed in reset.css. This just
	   keeps the split as close to 50/50 as plain percentages get. */
}

.lore-text-container span {
	text-decoration: line-through var(--colour-primary) 2px;
}

.lore-text-container a {
	color: var(--colour-primary);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
}

.lore-text-container a:visited {
	color: var(--colour-primary);
}

@media (max-width: 900px) {
	.lore {
		flex-direction: column;
		padding: var(--space-lg);
		gap: var(--space-lg);
		align-items: flex-start;
	}

	.lore img {
		width: 100%;
		max-width: 280px;
		align-self: center;
	}

	.lore-text-container {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.lore {
		padding: var(--space-md);
		gap: var(--space-md);
	}
}

@media (max-width: 400px) {
	.lore {
		padding: var(--space-sm);
	}
}

.education-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	width: 100%;
}

.education-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid var(--colour-surface-subtle);
}

.education-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.education-item a {
	color: var(--colour-primary);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
}

.education-item a:visited {
	color: var(--colour-primary);
}

/* ------------------------------------------------------------------
   ALL PROJECT PAGES
   ------------------------------------------------------------------ */

.hero-mock {
	width: 100%;
	height: 400px;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 600px) {
	.hero-mock {
		height: 220px;
	}
}

/* ------------------------------------------------------------------
   DS project page
   ------------------------------------------------------------------ */
.timeline {
	padding: var(--space-md);
}

.timeline-track {
	list-style: none;
	display: grid;
	grid-template-columns: 90px 64px 1fr;
	row-gap: var(--space-lg);
}

@media (max-width: 600px) {
	.timeline-track {
		grid-template-columns: 60px 40px 1fr;
		row-gap: var(--space-md);
	}

	.timeline-date {
		font-size: var(--font-size-body-xs);
	}
}

.timeline-node {
	/* Lets this <li>'s three children drop straight into the grid's
	   columns/rows as if the <li> wrapper wasn't there — the DOM
	   nesting (and screen-reader list semantics) stays intact,
	   only the box layout is bypassed. */
	display: contents;
}

.timeline-date {
	text-align: right;
	font-size: var(--font-size-body-md);
	color: var(--colour-secondary);
}

.timeline-dot-col {
	position: relative;
	display: flex;
	justify-content: center;
}

.timeline-dot {
	width: var(--space-sm);
	height: var(--space-sm);
	border-radius: 50%;
	background: var(--colour-secondary);
	border: 3px solid var(--colour-surface-background);
	z-index: 1;
}

.timeline-dot-col::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: calc(-1 * var(--space-md));
	/* bridges the row-gap down to the next dot */
	left: 50%;
	width: 1px;
	background: var(--colour-accent);
}

.timeline-node:last-child .timeline-dot-col::before {
	display: none;
	/* no trailing line past the final dot */
}

.timeline-label {
	font-size: var(--font-size-body-md);
	color: var(--colour-tertiary);
}

div.timeline-label {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	/* Only div.timeline-label (used for the About page's multi-paragraph/
	   list CV entries) gets flex-column treatment. span.timeline-label
	   (used on this page for a single line of flowing text + inline
	   tooltips) must stay a plain inline box — flexifying it would break
	   the mixed text/abbr content into separate stacked flex items,
	   stretching each one's box (and the tooltip's dashed underline)
	   to the full container width instead of just wrapping the text. */
}

.timeline-label ul {
	padding-inline-start: var(--space-md);
}

.timeline-label a {
	color: var(--colour-primary);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
}

.timeline-label a:visited {
	color: var(--colour-primary);
}




.image-grid.match-height {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-lg);
	flex-wrap: nowrap;
	overflow-x: auto;
}

.image-grid.match-height .image-card {
	flex: 0 1 auto;
	align-items: center;
}

.image-grid.match-height .image-card img {
	width: auto;
	height: 320px;
	max-height: 320px;
	max-width: 100%;
}

@media (max-width: 600px) {
	.image-grid.match-height {
		flex-direction: column;
		overflow-x: visible;
		align-items: stretch;
	}

	.image-grid.match-height .image-card {
		flex: none;
	}

	.image-grid.match-height .image-card img {
		width: 100%;
		height: auto;
		max-height: none;
	}
}