/* =========================================================================
   THE OPPORTUNITY ARCHIVE

   The shell, the heading block and the load-more row. Nothing else.

   Everything from the grid wrapper down is opportunity-card.css — the
   archive renders the same cards, in the same grid, as the shortcode and
   the related rail. A second grid definition here is exactly how the three
   would start to disagree, so there is not one.

   Nothing in this file restyles a card. If a card needs to change, it
   changes in opportunity-card.css and every listing follows.

   Deliberately the twin of essay-archive.css: same tokens, same gutter,
   same rhythm. The two archives are the same kind of page and should not
   need a reader to relearn the shape.
   ========================================================================= */

.befello-opportunity-archive {
	/* The same gutter the Essay archive uses, so moving between the two
	   indexes does not make the page's left edge jump. */
	--bfoa-gutter: clamp(20px, 3vw, 96px);

	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--bfoa-gutter);
	padding-block: clamp(32px, 5vw, 64px) clamp(48px, 7vw, 96px);
	background: var(--befello-canvas);
}


/* --- The heading block ---------------------------------------------------
   Title, an optional term description, then the count. No eyebrow above
   the title: a label reading OPPORTUNITIES over a heading reading
   Opportunities is two labels for one thing. */

.opportunity-archive__head {
	margin-bottom: clamp(28px, 4vw, 44px);
}

.opportunity-archive__title {
	margin: 0;
	color: var(--befello-ink);
	font-family: var(--befello-font);
	/* Fluid between DESIGN_SYSTEM.md §6.3's 32px mobile H1 and §6.2's 40px
	   desktop H1, so the page title lands on the scale at both ends rather
	   than at one and near it at the other. */
	font-size: clamp(2rem, 1.4rem + 2.4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

/* A term description is prose, so it gets a real measure rather than
   running the full width of a 1440px shell. */
.opportunity-archive__intro {
	max-width: 62ch;
	margin: 16px 0 0;
	color: var(--befello-ink);
	font-family: var(--befello-font-dek);
	font-size: 1.125rem;
	line-height: 1.6;
}

.opportunity-archive__intro p {
	margin: 0 0 12px;
}

.opportunity-archive__intro p:last-child {
	margin-bottom: 0;
}

/* Body font, not a mono stamp: this is a plain fact about the list, and
   setting it in uppercase made a count read as a section label. */
.opportunity-archive__count {
	margin: 12px 0 0;
	color: var(--befello-ink-muted);
	font-family: var(--befello-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}


/* --- Load more -----------------------------------------------------------
   Centred under the grid with enough air that it reads as the end of the
   page rather than as a fifth card. */

.opportunity-archive__more {
	display: flex;
	justify-content: center;
	margin-top: clamp(32px, 4vw, 48px);
}

/* Full width on a phone, where a centred pill in a column of full-width
   cards is the one element that does not line up with anything. */
@media (max-width: 639.98px) {

	.opportunity-archive__more-btn {
		width: 100%;
	}
}


/* --- Empty state ---------------------------------------------------------
   The grid layer already styles .befello-opportunity-grid__empty; this only
   gives it the archive's own top margin, so the message sits where the
   first row would have. */

.befello-opportunity-archive .befello-opportunity-grid__empty {
	margin-top: 0;
}