/* ============================================================
   R/ Jeilani National School — School History Timeline Page
   ============================================================ */

/* --- Hero breadcrumb --- */
.hero-breadcrumb {
	margin-bottom: 10px;
}

.hero-breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.8);
}

.hero-breadcrumb a {
	color: rgba(255, 255, 255, 0.8);
	transition: color 0.2s;
}

.hero-breadcrumb a:hover {
	color: #D6B63C;
}

.hero-breadcrumb [aria-current="page"] {
	color: #D6B63C;
	font-weight: 500;
}

.hero-breadcrumb li[aria-hidden="true"] {
	opacity: 0.5;
	font-size: 11px;
}

.hero-divider {
	display: block;
	width: 48px;
	height: 3px;
	background: #D6B63C;
	border: none;
	margin: 12px 0 0;
}

/* --- Layout --- */
.history-body {
	background: #FFFDF5;
	padding: 36px 0 56px;
	min-height: 50vh;
}

.history-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.history-content {
	min-width: 0;
}

/* --- Sidebar --- */
.history-sidebar {
	position: sticky;
	top: calc(var(--header-h, 52px) + 16px);
}

.history-sidebar .about-sidebar {
	background: #FFFFFF;
	border: 1px solid #E8F1E8;
	border-radius: 8px;
	overflow: hidden;
}

.history-sidebar .about-sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.history-sidebar .about-sidebar-list li + li {
	border-top: 1px solid #f0f4f0;
}

.history-sidebar .about-sidebar-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 500;
	color: #176B3A;
	transition: background 0.2s, color 0.2s;
	text-decoration: none;
}

.history-sidebar .about-sidebar-list a:hover {
	background: #F8F1D7;
	color: #183A2B;
}

.history-sidebar .about-sidebar-list a.is-active {
	background: #F8F1D7;
	color: #183A2B;
	font-weight: 600;
}

.history-sidebar .about-sidebar-list a svg.icon {
	width: 12px;
	height: 12px;
	transform: rotate(-90deg);
	opacity: 0.5;
	flex-shrink: 0;
}

/* Heritage card */
.heritage-card {
	margin-top: 20px;
	background: #E8F1E8;
	border: 1px solid #d4e4d4;
	border-radius: 8px;
	padding: 24px 20px;
	text-align: center;
}

.heritage-illustration {
	color: #2E8B57;
	opacity: 0.25;
	margin-bottom: 14px;
}

.heritage-illustration svg {
	width: 120px;
	height: 60px;
	margin: 0 auto;
}

.heritage-quote {
	margin: 0;
	padding: 0;
	border: none;
}

.heritage-quote p {
	font-family: var(--font);
	font-style: italic;
	font-size: 14px;
	line-height: 1.6;
	color: #183A2B;
	margin: 0;
}

/* --- Main content --- */
.history-intro {
	margin-bottom: 36px;
}

.section-eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #2E8B57;
	margin: 0 0 6px;
}

.history-intro-heading {
	font-family: var(--font);
	font-size: 26px;
	font-weight: 600;
	color: #183A2B;
	margin: 0 0 10px;
	line-height: 1.25;
}

.gold-divider {
	display: block;
	width: 40px;
	height: 3px;
	background: #D6B63C;
	border: none;
	margin: 0 0 14px;
}

.history-intro-text {
	font-size: 14px;
	line-height: 1.65;
	color: #4C6655;
	margin: 0;
	max-width: 680px;
}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline {
	position: relative;
}

/* --- Item grid --- */
.timeline-item {
	display: grid;
	grid-template-columns: 1fr 48px 1.3fr;
	gap: 0 24px;
	margin-bottom: 44px;
	align-items: start;
}

.timeline-item:last-child {
	margin-bottom: 0;
}

/* Image column */
.timeline-image-col {
	min-width: 0;
}

.timeline-figure {
	margin: 0;
}

.timeline-figure img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	border-radius: 8px;
	display: block;
}

.timeline-image-placeholder {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #E8F1E8;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #2E8B57;
	opacity: 0.35;
}

.timeline-image-placeholder .icon {
	width: 36px;
	height: 36px;
}

.timeline-figure figcaption {
	font-size: 11px;
	color: #4C6655;
	margin-top: 6px;
	font-style: italic;
}

/* Line + marker column */
.timeline-line-col {
	position: relative;
	display: flex;
	justify-content: center;
	min-height: 100%;
}

.timeline-line {
	position: absolute;
	top: 0;
	bottom: -44px;
	width: 2px;
	background: #d4e4d4;
}

.timeline-item:last-child .timeline-line {
	bottom: auto;
	height: 40px;
}

.timeline-marker {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border-radius: 50%;
	background: transparent;
	border: 2px solid transparent;
	box-shadow: 0 0 0 0 rgba(24, 58, 43, 0);
	margin-top: 12px;
	z-index: 2;
	position: relative;
	flex-shrink: 0;
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease, border-color .3s ease, background .3s ease;
}

/* Idle milestones are simple dots; only the active one shows the crest. */
.timeline-marker::before {
	content: "";
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #176B3A;
	box-shadow: 0 0 0 4px #FFFDF5, 0 0 0 6px rgba(23, 107, 58, .16);
	transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.timeline-item.is-featured .timeline-marker::before {
	background: #D6B63C;
	box-shadow: 0 0 0 4px #FFFDF5, 0 0 0 6px rgba(214, 182, 60, .24);
}

.timeline-item.is-active .timeline-marker {
	background: #FFFDF5;
	border-color: #176B3A;
	box-shadow: 0 0 0 2px #FFFDF5, 0 6px 16px rgba(24, 58, 43, .18);
}

.timeline-item.is-featured.is-active .timeline-marker {
	border-color: #D6B63C;
	box-shadow: 0 0 0 2px #FFFDF5, 0 0 0 4px rgba(214, 182, 60, .24), 0 7px 18px rgba(214, 182, 60, .24);
}

.timeline-item.is-active .timeline-marker::before {
	opacity: 0;
	transform: scale(.35);
}

.timeline-marker-logo {
	position: absolute;
	inset: 0;
	display: grid;
	width: 36px;
	height: 36px;
	margin: auto;
	place-items: center;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 28%, #FFFFFF 0%, #F4F8F2 70%, #E8F1E8 100%);
	opacity: 0;
	transform: scale(.55);
	transition: opacity .28s ease, transform .38s cubic-bezier(.34, 1.56, .64, 1);
}

.timeline-item.is-active .timeline-marker-logo {
	opacity: 1;
	transform: scale(1);
}

.timeline-marker-logo img {
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain;
	transform-origin: center bottom;
}

/* Text column */
.timeline-text-col {
	min-width: 0;
	padding-top: 14px;
}

.timeline-year {
	display: inline-block;
	padding: 3px 10px;
	background: #E8F1E8;
	color: #183A2B;
	font-size: 12px;
	font-weight: 600;
	border-radius: 4px;
	margin-bottom: 8px;
	letter-spacing: 0.3px;
}

.timeline-year.is-gold {
	background: #F8F1D7;
	color: #183A2B;
}

.timeline-title {
	font-family: var(--font);
	font-size: 19px;
	font-weight: 600;
	color: #183A2B;
	margin: 0 0 8px;
	line-height: 1.3;
}

.timeline-preview {
	font-size: 13px;
	line-height: 1.6;
	color: #4C6655;
	margin: 0 0 10px;
}

/* Full story (expand/collapse) */
.timeline-full {
	overflow: hidden;
	transition: max-height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
	            opacity 0.3s ease;
	max-height: 0;
	opacity: 0;
}

.timeline-full.is-open {
	max-height: 2000px;
	opacity: 1;
}

.timeline-full-inner {
	font-size: 13px;
	line-height: 1.65;
	color: #183A2B;
	padding: 12px 0 4px;
	border-top: 1px solid #E8F1E8;
	margin-top: 4px;
}

.timeline-full-inner p {
	margin: 0 0 10px;
}

.timeline-full-inner p:last-child {
	margin-bottom: 0;
}

/* Read More / Read Less toggle */
.timeline-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #176B3A;
	cursor: pointer;
	transition: color 0.2s;
}

.timeline-toggle:hover {
	color: #2E8B57;
}

.timeline-toggle:focus-visible {
	outline: 2px solid #D6B63C;
	outline-offset: 2px;
	border-radius: 2px;
}

.timeline-toggle .toggle-icon {
	display: inline-flex;
	transition: transform 0.3s ease;
}

.timeline-toggle .toggle-icon svg.icon {
	width: 12px;
	height: 12px;
}

.timeline-toggle[aria-expanded="true"] .toggle-icon {
	transform: rotate(180deg);
}

/* --- Closing section --- */
.history-closing {
	margin-top: 52px;
	padding-top: 36px;
	border-top: 1px solid #E8F1E8;
	text-align: center;
}

.history-closing-heading {
	font-family: var(--font);
	font-size: 22px;
	font-weight: 600;
	color: #183A2B;
	margin: 0 0 8px;
}

.history-closing .gold-divider {
	margin: 0 auto 14px;
}

.history-closing-text {
	font-size: 14px;
	line-height: 1.6;
	color: #4C6655;
	margin: 0 auto 20px;
	max-width: 520px;
}

.history-closing .button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #176B3A;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 6px;
	text-decoration: none;
	transition: background 0.2s;
}

.history-closing .button:hover {
	background: #2E8B57;
	color: #FFFFFF;
}

.history-closing .button svg.icon {
	width: 14px;
	height: 14px;
}

/* ============================================================
   SECTION REVEAL (inherit from site.css)
   ============================================================ */
.history-body {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
	            transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.history-body.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet landscape */
@media (max-width: 1100px) {
	.history-layout {
		grid-template-columns: 230px minmax(0, 1fr);
		gap: 24px;
	}

	.timeline-item {
		grid-template-columns: 1fr 40px 1.2fr;
		gap: 0 18px;
	}

	.history-intro-heading {
		font-size: 23px;
	}
}

/* Tablet portrait */
@media (max-width: 900px) {
	.history-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.history-sidebar {
		position: static;
	}

	.history-sidebar .about-sidebar {
		margin-bottom: 8px;
	}

	.heritage-card {
		display: none;
	}

	.timeline-item {
		grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1.15fr);
		gap: 0 14px;
	}

	/* Keep the two-sided rhythm on tablets and phones: image left/right, line centre. */
	.timeline-image-col {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0;
	}

	.timeline-line-col {
		grid-column: 2;
		grid-row: 1;
	}

	.timeline-text-col {
		grid-column: 3;
		grid-row: 1;
		padding-top: 0;
	}

	.timeline-item:nth-child(even) .timeline-image-col { grid-column: 3; }
	.timeline-item:nth-child(even) .timeline-line-col { grid-column: 2; }
	.timeline-item:nth-child(even) .timeline-text-col { grid-column: 1; }

	.history-intro-heading {
		font-size: 22px;
	}
}

/* Mobile */
@media (max-width: 600px) {
	.history-body {
		padding: 24px 0 40px;
	}

	.timeline-item {
		grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr);
		gap: 0 10px;
		margin-bottom: 32px;
	}

	.timeline-image-col { grid-column: 1; }
	.timeline-line-col { grid-column: 2; }
	.timeline-text-col { grid-column: 3; }
	.timeline-item:nth-child(even) .timeline-image-col { grid-column: 3; }
	.timeline-item:nth-child(even) .timeline-text-col { grid-column: 1; }

	.timeline-line {
		width: 2px;
	}

	.timeline-marker {
		width: 34px;
		height: 34px;
		margin-top: 8px;
	}

	.timeline-marker::before { width: 12px; height: 12px; }
	.timeline-marker-logo { width: 29px; height: 29px; }
	.timeline-marker-logo img { width: 26px; height: 26px; }

	.timeline-title {
		font-size: 17px;
	}

	.timeline-year {
		font-size: 11px;
	}

	.timeline-preview {
		font-size: 13px;
	}

	.history-intro-heading {
		font-size: 20px;
	}

	.history-closing-heading {
		font-size: 19px;
	}

	.hero-breadcrumb ol {
		font-size: 11px;
	}

	.heritage-card {
		display: none;
	}
}

/* Very small screens */
@media (max-width: 380px) {
	.timeline-item {
		grid-template-columns: 24px 1fr;
		gap: 0 10px;
	}

	.timeline-marker {
		width: 30px;
		height: 30px;
	}

	.timeline-marker::before { width: 11px; height: 11px; }
	.timeline-marker-logo { width: 26px; height: 26px; }
	.timeline-marker-logo img { width: 23px; height: 23px; }
}

/* Alternating timeline images (image left, right, left, right) */
@media (min-width: 901px) {
	.timeline-item:nth-child(even) .timeline-image-col { grid-column: 3; grid-row: 1; }
	.timeline-item:nth-child(even) .timeline-line-col  { grid-column: 2; grid-row: 1; }
	.timeline-item:nth-child(even) .timeline-text-col  { grid-column: 1; grid-row: 1; }
}
/* Gentle stagger for the fade-in */
.timeline-item.is-visible { transition-delay: 0.04s; }

/* Timeline scroll animation: line fills downward, markers pop one by one */
.timeline-image-frame { overflow: hidden; border-radius: 8px; background: #E8F1E8; border: 1px solid transparent; transition: box-shadow .35s ease, border-color .35s ease, transform .45s cubic-bezier(.22,.8,.2,1); }
.timeline-image-frame img { transform: scale(1.035); transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; }
.timeline-item.is-visible .timeline-image-frame img { transform: scale(1); }

/* 10% smaller photographs, anchored to the outer edge of each row */
.timeline-figure { width: 90%; }
.timeline-item:nth-child(odd) .timeline-figure { margin-right: auto; margin-left: 0; }
.timeline-item:nth-child(even) .timeline-figure { margin-left: auto; margin-right: 0; }

/* Directional scroll entrance: pictures arrive from their own side, copy follows */
.timeline-image-col { opacity: .001; transform: translate3d(-22px, 8px, 0); transition: opacity .6s ease, transform .7s cubic-bezier(.22,.8,.2,1); }
.timeline-item:nth-child(even) .timeline-image-col { transform: translate3d(22px, 8px, 0); }
.timeline-item.is-visible .timeline-image-col { opacity: 1; transform: translate3d(0, 0, 0); }

.timeline-text-col { opacity: .001; transform: translate3d(0, 16px, 0); transition: opacity .6s ease .12s, transform .7s cubic-bezier(.22,.8,.2,1) .12s; }
.timeline-item.is-visible .timeline-text-col { opacity: 1; transform: translate3d(0, 0, 0); }

/* Hover (pointer devices only): lift the photo, warm the marker and heading */
@media (hover: hover) and (pointer: fine) {
	.timeline-item:hover .timeline-image-frame {
		transform: translateY(-4px);
		border-color: rgba(214, 182, 60, .75);
		box-shadow: 0 16px 34px rgba(24, 58, 43, .17);
	}
	.timeline-item:hover .timeline-image-frame img {
		transform: scale(1.06);
		transition: transform .5s cubic-bezier(.22,.8,.2,1);
	}
	.timeline-item:hover .timeline-year {
		background: #D6B63C;
		color: #183A2B;
	}
	.timeline-item:hover .timeline-title { color: #176B3A; }
	.timeline-item:hover .timeline-marker {
		transform: scale(1.12) translateY(-2px);
		box-shadow: 0 0 0 2px #FFFDF5, 0 0 0 5px rgba(214, 182, 60, .28), 0 9px 20px rgba(24, 58, 43, .2);
	}
	.timeline-item:hover .timeline-toggle { color: #2E8B57; }
	.timeline-item:hover .timeline-toggle .toggle-icon { transform: translateY(2px); }
}
.timeline-year, .timeline-title, .timeline-toggle, .timeline-toggle .toggle-icon { transition: background .25s ease, color .25s ease, transform .25s ease; }

.timeline-line { transform: scaleY(0); transform-origin: top center; transition: transform 1.05s cubic-bezier(0.22, 0.61, 0.36, 1); }
.timeline-item.is-visible .timeline-line { transform: scaleY(1); }

.timeline-marker { transform: scale(0.55); opacity: 0.45; transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.45s ease, box-shadow 0.45s ease; }
.timeline-item.is-visible .timeline-marker { transform: scale(1); opacity: 1; }
.timeline-marker::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #D6B63C; opacity: 0; pointer-events: none; }
.timeline-item.is-active .timeline-marker::after { animation: timelineMarkerPulse 1.8s ease-out 0.15s 1; }
@keyframes timelineMarkerPulse {
	0%   { opacity: 0.6; transform: scale(0.82); }
	70%  { opacity: 0.14; transform: scale(1.55); }
	100% { opacity: 0; transform: scale(1.8); }
}

/* Each crest hops in when its milestone becomes the active one */
.timeline-item.is-active .timeline-marker-logo { animation: timelineCrestHop 1.5s cubic-bezier(.28,.72,.3,1) .08s both; }
.timeline-item.is-active .timeline-marker-logo img { animation: timelineCrestBob 4.8s ease-in-out 1.7s infinite; }
@keyframes timelineCrestHop {
	0%   { transform: translateY(0) scale(1); }
	28%  { transform: translateY(-10px) scale(1.035); }
	50%  { transform: translateY(0) scale(0.985); }
	66%  { transform: translateY(-4px) scale(1.012); }
	82%  { transform: translateY(0) scale(0.996); }
	100% { transform: translateY(0) scale(1); }
}
@keyframes timelineCrestBob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
	.timeline-image-frame img { transform: none; transition: none; }
	.timeline-line { transform: none; transition: none; }
	.timeline-marker { transform: none; opacity: 1; transition: none; }
	.timeline-marker::after { animation: none; }
	.timeline-image-col, .timeline-text-col { opacity: 1 !important; transform: none !important; transition: none !important; }
	.timeline-item:hover .timeline-image-frame img { transform: none; }
	.timeline-item.is-active .timeline-marker-logo,
	.timeline-item.is-active .timeline-marker-logo img { animation: none !important; transform: none !important; }
}

@media (max-width: 600px) {
	/* Keep the smaller photograph on phones while preserving the outer-edge alignment */
	.timeline-figure { width: 92%; }
	.timeline-image-col { transform: translate3d(-12px, 6px, 0); }
	.timeline-item:nth-child(even) .timeline-image-col { transform: translate3d(12px, 6px, 0); }
}