/*
 * The projects listing, variation B, "The series" (page-projects.php,
 * ?variation=b; markup in template-parts/projects-variation-b.php).
 * Loaded together with variation A's file on that page, so every rule here
 * starts with a .bfc-projects-b class.
 *
 * The cards (style.css § 15), the tags and the date grid (§ 18) bring their
 * own look; this file places them: the large years, the stagger across the
 * year groups, and "Every performance".
 */

/* ---- The series: years, then the staggered cards ---- */

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

.bfc-projects-b__year-group {
	display: grid;
	gap: var(--bfc-space-l);
}

/* display: grid would otherwise win over the hidden attribute. */
.bfc-projects-b__year-group[hidden],
.bfc-projects-b__performances[hidden],
.bfc-projects-b__performance-year[hidden] {
	display: none;
}

/* The year large in the display font, on its own line above its cards, in
   the room between two groups, so it never covers a card's text. Closer to
   its own cards (gap l) than to the ones before (gap 4xl). */
.bfc-projects-b__year {
	margin: 0;
	font-family: var(--bfc-font-family-display);
	font-size: clamp(4rem, 2rem + 8vw, 10rem);
	line-height: 0.8;
	letter-spacing: var(--bfc-text-display-letter-spacing);
}

/* The test project's very long title: break anywhere rather than widen
   the page at 360px. */
.bfc-projects-b .bfc-card-beta__title {
	overflow-wrap: anywhere;
}

/* ---- Every performance ---- */

.bfc-projects-b__performances {
	margin-top: var(--bfc-space-4xl);
}

/* The look of the project page's "Dates" title (project-variations.css,
   .bfc-project-a__section-title), which is not loaded here. */
.bfc-projects-b__section-title {
	margin-bottom: var(--bfc-space-xl);
	font-size: var(--bfc-text-display-size);
	line-height: var(--bfc-text-display-line-height);
}

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

.bfc-projects-b__performance-year-title {
	margin-bottom: var(--bfc-space-l);
	font-family: var(--bfc-text-heading-1-family);
	font-size: var(--bfc-text-heading-1-size);
	font-weight: var(--bfc-text-heading-1-weight);
	line-height: 1;
}