/* =========================================================================
   Query Loop — Load More
   Styles the injected "See More" button and the fade-in of appended cards.
   The button is JS-injected, so none of this affects no-JS visitors (they
   keep the native pagination).
   ========================================================================= */

.acf-load-more {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 2.5rem;
	font-family: var(--wp--preset--font-family--lato);
}

.acf-load-more__button {
	font-family: var(--wp--preset--font-family--lato, inherit);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--black-70-text);
	background-color: var(--wp--preset--color--buff, #a89a7b);
	border: 0;
	border-radius: 0;
	padding: 0.95rem 2.25rem;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.acf-load-more__button:hover,
.acf-load-more__button:focus-visible {
	opacity: 0.85;
}

.acf-load-more__button[aria-busy="true"] {
	opacity: 0.6;
	cursor: default;
}

/* Screen-reader-only status announcements. */
.acf-load-more__status {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Gentle fade/rise as newly loaded cards come in. */
.acf-load-more-item-enter {
	animation: acf-load-more-fade 0.4s ease both;
}

@keyframes acf-load-more-fade {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.acf-load-more-item-enter {
		animation: none;
	}
}