/**
 * Projects: card grid (feeds, archives, filter) and single project details.
 */

/* Grid: up to 4 columns, collapsing to fit; a short list stretches to fill the row. */
.wb-projects {
	--wb-projects-gap: 20px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 3 * var(--wb-projects-gap)) / 4)), 1fr));
	gap: var(--wb-projects-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: clip;
}

.wb-projects > li {
	display: flex;
	margin: 0;
	padding: 0;
}

.wb-projects > li::before {
	content: none;
}

/* Card: matches the site's Card group style (white, hairline border, large radius, lift on hover). */
.wb-project-card {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line, #e3e1db);
	border-radius: var(--wp--preset--border-radius--lg, 14px);
	background-color: var(--wp--preset--color--base, #fff);
	transition: transform 0.25s var(--wbd-ease, ease-out), box-shadow 0.25s var(--wbd-ease, ease-out), border-color 0.25s;
}

.wb-project-card:has(.wb-project-card__link:is(:hover, :focus-visible)) {
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow: var(--wp--preset--shadow--md, 0 8px 30px rgb(0 23 46 / 0.12));
}

.wb-project-card__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.wb-project-card__link:hover,
.wb-project-card__link:focus {
	color: inherit;
	text-decoration: none;
}

.wb-project-card__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, #c03);
	outline-offset: -3px;
	border-radius: inherit;
}

.wb-project-card__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-bottom: 1px solid var(--wp--preset--color--line, #e3e1db);
	background-color: var(--wp--preset--color--paper, #f1f0eb);
}

.wb-project-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.5s var(--wbd-ease, ease-out);
}

/* Tall screenshots: show the top of the page, and zoom from the top so it stays in view. */
.wb-project-card__image.is-screenshot {
	object-position: top center;
	transform-origin: top center;
}

.wb-project-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 18px 22px 22px;
}

.wb-project-card__meta {
	margin: 0 0 8px;
	color: var(--wp--preset--color--primary, #c03);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

.wb-project-card__title {
	margin: 0;
	color: var(--wp--preset--color--ink, #222629);
	font-size: 1.1rem;
	line-height: 1.3;
}

/* "View project" sits at the foot of the card so the links line up across a row. */
.wb-project-card__more {
	margin-top: auto;
	padding-top: 14px;
	color: var(--wp--preset--color--slate, #686e77);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 0.85rem;
	font-weight: 600;
	transition: color 0.2s;
}

.wb-project-card__more::after {
	content: "\2192";
	display: inline-block;
	margin-left: 6px;
	transition: translate 0.25s var(--wbd-ease, ease-out);
}

/* Hover/focus: zoom the screenshot slightly and nudge the arrow. */
.wb-project-card__link:is(:hover, :focus-visible) .wb-project-card__image {
	scale: 1.04;
}

.wb-project-card__link:is(:hover, :focus-visible) .wb-project-card__more {
	color: var(--wp--preset--color--primary, #c03);
}

.wb-project-card__link:is(:hover, :focus-visible) .wb-project-card__more::after {
	translate: 4px 0;
}

/* Cards slide in from the sides as they scroll into view. */
@keyframes wb-project-slide-in {
	from {
		opacity: 0;
		translate: var(--wb-slide-from, -40%) 0;
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.wb-projects > li {
			animation: wb-project-slide-in linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 100%;
		}

		.wb-projects > li:nth-child(4n + 3),
		.wb-projects > li:nth-child(4n) {
			--wb-slide-from: 40%;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.wb-project-card,
	.wb-project-card__image,
	.wb-project-card__more,
	.wb-project-card__more::after {
		transition: none;
	}
}

.wb-project-feed__empty {
	text-align: center;
}

/* Single project: date/package bar, coloured with the project's accent colour. */
.wb-project-details {
	background-color: var(--wb-project-accent, var(--wp--preset--color--primary, #c03));
	color: var(--wb-project-accent-contrast, var(--wp--preset--color--base, #fff));
	text-align: center;
}

.wb-project-details a {
	color: inherit;
	text-decoration: underline;
}

.wb-project-details .wb-project-details__label {
	margin: 0;
	font-weight: 700;
}