/**
 * Post feed filter front-end styling
 *
 * Defines front-end styling. All view.css files
 * like this one only load when enqueued manually
 * or via a block.json file. You can import this
 * file into an editor.css file to apply these
 * front-end styles within the block editor.
 */

.post-feed-filter {
	display: flex;
	gap: 1em;
	justify-content: center;
	min-width: 0;
}

.post-feed-filter a.is-style-outline-hvr-black {
		--c-btn-bg: transparent;
		--c-btn-bd: var(--c-0-0);
		--c-btn-txt: var(--c-0-0);
		--c-btn-hvr-bg: var(--c-0-0);
		--c-btn-hvr-bd: var(--c-0-0);
		--c-btn-hvr-txt: var(--c-0-9);
		padding: 0.5em 1em;
		font-size: 1em;
	}

.post-feed-filter a.is-style-outline-hvr-black[aria-current="page"] {
			--c-btn-bg: var(--c-0-0);
			--c-btn-bd: var(--c-0-0);
			--c-btn-txt: var(--c-0-9);
		}
@media (max-width: 959px) {
.post-feed-filter__link {
		display: none
}
	}
.post-feed-filter__select {
	display: none;
	font-size: var(--fs-h5);
}
@media (max-width: 959px) {
.post-feed-filter__select {
		display: block
}
	}
.post-feed-excerpts {
	scroll-margin: 15em;
}
.post-feed-excerpt {
	transition: var(--ani-speed) ease-out;
}
.post-feed-excerpt.is-loading,
	.post-feed-excerpt.is-inactive {
		opacity: 0.2;
	}
.post-feed-excerpt.is-loading figure.post-feed-excerpt__image-link::after, .post-feed-excerpt.is-inactive figure.post-feed-excerpt__image-link::after {
			transform: translateY(0);
			opacity: 0.8;
			background-color: var(--c-1-5);
		}
.post-feed-excerpt.is-loading figure.post-feed-excerpt__image-link::after {
			transition-duration: 0.2s;
		}
.post-feed-excerpt.is-inactive {
		opacity: 0;
	}
.post-feed-excerpt__image-link {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--bd-rad-m);
}
.post-feed-excerpt__image-link::after {
		pointer-events: none;
		content: "";
		position: absolute;
		inset: 0;
		background-image: linear-gradient(
			180deg,
			transparent 45%,
			var(--c-1-5) 85%
		);
		transition-property: transform, opacity, background-color;
		transition-duration: 0.6s;
	}
.post-feed-excerpt:not(:hover) .post-feed-excerpt__image-link::after {
			opacity: 0;
			transition-duration: 1s;
		}
.post-feed-excerpt__image-link .wp-block-image {
		margin: 0;
	}
.post-feed-excerpt__image-link img {
		aspect-ratio: 1;
		object-fit: cover;
		display: block;
	}