/**
 * Brief History page.
 *
 * Desktop geometry is based on the 1440px Figma frame. The main road is the
 * exact flattened Figma export; the lower arrow and ticks are exported SVGs.
 * The licence timeline stays fluid down to 1201px, then switches to the
 * stacked list so tablet widths are not clipped.
 *
 * @package jpd-theme
 */

.jpd-page--brief-history {
	--jpd-history-blue: #15256e;
	--jpd-history-yellow: #fdc112;
	--jpd-history-road: #303030;
	color: var(--jpd-text);
	background: #f5f5f5;
	overflow-x: clip;
}

/* Preserved page hero. */
.jpd-history-hero {
	overflow: hidden;
	background: #fff;
}

.jpd-history-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	width: min(1536px, 100%);
	min-height: clamp(370px, 34vw, 500px);
	margin-inline: auto;
}

.jpd-history-hero__copy {
	position: relative;
	z-index: 1;
	padding: clamp(40px, 6vw, 92px) clamp(24px, 5vw, 92px);
}

.jpd-history-hero__title {
	max-width: 720px;
	margin: 0;
	color: var(--jpd-history-blue);
	font-size: clamp(2rem, 3.1vw, 2.75rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}

.jpd-history-hero__subtitle {
	margin: 0.35rem 0 0;
	color: #0755a0;
	font-size: clamp(1.25rem, 2.2vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
}

.jpd-history-hero__description {
	max-width: 36rem;
	margin: 1rem 0 0;
	color: #161616;
	font-size: clamp(1rem, 1.35vw, 1.35rem);
	line-height: 1.5;
}

.jpd-history-hero__media {
	position: relative;
	align-self: stretch;
	min-width: 0;
	overflow: hidden;
}

.jpd-history-hero__media::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 22%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 88%);
	content: '';
	pointer-events: none;
}

.jpd-history-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center right;
}

/* The headings are exposed visually in the mobile reading layout only. */
.jpd-history__mobile-heading {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* Desktop road export: Figma node 2963:3595. Centered in the viewport
   with the original 34px side gutters instead of a left-only offset. */
.jpd-history {
	padding-top: 58.40625px;
	padding-inline: 34px;
	background: #f5f5f5;
}

.jpd-history-road__figure {
	width: 1373px;
	max-width: 100%;
	margin-inline: auto;
	line-height: 0;
}

.jpd-history-road__figure img {
	display: block;
	width: 100%;
	height: auto;
}

/* Screen-reader equivalent for text baked into the desktop PNG. */
.jpd-history-road__timeline {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* Exact editable lower timeline: Figma node 3014:51, y=3282. */
.jpd-history-licences {
	padding-top: 198px;
	padding-bottom: 64px;
	background: #f5f5f5;
}

.jpd-history-licences__stage {
	position: relative;
	width: 100%;
	max-width: 1440px;
	height: 433px;
	margin-inline: auto;
	font-family: Inter, Arial, sans-serif;
}

.jpd-history-licences__arrow {
	position: absolute;
	top: 174px;
	left: 11.8056%;
	width: 76.4583%;
	max-width: none;
	height: 63px;
}

.jpd-history-licences__tick {
	position: absolute;
	left: var(--jpd-history-x);
	width: 38px;
	max-width: none;
	height: 66px;
	transform: translateX(-50%);
}

.jpd-history-licences__tick--top {
	top: 158px;
}

.jpd-history-licences__tick--bottom {
	top: 186px;
	transform: translateX(-50%) rotate(180deg);
}

.jpd-history-licences__desktop-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jpd-history-licence-item {
	position: absolute;
	top: var(--jpd-history-item-top);
	left: var(--jpd-history-x);
	width: var(--jpd-history-item-width);
	color: #000;
	font-size: 16px;
	font-weight: 400;
	line-height: 17px;
	text-align: center;
	transform: translateX(-50%);
}

.jpd-history-licence-item time {
	display: block;
	height: 17px;
	font-weight: 700;
	line-height: 17px;
	white-space: nowrap;
}

.jpd-history-licence-item__description {
	margin-top: var(--jpd-history-desc-gap);
}

.jpd-history-licence-item__description p {
	margin: 0;
	font: inherit;
	line-height: inherit;
}

.jpd-history-licence-item__description ul {
	margin: 17px 0 0;
	padding-left: 24px;
	font: inherit;
	line-height: inherit;
	text-align: left;
}

.jpd-history-licence-item__description li {
	margin: 0;
	padding: 0;
}

.jpd-history-licences__mobile-list {
	display: none;
}

@media (max-width: 1439px) {
	.jpd-history-licences {
		padding-inline: 16px;
	}
}

@media (max-width: 920px) {
	.jpd-history-hero__inner {
		grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
		min-height: 340px;
	}

	.jpd-history-hero__copy {
		padding: 40px 24px 40px clamp(24px, 5vw, 52px);
	}
}

/*
 * Tablets sit between the 1440px Figma artboard and the 760px phone layout.
 * Nine fixed columns cannot fit that range without clipping or colliding,
 * so the licence timeline uses the readable vertical list here.
 */
@media (max-width: 1200px) {
	.jpd-history-licences {
		padding: 48px 20px 56px;
		border-top: 1px solid #dedede;
	}

	.jpd-history-licences .jpd-history__mobile-heading {
		position: static;
		width: auto;
		height: auto;
		margin: 0 0 32px;
		padding: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		color: var(--jpd-history-blue);
		font-size: clamp(1.65rem, 8vw, 2.1rem);
		font-weight: 800;
		line-height: 1.15;
		text-align: center;
		white-space: normal;
	}

	.jpd-history-licences__stage {
		display: none;
	}

	.jpd-history-licences__mobile-list {
		position: relative;
		display: block;
		width: min(720px, 100%);
		height: auto;
		margin: 0 auto;
		padding: 0 0 0 72px;
		overflow: visible;
		clip: auto;
		clip-path: none;
		border: 0;
		list-style: none;
		white-space: normal;
	}

	.jpd-history-licences__mobile-list::before {
		position: absolute;
		top: 26px;
		bottom: 26px;
		left: 26px;
		width: 5px;
		border-radius: 3px;
		background: var(--jpd-history-road);
		content: '';
	}

	.jpd-history-licences__mobile-list > li {
		position: relative;
		min-height: 86px;
		margin: 0 0 20px;
		padding: 16px 18px;
		border-left: 4px solid var(--jpd-history-yellow);
		border-radius: 0 10px 10px 0;
		background: #fff;
		box-shadow: 0 5px 18px rgba(0, 0, 0, 0.07);
	}

	.jpd-history-licences__mobile-list > li:last-child {
		margin-bottom: 0;
	}

	.jpd-history-licences__mobile-list > li::before {
		position: absolute;
		top: 15px;
		left: -64px;
		width: 42px;
		height: 42px;
		border: 5px solid var(--jpd-history-road);
		border-radius: 50%;
		background: var(--jpd-history-yellow);
		content: '';
	}

	.jpd-history-licences__mobile-list time {
		position: relative;
		z-index: 1;
		display: block;
		margin: 0 0 5px;
		color: #111;
		font-size: 1rem;
		font-weight: 800;
		line-height: 1.3;
	}

	.jpd-history-licences__mobile-list p {
		margin: 0;
		color: #333;
		font-size: 0.95rem;
		line-height: 1.5;
	}

	.jpd-history-licences__mobile-list ul {
		margin: 8px 0 0;
		padding-left: 20px;
		font-size: 0.95rem;
		line-height: 1.5;
	}
}

@media (max-width: 760px) {
	.jpd-history-hero__inner {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.jpd-history-hero__copy {
		padding: 38px 20px 16px;
	}

	.jpd-history-hero__media {
		height: clamp(230px, 66vw, 390px);
	}

	.jpd-history-hero__media img {
		object-position: center;
	}

	.jpd-history,
	.jpd-history-licences {
		padding: 48px 20px 56px;
	}

	.jpd-history-licences {
		border-top: 1px solid #dedede;
	}

	.jpd-history__mobile-heading {
		position: static;
		width: auto;
		height: auto;
		margin: 0 0 32px;
		padding: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		color: var(--jpd-history-blue);
		font-size: clamp(1.65rem, 8vw, 2.1rem);
		font-weight: 800;
		line-height: 1.15;
		text-align: center;
		white-space: normal;
	}

	.jpd-history-road__figure,
	.jpd-history-licences__stage {
		display: none;
	}

	.jpd-history-road__timeline,
	.jpd-history-licences__mobile-list {
		position: relative;
		display: block;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0 0 0 72px;
		overflow: visible;
		clip: auto;
		clip-path: none;
		border: 0;
		list-style: none;
		white-space: normal;
	}

	.jpd-history-road__timeline::before,
	.jpd-history-licences__mobile-list::before {
		position: absolute;
		top: 26px;
		bottom: 26px;
		left: 26px;
		width: 5px;
		border-radius: 3px;
		background: var(--jpd-history-road);
		content: '';
	}

	.jpd-history-milestone,
	.jpd-history-licences__mobile-list > li {
		position: relative;
		min-height: 86px;
		margin: 0 0 20px;
		padding: 16px 18px;
		border-left: 4px solid var(--jpd-history-yellow);
		border-radius: 0 10px 10px 0;
		background: #fff;
		box-shadow: 0 5px 18px rgba(0, 0, 0, 0.07);
	}

	.jpd-history-milestone:last-child,
	.jpd-history-licences__mobile-list > li:last-child {
		margin-bottom: 0;
	}

	.jpd-history-milestone::before,
	.jpd-history-licences__mobile-list > li::before {
		position: absolute;
		top: 15px;
		left: -64px;
		width: 42px;
		height: 42px;
		border: 5px solid var(--jpd-history-road);
		border-radius: 50%;
		background: var(--jpd-history-yellow);
		content: '';
	}

	.jpd-history-milestone time,
	.jpd-history-licences__mobile-list time {
		position: relative;
		z-index: 1;
		display: block;
		margin: 0 0 5px;
		color: #111;
		font-size: 1rem;
		font-weight: 800;
		line-height: 1.3;
	}

	.jpd-history-milestone p,
	.jpd-history-licences__mobile-list p {
		margin: 0;
		color: #333;
		font-size: 0.95rem;
		line-height: 1.5;
	}

	.jpd-history-licences__mobile-list ul {
		margin: 8px 0 0;
		padding-left: 20px;
		font-size: 0.95rem;
		line-height: 1.5;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jpd-page--brief-history *,
	.jpd-page--brief-history *::before,
	.jpd-page--brief-history *::after {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}