/**
 * Timeline v1.2
 *
 * Layout per item:
 *   Top dot (on horizontal line)
 *   → vertical stem
 *   → small dot OR icon badge
 *   → date → title → description
 *
 * Breakpoints:
 *   > 900px  → horizontal grid
 *   ≤ 900px → horizontal scroll + snap
 *   ≤ 600px → vertical layout (line rotates to left rail)
 */

.azoria-timeline {
	--azt-line-color: #1f2937;
	--azt-dot-color: #1f2937;
	--azt-stem-color: #1f2937;
	--azt-title-color: #0b0d10;
	--azt-desc-color: #6b7280;
	--azt-date-color: #9ca3af;

	--azt-dot-size: 12px;
	--azt-dot-small: 6px;
	--azt-stem-height: 32px;
	--azt-line-weight: 1px;
	--azt-stem-weight: 1px;
	--azt-content-gap: 14px;
	--azt-gap: 32px;
	--azt-col-min: 220px;

	/* Icon badge */
	--azt-icon-badge-size: 36px;
	--azt-icon-size: 16px;
	--azt-icon-color: #1f2937;
	--azt-icon-bg: #ffffff;
	--azt-icon-border-color: #1f2937;
	--azt-icon-border-width: 1.5px;

	/* Content spacing */
	--azt-date-spacing: 12px;
	--azt-title-spacing: 12px;

	font-family: inherit;
	color: var(--azt-title-color);
	margin: 0;
	padding: 28px 0 12px;
	position: relative;
	box-sizing: border-box;
}

.azoria-timeline *,
.azoria-timeline *::before,
.azoria-timeline *::after { box-sizing: border-box; }

/* ---------- scroller ---------- */
.azoria-timeline__scroller {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: #d1d5db transparent;
	padding-bottom: 8px;
}
.azoria-timeline__scroller::-webkit-scrollbar { height: 6px; }
.azoria-timeline__scroller::-webkit-scrollbar-track { background: transparent; }
.azoria-timeline__scroller::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* ---------- track + horizontal line ---------- */
.azoria-timeline__track {
	position: relative;
	min-width: 100%;
}

.azoria-timeline__line {
	position: absolute;
	/* PHP-derived fallback avoids typed CSS arithmetic in older Safari. */
	top: var(--azt-line-top, 5.5px);
	left: 0;
	right: 0;
	height: var(--azt-line-weight);
	background: var(--azt-line-color);
	z-index: 1;
}

/* ---------- items grid ---------- */
.azoria-timeline__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(var(--azt-col-min), 1fr);
	gap: var(--azt-gap);
	position: relative;
	z-index: 2;
}

.azoria-timeline__item {
	position: relative;
	scroll-snap-align: start;
	min-width: 0;
	opacity: 0;
	transform: translateY(8px);
	animation: aztFadeIn 0.5s ease-out forwards;
}
.azoria-timeline__item:nth-child(2) { animation-delay: 0.08s; }
.azoria-timeline__item:nth-child(3) { animation-delay: 0.16s; }
.azoria-timeline__item:nth-child(4) { animation-delay: 0.24s; }
.azoria-timeline__item:nth-child(5) { animation-delay: 0.32s; }
.azoria-timeline__item:nth-child(6) { animation-delay: 0.40s; }
.azoria-timeline__item:nth-child(n+7) { animation-delay: 0.48s; }

@keyframes aztFadeIn {
	to { opacity: 1; transform: translateY(0); }
}

/* ---------- connector: dots + stem ---------- */
.azoria-timeline__dot {
	background: var(--azt-dot-color);
	border-radius: 50%;
	position: absolute;
}

.azoria-timeline__dot--top {
	top: 0;
	left: 0;
	width: var(--azt-dot-size);
	height: var(--azt-dot-size);
	z-index: 3;
}

.azoria-timeline__stem {
	position: absolute;
	top: var(--azt-dot-size);
	left: var(--azt-stem-left, 5.5px);
	width: var(--azt-stem-weight);
	height: var(--azt-stem-height);
	background: var(--azt-stem-color);
}

.azoria-timeline__dot--small {
	top: calc(var(--azt-dot-size) + var(--azt-stem-height));
	left: var(--azt-small-left, 3px);
	width: var(--azt-dot-small);
	height: var(--azt-dot-small);
}

/* ---------- icon badge ---------- */
.azoria-timeline__icon-badge {
	position: absolute;
	top: calc(var(--azt-dot-size) + var(--azt-stem-height));
	left: var(--azt-badge-left, -12px);
	width: var(--azt-icon-badge-size);
	height: var(--azt-icon-badge-size);
	border-radius: 50%;
	background: var(--azt-icon-bg);
	border: var(--azt-icon-border-width) solid var(--azt-icon-border-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--azt-icon-color);
	z-index: 3;
	transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.azoria-timeline__icon-badge i,
.azoria-timeline__icon-badge svg {
	width: var(--azt-icon-size);
	height: var(--azt-icon-size);
	font-size: var(--azt-icon-size);
	line-height: 1;
	color: var(--azt-icon-color);
	fill: currentColor;
}

.azoria-timeline__item:hover .azoria-timeline__icon-badge {
	transform: scale(1.06);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* When the whole timeline has any icons, hide the small dot on items that DO have icons,
   and reserve badge-sized space for ALL items so content rows align. */
.azoria-timeline__item--has-icon .azoria-timeline__dot--small { display: none; }

.azoria-timeline--has-icons .azoria-timeline__dot--small {
	/* re-center the small dot inside the badge-sized space */
	top: calc(
		var(--azt-dot-size) +
		var(--azt-stem-height) +
		var(--azt-icon-small-offset, 15px)
	);
}

/* ---------- content ---------- */
.azoria-timeline__content {
	padding-top: calc(
		var(--azt-dot-size) +
		var(--azt-stem-height) +
		var(--azt-dot-small) +
		var(--azt-content-gap)
	);
}

.azoria-timeline--has-icons .azoria-timeline__content {
	padding-top: calc(
		var(--azt-dot-size) +
		var(--azt-stem-height) +
		var(--azt-icon-badge-size) +
		var(--azt-content-gap)
	);
}

.azoria-timeline__date {
	display: block;
	font-size: 12px;
	letter-spacing: 0.09em;
	color: var(--azt-date-color);
	font-weight: 500;
	text-transform: uppercase;
	margin: 0 0 var(--azt-date-spacing) 0;
}

.azoria-timeline__title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 var(--azt-title-spacing) 0;
	color: var(--azt-title-color);
	letter-spacing: -0.01em;
}

.azoria-timeline__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--azt-desc-color);
	margin: 0;
}

/* ---------- scroll hint ---------- */
.azoria-timeline__hint {
	display: none;
	text-align: center;
	font-size: 11px;
	color: var(--azt-desc-color);
	margin-top: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.7;
}
.azoria-timeline.is-overflowing .azoria-timeline__hint { display: block; }

/* -------------------------------------------------------------------- */
/*  Tablet                                                              */
/* -------------------------------------------------------------------- */
@media (max-width: 900px) {
	.azoria-timeline {
		--azt-col-min: 240px;
		--azt-gap: 28px;
	}
}

/* -------------------------------------------------------------------- */
/*  Mobile — vertical layout                                            */
/* -------------------------------------------------------------------- */
@media (max-width: 600px) {
	.azoria-timeline { padding: 12px 0; }

	.azoria-timeline.is-overflowing .azoria-timeline__hint { display: none; }

	.azoria-timeline__scroller {
		overflow: visible;
		padding-bottom: 0;
	}

	.azoria-timeline__track {
		padding-left: calc(var(--azt-icon-badge-size) + 12px);
	}

	.azoria-timeline__line {
		top: 6px;
		bottom: 6px;
		left: var(--azt-mobile-line-left, 5.5px);
		right: auto;
		width: var(--azt-line-weight);
		height: auto;
	}

	.azoria-timeline__items {
		display: flex;
		flex-direction: column;
		gap: 36px;
	}

	.azoria-timeline__dot--top {
		top: 6px;
		left: var(--azt-mobile-dot-left, -48px);
	}

	.azoria-timeline__stem,
	.azoria-timeline__dot--small { display: none; }

	.azoria-timeline__icon-badge {
		top: 0;
		left: var(--azt-mobile-badge-left, -60px);
	}

	.azoria-timeline__content,
	.azoria-timeline--has-icons .azoria-timeline__content { padding-top: 0; }

	.azoria-timeline__title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.azoria-timeline__scroller { scroll-behavior: auto; }
	.azoria-timeline__item {
		opacity: 1;
		transform: none;
		animation: none;
	}
	.azoria-timeline__icon-badge { transition: none; }
}