/* Structural styles only. Colors, spacing, typography, borders, shadows
   are all driven by the widgets' Elementor Style controls (inline). */

.pf-filter__list {
	display: flex;
	flex-wrap: wrap;
}

.pf-filter__list--vertical {
	flex-direction: column;
}

.pf-filter__list--horizontal {
	flex-direction: row;
}

.pf-filter__list--grid {
	display: grid;
	grid-template-columns: repeat( var( --pf-columns, 2 ), 1fr );
}

.pf-choice {
	display: flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pf-choice input {
	cursor: pointer;
}

.pf-results {
	position: relative;
	transition: opacity 0.15s ease;
}

.pf-results.is-loading,
.pf-filter.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

.pf-grid {
	display: grid;
	grid-template-columns: repeat( var( --pf-columns, 4 ), 1fr );
}

@media ( max-width: 1024px ) {
	.pf-grid {
		grid-template-columns: repeat( min( var( --pf-columns, 4 ), 2 ), 1fr );
	}
}

@media ( max-width: 600px ) {
	.pf-grid {
		grid-template-columns: 1fr;
	}
}

.pf-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.pf-card__thumb-link {
	display: block;
}

.pf-card__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.pf-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.pf-card__title {
	margin: 0 0 0.5em;
}

.pf-card__title a {
	text-decoration: none;
}

.pf-card__excerpt {
	flex: 1;
}

.pf-card__excerpt p {
	margin: 0;
}

.pf-card__readmore {
	display: inline-block;
	align-self: flex-start;
	margin-top: 0.75em;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pf-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	margin-top: 1.5em;
}

.pf-page-btn {
	cursor: pointer;
}

.pf-page-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.pf-native-no-results__message {
	margin: 0;
	padding: 2em 0;
	text-align: center;
}

/* Fade-in for newly-swapped-in filter results (see fadeIn() in pf-frontend.js),
   applied both to the "Results" widget target and the native-mode swapped
   widget. */
@keyframes pf-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.pf-fade-in {
	animation: pf-fade-in 0.3s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.pf-fade-in {
		animation: none;
	}
}