/********************************************************/
/*
/*      History CSS
/*
/********************************************************/
.wp-block-cke-history.st:not(.revealed) :is(.entry, .active-year, .indicator-years span) {
	opacity: 0;
	pointer-events: none;
}

.wp-block-cke-history {
	display: contents;
}

.wp-block-cke-history > .wp-block-cover {
	margin-block: inherit;
}

.wp-block-cke-history > .wp-block-cover::after {
	z-index: 0;
}

.wp-block-cke-history > .wp-block-cover > .wp-block-cover__inner-container {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: repeat(3, max-content);
	justify-content: start;
	max-width: 45% !important;
	padding-block-start: var(--wp--preset--spacing--6);
	margin-inline: 57.5% auto !important;
}

.wp-block-cke-history > .wp-block-cover > .wp-block-cover__inner-container > * {
	grid-column: 1;
}

.wp-block-cke-history > .wp-block-cover > .wp-block-cover__inner-container > h2:first-child {
	grid-row: 1;
	max-width: 50%;
	margin-block: unset;
}

.wp-block-cke-history :is(.indicator-years, .wp-block-cover__inner-container > *) {
	z-index: 2;
}

/* Indicator years */
.wp-block-cke-history .indicator-years {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--0-75);
	position: absolute;
	top: 50%;
	left: calc(57.5% - var(--wp--preset--spacing--15));
	width: max-content;
	translate: 0 -50%;
}

.wp-block-cke-history .indicator-years span {
	width: max-content;
	line-height: normal;
	letter-spacing: 1px;
	color: var(--wp--custom--color--default--bg);
	cursor: pointer;
	transition: color .3s;
	user-select: none;
}

.wp-block-cke-history .indicator-years span:is(:hover, :focus, :active) {
	color: var(--wp--custom--color--default--focus);
}

.wp-block-cke-history .indicator-years span.active {
	color: var(--wp--custom--color--default--accent);
}

/* Active year */
.wp-block-cke-history .active-year {
	--height: 125px;
	
	grid-row: 2;
	width: max-content;
	height: var(--height);
	max-height: 80svh;
	display: flex;
	/* justify-content: center; */
	margin-block-start: var(--wp--preset--spacing--1-5);
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}

.wp-block-cke-history .active-year > h2 {
	--digit: 0;
	--max-width: 100%;
	--gap: var(--wp--preset--spacing--1);
	
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	max-width: var(--max-width);
	height: 100%;
	-webkit-text-stroke-color: var(--wp--preset--color--wild-sand-white);
	margin-block: unset;
	translate: 0 calc((var(--height) * (var(--digit) * -1)) - (var(--gap) * var(--digit)));
	transition: translate .6s cubic-bezier(0.770, 0.000, 0.175, 1.000), max-width .3s .25s;
}

.wp-block-cke-history .active-year.resizing > h2 {
	transition: unset !important;
}

.wp-block-cke-history .active-year > h2::before,
.wp-block-cke-history .active-year > h2::after {
	display: none !important;
}

.wp-block-cke-history .active-year > h2 > span {
	position: relative;
	width: max-content;
	font-size: var(--wp--preset--font-size--omega);
	line-height: var(--height);
	height: var(--height);
	text-align: center;
	user-select: none;
}

.wp-block-cke-history .active-year > h2 > span.seven {
	/* For some reason, the 7 looks bigger than the other numbers, so let's shrink it a tiny bit */
	font-size: calc(var(--wp--preset--font-size--omega) * .95);
}

/* Entry title & content */
.wp-block-cke-history .entry {
	grid-row: 3;
	width: 100%;
	height: 100%;
	margin-block-start: var(--wp--preset--spacing--1);
	opacity: 0;
	pointer-events: none;
	user-select: none;
	transition: opacity .6s;
}

.wp-block-cke-history .entry.active {
	opacity: 1;
	pointer-events: all;
	transition: opacity .6s .6s;
}

.wp-block-cke-history .entry > * {
	line-height: normal;
	margin-block: unset;
}

.wp-block-cke-history .entry > * + * {
	margin-block-start: 1em;
}

.wp-block-cke-history .entry > .entry-title {
	max-width: calc(100% * (2/3));
}

.wp-block-cke-history .entry > .entry-content {
	max-width: 75%;
}

/* Entry images */
.wp-block-cke-history .entry-image {
	opacity: 0;
	pointer-events: none;
	user-select: none;
	transition: opacity .6s;
}

.wp-block-cke-history .entry-image.active {
	opacity: 1;
	transition: opacity .6s .1s;
}

/* Backend style */
body.wp-admin .wp-block-cke-history {
	opacity: 1;
}

body.wp-admin .wp-block-cke-history .indicator-years > span {
	pointer-events: none;
}

/* Responsive */
@media (width <= 1700px) {
	.wp-block-cke-history .active-year {
		--height: 90px;
	}
}

@media (width <= 1600px) {
	.wp-block-cke-history > .wp-block-cover > .wp-block-cover__inner-container {
		max-width: 50% !important;
		padding-block-start: var(--wp--preset--spacing--5);
		margin-inline: 50% auto !important;
	}
	
	.wp-block-cke-history .indicator-years {
		left: calc(50% - var(--wp--preset--spacing--15));
	}
}

@media (width <= 1400px) {
	.wp-block-cke-history > .wp-block-cover > .wp-block-cover__inner-container > h2:first-child {
		max-width: 100%;
	}
	
	.wp-block-cke-history .indicator-years span {
		font-size: calc(var(--wp--preset--font-size--x-large) * .8) !important;
	}
	
	.wp-block-cke-history .active-year {
		--height: 80px;
	}
	
	.wp-block-cke-history .entry > .entry-title {
		max-width: 80%;
	}
	
	.wp-block-cke-history .entry > .entry-content {
		max-width: 90%;
	}
}

@media (width <= 1200px) {
	.wp-block-cke-history > .wp-block-cover > .wp-block-cover__inner-container {
		max-width: 60% !important;
		margin-inline: 40% auto !important;
	}
	
	.wp-block-cke-history .indicator-years {
		left: 40%;
		translate: -200% -50%;
	}
}

@media (width <= 1000px) {
	.wp-block-cke-history > .wp-block-cover > .wp-block-cover__inner-container {
		max-width: 70% !important;
		margin-inline: 30% auto !important;
	}
	
	.wp-block-cke-history .indicator-years {
		left: 30%;
		translate: -200% -50%;
	}
	
	.wp-block-cke-history .active-year > h2 > span {
		font-size: calc(var(--wp--preset--font-size--omega) * 1.25);
	}
	
	.wp-block-cke-history .active-year > h2 > span.seven {
		/* For some reason, the 7 looks bigger than the other numbers, so let's shrink it a tiny bit */
		font-size: calc((var(--wp--preset--font-size--omega) * 1.25) * .9425);
	}
}

@media (width <= 800px) {
	.wp-block-cke-history > .wp-block-cover > .wp-block-cover__inner-container {
		max-width: 75% !important;
		margin-inline: 25% auto !important;
	}
	
	.wp-block-cke-history .active-year {
		--height: 75px;
	}
}


@media (width <= 700px) {
	.wp-block-cke-history > .wp-block-cover {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: repeat(4, max-content);
		row-gap: var(--wp--preset--spacing--0-75);
		justify-content: start;
		padding-block-start: var(--wp--preset--spacing--5);
	}
	
	.wp-block-cke-history > .wp-block-cover > .wp-block-cover__inner-container {
		display: contents;
	}
	
	.wp-block-cke-history .indicator-years,
	.wp-block-cke-history .indicator-years span {
		display: flex;
		column-gap: var(--wp--preset--spacing--0-50);
		row-gap: var(--wp--preset--spacing--0-25);
		align-items: center;
	}
	
	.wp-block-cke-history .indicator-years {
		grid-row: 2;
		flex-direction: row;
		flex-wrap: wrap;
		position: relative;
		top: unset;
		left: unset;
		max-width: 100%;
		margin-block-start: var(--wp--preset--spacing--0-75);
		margin-inline-end: auto;
		translate: unset;
	}
	
	.wp-block-cke-history .indicator-years span {
		font-size: calc(var(--wp--preset--font-size--large) * .8) !important;
	}
	
	.wp-block-cke-history .indicator-years span:not(:first-child)::before {
		content: '-';
		font-family: inherit;
		font-size: inherit;
		line-height: inherit;
		font-weight: inherit;
		letter-spacing: inherit;
		color: var(--wp--custom--color--default--bg);
	}
	
	.wp-block-cke-history :is(.active-year, .entry) {
		margin-block-start: unset;
	}
	
	.wp-block-cke-history .active-year {
		grid-row: 3;
	}
	
	.wp-block-cke-history .active-year > h2 > span {
		font-size: calc(var(--wp--preset--font-size--omega) * 1.4);
	}
	
	.wp-block-cke-history .active-year > h2 > span.seven {
		/* For some reason, the 7 looks bigger than the other numbers, so let's shrink it a tiny bit */
		font-size: calc((var(--wp--preset--font-size--omega) * 1.4) * .9425);
	}
	
	.wp-block-cke-history .entry {
		grid-row: 4;
	}
}

@media (width <= 550px) {
	.wp-block-cke-history .indicator-years,
	.wp-block-cke-history .indicator-years span {
		column-gap: var(--wp--preset--spacing--0-25);
	}
	
	.wp-block-cke-history .entry > .entry-title {
		max-width: 90%;
	}
	
	.wp-block-cke-history .entry > .entry-content {
		max-width: 100%;
	}
}

@media (width <= 400px) {	
	.wp-block-cke-history .active-year {
		--height: 60px;
	}
	
	.wp-block-cke-history .entry > .entry-title {
		max-width: 100%;
	}
}