/* ==========================================================================
   Oak Grove Display Village — Responsive Load More
   Separate stylesheet (loaded after display-village.css). Owns the JS-managed
   card visibility, the reveal animation, and the Load More loading spinner.
   ========================================================================== */

/* JS-managed visibility once a section is active (overrides the pre-JS CSS). */
.ogdv-section.is-js .ogdv-hide {
	display: none !important;
}

/* Newly revealed / appended cards fade-and-rise in. */
.ogdv-grid > *,
.ogdv-cards > * {
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.ogdv-grid > .ogdv-in,
.ogdv-cards > .ogdv-in {
	opacity: 0;
	transform: translateY(8px);
}
@media (prefers-reduced-motion: reduce) {
	.ogdv-grid > *,
	.ogdv-cards > * {
		transition: none;
	}
	.ogdv-grid > .ogdv-in,
	.ogdv-cards > .ogdv-in {
		opacity: 1;
		transform: none;
	}
}

/* Show More / Show Less toggle — flip the chevron up when expanded. */
.ogdv-loadmore .b-home-header__bottom-arrow span {
	transition: transform 0.2s ease;
}
.ogdv-loadmore.is-expanded .b-home-header__bottom-arrow span {
	transform: rotate(180deg);
}
/* Keep the chevron flipped on hover (the base sheet's hover nudge out-specifies
   the rule above), so an expanded button's arrow never points back down. */
.ogdv-loadmore.is-expanded .b-home-header__bottom-arrow:hover span {
	transform: rotate(180deg) translateY(5px);
}

/* Load More loading state — spinner in place of the label. Overrides the
   opacity-only rule in display-village.css (this sheet loads later). */
.ogdv-loadmore {
	position: relative;
}
.ogdv-loadmore.is-loading {
	opacity: 1;
	cursor: progress;
	pointer-events: none;
}
.ogdv-loadmore.is-loading .copy2 {
	visibility: hidden;
}
.ogdv-loadmore.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(22, 43, 63, 0.3);
	border-top-color: var(--ogdv-dark-blue);
	border-radius: 50%;
	animation: ogdv-spin 0.6s linear infinite;
}
@keyframes ogdv-spin {
	to { transform: rotate(360deg); }
}