/*
 * Single project page layout (single-project.php). Loaded on project pages
 * only, by inc/enqueue.php. From the "Project" board on Page 4 (copy) in
 * Penpot. Frames, cuts, the masked photo and the top gradient are shared:
 * style.css § 16.
 *
 * In Penpot the content column is 1234px of a 1920px board; here that is
 * .bfc-container (1280px at most).
 */

/* The vivid gradient (style.css § 16) runs behind the header and the hero,
   to the end of the hero, so the dark shape sits on it; below it the page
   is black.
   The fallback, before site.js measures, covers a typical hero. */
.bfc-project {
	color: var(--bfc-color-text-default);
	/* Texts come from wp-admin: a long word or web address breaks rather
	   than pushing the page wider than the screen. */
	overflow-wrap: anywhere;
}


/* ==== Hero ================================================================ */
/* Name frame, photo, description frame: 10px apart in the design. */

.bfc-project__hero {
	position: relative;
	isolation: isolate; /* keeps the edge shape's z-index: -1 inside the hero */
	padding-block: var(--bfc-space-3xl) calc(var(--bfc-space-2xl) + var(--bfc-space-section-y));
	overflow-x: clip; /* the photo and the shape reach past the container */
	container-type: inline-size; /* 100cqw below: the page's width without the scrollbar (100vw includes it) */
}

/* Three rows: name, photo, description. The shape takes the photo's and
   the description's rows, so it never reaches the title. */
.bfc-project__hero-inner {
	isolation: isolate; /* keeps the shape's z-index: -1 inside the hero */
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* never wider than the screen */
	grid-template-rows: repeat(3, auto);
	gap: var(--bfc-space-2xs);
}

.bfc-project__name {
	grid-row: 1;
	grid-column: 1;
}

/* All in one column, over the shape (which takes that column too). */
.bfc-project__photo {
	grid-row: 2;
	grid-column: 1;
}

.bfc-project__description {
	grid-row: 3;
	grid-column: 1;
}

/* New look (Georgios, 2026-10-04): the purple shape (style.css § 16, the
   same fill as behind "Who we are" on the home page) behind photo and
   description, down to a little below the description. As wide as the
   photo on wide screens; 16px from the screen's edges on phones. */
.bfc-project__hero-shape {
	position: relative;
	z-index: -1;
	grid-row: 2 / -1;
	grid-column: 1;
	margin-inline: calc(50% - 50cqw + var(--bfc-space-s));
	margin-bottom: calc(-1 * var(--bfc-space-2xl));
}

/* A black slanted piece on the left, from the screen's edge to about a third
   of its width, rising out of the black section below so its top edge is not
   one straight line (Georgios, 2026-10-04). The hero's outline turned upside
   down, so its slant is on top. Black like the section, so the two read as
   one; it sits behind the purple shape. */
.bfc-project__edge-shape {
	position: absolute;
	z-index: -2;
	left: calc(-1 * var(--bfc-space-xl)); /* past the edge: the outline starts a little in */
	bottom: calc(-1 * var(--bfc-space-s));
	width: calc(33% + var(--bfc-space-xl));
	height: calc(var(--bfc-space-section-y) + var(--bfc-space-4xl));
	background-color: var(--bfc-color-bg-inverse);
	mask: url("../images/shapes/hero-black-shape.svg") 0 0 / 100% 100% no-repeat;
	transform: scale(-1, -1);
}

/* Penpot: a white frame 592px wide, centred. Here left, text left, and in
   the new look straight on the gradient with no frame (Georgios,
   2026-10-04). */
.bfc-project__name {
	max-width: 37rem;
}

.bfc-project__name--on-background {
	max-width: 50rem;
	padding-bottom: var(--bfc-space-xl);
}

/* The subtitle sits right under the title (Georgios, 2026-10-04). */
.bfc-project__title {
	margin-bottom: 0;
	overflow-wrap: break-word;
}

/* Montserrat semibold 24px: the heading-3 style. */
.bfc-project__subtitle {
	margin-bottom: 0;
	font-family: var(--bfc-text-heading-3-family);
	font-size: var(--bfc-text-heading-3-size);
	font-weight: var(--bfc-text-heading-3-weight);
	line-height: var(--bfc-text-heading-3-line-height);
}

/* 1920 × 843 in the design, full width. On phones it runs 48px past both
   edges of the screen, so the mask's sides are cropped; from 48rem it stops
   64px from the edges (Georgios, 2026-10-04). On phones 1920 × 843 would be
   a thin strip, so it is 3:2 there. */
.bfc-project__photo {
	margin-inline: calc(50% - 50cqw - var(--bfc-space-2xl));
}

.bfc-project__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.bfc-project__description > * {
	max-width: 46rem;
}

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

/* On phones the glow's empty right edge would leave the text too narrow:
   the description takes the plain amber frame there. */
@media (max-width: 47.99rem) {
	.bfc-project__description.bfc-frame--glow {
		padding-right: var(--bfc-space-xl);
		background-image: var(--bfc-gradient-frame-amber);
	}
}

/* The Penpot look ($project_page_in_new_look = false): plain white frames. */
.bfc-project__frame-white {
	padding: var(--bfc-space-xl);
	background-color: var(--bfc-color-bg-default);
}

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


/* ==== Dates (not in the design; in the description's frame) =============== */

.bfc-project__dates {
	margin-top: var(--bfc-space-2xl);
}

.bfc-project__dates-title {
	margin-bottom: var(--bfc-space-gap-content);
}

.bfc-project__date-list {
	display: grid;
	gap: var(--bfc-space-gap-content);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bfc-project__date p {
	margin: 0;
}

.bfc-project__date-when {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--bfc-space-xs);
	font-weight: var(--bfc-font-weight-semibold);
}

.bfc-project__date-address {
	display: block;
}


/* ==== On black: trailer, photos, credits, funders ========================= */
/* Penpot: 32px above, 80px below, 16px under each title, 48px between the
   trailer and the photos. */

.bfc-project__media,
.bfc-project__credits {
	padding-block: var(--bfc-space-xl) var(--bfc-space-4xl);
}

.bfc-project__media .bfc-container,
.bfc-project__credits .bfc-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bfc-space-2xl);
}

/* Bebas Neue 48px: the heading-1 size, on an h2. */
.bfc-project__section-title {
	margin-bottom: var(--bfc-space-s);
	font-size: var(--bfc-text-heading-1-size);
	line-height: var(--bfc-text-heading-1-line-height);
}

.bfc-project__trailer {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.bfc-project__trailer--embed iframe {
	width: 100%;
	height: 100%;
}

/* Two columns, 24px apart, rows 16px apart; 610 × 368 each. */
.bfc-project__photos {
	display: grid;
	gap: var(--bfc-space-s) var(--bfc-space-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bfc-project__photos img {
	display: block;
	width: 100%;
	aspect-ratio: 610 / 368;
	object-fit: cover;
}

/* Role | names: 306px and the rest, 16px apart, rows 16px apart. On phones
   the role sits above the names. */
.bfc-project__credit-list {
	display: grid;
	gap: var(--bfc-space-s);
	max-width: 58.5rem; /* 936px */
	margin: 0;
}

.bfc-project__credit {
	display: grid;
	gap: 0 var(--bfc-space-s);
}

.bfc-project__credit dt {
	font-weight: var(--bfc-font-weight-semibold);
}

.bfc-project__credit dd {
	margin: 0;
}

/* Logos in a row, 16px apart, then the small text. 700px wide in the
   design. */
.bfc-project__funders {
	display: grid;
	gap: var(--bfc-space-s);
	max-width: 43.75rem;
}

.bfc-project__funder-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bfc-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bfc-project__funder img {
	display: block;
	width: auto;
	max-width: 10rem;
	height: 2.5rem;
	object-fit: contain;
}

.bfc-project__funder a {
	color: inherit;
}

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


/* ==== Wider screens ======================================================= */

@media (min-width: 48rem) {
	.bfc-project__photo img {
		aspect-ratio: 1920 / 843;
	}

	.bfc-project__photo {
		margin-inline: calc(50% - 50cqw + var(--bfc-space-3xl));
	}

	.bfc-project__hero-shape {
		margin-inline: calc(50% - 50cqw + var(--bfc-space-3xl));
		margin-bottom: calc(-1 * var(--bfc-space-3xl));
	}

	/* Penpot: 64px / 120px padding round the description. */
	.bfc-project__description {
		padding-block: var(--bfc-space-3xl);
		padding-left: 7.5rem;
	}

	.bfc-project__dates {
		margin-top: var(--bfc-space-3xl);
	}

	/* Dates side by side, as many columns as fit. */
	.bfc-project__date-list {
		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
		gap: var(--bfc-space-xl);
	}

	.bfc-project__photos {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.bfc-project__credit {
		grid-template-columns: 19.125rem minmax(0, 1fr); /* 306px */
	}

	.bfc-project__credit dt {
		font-weight: inherit;
	}
}