/* ===== news.css: Pasakums (Events) + Jaunums (News) ===== */

/* ===== Pasakums (Events) ===== */


/**
*		
*		Pasakums
*
*/



/**
*		Pasakums > index
*/



div.pasakums {

}

div.pasakums div#index-items {}

/* left */

div.pasakums div#index-items div.left {

}

div.pasakums div#index-items div.left a.btn-grey {
	margin: 0 0 2.6rem;
}

div.eg-list-news.index {
	position: relative;
	height: 9.6rem;
	margin: 0 0 1.65rem 0;
}

div.eg-list-news.index div.date {
	margin: 0;
	height: 1.2em;
	overflow: hidden;
}


div.eg-list-news.index a.image {
	flex: 0 0 14.4rem;
	height: 9.6rem;
}


div.eg-list-news.index > div.details-wrap {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.85rem 0.9rem 0.4rem 0.65rem; 
	overflow: hidden;	
}

div.eg-list-news.index > div.details-wrap > div.details {
	padding: 0 0 0.65rem;
}

div.eg-list-news.index div.details div.date {
	font-size: 0.75rem;
	color: #8f9093;
	height: 1.2em;
	overflow: hidden;
	/*margin-bottom: 5px;	*/
}

div.eg-list-news.index div.details a.title {
	display: block;
	font-size: 1rem;
	line-height: 1.2em;
	color: #4e394e;
}

div.eg-list-news.index div.details div.intro {
	font-family: 'proxima_nova_rgregular', 'Arial', sans-serif;
	margin: 0.45rem 0 0 0;
	height: auto;
}




div.eg-list-news.index a.more {
	font-size: 0.9rem;line-height:1;padding:0.3rem 0 0.1rem 0;
}



div.pasakums div#index-items div.left-right div.right {
	flex: 0 0 48%;
}
/**		right		*/

div.pasakums div#index-items div.right {
	background: #ededed;
}


div.pasakums div#index-items div.right div.side {
	padding: 1.6rem 5.555555556%; /* 25px / 450px */
	margin-bottom: 1.6rem; /* IE8 fix - margin-bottom instead of padding-bottom */
}
	
div.pasakums div#index-items div.right a.btn-grey {
	margin: 1rem 0 0;
	float: right;
}

h2.eg-heading.rail {
	padding: 0;
}

div.pasakums div#index-items div.right div.eg-list-event {
	position: relative;
	background: white;
	display: block;
	min-height: 10.3rem; /* matches legacy box-news min-height on this page */
	margin: 1.3rem 0 0 0;
	overflow: hidden;
}


div.pasakums div#index-items div.right div.eg-list-event div.date {
	margin: 0 0 0.35rem;
	height: 1.2em;
	overflow: hidden;
}

div.pasakums div#index-items div.right div.eg-list-event div.date-wrap {
	position: absolute;
	width: 5.4rem;
	height: 5.4rem;
	left: 0;
	top: 0;
	background: #bebd00;
}

div.pasakums div#index-items div.right div.eg-list-event div.date-wrap div.day {
	position: absolute;
	font-size: 2.4rem;
	top: 0.65rem;
	left: 0.65rem;	
	color: white;
}

div.pasakums div#index-items div.right div.eg-list-event div.date-wrap div.month {
	position: absolute;
	font-size: 1.4rem;
	text-transform: uppercase;
	top: 3.2rem;
	left: 0.65rem;	
	color: white;
}	

div.pasakums div#index-items div.right div.eg-list-event div.details {
	margin-left: 6.4rem;
	padding: 1rem 1rem 2.2rem 0; 
	overflow: hidden;	
}

div.pasakums div#index-items div.right div.eg-list-event div.details div.date {
	font-size: 0.75rem;
	color: #8f9093;
	text-transform: uppercase;
	height: 1.2em;
	overflow: hidden;
}

div.pasakums div#index-items div.right div.eg-list-event div.details a.title {
	display: block;
	font-size: 1rem;
	line-height: 1.2em;
	color: #4e394e;
}

div.pasakums div#index-items div.right div.eg-list-event div.details div.intro {
	font-size: 0.85rem;
	position: relative;
	margin: 0.45rem 0 0 0;
	line-height: 1.2em;
	height: 3.6em; /* 1.2 x 3 lines */
	overflow: hidden;
}

div.pasakums div#index-items div.right div.eg-list-event div.details div.intro::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	width: 80%;
	min-width: 8rem;
	height: 1.2em;
	background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
}




div.pasakums div#index-items div.right div.eg-list-event a.more {
	position: absolute;
	bottom: 0.65rem;
	left: 6.4rem;
	font-size: 0.9rem;
}




/**
*		Pasakums > list-items
*/


div.pasakums.sticky-top h1 {
	float: left;
	margin-bottom: 0;
}


div.pasakums div#filter-wrap {
	margin-bottom: 1.3rem;
	background-color: transparent;
}

/* --- sticky filter: reacts to html[data-scrolled] (set by nav.js at ~40px scroll) ---
   Manual tuning expected — keep all sticky rules here. */

html[data-scrolled] div.pasakums.sticky-top div#filter-wrap div.wrap {
	width: 92%;
	max-width: 70.5rem;
	margin: 0 auto;
}

html[data-scrolled] div.pasakums.sticky-top div#filter-wrap {
	position: fixed;
	z-index: 8;
	top: var(--header-height);
	left: 0;
	width: 100%;
	background-color: #EDEDED;

	-o-transition: top 0.3s ease, background-color 0.2s;

	transition: top 0.3s ease, background-color 0.2s;
	-webkit-transition: top 0.3s ease, background-color 0.2s;
}

html[data-scrolled] div.pasakums.sticky-top div#locator {
	opacity: 0;
	overflow: hidden;
	height: 0;
	padding: 0;
}

/* manual tuning — filter-wrap height + 20px so .list-items doesn't jump up */
html[data-scrolled] div.pasakums.sticky-top div.list-items,
html[data-scrolled] div.pasakums.sticky-top div.eg-list {
	transform: translateY( calc( var(--header-height) + 5.8rem) );
	/* transform doesn't add flow height; match it so #contents (and the
	   footer after it) clears the shifted list instead of overlapping it */
	margin-bottom: calc( var(--header-height) + 5.8rem );
}

div.pasakums.sticky-top div#locator {
	transition: opacity 0.3s ease, height 0.3s ease, padding 0.3s ease;
}

div.pasakums.sticky-top div.list-items,
div.pasakums.sticky-top div.eg-list {
	transition: margin-top 0.3s ease, margin-bottom 0.3s ease;
}





#yearSelector[data-open] ul.years,
#monthSelector[data-open] ul.months,
html[data-no-js] #yearSelector:hover ul.years,
html[data-no-js] #yearSelector:focus-within ul.years,
html[data-no-js] #monthSelector:hover ul.months,
html[data-no-js] #monthSelector:focus-within ul.months {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

#yearSelector[data-open] a.year,
#monthSelector[data-open] a.month {
	background-image: linear-gradient(#3a293a, #3a293a);
}


div.pasakums div.filter {
	position: relative;
	margin: 1.9rem 0 0;
	z-index: 4;
	float: right;
	clear: right;
}

div.pasakums div.filter div#yearSelector {
	position: relative;
	width: 8rem;
	height: 2.6rem;
	float: left;
	margin-right: 1.3rem;	
	margin-bottom: 0.65rem;
}

div.pasakums div.filter div#yearSelector a.year {
	position: absolute;
	display: block;
	width: 8rem;
	height: 2.6rem;
	line-height: 2.6rem;
	font-size: 1.15rem;
	font-family: inherit;
	background: linear-gradient(#4f394e, #4f394e) 0 0 / 2.1em 100% no-repeat, #fff;
	text-align: right;
	padding: 0 0.65rem 0 0;
	color: #4e394e;	
}

div.pasakums div.filter div#yearSelector a.year::after {
	content: ""; position: absolute;
	left: 1em; top: 50%;
	width: 0; height: 0;
	border-left: 0.6rem solid transparent;
	border-right: 0.6rem solid transparent;
	border-top: 0.5rem solid #fff;
	transform: translate(-50%, -50%);
}

div.pasakums div.filter div#yearSelector a.year:focus-visible {
	outline: 0.15rem solid var(--brand-primary); outline-offset: 0.1rem;
}

div.pasakums div.filter div#yearSelector a.year:hover {
	background-image: linear-gradient(#3a293a, #3a293a);
}
	
#yearSelector ul.years {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	position: absolute;
	top: 2.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
	-webkit-transform: translateY(-0.25rem);
	transform: translateY(-0.25rem);

	-o-transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
	-webkit-transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

div.pasakums div.filter div#yearSelector ul.years li {
	width: 8rem;
	height: 2.6rem;	
}

div.pasakums div.filter div#yearSelector ul.years li a {
	display: block;
	background: white;
	width: 8rem;
	height: 2.6rem;
	text-align: right;
	padding: 0 0.65rem 0 0;
	line-height: 2.6rem;
	font-family: inherit;
	font-weight: inherit;
	font-size: 1.15rem;
	color: #4e394e;				
}

div.pasakums div.filter div#yearSelector ul.years li a:hover {
	background: #ebebeb;
}

#yearSelector ul.years li a.active {
	background: #cfd0d1;
}



/**/

div.pasakums div.filter div#monthSelector {
	display: none;
}

/**/

div.pasakums div.filter ul.months {
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
}

div.pasakums div.filter ul.months li {
	float: left;
}
	
div.pasakums div.filter ul.months li a {
	display: block;
	min-width: 2em;
	height: 2.6rem;
	line-height: 2.6rem;
	background: #dbdcdd;
	color: #4e394e;
	font-size: 0.7rem;
	padding: 0 1em;
	text-transform: uppercase;
	border-right: 1px solid #c2c2c2;
	font-family: inherit;
	font-weight: inherit;	
}

div.pasakums div.filter ul.months li:last-child a {
	border: 0;
}

div.pasakums div.filter ul.months li a.active,
div.pasakums div.filter ul.months li a:hover {
	background: #cfd0d1;
}

div.pasakums div.filter ul.months li span.disabled {
	display: block;
	min-width: 2em;
	height: 2.6rem;
	line-height: 2.6rem;
	background: #f2f2f2;
	color: #cfcfcf;
	font-size: 0.7rem;
	padding: 0 1em;
	text-transform: uppercase;
	font-family: inherit;
	font-weight: inherit;
	border-right: 1px solid #e5e5e5;
	cursor: not-allowed;
}
	

/**		list	*/

div.pasakums div.list-items,
div.pasakums div.eg-list {
	clear: both;
}

div.pasakums div.eg-list div.eg-list-object div.details a.title {
	color: #4e394e;
}







/**
*		Pasakums > pasakums
*/



div.pasakums div.right300 div.side {
	background: #ebebeb;
	padding: 1rem 1.6rem;
}











/**
*		Media queries
*/




@media screen and (max-width: 940px) {


	/* filter */

	div.pasakums div.filter > ul.months {
		display: none;
	}

	div.pasakums div.filter div#monthSelector {
		display: block;
		position: relative;
		width: 7.05rem;
		height: 2.6rem;
		float: left;
		margin-right: 0;	
		margin-bottom: 0.65rem;
	}

	div.pasakums div.filter div#monthSelector a.month {
		position: absolute;
		display: block;
		width: 6.4rem;
		height: 2.6rem;
		line-height: 2.6rem;
		font-family: inherit;
		font-weight: inherit;
		font-size: 1.15rem;
		background: linear-gradient(#4f394e, #4f394e) 0 0 / 45% 100% no-repeat, #fff;
		text-align: right;
		padding: 0 0.65rem 0 0;
		color: #4e394e;	
	}

	div.pasakums div.filter div#monthSelector a.month::after {
		content: ""; position: absolute;
		left: 22.5%; top: 50%;
		width: 0; height: 0;
		border-left: 0.6rem solid transparent;
		border-right: 0.6rem solid transparent;
		border-top: 0.5rem solid #fff;
		transform: translate(-50%, -50%);
	}

	div.pasakums div.filter div#monthSelector a.month:focus-visible {
		outline: 0.15rem solid var(--brand-primary); outline-offset: 0.1rem;
	}

	div.pasakums div.filter div#monthSelector a.month:hover {
		background-image: linear-gradient(#3a293a, #3a293a);
	}
		
	#monthSelector ul.months {
		position: absolute;
		top: 2.6rem;
		list-style: none;
		margin: 0;
		padding: 0;
		float: none;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		-webkit-transform: translateY(-0.25rem);
		transform: translateY(-0.25rem);

		-o-transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
		transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
		-webkit-transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
	}

	div.pasakums div.filter div#monthSelector ul.months li {
		width: 6.4rem;
		height: 2.6rem;	
	}

	div.pasakums div.filter div#monthSelector ul.months li a {
		display: block;
		background: white;
		width: 6.4rem;
		height: 2.6rem;
		text-align: right;
		padding: 0 0.65rem 0 0;
		line-height: 2.6rem;
		font-family: inherit;
		font-weight: inherit;
		font-size: 1.15rem;
		color: #4e394e;				
		border-right: 0;
		margin: 0;
	}

	div.pasakums div.filter div#monthSelector ul.months li a:hover {
		background: #ebebeb;
	}

	div.pasakums div.filter div#monthSelector ul.months li span.disabled {
		display: block;
		background: #f2f2f2;
		width: 6.4rem;
		height: 2.6rem;
		text-align: right;
		padding: 0 0.65rem 0 0;
		line-height: 2.6rem;
		font-family: inherit;
		font-weight: inherit;
		font-size: 1.15rem;
		color: #cfcfcf;
		border-right: 0;
		margin: 0;
		cursor: not-allowed;
	}

}



@media screen and (max-width: 900px) {
	div#contents {
	}


	/**
	*		Pasakums > index
	*/


	/* left */

	div.pasakums div#index-items div.left-right div.right {
		flex: 0 0 51.5%;
		margin: 0;
	}

	div.eg-list-news.index {
		height: auto;
	}

	div.eg-list-news.index a.image {
		position: static;
		width: 100%;
		height: 0;
		padding-bottom: 66.666666667%; /* 3:2 */
	}
    div.eg-list-news.index > div.details-wrap {
		margin: 0;
		padding: 1rem 1rem 0; 
	}

	div.eg-list-news.index > div.details-wrap > div.details {
		padding: 0;
	}


	div.eg-list-news.index a.more {
		position: static;
		display: inline-block;
		padding: 0.65rem 1rem;
   	}



}




@media screen and (max-width: 650px) {

	/**
	*		Pasakums > index
	*/


	/* left */

	/* left & right - full width, stacked */
	div.pasakums div#index-items div.left,
	div.pasakums div#index-items div.right {
		flex: 1 1 100%;
	}

	div.eg-list-news.index {
		height: 9.6rem;
	}

	div.eg-list-news.index a.image {
		position: absolute;
		top: 0;
		left: 0;
		width: 14.4rem;
		height: 9.6rem;
		padding: 0;
	}
    div.eg-list-news.index > div.details-wrap {
		margin-left: 14.4rem;
		padding: 1rem 1rem 0; 
	}

	div.eg-list-news.index > div.details-wrap > div.details {
		padding: 0;
	}


	div.eg-list-news.index a.more {
		position: static;
    	}



	/**		right		*/

	div.pasakums div#index-items div.right div.side {
		padding: 1.3rem 3.333333333%; /* 20px / 600px */
	}


	h2.eg-heading.rail {
		padding-bottom: 0.65rem;
	}

	div.pasakums div#index-items div.right div.eg-list-event {
		min-height: 5.4rem;
		margin: 0.75rem 0 0 0;
	}

	div.pasakums div#index-items div.right div.eg-list-event div.date-wrap {
		width: 3.5rem;
		height: 3.5rem;
	}

	div.pasakums div#index-items div.right div.eg-list-event div.date-wrap div.day {
		font-size: 1.5rem;
		top: 0.6rem;
		left: 0.4rem;	
	}

	div.pasakums div#index-items div.right div.eg-list-event div.date-wrap div.month {
		font-size: 0.9rem;
		top: 2.2rem;
		left: 0.4rem;	
	}	


	div.pasakums div#index-items div.right div.eg-list-event div.details {
		margin-left: 4.5rem;
		padding: 0.65rem 1rem 2.2rem 0; 
	}

	div.pasakums div#index-items div.right div.eg-list-event div.details a.title {
		font-size: 0.9rem;
	}

	div.pasakums div#index-items div.right div.eg-list-event div.details div.intro {
		display: none;
	}

	div.pasakums div#index-items div.right div.eg-list-event a.more {
		left: 4.5rem;
	}



}



@media screen and (max-width: 600px) {


	h2.eg-heading.compact,
	h2.eg-heading.rail {
		font-size: 2rem;
	}

}



@media screen and (max-width: 515px) {



	/**
	*		Pasakums > index
	*/


	/* left */


	div.eg-list-news.index {
		height: auto;
	}

	div.eg-list-news.index a.image {
		position: static;
		width: 100%;
		height: 0;
		padding-bottom: 66.666666667%; /* 3:2 */
	}
    	div.eg-list-news.index > div.details-wrap {
		margin: 0;
	}

	div.eg-list-news.index > div.details-wrap > div.details {
		padding: 0;
	}


	div.eg-list-news.index a.more {
		position: static;
		display: inline-block;
		padding: 0.65rem 1rem;
   	}



	/**		right		*/

	div.pasakums div#index-items div.right {
		background: none;
	}


	div.pasakums div#index-items div.right div.side {
		padding: 0;
	}


	div.pasakums div#index-items div.right a.btn-grey {
		float: none;
	}




	/* filter */
	div.pasakums.sticky-top h1 {
		float: none;
	}

	div.pasakums div.filter {
		margin-top: 0;
		float: left;
	}

}








/* ===== Jaunums ===== */


/**
*		
*		Jaunums
*
*/

/**
*		Jaunums > jaunums
*/

div.jaunums div.date {
	margin-bottom: 1.3rem;
	clear: both;
}




div.jaunums div.left div.intro {
	margin-top: 0.65rem;
}



/**		right	*/






/**
*		Jaunums > list-items
*/



/* big - the first item of the jaunums list is promoted to a hero on desktop */

@media screen and (min-width: 901px) {

div.eg-list-news-wrap.jaunums > div.eg-list-news:first-of-type  {
height: 18rem; 
}
div.eg-list-news-wrap.jaunums > div.eg-list-news:first-of-type > a.image {
	flex: 0 0 50%;max-width:28rem;
	height: 18rem;
}

div.eg-list-news-wrap.jaunums > div.eg-list-news:first-of-type > div.details-wrap {
	padding: 0.9rem 1.4rem 1rem 1.4rem;
}

div.eg-list-news-wrap.jaunums > div.eg-list-news:first-of-type   div.details a.title {
	font-size: 1.45rem;
	line-height: 1.2;
}
div.eg-list-news-wrap.jaunums > div.eg-list-news:first-of-type  div.intro {
	font-size: 0.9rem;
	line-height: 1.3rem;
	margin-bottom:1rem;
}
}



/* regular */

div.jaunums div.list-items {
	position: relative;
	clear: both;	
}

/* left */


div.eg-list-news-wrap {
	clear: both;
}

div.eg-list-news {
	position: relative;
	background: #fff;
	display: flex;
	align-items: stretch;
	height: 10.3rem; /* aligns with the image height - content is cut, never stretches the card */
	overflow: hidden;
	margin: 0 0 1.65rem 0;
}

div.eg-list-news > a.image {
	flex: 0 0 15.4rem;
	width: auto;
	height: 10.3rem;
	line-height: normal;
	padding-bottom: 0;
	display: block;
	position: relative;
	overflow: hidden;
}

div.eg-list-news > a.image img.image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

div.eg-list-news > div.details-wrap {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0.9rem 1.8rem 0.6rem 0.9rem;
}

div.eg-list-news > div.details-wrap > div.details {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	position: relative;
	padding: 0 0 1rem;
}

div.eg-list-news div.details div.date {
	font-size: 0.75rem;
	color: #8f9093;
	text-transform: uppercase;
	margin: 0;
}

div.eg-list-news div.details a.title {
	display: block;
	font-size: 1.05rem;
	color: #4e394e;
	line-height: 1.15rem;
}

div.eg-list-news div.details div.intro {
	font-size: 0.85rem;
	margin: 0.65rem 0 0 0;
	line-height: 1.2rem;
	height: auto;
}

/* the cut cover: sits at the bottom edge of .details, marking where text is brutally cut */
div.eg-list-news div.details .intro::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	width: 80%;
	min-width: 8rem;
	height: 1.2rem;
	background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
}



div.eg-list-news a.more {
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.3rem 0 0.1rem 0;
}


/* right */















@media screen and (max-width: 700px) {

	/**
	*		Jaunums > jaunums
	*/


	div.eg-list-news {
		flex-direction: column;
		height: auto;
		overflow: visible;
	}

	div.eg-list-news a.image {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
	}

	div.eg-list-news div.details-wrap {
		margin: 0;
		padding: 0.65rem 1rem 1rem;
		overflow: visible;
	}

		div.eg-list-news div.details div.intro {
		height: auto;
	}



}






/* ===== Date-range jump: events range tabs + news timeline + wait toast ===== */

/* --- events: range chips under the month tabs (inside sticky filter) --- */

#rangeSelector.range-wrap {
	clear: both;
	margin-top: 0.65rem;
}

div.pasakums div.filter div#rangeSelector ul.ranges {
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
}

div.pasakums div.filter div#rangeSelector ul.ranges li {
	float: left;
	margin: 0 0.4rem 0.4rem 0;
}

div.pasakums div.filter div#rangeSelector ul.ranges li a {
	display: block;
	height: 1.8rem;
	line-height: 1.8rem;
	background: #e8e6e8;
	color: #4e394e;
	font-size: 0.75rem;
	font-family: inherit;
	font-weight: inherit;
	padding: 0 0.65rem;
	border: 1px solid #d4d2d4;
	border-radius: 0.2rem;
	white-space: nowrap;
}

div.pasakums div.filter div#rangeSelector ul.ranges li a .range-count {
	color: #9a8a9a;
	margin-left: 0.4rem;
	font-size: 0.7rem;
}

div.pasakums div.filter div#rangeSelector ul.ranges li a.active,
div.pasakums div.filter div#rangeSelector ul.ranges li a:hover {
	background: #cfd0d1;
	text-decoration: none;
}

/* sticky filter is taller when the range chips render */
html[data-scrolled] div.pasakums.sticky-top.has-ranges div.eg-list {
	transform: translateY( calc( var(--header-height) + 8.3rem) );
	margin-bottom: calc( var(--header-height) + 8.3rem );
}

/* scroll targets must clear the sticky header/filter */
div.pasakums div.eg-list div.eg-list-object {
	scroll-margin-top: calc( var(--header-height) + 9rem );
}


div.eg-list-news,
div.eg-list-event {
	scroll-margin-top: calc( var(--header-height) + 1.3rem );
}

/* --- news: floating left vertical timeline --- */

#news-timeline.news-timeline {
	--tl-line: 0.6rem;		/* line position, measured from the list's left edge */
	--tl-mark: 0.5rem;		/* marker box; its diagonal lands on ~0.7rem */
	--tl-rot: -10deg;		/* label rotation; 0deg disables it */
	--tl-ink: #4e394e;
	--tl-line-soft: #d4d2d4;
	--tl-line-mid: #b9b4b9;
	--tl-mark-off: #eceaec;

	position: fixed;z-index:0;
	top: calc( var(--header-height) + 1.9rem );
	left: max( 0.5rem, calc( 50% - 35.9rem - 10.1rem ) );
	width: 10.5rem; 
	opacity: 0;
	/* inert while faded out: keeps the 25 links out of the tab order and
	   the a11y tree, and stops the hidden rail swallowing clicks */
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-0.4rem);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

/* The rail needs this much room. Below it the rail does not exist.
   This is the only breakpoint for it - JS no longer tests the width. */
@media screen and (max-width: 1499px) {
	#news-timeline.news-timeline { display: none; }
}

/* Without scripting the reveal never runs, so show the links outright.
   Crawlers read the markup either way; this is for real visitors. */
@media screen and (min-width: 1500px) and (scripting: none) {
	#news-timeline.news-timeline {
		display: block;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

#news-timeline.news-timeline.visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

#news-timeline.news-timeline .timeline-title {
	font-size: 0.85rem;
	text-transform: uppercase;
	color: #9a8a9a;
	margin-bottom: 0.75rem;
}

#news-timeline.news-timeline ul.timeline {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0 0.35rem 0 0;
	max-height: calc( 100vh - var(--header-height) - 5rem );
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--tl-line-soft) transparent;
	/* rows dissolve into the edges instead of being hard-clipped by the box */
	/* mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);*/
	/* bottom edge only: a short 2rem fade, the top stays crisp */
	mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent 100%);
}

/* full-height rule, heaviest through the middle, fading noticeably at both ends */
#news-timeline.news-timeline ul.timeline::before {
	content: '';
	position: absolute;z-index:2;
	left: var(--tl-line);
	top: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(to bottom,
		transparent 0,
		var(--tl-line-soft) 16%,
		var(--tl-line-mid) 50%,
		var(--tl-line-soft) 84%,
		transparent 100%);
}

#news-timeline.news-timeline ul.timeline li {
	position: relative;
	margin: 0 0 0.5rem;
}

#news-timeline.news-timeline ul.timeline li a {
	display: block;
	padding: 0.2rem 0 0.2rem 1.15rem;
	font-size: 0.8rem;
	color: var(--tl-ink);
	text-decoration: none;
	transition: transform 0.2s ease;
}

#news-timeline.news-timeline ul.timeline li a .tl-month {
	display: inline-block;
	white-space: nowrap;
	/* transform: rotateZ(var(--tl-rot));*/
}

/* rhombus centred on the rule: the marker is offset from the same --tl-line
   the rule is drawn at, so the two stay locked together at any width.
   border-box matters - the global reset on <html> does not reach ::before,
   so without it the 2px border inflates the mark and pushes it off the rule. */
#news-timeline.news-timeline ul.timeline li a::before {
	content: '';
	box-sizing: border-box;
	position: absolute;z-index:3;
	left: calc( 1px + var(--tl-line) - var(--tl-mark) / 2 );
	top: 0.55rem;
	width: var(--tl-mark);
	height: var(--tl-mark);
	transform: rotate(45deg);
	background: var(--tl-mark-off);
	border: 1.5px solid var(--tl-line-soft);
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#news-timeline.news-timeline ul.timeline li a:hover,
#news-timeline.news-timeline ul.timeline li a.active {
	color: var(--link-color);
}

#news-timeline.news-timeline ul.timeline li a:hover::before,
#news-timeline.news-timeline ul.timeline li a.active::before {
	background: var(--tl-ink);
	border-color: var(--tl-ink);
	transform: rotate(45deg);
}

/* --- news: spinner for long archive jumps --- */

.news-jump-overlay {
	position: fixed;
	inset: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.news-jump-overlay.visible {
	opacity: 1;
	visibility: visible;
	/* swallow clicks so a second jump cannot be queued mid-flight */
	pointer-events: auto;
	transition: opacity 0.2s ease, visibility 0s;
}

.news-jump-overlay img {
	width: 4.5rem;
	height: auto;
	filter: drop-shadow(0 0.4rem 1.2rem rgba(78, 57, 78, 0.3));
}

/* --- responsive: events range chips become a scrollable row --- */

@media screen and (max-width: 940px) {

	div.pasakums div.filter div#rangeSelector ul.ranges {
		float: none;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: nowrap;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}

	div.pasakums div.filter div#rangeSelector ul.ranges li {
		float: none;
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
	}

	html[data-scrolled] div.pasakums.sticky-top.has-ranges div.list-items,
	html[data-scrolled] div.pasakums.sticky-top.has-ranges div.eg-list {
		transform: translateY( calc( var(--header-height) + 10.3rem) );
		margin-bottom: calc( var(--header-height) + 10.3rem );
	}
}