/*
 * The projects listing (page-projects.php), the parts both variations share:
 * the opening on the vivid gradient, the black list section rising on its
 * spiky edge, and the filter. Loaded on that template only, by
 * inc/enqueue.php. Each variation's own layout is in
 * projects-variation-a.css and projects-variation-b.css.
 *
 * Built only from the shared pieces (style.css § 2, § 6, § 15, § 16, § 18):
 * planning/specs/projects-pages/listing-variations-proposal.md, § 2.
 */

/* ---- The opening: title and the Page's text on the gradient ---- */

/* Room below for the black section's spikes, which rise into it. */
.bfc-projects__opening {
	padding-block: var(--bfc-space-2xl) calc(var(--bfc-space-4xl) + var(--bfc-space-2xl));
}

/* As large as a project page's title, one size down: it names the page,
   not a piece. */
.bfc-projects__title {
	margin: 0;
	font-size: clamp(3rem, 1.6rem + 6vw, 8rem);
	line-height: 0.95;
}

/* The Page's own text, straight on the gradient under the title, without a
   frame (Georgios, 2026-10-04: first in the glow frame, then without it).
   The first paragraph as a lead. */
.bfc-projects__intro {
	max-width: 40rem;
	margin-top: var(--bfc-space-l);
}

/* The same size and weight as .bfc-text-lead (style.css): the Page's text
   comes from the editor, so it can't carry the class. */
.bfc-projects__intro > p:first-child {
	font-size: var(--bfc-font-size-xl);
	font-weight: var(--bfc-font-weight-semibold);
	line-height: var(--bfc-font-leading-snug);
}

.bfc-projects__intro > :last-child {
	margin-bottom: 0;
}

/* ---- The pointy shape on the right (Georgios, 2026-10-04, third version) ---- */
/* The project page's long black pointy shape (.bfc-project-a__pointy-shape
   in project-variations.css, itself the home page's), mirrored: its base on
   the screen's right edge at the opening's foot, joining the black section,
   the long point rising to the left. The project page wobbles it with
   springs on scroll (project.js § 3); this page has no such script, so here
   the same outline wobbles by itself: the point takes the whole stretch, the
   rest a fraction. Wide screens only, clear of the text. With motion off
   (the switch or the system setting, style.css § 5) it stands still. */
.bfc-projects__pointy-shape {
	display: none;
}

@media (min-width: 75rem) {
	.bfc-projects__opening {
		position: relative;
	}

	.bfc-projects__pointy-shape {
		position: absolute;
		right: 0;
		bottom: 0;
		display: block;
		width: 9.5rem; /* the point stays below the header */
		aspect-ratio: 263 / 706; /* the home page's shape */
		background-color: var(--bfc-color-bg-inverse);
		transform: scaleX(-1); /* the base on the right */
		clip-path: polygon(40.68% 18.13%, 100% 0%, 46.39% 20.68%, 18.25% 67.14%, 11.79% 71.81%, 6.84% 79.04%, 7.98% 91.08%, 19.47% 95.86%, 5.32% 96.03%, 0% 100%, 0% 52.27%, 8.75% 63.03%);
		animation: bfc-projects-point-wobble 6s ease-in-out infinite;
	}
}

@keyframes bfc-projects-point-wobble {
	0%, 100% { clip-path: polygon(40.68% 18.13%, 100% 0%, 46.39% 20.68%, 18.25% 67.14%, 11.79% 71.81%, 6.84% 79.04%, 7.98% 91.08%, 19.47% 95.86%, 5.32% 96.03%, 0% 100%, 0% 52.27%, 8.75% 63.03%); }
	30%       { clip-path: polygon(40.68% calc(18.13% + 7.0px), calc(100% - 14.0px) 28px, 46.39% calc(20.68% + 7.0px), calc(18.25% + 8.4px) 67.14%, 11.79% 71.81%, 6.84% 79.04%, 7.98% 91.08%, calc(19.47% + 8.4px) 95.86%, 5.32% 96.03%, 0% 100%, 0% 52.27%, 8.75% 63.03%); }
	55%       { clip-path: polygon(40.68% calc(18.13% + -4.0px), 100% 0%, 46.39% calc(20.68% + -4.0px), calc(18.25% + -4.2px) 67.14%, 11.79% 71.81%, 6.84% 79.04%, 7.98% 91.08%, calc(19.47% + -4.8px) 95.86%, 5.32% 96.03%, 0% 100%, 0% 52.27%, 8.75% 63.03%); }
	75%       { clip-path: polygon(40.68% calc(18.13% + 3.0px), calc(100% - 5.0px) 10px, 46.39% calc(20.68% + 3.0px), calc(18.25% + 3.0px) 67.14%, 11.79% 71.81%, 6.84% 79.04%, 7.98% 91.08%, calc(19.47% + 3.6px) 95.86%, 5.32% 96.03%, 0% 100%, 0% 52.27%, 8.75% 63.03%); }
}

/* ---- The black section ---- */

/* It rises over the foot of the opening, so its spikes show against the
   gradient (the gradient ends with the opening: site.js § 5). */
.bfc-projects__list {
	--bfc-spike-height: var(--bfc-space-2xl);
	position: relative;
	margin-top: calc(-1 * var(--bfc-spike-height));
	padding-bottom: var(--bfc-space-4xl);
}

@media (min-width: 64rem) {
	.bfc-projects__list {
		--bfc-spike-height: var(--bfc-space-4xl);
	}
}

/* ---- The filter: All · Upcoming · Past ---- */

.bfc-projects-filter {
	margin-bottom: var(--bfc-space-3xl);
}

.bfc-projects-filter__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--bfc-space-xs) var(--bfc-space-l);
}

.bfc-projects-filter__label {
	margin: 0;
	color: inherit;
}

.bfc-projects-filter__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bfc-space-xs) var(--bfc-space-xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The display font, large enough to be the section's heading in effect.
   The view shown is underlined (not told by colour alone); the others
   underline on hover and focus. */
.bfc-projects-filter__choice {
	display: inline-block;
	padding-block: var(--bfc-space-2xs);
	color: inherit;
	font-family: var(--bfc-text-display-family);
	font-size: var(--bfc-text-heading-2-size);
	line-height: 1;
	letter-spacing: var(--bfc-text-display-letter-spacing);
	text-decoration: none;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 0.08em;
}

.bfc-projects-filter__choice[aria-current="page"],
.bfc-projects-filter__choice:hover {
	text-decoration-line: underline;
}

.bfc-projects-filter__count {
	font-family: var(--bfc-text-body-small-family);
	font-size: var(--bfc-text-body-small-size);
	vertical-align: super;
	line-height: 0;
}

.bfc-projects-filter__empty {
	margin-top: var(--bfc-space-xl);
	font-size: var(--bfc-font-size-l);
}

.bfc-projects-filter__empty a {
	color: inherit;
}

/* ---- Switching views (assets/js/projects.js) ---- */

/* An item that appears settles in: from slightly lower, at 60% opacity,
   never invisible (Decision 014; none with motion off, style.css § 5). */
.bfc-filter-arrived {
	animation: bfc-filter-arrive 0.5s ease both;
}

@keyframes bfc-filter-arrive {
	from {
		opacity: 0.6;
		transform: translateY(var(--bfc-space-s));
	}
}

/* A staggered list (variation B): the script numbers the visible cards
   left, right, left… again after each switch, since :nth-child (style.css
   § 15) would count the hidden ones too. The cards may sit inside year
   groups, so any depth. */
.bfc-projects [data-bfc-filter-stagger] [data-bfc-stagger="left"] {
	margin-right: var(--bfc-card-stagger);
	margin-left: 0;
}

.bfc-projects [data-bfc-filter-stagger] [data-bfc-stagger="right"] {
	margin-right: 0;
	margin-left: var(--bfc-card-stagger);
}