/**
 * History timeline (see 15-about-history-timeline.pdf).
 * Rows are newest first: grey image panel left, year + title + text right.
 * The year is pulled left so it reaches over the image column.
 *
 * Columns are percentages of the row so the mockup proportions hold at any width:
 * image 40% — gap 12% — text 48%.
 * Year overlaps the right side of the panel; title + body keep the wider gap.
 */

.spiro-history {
	--spiro-hist-media-col: 40%;
	--spiro-hist-gap: 12%;
	/* Year left edge ~80% across the panel → overlaps the picture */
	--spiro-hist-year-left: 32%;
	--spiro-hist-row-gap: clamp(40px, 5vw, 72px);
	--spiro-hist-blue: var(--spiro-color-blue, #007ec1);
	--spiro-hist-ink: var(--spiro-color-dark, #000000);
	--spiro-hist-panel: #ececec;
	width: 100%;
	max-width: var(--spiro-content-max, 1630px);
	margin: 0 auto;
	padding: 0 var(--spiro-gutter, 50px) clamp(32px, 4vw, 64px);
	box-sizing: border-box;
	/* Contain timeline come-right entrance (PDF 55) */
	overflow-x: clip;
}

.spiro-history__list {
	display: flex;
	flex-direction: column;
	gap: var(--spiro-hist-row-gap);
	/* Design measure — rows keep slack on the right at large widths */
	/* max-width: 1060px; */
	margin: 0;
	padding: 0;
	list-style: none;
}

.spiro-history__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--spiro-hist-media-col) minmax(0, 1fr);
	column-gap: var(--spiro-hist-gap);
	align-items: center;
}

.spiro-history__media {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Every source image is ~5:4; square panel leaves grey above/below for the year */
	aspect-ratio: 1 / 1;
	padding: clamp(16px, 3.2%, 36px);
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 15px;
	background: var(--spiro-hist-panel);
	/* Keep the blend below confined to this panel */
	isolation: isolate;
}

.spiro-history__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* Machines are cut out on white — blend that into the grey panel */
.spiro-history__img--cutout {
	mix-blend-mode: multiply;
}

.spiro-history__year {
	/* Pinned to the top of the row, overlapping the grey panel like the mockup */
	position: absolute;
	top: 0;
	left: calc(var(--spiro-hist-year-left) + 26px);
	z-index: 2;
	margin: 0;
	font-family: var(--spiro-font-family, "Outfit", Arial, sans-serif);
	/* PDF 15: timeline years 105 ExtraBold @ 1920 */
	font-size: clamp(48px, 5.5vw, 105px);
	font-weight: var(--spiro-font-weight-extrabold, 800);
	line-height: 1;
	text-transform: uppercase;
	color: var(--spiro-hist-blue);
	pointer-events: none;
}

.spiro-history__body {
	grid-column: 2;
	min-width: 0;
	/* Sit under the absolute year so title does not collide with it */
	padding-top: clamp(52px, 5.5vw, 88px);
}

.spiro-history__title {
	margin: 0;
	font-family: var(--spiro-font-family, "Outfit", Arial, sans-serif);
	/* Design note: title + body a bit smaller than earlier pass */
	font-size: clamp(22px,2.5vw, 40px);
	font-weight: var(--spiro-font-weight-extrabold, 800);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--spiro-hist-ink);
}

.spiro-history__text {
	margin-top: clamp(10px, 1vw, 16px);
}

/* Measures live on the elements that set their own font-size, so em is predictable */
.spiro-history__text p {
	max-width: 24em;
	margin: 0 0 0.6em;
	font-family: var(--spiro-font-family, "Outfit", Arial, sans-serif);
	font-size: clamp(16px, 1.35vw, 20px);
	font-weight: var(--spiro-font-weight-regular, 400);
	line-height: 1.5;
	color: var(--spiro-hist-ink);
}

.spiro-history__text p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   General CMS hero (sectionClass "hero") + history intro.
   Hero markup: .hero > … > .full-height > h2 + .img_cont
   Caption type matches HP slider .caption .itemtitle scale.
   -------------------------------------------------------------------------- */

.hero .flex_container,
.hero .flex_container > .cell_1_1 {
	min-width: 100%;
	max-width: 100%;
}

.hero .full-height {
	position: relative;
	/* Clip media while it scales from 110% */
	overflow: hidden;
}

.hero .img_cont {
	margin: 0;
}

.hero .img_cont img {
	display: block;
	width: 100%;
	max-width: none;
	height: clamp(320px, 44vw, 700px);
	object-fit: cover;
	object-position: center;
}

/* Caption over the image — same size band as HP .caption .itemtitle */
.hero .full-height > h2 {
	position: absolute;
	left: var(--spiro-content-left, 50px);
	bottom: clamp(28px, 4.6vw, 88px);
	z-index: 2;
	margin: 0;
	max-width: calc(100% - var(--spiro-content-left, 50px) - var(--spiro-gutter, 50px));
}

.hero .full-height > h2 p {
	max-width: 8em;
	margin: 0;
	font-family: var(--spiro-font-family, "Outfit", Arial, sans-serif);
	/* Default CMS hero caption band (HP-like); history overrides below */
	font-size: clamp(28px, 6.5vw, 105px);
	font-weight: var(--spiro-font-weight-extrabold, 800);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--spiro-color-blue, #007ec1);
}

/* PDF 15: OUR HISTORY hero caption 63 ExtraBold @ 1920 (not HP mega 105) */
#history .hero .full-height > h2 p {
	font-size: var(--spiro-type-hero);
}

#history .max-width-780 .container {
	max-width: var(--spiro-content-max, 1630px);
}

#history .regular_box_title {
	/* Heading left / lead right-below — lead starts under the heading baseline */
	display: grid;
	grid-template-columns: minmax(0, 48%) minmax(0, 52%);
	grid-template-rows: auto auto;
	column-gap: clamp(40px, 6vw, 120px);
	row-gap: clamp(16px, 1.6vw, 28px);
	align-items: start;
	/* Generous air above the claim and below the lead, per annotated mockup */
	padding: clamp(72px, 8vw, 140px) 0 clamp(64px, 7vw, 120px);
	/* Contain the lead’s slide-in so it doesn’t widen the page */
	overflow-x: clip;
}

#history .regular_box_title > h2 {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

#history .regular_box_title > h2 p {
	/* Narrow measure so the claim breaks over three lines, per mockup */
	max-width: 8em;
	margin: 0;
	/* CMS stores this centred inline */
	text-align: left !important;
	font-family: var(--spiro-font-family, "Outfit", Arial, sans-serif);
	/* PDF 15: intro claim 49 ExtraBold (same band as About / --spiro-type-section) */
	font-size: var(--spiro-type-section);
	font-weight: var(--spiro-font-weight-extrabold, 800);
	line-height: 1.12;
	text-transform: uppercase;
	color: var(--spiro-color-dark, #000000);
}

#history .regular_box_title > .description_content {
	grid-column: 2;
	grid-row: 2;
	margin-top: 0;
}

#history .regular_box_title > .description_content p {
	max-width: 29em;
	margin: 0 0 0.15em;
	font-family: var(--spiro-font-family, "Outfit", Arial, sans-serif);
	font-size: clamp(17px, 1.35vw, 24px);
	font-weight: var(--spiro-font-weight-bold, 700);
	line-height: 1.55;
	color: var(--spiro-color-dark, #000000);
}

@media (max-width: 900px) {
	#history .regular_box_title {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		row-gap: 20px;
		padding: clamp(48px, 10vw, 72px) 0 clamp(40px, 8vw, 64px);
	}

	#history .regular_box_title > h2,
	#history .regular_box_title > .description_content {
		grid-column: 1;
	}

	#history .regular_box_title > .description_content {
		grid-row: 2;
	}

	#history .regular_box_title > h2 p,
	#history .regular_box_title > .description_content p {
		max-width: none;
	}

	/*
	 * Mobile timeline (mockup <900):
	 * image full-width → year overlaps bottom-left of panel → title + text below.
	 * Overlap via negative margin (not transform) so come-right animation still works.
	 */
	.spiro-history__item {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.spiro-history__media {
		width: 85%;
		max-width: none;
		align-self: flex-end;
		aspect-ratio: 4 / 3;
		padding: 20px 20px 80px 20px;
	}

	.spiro-history__year {
		position: relative;
		left: auto;
		top: -40px;
		z-index: 2;
		margin: -0.52em 0 0;
		/* font-size: clamp(56px, 18vw, 88px); */
		pointer-events: none;
	}

	.spiro-history__body {
		grid-column: auto;
		padding-top: 8px;
	}

	/* .spiro-history__title {
		font-size: clamp(20px, 5.5vw, 28px);
		line-height: 1.15;
	} */

	.spiro-history__text {
		margin-top: 12px;
	}

	.spiro-history__text p {
		max-width: none;
		font-size: clamp(15px, 4vw, 18px);
	}
}