/*
release-timeline  250309
*/
.timeline {
	--c: var(--c-glo-bg);
	--c2: var(--c-glo-bg-mute);
	--c3: var(--c-050);
	padding-left: 0
}
.timeline > h2 {
	font-size: 150%;
	font-weight: 700;
	pointer-events: none;
	position: sticky;
	top: var(--glo-menu-height);
	z-index: 999;
	filter: drop-shadow(0 0 1px var(--c));
	text-shadow: 2px 2px 1px var(--c),2px -2px 1px var(--c),-2px 2px 1px var(--c),-2px -2px 1px var(--c),2px 2px 1px var(--c),2px -2px 1px var(--c),-2px 2px 1px var(--c),-2px -2px 1px var(--c);
	margin-bottom: .5em;
	padding-left: 1em
}
.month > h3 {
	padding-left: 1rem;
	margin-bottom: 0;
	text-transform: capitalize
}
.month {
	display: block;
	position: relative;
	padding: 1em 0;
	margin: 1em 0;
	order: 2;
	cursor: default
}
.month::after {
	content: '';
	background-color: var(--c);
	border: 2px solid var(--c2);
	border-radius: 1em;
	height: 1em;
	width: 1em;
	top: calc(-.5em - 1px);
	left: calc(50%);
	transition: background-color .25s
}
.month::before {
	content: '';
	display: block;
	border: 2px solid var(--c-0);
	border-top-color: var(--c2);
	border-radius: 0;
	bottom: calc(100% - 2px);
	left: 1em;
	width: calc(100% + 1em);
	z-index: -100
}
.timeline-grid {
	--w: 50%;
	display: grid;
	grid-template-columns: repeat(auto-fit,var(--w));
	align-items: end;
	overflow: hidden
}
.timeline-item {
	display: flex;
	align-items: end;
	flex-wrap: wrap
}
.timeline-cards {
	display: flex;
	background-image: linear-gradient(0deg,var(--c-glo-bg-10) 50%,var(--c-0) 100%);
	padding: .5em .25em .25em;
	border-radius: .5em;
	flex-wrap: wrap-reverse;
	position: relative;
	order: 1;
	margin-left: 1em;
	margin-bottom: .625em
}
.timeline-cards::after {
	content: '';
	border: .75em solid var(--c-0);
	border-top-color: var(--c-glo-bg-10);
	top: calc(100% - .125em);
	left: calc(50% - .75em)
}
.timeline-cards > a {
	--w: 164px;
	--h: 144px;
	margin-bottom: .5em;
	max-width: 50%
}
.timeline-cards > a:only-child {
	margin-right: auto;
	margin-left: auto
}
.empty {
	display: none;
	color: var(--c3);
	border-color: currentcolor
}
.empty .month,
.empty h3 {
	color: var(--c3);
	border-top-color: var(--c3)
}
.empty > .timeline-cards {
	opacity: 0
}
/* odd = 1 even = 2
.empty:nth-child(odd) + .timeline-item:not(.empty:nth-child(even)),
*/
.timeline-item.empty:first-child,
.timeline-item:not(.empty:nth-child(odd)) + .empty:nth-child(even) {
	display: inherit
}
@media
(min-width:768px)
{
	.timeline-grid {
		--w: calc(100% / 4)
	}
	.timeline-item.empty {
		display: inherit
	}
}
@media
(min-width:960px)
{
	.timeline-grid {
		--w: calc(100% / 6)
	}
}
@media
(min-width:1920px)
{
	.timeline {
		padding-left: .5em
	}
	.timeline .month::after {
		left: calc(50% - .25em)
	}
	.timeline .month::before {
		left: .5em
	}
	.timeline-grid {
		--w: calc(100% / 12)
	}
	.timeline-cards {
		padding: .25em .125em 0;
		margin-left: .5em
	}
}
@media
(pointer:fine)
{
	.timeline-item:not(.empty):hover > .timeline-cards::after {
		border-top-color: var(--c-050)
	}
	.timeline-item:not(.empty):hover > .timeline-cards {
		background-image: linear-gradient(0deg, var(--c-050) .5em,var(--c) 100%)
	}
	.timeline-item:not(.empty):hover > .month:after {
		background-color: var(--c-050);

	}
	.timeline-item:not(.empty):hover > .month > h3 {
		color: var(--c-glo-max);
	}
}
