/*
 * The projects listing, variation A "The index" (page-projects.php,
 * ?variation=a; markup in template-parts/projects-variation-a.php): every
 * project as the site's project card under its premiere year, on black.
 *
 * Loaded on the projects page with variation B's file (inc/enqueue.php),
 * so every rule here starts with .bfc-projects-index.
 *
 * The cards are the site's project card (style.css § 15, 'look' =>
 * 'stage'); only the year groups are laid out here. The page's opening,
 * the black section and the filter are in projects.css.
 *
 * No lines between cards or years: space only (Georgios, 2026-10-04).
 */

/* A row or group set to display: grid would show even with the hidden
   attribute, which the filter uses (projects.js): hidden wins. */
.bfc-projects-index [hidden] {
	display: none;
}

.bfc-projects-index {
	display: grid;
	gap: var(--bfc-space-4xl);
}

/* ---- A year: its heading, then its projects ---- */

.bfc-projects-index__group {
	display: grid;
	gap: var(--bfc-space-xl);
}

.bfc-projects-index__year {
	margin: 0;
	color: inherit;
	font-family: var(--bfc-text-display-family);
	font-size: var(--bfc-text-display-size);
	font-weight: var(--bfc-text-display-weight);
	line-height: var(--bfc-text-display-line-height);
	letter-spacing: var(--bfc-text-display-letter-spacing);
}

/* "Other projects" (no premiere date) and "Upcoming" (no dates yet) are
   words, not four digits: a size smaller, so they fit the year column on
   wide screens. */
.bfc-projects-index__year--other {
	font-size: var(--bfc-text-heading-2-size);
}

/* ---- The projects of a year: the site's project card (style.css § 15,
   'look' => 'stage'), one under the other ---- */

.bfc-projects-index__cards {
	display: grid;
	gap: var(--bfc-space-4xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---- Wider screens ---- */

/* The year in a column of its own on the left, staying in view below the
   sticky header (style.css § 11) while its projects scroll past. A sticky
   element never leaves its parent, so it stops at its group's end. */
@media (min-width: 64rem) {
	.bfc-projects-index__group {
		grid-template-columns: 12rem minmax(0, 1fr);
		column-gap: var(--bfc-space-xl);
	}

	.bfc-projects-index__year {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--bfc-space-4xl) + var(--bfc-space-s));
		align-self: start;
	}
}