/* ===========================================================================
 * Calls & Announcements — the archive
 *
 * One page, three jobs: show what can be answered now, keep the record of what
 * was asked before, and never let the second read as the first. The open calls
 * are set at full strength with their deadline beside them; the closed ones are
 * visibly quieter and carry their status on every row.
 *
 * The page has a hero of its own because it is a destination, not a filtered
 * view of the newsroom: it is linked from the primary navigation and has to
 * introduce itself when someone lands on it cold.
 * ======================================================================== */

.sc-calls-archive__hero {
	--sc-gm-inset: var(--sc-container-gutter);

	padding-block: var(--sc-space-2xl) var(--sc-space-xl);
	background-color: var(--sc-color-surface-pale);
}

.sc-calls-archive__hero > .sc-container {
	max-inline-size: none;
	padding-inline: var(--sc-gm-inset);
}

.sc-calls-archive__title {
	margin: var(--sc-space-2xs) 0 0;
	font-size: var(--sc-font-size-4xl);
	font-weight: var(--sc-font-weight-bold);
	line-height: var(--sc-line-height-tight);
	color: var(--sc-color-heading);
	text-wrap: balance;
}

.sc-calls-archive__lead {
	margin: var(--sc-space-sm) 0 0;
	max-inline-size: var(--sc-measure-justified);
	color: var(--sc-color-text-muted);
	text-wrap: pretty;
}

.sc-calls-archive__section {
	padding-block: var(--sc-space-xl);
}

.sc-calls-archive__section--past {
	padding-block-end: var(--sc-space-3xl);
}

.sc-calls-archive__heading {
	margin: 0 0 var(--sc-space-lg);
	font-size: var(--sc-font-size-xl);
	font-weight: var(--sc-font-weight-semibold);
	color: var(--sc-color-heading);
}

.sc-calls-archive__empty {
	margin: 0;
	padding-block: var(--sc-space-lg);
	max-inline-size: var(--sc-measure);
	color: var(--sc-color-text-muted);
	border-block: var(--sc-border-width) solid var(--sc-color-border);
}

/* --- Rows ----------------------------------------------------------------- */

.sc-call-rows {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: var(--sc-border-width) solid var(--sc-color-border);
}

.sc-call-row {
	display: grid;
	gap: var(--sc-space-md);
	padding-block: var(--sc-space-lg);
	border-block-end: var(--sc-border-width) solid var(--sc-color-border);
}

.sc-call-row__copy {
	display: grid;
	gap: var(--sc-space-2xs);
	align-content: start;
}

.sc-call-row__status {
	margin: 0;
	font-size: var(--sc-font-size-xs);
	font-weight: var(--sc-font-weight-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sc-color-brand);
}

/* A closed call is labelled and stepped back. It is still readable — the record
   matters — but it must not look like something a visitor can respond to. */
.sc-call-row--closed .sc-call-row__status {
	color: var(--sc-color-text-muted);
}

.sc-call-row--closed .sc-call-row__title a {
	color: var(--sc-color-text);
}

.sc-call-row__title {
	margin: 0;
	font-size: var(--sc-font-size-xl);
	font-weight: var(--sc-font-weight-semibold);
	line-height: var(--sc-line-height-tight);
	text-wrap: pretty;
}

.sc-call-row__title a {
	color: var(--sc-color-heading);
	text-decoration: none;
}

.sc-call-row__title a:hover,
.sc-call-row__title a:focus-visible {
	color: var(--sc-color-brand-strong);
}

.sc-call-row__summary {
	margin: 0;
	max-inline-size: var(--sc-measure);
	color: var(--sc-color-text-muted);
	line-height: var(--sc-line-height-snug);
}

.sc-call-row__meta {
	display: grid;
	gap: var(--sc-space-sm);
	align-content: start;
}

.sc-call-row__dates {
	display: grid;
	grid-template-columns: auto auto;
	gap: var(--sc-space-2xs) var(--sc-space-sm);
	margin: 0;
	justify-content: start;
}

.sc-call-row__dates dt {
	font-size: var(--sc-font-size-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sc-color-text-muted);
}

.sc-call-row__dates dd {
	margin: 0;
	font-weight: var(--sc-font-weight-semibold);
	color: var(--sc-color-heading);
}

.sc-call-row__action,
.sc-call-row__attachment {
	margin: 0;
}

@media (width >= 48rem) {
	.sc-call-row {
		grid-template-columns: minmax(0, 1fr) minmax(min(17rem, 100%), 0.45fr);
		gap: var(--sc-space-xl);
		align-items: start;
	}

	.sc-call-row__meta {
		justify-items: end;
		text-align: end;
	}

	.sc-call-row__dates {
		justify-content: end;
	}
}

@media (width >= 75rem) {
	.sc-calls-archive__hero {
		--sc-gm-inset: calc(84 * var(--sc-u));

		padding-block: calc(80 * var(--sc-u)) calc(48 * var(--sc-u));
	}

	.sc-calls-archive__section {
		padding-block: calc(56 * var(--sc-u));
	}

	.sc-call-row {
		padding-block: calc(36 * var(--sc-u));
	}

	.sc-call-row__title {
		font-size: calc(26 * var(--sc-u));
	}
}

/* ===========================================================================
 * A single call, and the application form beneath it
 *
 * The archive's row taken apart: the same status, title, summary and dates, at
 * the size a page gives them rather than the size a list gives them, with the
 * document the company published and the form that answers the call below.
 *
 * The form itself is the shared component (`forms.css`). Only the frame around
 * it lives here: the intro line, the honest line a closed call shows instead of
 * a control nobody could use, and the width the form is allowed to take.
 * ======================================================================== */

.sc-call-single__header {
	--sc-gm-inset: var(--sc-container-gutter);

	padding-block: var(--sc-space-2xl) var(--sc-space-xl);
	background-color: var(--sc-color-surface-pale);
}

.sc-call-single__header > .sc-container {
	max-inline-size: none;
	padding-inline: var(--sc-gm-inset);
}

.sc-call-single__status {
	margin: 0;
	font-size: var(--sc-font-size-xs);
	font-weight: var(--sc-font-weight-semibold);
	letter-spacing: var(--sc-letter-spacing-wide);
	text-transform: uppercase;
	color: var(--sc-color-accent);
}

.sc-call-single__title {
	margin: var(--sc-space-2xs) 0 0;
	font-size: var(--sc-font-size-4xl);
	font-weight: var(--sc-font-weight-bold);
	line-height: var(--sc-line-height-tight);
	color: var(--sc-color-heading);
}

.sc-call-single__summary {
	max-inline-size: 52ch;
	margin: var(--sc-space-sm) 0 0;
	font-size: var(--sc-font-size-lg);
	color: var(--sc-color-text-muted);
}

.sc-call-single__dates {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-2xs) var(--sc-space-xl);
	margin: var(--sc-space-lg) 0 0;
}

.sc-call-single__dates dt {
	font-size: var(--sc-font-size-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sc-color-text-muted);
}

.sc-call-single__dates dd {
	margin: var(--sc-space-3xs) 0 0;
	font-weight: var(--sc-font-weight-semibold);
	color: var(--sc-color-heading);
}

.sc-call-single__body {
	display: grid;
	gap: var(--sc-space-lg) var(--sc-space-2xl);
	padding-block: var(--sc-space-2xl);
	grid-template-columns: minmax(0, 1fr);
}

.sc-call-single__content > *:first-child {
	margin-block-start: 0;
}

.sc-call-single__aside {
	padding: var(--sc-space-lg);
	border: var(--sc-border-width) solid var(--sc-color-border);
	border-radius: var(--sc-radius-md);
	background-color: var(--sc-color-surface);
}

.sc-call-single__aside-title {
	margin: 0;
	font-size: var(--sc-font-size-sm);
	letter-spacing: var(--sc-letter-spacing-wide);
	text-transform: uppercase;
	color: var(--sc-color-text-muted);
}

.sc-call-single__links {
	margin: var(--sc-space-sm) 0 0;
	padding: 0;
	list-style: none;
}

.sc-call-single__links li + li {
	margin-block-start: var(--sc-space-xs);
}

.sc-call-single__back {
	margin: 0 0 var(--sc-space-2xl);
}

/* ---------------------------------------------------------------------------
 * The application form's frame
 * ------------------------------------------------------------------------ */

.sc-application {
	max-inline-size: 40rem;
	margin-block-end: var(--sc-space-3xl);
	padding-block-start: var(--sc-space-xl);
	border-block-start: var(--sc-border-width) solid var(--sc-color-border);
}

.sc-application__title {
	margin: 0;
	font-size: var(--sc-font-size-2xl);
	font-weight: var(--sc-font-weight-bold);
	color: var(--sc-color-heading);
}

.sc-application__intro {
	margin: var(--sc-space-sm) 0 0;
	color: var(--sc-color-text-muted);
}

.sc-application__closed {
	margin: var(--sc-space-md) 0 0;
	padding: var(--sc-space-md) var(--sc-space-lg);
	border-inline-start: var(--sc-border-width-strong) solid var(--sc-color-border-strong);
	color: var(--sc-color-text-muted);
}

.sc-application .sc-form {
	margin-block-start: var(--sc-space-lg);
}

/*
 * The file control is the one input a browser draws itself. It keeps the shared
 * control sizing and takes the padding back, because the platform widget
 * already has its own — and the button inside it is themed, because a raw
 * "Choose File" is the one part of the form that would look like an unstyled
 * browser default rather than like this site.
 */
.sc-application .sc-form__control[type="file"] {
	padding-block: var(--sc-space-2xs);
}

.sc-application .sc-form__control[type="file"]::file-selector-button {
	margin-inline-end: var(--sc-space-sm);
	padding: var(--sc-space-2xs) var(--sc-space-sm);
	font: inherit;
	font-size: var(--sc-font-size-sm);
	font-weight: var(--sc-font-weight-semibold);
	color: var(--sc-color-brand-strong);
	background-color: var(--sc-color-surface-pale);
	border: var(--sc-border-width) solid var(--sc-color-border-strong);
	border-radius: var(--sc-radius-sm);
	cursor: pointer;
}

.sc-application .sc-form__control[type="file"]::file-selector-button:hover {
	border-color: var(--sc-color-brand);
}

@media (width >= 48rem) {
	.sc-call-single__body {
		grid-template-columns: minmax(0, 1.6fr) minmax(min(18rem, 100%), 0.7fr);
		align-items: start;
	}
}

@media (width >= 75rem) {
	.sc-call-single__header {
		--sc-gm-inset: calc(84 * var(--sc-u));

		padding-block: calc(80 * var(--sc-u)) calc(48 * var(--sc-u));
	}

	.sc-call-single__title {
		font-size: calc(52 * var(--sc-u));
	}
}