/* Project Portfolio — Archive Page ([project_archive])
   Filter chips + responsive grid. Card styling itself lives in
   ppf-carousel.css (.ppf-carousel__card etc.) and is reused as-is so
   the archive cards stay visually identical to the homepage carousel. */

.ppf-archive__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}

.ppf-archive__chip {
	padding: 9px 20px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.2); /* "Border Subtle" per spec */
	background: transparent;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ppf-archive__chip:hover:not(.is-active) {
	border-color: var(--ppf-color-primary, #4CAD49);
}

.ppf-archive__chip.is-active {
	background: var(--ppf-color-primary, #4CAD49);
	border-color: var(--ppf-color-primary, #4CAD49);
	color: #0f1210;
}

.ppf-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 992px) {
	.ppf-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 576px) {
	.ppf-archive__grid {
		grid-template-columns: 1fr;
	}
}

/* Filtered-out cards are fully removed from layout, not just hidden
   visually, so the grid reflows cleanly with no gaps. */
.ppf-archive__grid .ppf-carousel__card.is-hidden {
	display: none;
}

/* Cards past the Show More limit, before JS takes over. A <noscript> rule
   in the shortcode output shows them again if JavaScript is unavailable. */
.ppf-archive__grid .ppf-carousel__card.is-collapsed {
	display: none;
}

/* Show More — styled like the active filter chip. */
.ppf-archive__more {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

.ppf-archive__more[hidden] {
	display: none;
}

.ppf-archive__more-btn {
	padding: 12px 32px;
	border-radius: 999px;
	border: 1px solid var(--ppf-color-primary, #4CAD49);
	background: var(--ppf-color-primary, #4CAD49);
	color: #0f1210;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ppf-archive__more-btn:hover {
	background: transparent;
	color: #fff;
}

.ppf-archive__more-btn:focus-visible {
	outline: 2px solid var(--ppf-color-accent, #FBEF21);
	outline-offset: 3px;
}

/* Smooth reveal for cards loaded by Show More (delay set per card in JS). */
@keyframes ppf-archive-reveal {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.ppf-archive__grid .ppf-carousel__card.is-revealing {
	animation: ppf-archive-reveal 0.45s ease both;
}

@media (prefers-reduced-motion: reduce) {
	.ppf-archive__grid .ppf-carousel__card.is-revealing {
		animation: none;
	}
}