/*
 * Projects: filter pills, single-project meta card + gallery.
 */

/* --------------------------------------------------------------- filter */

.asli-projects__filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--asli-space-xs);
	margin-block-end: var(--asli-space-xl);
}

.asli-projects__filter-btn {
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--asli-border);
	border-radius: var(--asli-radius-pill);
	background: var(--asli-surface);
	color: var(--asli-ink);
	font-weight: var(--asli-weight-medium);
	cursor: pointer;
	transition:
		background-color var(--asli-duration) var(--asli-ease),
		color var(--asli-duration) var(--asli-ease),
		border-color var(--asli-duration) var(--asli-ease);
}

.asli-projects__filter-btn:hover {
	border-color: var(--asli-blue);
	color: var(--asli-blue);
}

.asli-projects__filter-btn.is-active {
	background: var(--asli-blue);
	border-color: var(--asli-blue);
	color: var(--asli-text-on-dark);
}

/* -------------------------------------------------------------- single */

.asli-project-single__grid {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: var(--asli-space-2xl);
	align-items: start;
}

@media (max-width: 1024px) {
	.asli-project-single__grid {
		grid-template-columns: 1fr;
	}
}

.asli-project-meta {
	background: var(--asli-surface-alt);
	border-radius: var(--asli-radius-box);
	padding: var(--asli-space-lg);
	position: sticky;
	top: var(--asli-space-lg);
}

.asli-project-meta__title {
	margin-block-end: var(--asli-space-md);
}

.asli-project-meta__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
}

.asli-project-meta__row {
	display: flex;
	align-items: center;
	gap: var(--asli-space-md);
	padding-block: var(--asli-space-sm);
}

.asli-project-meta__row + .asli-project-meta__row {
	border-block-start: 1px solid var(--asli-border);
}

.asli-project-meta__text {
	display: grid;
	line-height: 1.45;
}

.asli-project-meta__text strong {
	color: var(--asli-ink);
}

.asli-project-single__image {
	width: 100%;
	border-radius: var(--asli-radius-card);
	margin-block-end: var(--asli-space-lg);
}

/* -------------------------------------------------------------- gallery */

.asli-project-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--asli-space-md);
	margin-block-start: var(--asli-space-lg);
}

@media (max-width: 767px) {
	.asli-project-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.asli-project-gallery img {
	border-radius: var(--asli-radius-tile);
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
}