/**
 * Grogol History Timeline styles.
 */

.grogol-history {
	--gh-bg: transparent;
	--gh-ink: #1c2a22;
	--gh-muted: #5a6b60;
	--gh-line: #c5d1c6;
	--gh-accent: #2f6b4f;
	--gh-accent-soft: #d9ebe1;
	--gh-year: #8a6a2f;
	--gh-max: 720px;
	--gh-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--gh-progress: 0;
	--gh-year-w: 5rem;
	--gh-rail-w: 0.75rem;
	--gh-col-gap: 0.875rem;
	/* Center of the rail column (year + gap + half rail) */
	--gh-rail-center: calc(var(--gh-year-w) + var(--gh-col-gap) + (var(--gh-rail-w) / 2));

	box-sizing: border-box;
	padding: 0;
	font-family: "Figtree", sans-serif;
	color: var(--gh-ink);
	line-height: 1.65;
	background: none;
}

.grogol-history *,
.grogol-history *::before,
.grogol-history *::after {
	box-sizing: border-box;
}

.grogol-history__inner {
	max-width: var(--gh-max);
	margin: 0 auto;
}

.grogol-history__intro {
	margin-bottom: clamp(3rem, 7vw, 4.5rem);
}

.grogol-history__eyebrow {
	margin: 0 0 0.85rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gh-accent);
}

.grogol-history__title {
	margin: 0 0 1rem;
	font-family: "Fraunces", serif;
	font-optical-sizing: auto;
	font-weight: 650;
	font-size: clamp(2rem, 5.5vw, 3.15rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--gh-ink);
}

.grogol-history__lead {
	margin: 0 0 1.75rem;
	max-width: 28ch;
	font-family: "Fraunces", serif;
	font-weight: 500;
	font-size: clamp(1.2rem, 2.8vw, 1.45rem);
	line-height: 1.35;
	color: var(--gh-year);
}

.grogol-history__prose {
	margin: 0;
	color: var(--gh-muted);
	font-size: 1.05rem;
}

.grogol-history__prose + .grogol-history__prose {
	margin-top: 1rem;
}

.grogol-history__timeline {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

.grogol-history__line {
	position: absolute;
	left: var(--gh-rail-center);
	top: 0.4rem;
	bottom: 0.4rem;
	width: 2px;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--gh-line);
	opacity: 0.55;
	overflow: hidden;
	pointer-events: none;
	transform: translateX(-50%);
}

.grogol-history__line-progress {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--gh-accent);
	transform: scaleY(var(--gh-progress));
	transform-origin: top center;
	will-change: transform;
}

.grogol-history__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--gh-year-w) var(--gh-rail-w) 1fr;
	column-gap: var(--gh-col-gap);
	align-items: start;
	padding: 0 0 3rem;
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 0.7s var(--gh-ease),
		transform 0.7s var(--gh-ease);
}

.grogol-history__item.is-visible {
	opacity: 1;
	transform: none;
}

.grogol-history__item:last-child {
	padding-bottom: 0;
}

.grogol-history__year {
	grid-column: 1;
	display: block;
	margin: 0;
	padding-top: 0.2rem;
	font-family: "Fraunces", serif;
	font-weight: 650;
	font-size: 1.05rem;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-align: right;
	color: var(--gh-year);
}

.grogol-history__dot {
	grid-column: 2;
	position: relative;
	z-index: 1;
	justify-self: center;
	align-self: start;
	display: block;
	width: var(--gh-rail-w);
	height: var(--gh-rail-w);
	margin-top: 0.35rem;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--gh-accent);
	box-shadow: 0 0 0 0 transparent;
	transform: scale(0);
	opacity: 0;
	transition:
		transform 0.55s var(--gh-ease),
		opacity 0.4s ease,
		box-shadow 0.55s var(--gh-ease),
		background-color 0.35s ease;
}

.grogol-history__item.is-visible .grogol-history__dot {
	transform: scale(1);
	opacity: 1;
	box-shadow: 0 0 0 4px var(--gh-accent-soft);
}

.grogol-history__item--now .grogol-history__dot,
.grogol-history__item.is-active .grogol-history__dot {
	background: var(--gh-accent);
}

.grogol-history__item.is-active .grogol-history__dot {
	animation: gh-dot-pulse 1.4s var(--gh-ease) 1;
}

@keyframes gh-dot-pulse {
	0% {
		box-shadow: 0 0 0 0 var(--gh-accent-soft);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(47, 107, 79, 0.18);
	}
	100% {
		box-shadow: 0 0 0 4px var(--gh-accent-soft);
	}
}

.grogol-history__body {
	grid-column: 3;
	min-width: 0;
	padding: 0;
}

.grogol-history__heading {
	margin: 0 0 0.65rem;
	font-family: "Figtree", sans-serif;
	font-weight: 500 !important;
	font-size: 20px !important;
	line-height: 1.25;
	color: var(--gh-ink);
}

.grogol-history__text {
	margin: 0;
	color: var(--gh-muted);
	font-size: 1.02rem;
}

.grogol-history__item--now .grogol-history__heading {
	color: var(--gh-accent);
}

@media (max-width: 719px) {
	.grogol-history {
		--gh-year-w: 3.5rem;
		--gh-col-gap: 0.65rem;
	}

	.grogol-history__year {
		font-size: 0.95rem;
	}
}

/* Elementor editor: always show items */
.elementor-editor-active .grogol-history__item {
	opacity: 1;
	transform: none;
}

.elementor-editor-active .grogol-history__dot {
	transform: scale(1);
	opacity: 1;
	box-shadow: 0 0 0 4px var(--gh-accent-soft);
}

.elementor-editor-active .grogol-history__timeline {
	--gh-progress: 1;
}