//.feed-block {
//	max-width: var(--full);
//	margin: 0 auto;
//
//	&:target {
//		scroll-snap-margin-top: 5rem;
//		scroll-margin-top: 5rem;
//		outline: 0;
//		border-radius: 0;
//		padding: 0;
//
//		.feed-item {
//			outline: double var(--pink-0);
//		}
//	}
//}
//
//.loading .feed-block {
//	opacity: .7;
//}
//
//.label {
//	display: flex;
//	align-items: center;
//	gap: .25rem;
//	font-size: .9rem;
//	a:hover {
//		color: var(--pink-0);
//	}
//}
//
///** Filters Form **/
//.feed-filters {
//	margin: 2rem 0;
//	position: sticky;
//	top: 3rem;
//	z-index: 15;
//	background: rgba(var(--base-rgb),var(--op-6));
//	padding: .25rem 3rem;
//	details[open] summary {
//		background-color: var(--overlay);
//	}
//	summary {
//		justify-content: flex-start;
//
//		> * {
//			order: 3;
//		}
//		.label {
//			order: 1;
//		}
//		.filter-label {
//			order: 2;
//		}
//		&::after {
//			order: 4;
//		}
//		#favourites + label {
//			margin-left: auto;
//		}
//		#favourites + label:hover,
//		#favourites:checked + label {
//			border-color: var(--pink-0);
//			background-color: var(--pink-0);
//			color: var(--white);
//
//		}
//		#favourites:checked + label {
//			animation: pop 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
//		}
//	}
//
//	details[open],
//	summary:hover {
//		background-color: rgba(var(--base-rgb),var(--op-6));
//	}
//
//	&:has(#favourites) {
//		summary::after {
//			margin-left: 1rem;
//		}
//	}
//}
//summary > * {
//	order: 3;
//}
//summary .label {
//	order: 1;
//}
//.filter-label {
//	display: inline-block;
//	vertical-align: middle;
//	height: 1.3em;
//	order: 2;
//	margin: 0;
//	padding: 0;
//
//	li {
//		list-style: none;
//		height: 0;
//		overflow: hidden;
//		&.active {
//			height: 100%;
//		}
//	}
//}
//.filter-group {
//	display: flex;
//	align-items: center;
//	gap: .5rem;
//	flex-wrap: wrap;
//	label {
//		font-weight: 100;
//	}
//	&:has(.order-by) {
//		justify-content: space-between;
//	}
//	.order-by,
//	.order-direction {
//		display: flex;
//		flex-wrap: wrap;
//		gap: .5rem;
//		flex: 1;
//		justify-content: flex-start;
//		.label {
//			width: 100%;
//		}
//
//		label:has(.label) {
//			padding: 0 .35rem;
//			gap: .5rem;
//			.label {
//				font-size: 1rem;
//			}
//		}
//	}
//}
//.filter-group >.label {
//	width: 100%;
//}
//
///**
//Feed Grid
// */
//.feed-grid {
//	display: grid;
//	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
//	gap: .5rem;
//	margin-bottom: 2rem;
//	padding: 0 4rem;
//	--delay: 0s;
//	--increase: .1s;
//}
//.feed-empty-state {
//	grid-column: 1/-1;
//	text-align: center;
//	padding: 2rem;
//	background: var(--base-100);
//	border-radius: var(--radius);
//	margin: 0 auto;
//	max-width: 600px;
//}
///**
//Placeholders
// */
//.placeholder {
//	aspect-ratio: 1;
//	background: var(--base);
//	border: 1rem solid var(--base-50);
//	border-radius: 1rem;
//	display: flex;
//	justify-content: center;
//	align-items: center;
//
//	.icon {
//		--w: 50%;
//		color: var(--base-200);
//		animation: dance 2.5s ease-in-out infinite;
//
//	}
//}
//
///**
//Feed Items
// */
//.feed-item {
//	position: relative;
//	border-radius: 0.5rem;
//	overflow: hidden;
//	background: var(--base-50);
//	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
//	opacity: 0;
//	transition: opacity var(--trans-base) var(--delay);
//	height: fit-content;
//	padding: 0;
//
//	img {
//		opacity: .7;
//		filter: grayscale(.5) sepia(.3) blur(7px);
//	}
//	&[data-loaded=true] {
//		img {
//			opacity: 1;
//			filter: none;
//		}
//	}
//
//	a {
//		&::before,
//		&::after {
//			display: none;
//		}
//	}
//	details a {
//		font-size: clamp(1rem, 0.9306rem + 0.2222vw, 1.125rem);
//	}
//
//	&[data-loaded] {
//		opacity: 1;
//		+ [data-loaded] {
//			--delay: var(--delay) + var(--increase);
//		}
//	}
//
//	&.highlighted {
//		box-shadow: 0 0 0 4px #FF0080, 0 8px 16px rgba(0, 0, 0, 0.1);
//		animation: highlight-puls 2s ease-in-out;
//	}
//	&[open],
//	&:hover {
//		.handle {
//			background-color: var(--overlay-pink-medium);
//			backdrop-filter: blur(5px);
//		}
//	}
//	summary {
//		width: calc(100% - 1rem);
//		height: 100%;
//		aspect-ratio: 1;
//		.handle {
//			position: absolute;
//			bottom: 0;
//			left: 0;
//			right: 0;
//			background-color: rgba(var(--base-rgb),var(--op-3));
//			backdrop-filter: blur(5px);
//			border-radius: var(--radius);
//			z-index: 1;
//			padding: .25rem .25rem .25rem 1.1rem;
//		}
//		&::after {
//			z-index: 11;
//			position: absolute;
//			bottom: .35rem;
//			right: .7rem;
//			width: 1.5rem;
//			height: 1.5rem;
//			cursor: pointer;
//		}
//	}
//
//	label {
//		font-weight: normal;
//		text-transform: none;
//		.icon {
//			--w: 1.5em;
//		}
//	}
//}
///**
//Load More Button
// */
//.load-more {
//	opacity: 1;
//	margin: 1rem auto;
//	width: 66.666%;
//	display: flex;
//	align-items: center;
//	gap: .5rem;
//	padding: .75rem 1.5rem;
//	background: var(--base);
//	color: var(--contrast);
//	border-radius: 4px;
//	font-size: var(--txt-medium);
//	transition: all var(--trans-base);
//	border: 2px solid transparent;
//	&[hidden] {
//		opacity: 0;
//		transition: all var(--trans-base);
//	}
//	&:hover {
//		background: var(--pink-50);
//		border-color: var(--contrast);
//		color: var(--white);
//	}
//}
///**
//favourite button
// */
//button.favourite {
//	position: absolute;
//	top: .5rem;
//	right: .5rem;
//	z-index: 10;
//	background: rgba(var(--base-rgb),var(--op-4));
//	border-radius: 50%;
//	box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-subtle);
//	border: none;
//	width: 2rem;
//	height: 2rem;
//	display: flex;
//	justify-content: center;
//	align-items: center;
//	backdrop-filter: blur(5px);
//	transition: all var(--trans-base);
//
//	&:hover {
//		transform: scale(1.1);
//		color: var(--pink-0);
//		background: var(--base);
//		box-shadow: 0 4px 8px rgba(0,0,0,0.15);
//	}
//
//	&.favourited {
//		animation: pop 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
//	}
//}
//
//
///** Images **/
//.feed-image {
//	display: block;
//	aspect-ratio: 1;
//	overflow: hidden;
//	width: 100%;
//	height: 100%;
//}
//.feed-images {
//	width: 100%;
//	height: 100%;
//	&.multi {
//		display :grid;
//		grid-template-columns: repeat(3, 1fr);
//		grid-auto-rows: 1fr;
//		gap: 4px;
//
//		> a {
//			width: 100%;
//			height: 100%;
//			aspect-ratio: 1;
//		}
//		.feed-image {
//			grid-row: span 2;
//			grid-column: span 2;
//		}
//	}
//	img {
//		width: 100%;
//		height: 100%;
//		object-fit: cover;
//		transition: transform var(--trans-t) var(--trans-fn);
//	}
//	a:hover img {
//		transform: scale(1.05);
//	}
//}
//
//.feed-item {
//	&:nth-of-type(4n+2) .multi .feed-image {
//		grid-column: 2 / span 2;
//		grid-row: 1 / span 2;
//	}
//	&:nth-of-type(4n+3) .multi .feed-image {
//		grid-row: 2 / span 2;
//		grid-column: 1 / span 2;
//	}
//	&:nth-of-type(4n+4) .multi .feed-image {
//		grid-column: 2 / span 2;
//		grid-row: 2 / span 2;
//	}
//}
//
///** Item Information **/
//.item-info {
//	padding: .25rem;
//	border-left: 1px solid var(--base-200);
//	>div + div {
//		margin-top: .5em;
//		position: relative;
//
//		&::before {
//			content: '';
//			display: block;
//			position: absolute;
//			top: -.3em;
//			left: -.25rem;
//			width: 66.6%;
//			border-bottom: 1px solid var(--base-200);
//		}
//	}
//	h3 {
//		margin: 0 0 .5em 0!important;
//		font-size: 1.1rem;
//		font-family: var(--body);
//		font-weight: var(--fw-b);
//	}
//	span {
//		text-transform: uppercase;
//		display: flex;
//		align-items: center;
//	}
//	.icon {
//		--w: 1.1em;
//		margin-right: .5em;
//		display: inline-block;
//		vertical-align: middle;
//	}
//}
//.item-list {
//	ul {
//		margin: 0;
//		padding: .5em 0;
//		display: flex;
//		flex-wrap: wrap;
//		gap: .5rem;
//		li {
//			list-style: none;
//		}
//	}
//	a {
//		background-color: var(--pink-0);
//		border: 1px solid transparent;
//		border-radius: 4px;
//		color: var(--light-0);
//		padding: .25em;
//		line-height: .8;
//		&:visited {
//			background-color: var(--pink-100);
//			color: var(--white);
//		}
//		&:visited:hover,
//		&:visited:focus,
//		&:hover,
//		&:focus {
//			background-color: transparent;
//			border-color: var(--contrast);
//			color: var(--contrast);
//		}
//	}
//}
///**
//Loading
// */
//.loading {
//	opacity: .7;
//}
//
//.loading-overlay {
//	position: fixed;
//	top: 0;
//	left: 0;
//	right: 0;
//	bottom: 0;
//	background-color: rgba(var(--base-rgb),var(--op-4));
//	display: flex;
//	align-items: center;
//	justify-content: center;
//	transition: opacity 0.3s ease, visibility 0.3s ease;
//	z-index: 9999;
//	opacity: 0;
//	visibility: hidden;
//}
//.loading .loading-overlay {
//	opacity: 1;
//	visibility: visible;
//
//	&::after {
//		content: '';
//		position: absolute;
//		z-index: -1;
//		inset: 0;
//		background: linear-gradient(
//				90deg,
//				var(--shimmer)
//		);
//		animation: shimmer 3s ease-in-out infinite;
//	}
//
//	.wrapper {
//		background-color: rgba(var(--base-rgb),var(--op-6));
//		padding: 2rem;
//		border-radius: var(--radius);
//		text-align: center;
//		max-width: 90%;
//		width: 400px;
//		height: 300px;
//		z-index: 5;
//		display: flex;
//		justify-content: center;
//		align-items: center;
//		position: relative;
//
//		.spinner {
//			--h: 150px;
//			--w: calc(var(--h) * 2);
//			border-top: 5px solid var(--pink-0);
//			border-radius: 50%;
//			position: absolute;
//			width: var(--w);
//			height: var(--w);
//			top: calc(50% - var(--h));
//			left: calc(50% - var(--h));
//			opacity: .5;
//			z-index: 0;
//			animation: spin 1s var(--trans-t) infinite;
//		}
//		div.icon {
//			height: 50px;
//			width: 50px;
//
//			.icon {
//				--w: 100%;
//				svg {
//					animation: dance 2s ease-in-out infinite;
//					transition: color 0.3s ease;
//				}
//			}
//		}
//		.status {
//			height: 200px;
//			width: 100%;
//			z-index: 5;
//			display: flex;
//			flex-direction: column;
//			align-items: center;
//
//			h3 {
//				margin: 1.5rem 0 .25rem!important;
//				color: var(--contrast-200);
//			}
//			.message {
//				margin: 0;
//				max-width: 275px;
//				color: var(--contrast-100);
//				font-size: var(--txt-x-small);
//				animation: flicker 2s infinite;
//			}
//		}
//	}
//}
//
//
///* Animations */
//@keyframes highlight {
//	0%, 100% {
//		box-shadow: none;
//	}
//	50% {
//		box-shadow: 0 0 0 4px var(--pink-0);
//	}
//}
//
//@keyframes pop {
//	0% { transform: scale(1); }
//	50% { transform: scale(1.3); }
//	75% { transform: scale(0.9); }
//	100% { transform: scale(1); }
//}
//
//@keyframes bubble {
//	50%  { box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px }
//	100% { box-shadow: 19px 0 0 0, 38px 0 0 3px, 57px 0 0 7px }
//}
//@keyframes highlight-pulse {
//	0%, 100% { box-shadow: 0 0 0 4px #FF0080, 0 8px 16px rgba(0, 0, 0, 0.1); }
//	50% { box-shadow: 0 0 0 8px #FF0080, 0 12px 24px rgba(0, 0, 0, 0.15); }
//}
//
//@keyframes spin {
//	to { transform: rotate(360deg); }
//}
//
//@keyframes shimmer {
//	0% { transform: translateX(-100%); }
//	50%, 100% { transform: translateX(100%); }
//}
//@keyframes dance {
//	0%, 100% { transform: rotate(-5deg) scale(1);}
//	50% { transform: rotate(5deg) scale(1.1); }
//}
//@keyframes flicker {
//	0% { opacity: 0.6; }
//	50% { opacity: 1; }
//	100% { opacity: 0.6; }
//}
//
//
///**
//Accessibility
// */
//
///* Keyboard navigable feed items */
//.feed-item[tabindex="0"] {
//	position: relative;
//}
//
//.feed-item[tabindex="0"]::after {
//	content: '';
//	position: absolute;
//	top: 0;
//	left: 0;
//	right: 0;
//	bottom: 0;
//	pointer-events: none;
//	border: 2px solid transparent;
//	transition: border-color 0.2s ease;
//}
//
//.feed-item[tabindex="0"]:focus::after {
//	border-color: #FF0080;
//}
//
//
//.feed-block .item {
//	summary {
//		a {
//			background-color: var(--action-0);
//			display: flex;
//			gap: .25rem;
//			flex-wrap: nowrap;
//			aspect-ratio: 1;
//			position: relative;
//		}
//		img {
//			width: 50%;
//			height: 100%;
//			object-fit: cover;
//		}
//
//	}
//}


.feed-block {
	grid-column: full;
	.filters {
		padding: 1rem 0;
		max-width:var(--wide);
		margin: 0 auto;

		.remove-term.remove-term {
			width: max-content;
			height: max-content
		}
	}
	.filter-group {
		position: relative;
		padding: 2rem 0;
		.label {
			position: absolute;
			left: 0;
		}
		> .label {
			top: 0;
		}
		[type=radio] {
			position:absolute;
			left: var(--offScreen);
		}
		button, label {
			position: relative;
			padding: .5rem;
			height: max-content;
			&:hover {
				color: var(--action-contrast);
			}
		}
		button:hover .label,
		:checked + label .label,
		label:hover .label {
			opacity: 1;
			visibility: visible;
		}
		&:has(label:hover) :checked + label .label,
		button .label,
		label .label {
			--height: max-content;
			opacity: 0;
			visibility: hidden;
			bottom: -2rem;
			width: max-content;
			white-space: nowrap;
			font-weight: var(--fw-b);
		}


	}
	h3 {
		margin: 0 0 .25rem;
		font-size: var(--medium);
	}
}
/** PLACEHOLDERS **/
.placeholder {
	aspect-ratio: 1;
	background: var(--base);
	border: 1rem solid var(--base-50);
	border-radius: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;

	i.icon {
		--w: 50%;
		color: var(--base-200);
		animation: dance 2.5s ease-in-out infinite;
	}
}

.item-grid {
	padding: 0 var(--chip);
	max-width: 100%;
}
/** FEED ITEM **/
.feed.item {
	position: relative;
	border-radius: 0.5rem;
	overflow: hidden;
	background: var(--base-50);
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	height: fit-content;
	padding: 0;
	details {
		z-index: var(--z-2);
		width: 100%;
		position: relative;
		padding: 0;
		summary {
			position:absolute;
			top: -3rem;
			left:0;
			width: 100%;
			background-color: rgba(var(--base-rgb),var(--op-2));
			backdrop-filter: blur(5px);
			&:hover {
				background-color: rgba(var(--action-rgb),var(--op-45));
			}
		}
		&[open] {
			padding: .25rem .5rem;
			summary .icon {
				opacity: 0;
			}
		}

	}

	img {
		object-fit: cover;
		width: 100%;
		height: 100%;
		//opacity: .7;
		//filter: grayscale(.5) sepia(.3);
		&:hover {
			opacity: .8;
		}
	}

	&[data-timeline] {
		.images {
			aspect-ratio: 3/2;
			padding: 0 0 1rem;
			span {
				width: 50%;
				position: absolute;
				background-color: var(--action-0);
				color: var(--action-contrast);
				padding: .25rem .5rem;
				&:first-of-type {
					bottom: 0;
					right: 50%;
					text-align: right;
				}
				&:last-of-type {
					top: 0;
					left: 50%;
				}
			}
			> a {
				position: relative;
				display: flex;
				flex-wrap: nowrap;
				width: 100%;
				height: 100%;
			}
		}
		img {
			width: 50%;
			object-fit: cover;
			height: 100%;
			&:first-of-type {
				border-right: 1px solid var(--action-0);
			}
		}
	}


	a {
		&::before,
		&::after {
			display: none;
		}
	}

	label {
		font-weight: normal;
		text-transform: none;
		.icon {
			--w: 1.5em;
		}
	}
}


.item-grid:has([data-timeline]) {
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.items-wrap [type=radio],
.items-wrap [type=checkbox] {
	position: absolute;
	opacity: 0;
	left: -200vw;
}

.items-wrap [type=radio] + label,
.items-wrap [type=checkbox] + label {
	position: relative;
	cursor: pointer;
}

.items-wrap [type=radio] + label:hover,
.items-wrap [type=checkbox] + label:hover {
	color: var(--action-0);
}

.items-wrap [type=radio] + label::before,
.items-wrap [type=checkbox] + label::before,
.items-wrap [type=radio] + label::after,
.items-wrap [type=checkbox] + label::after {
	content: '';
	position: absolute;
	top: 50%;
}

.items-wrap [type=radio] + label::after,
.items-wrap [type=checkbox] + label::after {
	left: 5px;
	transform: translateY(-70%) rotate(45deg);
	width: 5px;
	height: 10px;
	border: solid var(--light-0);
	border-width: 0 2px 2px 0;
	display: none;
}

.items-wrap [type=radio] + label::before,
.items-wrap [type=checkbox] + label::before {
	left: 0;
	transform: translateY(-50%);
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--contrast-200);
	background-color: var(--base);
	border-radius: var(--radius);
}

.items-wrap [type=radio]:hover + label::before,
.items-wrap [type=checkbox]:hover + label::before {
	border-color: var(--action-200);
}

.items-wrap [type=radio]:checked + label::before,
.items-wrap [type=checkbox]:checked + label::before{
	background-color: var(--action-0);
	border-color: var(--action-100);
}

.items-wrap [type=radio]:checked + label::before {
	border-radius: 50%;
}

.items-wrap [type=checkbox]:checked + label::after {
	display: block;
	left: 5px;
	top: 50%;
	transform: translateY(-70%) rotate(45deg);
	width: .35rem;
	height: .66rem;
	border: solid var(--light-0);
	border-width: 0 2px 2px 0;
}

.items-wrap :disabled + label {
	cursor: not-allowed;
	background-color: var(--base-50);
	color: var(--base-200);
	border-color: var(--base-200);
}

.items-wrap :disabled + label:hover {
	background-color: var(--base-50);
	color: var(--base-200);
	border-color: var(--base-200);
}

.items-wrap :disabled + label::before {
	border-color: var(--base-200);
}

#jvb-selector .items-wrap [type=radio] + label,
#jvb-selector .items-wrap [type=checkbox] + label{
	flex: 1;
	padding-left: 2rem!important;
	transform-origin: top center;
	will-change: transform;
}

.feed-block + footer {
	grid-column: full;
	padding: 0!important;
	margin: 0;
	background-color: var(--base-50);
	z-index: 0;
	display: flex;
	justify-content: flex-end;
	button {
		width: max-content;
		margin-left: auto;
		padding: .35rem .25rem;
		--w: 1.3em!important;
		flex-wrap: nowrap;
		justify-content:flex-start;
		transition: var(--trans-size);
		font-size: var(--txt-x-small);
		min-height: 0;
		span {
			display: none;
			white-space: nowrap;
		}
		&:focus span,
		&:hover span {
			display: block;
		}
	}
}