/* ------------------------------------------------------------------ *
 * About page (/about/): career timeline with a photo placed statically
 * inside the one or two events that have one (no scroll-tracking JS —
 * see about-page-design-status memory note), plus an expandable
 * "Read more about..." stories section. Loaded only on the About page
 * (see functions.php). Ported from drafts/about-v5-story-cards.html.
 * ------------------------------------------------------------------ */

.jp-about-head {
	max-width: 52rem;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--60) clamp(1.25rem, 5vw, 2rem) 0;
}
.jp-about-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.1;
	margin: 0 0 1.25rem;
}
.jp-about-lead {
	font-size: 1.1rem;
	line-height: 1.6;
	max-width: 46ch;
	margin: 0 0 2.5rem;
}

.jp-about-section-label {
	max-width: 52rem;
	margin: 1rem auto 0;
	padding: 1.75rem clamp(1.25rem, 5vw, 2rem) 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-style: italic;
	font-size: 1.3rem;
	color: var(--wp--preset--color--primary);
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.jp-about-career {
	max-width: 52rem;
	margin: 1.5rem auto 0;
	padding: 0 clamp(1.25rem, 5vw, 2rem) 3rem;
}
.jp-tl {
	position: relative;
}
.jp-tl::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6rem;
	bottom: 0;
	width: 2px;
	background: var(--wp--preset--color--hairline);
}

.jp-tl-item {
	position: relative;
	padding-left: 2.75rem;
	margin-bottom: 2.25rem;
}
.jp-tl-dot {
	position: absolute;
	left: -0.05rem;
	top: 0.35rem;
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	border: 3px solid var(--wp--preset--color--base);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary);
}
.jp-tl-item.past .jp-tl-dot {
	background: var(--wp--preset--color--secondary);
	box-shadow: 0 0 0 1px var(--wp--preset--color--secondary);
}

.jp-tl-date {
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.3rem;
}
.jp-tl-duration {
	font-style: italic;
}
.jp-tl-name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 1.25rem;
	margin: 0 0 0.15rem;
}
.jp-tl-org {
	font-size: 0.92rem;
	color: var(--wp--preset--color--secondary);
	margin: 0 0 0.6rem;
}
.jp-tl-note {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.92rem;
	color: var(--wp--preset--color--contrast);
	max-width: 48ch;
	margin: 0;
	line-height: 1.55;
}

/* Events with a photo: image sits in normal flow next to that one
   entry's text and scrolls with it — it doesn't track or persist. */
.jp-tl-item.has-photo {
	display: grid;
	grid-template-columns: 1fr 9.5rem;
	gap: 0.5rem 1.75rem;
	align-items: start;
}
.jp-tl-item.has-photo .jp-tl-content {
	grid-column: 1;
	grid-row: 1;
}
.jp-tl-photo {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	height: 8rem;
	object-fit: cover;
	display: block;
	border: 1px solid var(--wp--preset--color--hairline);
	margin-top: 0.2rem;
}
@media (max-width: 620px) {
	.jp-tl-item.has-photo {
		grid-template-columns: 1fr;
	}
	.jp-tl-photo {
		grid-column: 1;
		grid-row: 2;
		height: 10rem;
		margin-top: 0.75rem;
	}
}

/* ---- "Read more about...": story cards ---- */
.jp-stories {
	max-width: 58rem;
	margin: 0 auto;
	padding: 1.5rem clamp(1.25rem, 5vw, 2rem) 4rem;
}
.jp-stories-sub {
	color: var(--wp--preset--color--muted);
	font-size: 0.88rem;
	margin: 0 0 1.75rem;
}
.jp-story-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
	gap: 1.25rem;
}
.jp-story-card {
	border: 1px solid var(--wp--preset--color--hairline);
	background: #fff;
	padding: 1.4rem 1.5rem;
}
.jp-story-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 1.15rem;
	margin: 0 0 0.5rem;
}
.jp-story-teaser {
	font-size: 0.9rem;
	font-style: italic;
	color: var(--wp--preset--color--secondary);
	margin: 0 0 0.9rem;
	line-height: 1.5;
}
.jp-story-card details {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: 0.75rem;
}
.jp-story-card summary {
	cursor: pointer;
	font-size: 0.82rem;
	color: var(--wp--preset--color--primary);
	list-style: none;
}
.jp-story-card summary::-webkit-details-marker {
	display: none;
}
.jp-story-card summary::after {
	content: "Read more →";
}
.jp-story-card details[open] summary::after {
	content: "Show less";
}
.jp-story-card details p {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
	margin: 0.75rem 0 0;
}