/* =========================================================================
   SUMBRA — Projects Archive
   ========================================================================= */

/* The intro now lives in the normal shared .sumbra-container, so its left
   edge matches the grid below. Width limits go on the text elements, not
   the container (the previous max-width on the container itself narrowed
   and re-centred the whole block). All selectors are scoped to this
   archive so Ideas, Solutions and other heroes are unaffected. */
.sumbra-projects-archive .sumbra-hero { padding-bottom: var(--sumbra-space-md); }
.sumbra-projects-archive .sumbra-hero .sumbra-h1 {
	max-width: 24ch;          /* overrides the shared 10ch hero cap */
	text-wrap: balance;       /* balanced wrapping, no hard line breaks */
}
.sumbra-projects-archive .sumbra-hero .sumbra-lead { max-width: 56ch; margin-bottom: 0; }
/* Tighter rhythm: hero → filters → cards (was ~60px + ~96px of stacked padding). */
.sumbra-projects-archive__filters { padding-top: 0; padding-bottom: var(--sumbra-space-sm); }
.sumbra-projects-archive__filters + .sumbra-section { padding-top: var(--sumbra-space-sm); }
.sumbra-projects-archive .sumbra-hero + .sumbra-section { padding-top: var(--sumbra-space-md); } /* no filters rendered */

.sumbra-projects-archive__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sumbra-space-xs);
}
.sumbra-projects-filter {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--sumbra-piedra);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 0.85rem;
	color: var(--sumbra-carbon);
	text-decoration: none;
}
.sumbra-projects-filter:hover { border-color: var(--sumbra-carbon); }
.sumbra-projects-filter.is-active { background: var(--sumbra-carbon); border-color: var(--sumbra-carbon); color: var(--sumbra-marfil); }

.sumbra-projects-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sumbra-space-lg) var(--sumbra-space-md);
}
.sumbra-projects-archive__card { display: block; color: inherit; text-decoration: none; }
.sumbra-projects-archive__media { aspect-ratio: 4/5; overflow: hidden; margin-bottom: var(--sumbra-space-sm); }
.sumbra-projects-archive__media .sumbra-media__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sumbra-projects-archive__card:hover .sumbra-media__img { transform: scale(1.02); }
.sumbra-projects-archive__title { font-family: var(--sumbra-font-display); font-size: 1.3rem; margin: 0 0 4px; }
.sumbra-projects-archive__meta { font-size: 0.85rem; color: var(--sumbra-piedra); margin: 0; }

@media (max-width: 900px) {
	.sumbra-projects-archive__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.sumbra-projects-archive__grid { grid-template-columns: 1fr; }
}