/**
 * Careers listing (template-parts/careers/careers-list.php).
 *
 * One box per open position and nothing between them: no bar above the list,
 * no dividers, no borders anywhere. The 16px gap and the card surface do the
 * separating, which is why there is not a single border declaration in this
 * file.
 */

.careers {
	/* Top only. The open-application section below owns the space between
	   them, and two adjacent paddings would make that gap 200px instead of
	   the 100px the rhythm asks for. */
	padding-top: var(--section-pad-y);
}

/* --------------------------------------------------------------------
 * The list header
 *
 * The subhead treatment - mono label left, small control right - but without
 * .subhead's rule under it: the cards below carry the structure and a divider
 * would be a second one. The label needs no type declared at all, since
 * .eyebrow and .type-label in the markup already are it.
 * -------------------------------------------------------------------- */

.careers__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap; /* at 390 the control drops under the label rather than squeezing it */
	margin-bottom: 32px;
}

/* 14px/500 body, the values .subhead__link uses for the same job. Restated
   rather than shared because that rule lives in why-dicit.css, which this
   page does not load. */
.careers__sort {
	flex-shrink: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 0.875rem;
	line-height: normal;
	font-weight: 500;
	color: var(--color-text-secondary);
	transition: color 150ms ease;
}

.careers__sort:hover,
.careers__sort:focus-visible {
	color: var(--color-heading-text);
}

/* Pressed is the non-default state, so it carries the weight of being on. */
.careers__sort[aria-pressed="true"] {
	color: var(--color-accent);
}

.careers__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --------------------------------------------------------------------
 * Empty state
 *
 * Plain text where the cards would be, in the secondary colour. Deliberately
 * NOT a grey box: a card says "here is a thing", and the whole message is
 * that there is not one. The heading is an h2 like a card title, because it
 * occupies the same place in the outline, but it takes body-lg rather than
 * the h3 scale - it is a sentence, not a title.
 * -------------------------------------------------------------------- */

.careers__empty-title {
	font-size: var(--type-body-lg-size);
	line-height: var(--type-body-lg-line);
	letter-spacing: var(--type-body-lg-spacing);
	font-weight: var(--type-body-lg-weight);
	color: var(--color-text-secondary);
}

.careers__empty-text {
	margin-top: 8px;
	font-size: var(--type-card-body-size);
	line-height: var(--type-card-body-line);
	color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------
 * The card
 *
 * The whole box is the link, so it is also what activates the arrow: --on is
 * flipped here, not on the chip, and the loop reads it from its host exactly
 * as the primary button's does.
 * -------------------------------------------------------------------- */

.careers__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	/* 48px, the site's padding for a card at or above half the container. This
	   one is the full container width. */
	padding: 48px;
	border-radius: 6px;
	background-color: var(--color-surface-card);
	color: inherit;
	text-decoration: none;
	--on: 0;
}

.careers__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Between the text block and the badges. The title and description keep
	   their own 16px inside .careers__text. */
	gap: 32px;
	min-width: 0;
}

.careers__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* h2 ELEMENT carrying h3 TYPE, and the two are deliberately not the same
   thing. The element is h2 because the hero's h1 is the page heading and each
   posting is a top-level item under it, so h3 would skip a level in the
   outline. The scale is h3 because every card title on this site sits there,
   and the h2 default rendered these at 40px inside a card, under a 56px h1.
 *
 * This is why the four tokens are restated here when .wd-box__title next door
 * declares nothing but a colour: that title's element IS an h3, so it already
 * carries this scale and repeating it would be noise. Do not "simplify" this
 * rule away by matching it to that one - they differ because the elements
 * differ, and the difference is the point. */
.careers__title {
	font-size: var(--type-h3-size);
	line-height: var(--type-h3-line);
	letter-spacing: var(--type-h3-spacing);
	font-weight: var(--type-h3-weight);
	color: var(--color-heading-text);
}

/* card-body, the same as .wd-box__desc and the service card, and now the same
   token as both. body-lg is the hero intro size and was too loud for a card. */
.careers__desc {
	font-size: var(--type-card-body-size);
	line-height: var(--type-card-body-line);
	font-weight: var(--type-card-body-weight);
	color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------
 * Metadata: one white rectangle per value
 *
 * Body type, NOT mono. These read as words - a city, a contract, a salary -
 * not as machine values, and the mono spec on this site is reserved for
 * figures that are transcribed rather than read.
 * -------------------------------------------------------------------- */

.careers__meta {
	display: flex;
	flex-wrap: wrap; /* at narrow widths they wrap; they never shrink */
	gap: 12px;
}

.careers__tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 6px;
	background-color: var(--color-surface-white);
	font-family: var(--font-body);
	font-size: var(--type-body-sm-size);
	line-height: var(--type-body-sm-line);
	font-weight: var(--type-body-sm-weight);
	color: var(--color-body-text);
}

.careers__tag-icon {
	flex-shrink: 0;
	color: var(--color-text-secondary);
}

/* The right column: date at the top, arrow at the bottom, stretched to the
   card so the two sit at opposite corners. It existed for the arrow already,
   so the date costs the card no height. */
.careers__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	align-self: stretch;
	gap: 16px;
	flex-shrink: 0;
}

/* Metadata about the LISTING rather than about the job. Opposite corner from
   the badge set, tertiary and smaller, so it cannot read as a fourth badge. */
.careers__posted {
	white-space: nowrap;
	font-size: var(--type-body-sm-size);
	line-height: var(--type-body-sm-line);
	font-weight: 400;
	color: var(--color-text-tertiary);
}

/* --------------------------------------------------------------------
 * The arrow
 *
 * The shared chip and the shared loop, with the loop's direction modifier.
 * Nothing here draws an arrow or animates one.
 * -------------------------------------------------------------------- */

.careers__arrow {
	flex-shrink: 0;
}

/* The loop's mask is 12px here, not 10, because the carousel arrow is 10.786
   units wide and only fits at its true size in a 12 unit box. Travel is a
   multiple of the box, so the multiplier drops to keep the DISTANCE the same:
   4 x 12px is the 48px that 4.8 x 10px gave. Scoped to this placement, since
   it is this placement that chose the size. */
.careers__arrow .arrow-loop {
	--arrow-travel: 4;
}

/* Hover and keyboard focus run the same choreography, and both are gated on
   reduced-motion the way every other loop on the site is. */
@media (prefers-reduced-motion: no-preference) {
	.careers__card:hover,
	.careers__card:focus-visible {
		--on: 1;
	}
}

.careers__card:hover .icon-chip,
.careers__card:focus-visible .icon-chip {
	background-color: var(--color-accent);
	color: var(--color-button-primary-text);
}

/* --------------------------------------------------------------------
 * Below 1024
 *
 * The arrow moves under the content rather than beside it: at 390 a 35px chip
 * plus a 32px gap takes a fifth of the line, and the title is what should
 * have it. Padding steps down to 32px, the same move .why__image-card makes,
 * because 48px on each side of a 358px viewport leaves the metadata wrapping
 * one tag per line.
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.careers__card {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding: 32px;
	}

	/* One column, so the aside becomes a row under the badges: date at the
	   start, arrow at the end. Still its own line, still tertiary, still not
	   among the badges. */
	.careers__aside {
		flex-direction: row;
		align-items: center;
		align-self: stretch;
		width: 100%;
	}
}

/* --------------------------------------------------------------------
 * The open application
 *
 * Its OWN section now. At 16px below the last card it read as another job
 * card and the postings above it got lost in it; a section break is what says
 * it is not one of them.
 *
 * The gap is --section-pad-y, the site's section rhythm, which the token
 * already steps from 100px to 64px below the breakpoint. It carries the
 * bottom of the page too, so the block clears the footer whether or not
 * anything is advertised above it.
 *
 * The BLOCK is unchanged: same surface, same radius, same 48px. Everything
 * that makes a card a JOB is still absent: no badges, no arrow, no posted
 * date, and it is not a link.
 *
 * The form inputs are white on the grey, which is the relationship the
 * metadata badges already have to the cards. No new surface is introduced.
 * -------------------------------------------------------------------- */

.careers-open {
	padding-block: var(--section-pad-y);
}

.careers__open {
	padding: 48px;
	border-radius: 6px;
	background-color: var(--color-surface-card);
}

.careers__open .eyebrow {
	margin-bottom: 16px;
}

.careers__open-title {
	font-size: var(--type-h3-size);
	line-height: var(--type-h3-line);
	letter-spacing: var(--type-h3-spacing);
	font-weight: var(--type-h3-weight);
	color: var(--color-heading-text);
}

.careers__open-text {
	margin-top: 16px;
	max-width: 60ch;
	font-size: var(--type-card-body-size);
	line-height: var(--type-card-body-line);
	color: var(--color-text-secondary);
}

.careers__open .contact-form {
	margin-top: 32px;
}

.contact-form__hint {
	margin-top: 8px;
	font-size: var(--type-body-sm-size);
	line-height: var(--type-body-sm-line);
	font-weight: 400;
	color: var(--color-text-tertiary);
}

@media (max-width: 1024px) {
	.careers__open {
		padding: 32px;
	}
}