/**
 * Inoforest Timeline
 *
 * Contents
 * 1. Defaults (variables)
 * 2. Line, items and dots (alternate layout); line styles, one milestone per row, icon markers
 * 3. Cards and pointers
 * 4. Year, title, text
 * 5. Line on the left
 * 6. Editor hint, reduced motion, phones
 *
 * Colours read the Design System (--inoforest-color-*) with fallbacks. The defaults sit in :where() blocks (no
 * specificity), so the Style tab controls, which set the same variables or properties on the widget, always win.
 */

/* 1. Defaults ------------------------------------------------------------------ */
:where(.inoforest-timeline) {
	--ino-tl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ino-tl-primary: var(--inoforest-color-primary, #0b7a75);
	--ino-tl-accent: var(--inoforest-color-accent, #ff6a3d);
	--ino-tl-line: var(--ino-tl-primary);
	--ino-tl-space: 60px;
	--ino-tl-overlap: -70px;
	--ino-tl-gap: 30px;
	--ino-tl-dot-size: 22px;
	--ino-tl-dot-top: 38px;
	--ino-tl-dot-bg: #fff;
	--ino-tl-dot: var(--ino-tl-primary);
	--ino-tl-dot-halo: var(--inoforest-color-primary-light, #e5f3f2);
	--ino-tl-dot-hover: var(--ino-tl-accent);
	--ino-tl-dot-halo-hover: var(--inoforest-color-accent-light, #fff0eb);
	--ino-tl-card-bg: var(--inoforest-color-background, #fff);
	--ino-tl-card-border: var(--inoforest-color-border, #e5ebef);
	--ino-tl-card-hover_bg: var(--ino-tl-card-bg);
	--ino-tl-card-hover_border: transparent;
	--ino-tl-pointer-top: 40px;
	--ino-tl-lift: -4px;
	--ino-tl-year-odd-color: #fff;
	--ino-tl-year-odd-bg: var(--ino-tl-primary);
	--ino-tl-year-even-color: #fff;
	--ino-tl-year-even-bg: var(--ino-tl-accent);
	--ino-tl-title-color: var(--inoforest-color-heading, #0d1b2a);
	--ino-tl-text-color: var(--inoforest-color-text, #5a6a79);
}

:where(.inoforest-timeline[data-year-style="text"]) {
	--ino-tl-year-odd-color: var(--ino-tl-primary);
	--ino-tl-year-even-color: var(--ino-tl-accent);
}

/* 2. Line, items and dots ---------------------------------------------------------- */
.inoforest-timeline {
	position: relative;
	max-width: 1040px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* The line: fades in and out at both ends. */
.inoforest-timeline::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	content: "";
	background: linear-gradient(180deg, transparent, var(--ino-tl-line) 6%, var(--ino-tl-line) 94%, transparent);
	opacity: 0.35;
	transform: translateX(-50%);
}

.inoforest-timeline .inoforest-timeline__item {
	position: relative;
	width: 50%;
	margin: 0;
	padding: 0 var(--ino-tl-space) 0 0;
}

.inoforest-timeline .inoforest-timeline__item + .inoforest-timeline__item {
	margin-top: var(--ino-tl-overlap);
}

.inoforest-timeline .inoforest-timeline__item:nth-child(even) {
	margin-left: 50%;
	padding: 0 0 0 var(--ino-tl-space);
}

.inoforest-timeline__item::before {
	position: absolute;
	top: var(--ino-tl-dot-top);
	right: calc(var(--ino-tl-dot-size) / -2);
	z-index: 1;
	box-sizing: border-box;
	width: var(--ino-tl-dot-size);
	height: var(--ino-tl-dot-size);
	content: "";
	background: var(--ino-tl-dot-bg);
	border: 5px solid var(--ino-tl-dot);
	border-radius: 50%;
	box-shadow: 0 0 0 6px var(--ino-tl-dot-halo);
	transition: border-color 0.3s var(--ino-tl-ease), box-shadow 0.3s var(--ino-tl-ease);
}

.inoforest-timeline__item:nth-child(even)::before {
	right: auto;
	left: calc(var(--ino-tl-dot-size) / -2);
}

.inoforest-timeline__item:hover::before {
	border-color: var(--ino-tl-dot-hover);
	box-shadow: 0 0 0 6px var(--ino-tl-dot-halo-hover);
}

/* Solid or dashed line (Line style): full strength, no fade. */
.inoforest-timeline:is([data-line="solid"], [data-line="dashed"])::before {
	width: 0;
	background: none;
	border-left: 2px solid var(--ino-tl-line);
	opacity: 1;
}

.inoforest-timeline[data-line="dashed"]::before {
	border-left-style: dashed;
}

/* One milestone per row (Cards): the space between cards instead of the overlap. */
.inoforest-timeline[data-cards="rows"] .inoforest-timeline__item + .inoforest-timeline__item {
	margin-top: var(--ino-tl-gap);
}

/* Icon markers (Marker: Icon in a circle): the dot's place and size, so the line and the left layout follow them. */
.inoforest-timeline[data-marker="icon"] {
	--ino-tl-dot-size: var(--ino-tl-marker-size, 56px);
	--ino-tl-dot-top: var(--ino-tl-marker-top, 18px);
}

.inoforest-timeline[data-marker="icon"] .inoforest-timeline__item::before {
	display: none;
}

.inoforest-timeline .inoforest-timeline__marker {
	position: absolute;
	top: var(--ino-tl-dot-top);
	right: calc(var(--ino-tl-dot-size) / -2);
	z-index: 1;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: var(--ino-tl-dot-size);
	height: var(--ino-tl-dot-size);
	font-size: var(--ino-tl-marker-icon, 22px);
	line-height: 1;
	color: var(--ino-tl-marker-color, #fff);
	background-color: var(--ino-tl-marker-bg, var(--ino-tl-primary));
	border: var(--ino-tl-marker-ring, 6px) solid var(--ino-tl-marker-ring-color, var(--inoforest-color-surface, #f4f8f8));
	border-radius: 50%;
}

.inoforest-timeline__marker svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.inoforest-timeline .inoforest-timeline__item:nth-child(even) .inoforest-timeline__marker {
	right: auto;
	left: calc(var(--ino-tl-dot-size) / -2);
}

/* 3. Cards and pointers ------------------------------------------------------------ */
.inoforest-timeline__card {
	position: relative;
	padding: 30px 32px;
	background-color: var(--ino-tl-card-bg);
	border: 1px solid var(--ino-tl-card-border);
	border-radius: 24px;
	transition: transform 0.3s var(--ino-tl-ease), box-shadow 0.3s var(--ino-tl-ease), border-color 0.3s var(--ino-tl-ease), background-color 0.3s var(--ino-tl-ease);
}

.inoforest-timeline__item:hover .inoforest-timeline__card {
	--ino-tl-card-bg: var(--ino-tl-card-hover_bg);
	--ino-tl-card-border: var(--ino-tl-card-hover_border);
	box-shadow: 0 14px 40px rgba(13, 27, 42, 0.1);
	transform: translateY(var(--ino-tl-lift));
}

/* The pointer: a square turned 45°, showing two borders towards the line. */
.inoforest-timeline[data-pointer] .inoforest-timeline__card::after {
	position: absolute;
	top: var(--ino-tl-pointer-top);
	right: -9px;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	content: "";
	background-color: inherit;
	border-top: 1px solid var(--ino-tl-card-border);
	border-right: 1px solid var(--ino-tl-card-border);
	transform: rotate(45deg);
	transition: border-color 0.3s var(--ino-tl-ease), background-color 0.3s var(--ino-tl-ease);
}

.inoforest-timeline[data-pointer] .inoforest-timeline__item:nth-child(even) .inoforest-timeline__card::after {
	right: auto;
	left: -9px;
	transform: rotate(-135deg);
}

/* Text towards the line: cards left of it align their text to the right. */
.inoforest-timeline[data-layout="alternate"][data-align="line"] .inoforest-timeline__item:nth-child(odd) .inoforest-timeline__card {
	text-align: right;
}

/* 4. Year, title, text ---------------------------------------------------------------- */
.inoforest-timeline .inoforest-timeline__year {
	display: inline-block;
	margin-bottom: 14px;
	padding: 6px 16px;
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--ino-tl-year-odd-color);
	background-color: var(--ino-tl-year-odd-bg);
	border-radius: 999px;
}

.inoforest-timeline .inoforest-timeline__item:nth-child(even) .inoforest-timeline__year {
	color: var(--ino-tl-year-even-color);
	background-color: var(--ino-tl-year-even-bg);
}

.inoforest-timeline[data-year-style="text"] .inoforest-timeline__item .inoforest-timeline__year {
	padding: 0;
	font-size: 1.9rem;
	letter-spacing: -0.01em;
	background: none;
}

.inoforest-timeline .inoforest-timeline__title {
	margin: 0 0 8px;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--ino-tl-title-color);
}

.inoforest-timeline .inoforest-timeline__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--ino-tl-text-color);
}

/* 5. Line on the left ------------------------------------------------------------------ */
.inoforest-timeline[data-layout="left"] {
	--ino-tl-space: 54px;
}

.inoforest-timeline[data-layout="left"]::before {
	left: calc(var(--ino-tl-dot-size) / 2);
	transform: none;
}

.inoforest-timeline[data-layout="left"] .inoforest-timeline__item,
.inoforest-timeline[data-layout="left"] .inoforest-timeline__item:nth-child(even) {
	width: 100%;
	margin-left: 0;
	padding: 0 0 0 var(--ino-tl-space);
}

.inoforest-timeline[data-layout="left"] .inoforest-timeline__item + .inoforest-timeline__item {
	margin-top: var(--ino-tl-gap);
}

.inoforest-timeline[data-layout="left"] .inoforest-timeline__item::before,
.inoforest-timeline[data-layout="left"] .inoforest-timeline__item:nth-child(even)::before,
.inoforest-timeline[data-layout="left"] .inoforest-timeline__marker,
.inoforest-timeline[data-layout="left"] .inoforest-timeline__item:nth-child(even) .inoforest-timeline__marker {
	right: auto;
	left: 0;
}

.inoforest-timeline[data-layout="left"][data-pointer] .inoforest-timeline__card::after,
.inoforest-timeline[data-layout="left"][data-pointer] .inoforest-timeline__item:nth-child(even) .inoforest-timeline__card::after {
	right: auto;
	left: -9px;
	transform: rotate(-135deg);
}

/* 6. Editor hint, reduced motion, phones ------------------------------------------------ */
.inoforest-timeline__hint {
	margin: 0;
	padding: 16px;
	font-size: 0.85rem;
	text-align: center;
	border: 1px dashed currentColor;
	opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
	.inoforest-timeline__item::before,
	.inoforest-timeline__card,
	.inoforest-timeline[data-pointer] .inoforest-timeline__card::after {
		transition: none;
	}
}

/* Phones: one column whatever the layout, the line on the left. */
@media (max-width: 767px) {
	:where(.inoforest-timeline) {
		--ino-tl-gap: 24px;
		--ino-tl-dot-top: 30px;
		--ino-tl-pointer-top: 33px;
	}

	.inoforest-timeline,
	.inoforest-timeline[data-layout="left"] {
		--ino-tl-space: 44px;
	}

	.inoforest-timeline::before {
		left: calc(var(--ino-tl-dot-size) / 2);
		transform: none;
	}

	.inoforest-timeline .inoforest-timeline__item,
	.inoforest-timeline .inoforest-timeline__item:nth-child(even) {
		width: 100%;
		margin-left: 0;
		padding: 0 0 0 var(--ino-tl-space);
	}

	.inoforest-timeline .inoforest-timeline__item + .inoforest-timeline__item {
		margin-top: var(--ino-tl-gap);
	}

	.inoforest-timeline__item::before,
	.inoforest-timeline__item:nth-child(even)::before,
	.inoforest-timeline .inoforest-timeline__marker,
	.inoforest-timeline .inoforest-timeline__item:nth-child(even) .inoforest-timeline__marker {
		right: auto;
		left: 0;
	}

	.inoforest-timeline[data-align="line"] .inoforest-timeline__item:nth-child(odd) .inoforest-timeline__card {
		text-align: left;
	}

	.inoforest-timeline__card {
		padding: 24px 22px;
	}

	.inoforest-timeline .inoforest-timeline__text {
		font-size: 0.9375rem;
	}

	.inoforest-timeline[data-pointer] .inoforest-timeline__card::after,
	.inoforest-timeline[data-pointer] .inoforest-timeline__item:nth-child(even) .inoforest-timeline__card::after {
		right: auto;
		left: -9px;
		transform: rotate(-135deg);
	}

	.inoforest-timeline[data-year-style="text"] .inoforest-timeline__item .inoforest-timeline__year {
		font-size: 1.5rem;
	}
}