/* Staff Administration – front end.
 *
 * Layout only: colours, fonts, spacing, radii and labels come from the theme
 * (theme.json presets and custom properties, the theme's pill component).
 * Built against DIGISTARTER: its spacing scale (s/m/l, halved below 782px by
 * the theme itself), its colour roles (--wp--custom--color--*), its
 * .meta-pill and its placeholder ground. Every fallback below applies only
 * if the theme does not define the value.
 */

.digi-staff-directory,
.digi-staff-profile,
.digi-staff-jobs,
.digi-staff-job,
.digi-staff-job-apply {
	--digi-staff-space-s: var(--wp--preset--spacing--s, 1.5rem);
	--digi-staff-space-m: var(--wp--preset--spacing--m, 3rem);
	--digi-staff-radius: var(--wp--custom--radius, 0); /* Overridden with the theme.json image radius, see Digi_Staff_Frontend. */
	--digi-staff-muted: var(--wp--custom--color--caption, color-mix(in srgb, currentColor 70%, transparent));
	--digi-staff-line: color-mix(in srgb, currentColor 15%, transparent); /* The theme's hairline. */
	--digi-staff-surface: color-mix(in srgb, currentColor 7%, transparent);
}

/* Layouts switch on the width of the block, not the screen (like the
   theme's patterns), so the editor matches the front end. */
:has(> .digi-staff-directory),
:has(> .digi-staff-profile),
:has(> .digi-staff-jobs),
:has(> .digi-staff-job) {
	container-type: inline-size;
}

/* Department label. Uses the theme's .meta-pill (DIGISTARTER) or .badge if it
   has one; this zero-specificity fallback only styles themes without. */
:where(.digi-staff-pill) {
	display: inline-block;
	width: fit-content;
	padding: 0.2em 0.8em;
	border-radius: var(--digi-staff-pill-radius, 0);
	background-color: var(--digi-staff-surface);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	line-height: 1.6;
	text-transform: uppercase;
}

/* Photos ------------------------------------------------------------------ */

.digi-staff-card__media,
.digi-staff-profile__media {
	overflow: hidden;
	border-radius: var(--digi-staff-radius);
	aspect-ratio: 4 / 5;
}

.digi-staff-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The built-in placeholder has no ground of its own: the theme's placeholder
   ground (DIGISTARTER: the neutral colour) gives it one, so it follows the
   palette like the theme's own placeholder pictures. */
.digi-staff-photo.is-default-placeholder {
	background-color: var(--wp--custom--placeholder--ground, var(--wp--preset--color--neutral, #e8eaed));
	filter: var(--wp--custom--placeholder--filter, none);
}

/* Overview ---------------------------------------------------------------- */

.digi-staff-directory {
	display: flex;
	flex-direction: column;
	gap: var(--digi-staff-space-m);
}

.digi-staff-department {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--digi-staff-space-s);
}

.digi-staff-department .digi-staff-department__title {
	margin: 0;
}

/* Four per row, two on narrow containers. */
.digi-staff-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--digi-staff-space-m) var(--digi-staff-space-s);
	align-self: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

@container (min-width: 782px) {
	.digi-staff-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.digi-staff-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--digi-staff-space-s);
	margin: 0;
}

.digi-staff-card__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

/* The name is a structural link (like a card title): no underline at rest.
   Colour and hover (DIGISTARTER: underline in the accent) come from the
   theme's link styles. */
.digi-staff-card__name a:not(:hover, :focus-visible) {
	text-decoration: none;
}

/* The whole card is clickable, the link text stays the accessible name. */
.digi-staff-card__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.digi-staff-card__name a:focus-visible {
	outline: none;
}

.digi-staff-card__name a:focus-visible::after {
	outline: 2px solid var(--wp--custom--color--focus, currentColor);
	outline-offset: 2px;
	border-radius: var(--digi-staff-radius);
}

.digi-staff-card__position {
	margin: 0.25em 0 0;
	color: var(--digi-staff-muted);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

/* Profile ----------------------------------------------------------------- */

/* From 782px container width up the photo takes a third, the text two
   thirds (the theme's 33/33/33 grid); stacked below, photo first. */
.digi-staff-profile {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--digi-staff-space-m);
	align-items: start;
}

@container (min-width: 782px) {
	.digi-staff-profile {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.digi-staff-profile__body {
		grid-column: span 2;
	}
}

.digi-staff-profile__department {
	margin: 0 0 var(--digi-staff-space-s);
}

/* The page's h1, sized like a section headline (the theme's h2). */
.digi-staff-profile .digi-staff-profile__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large, 2rem);
}

.digi-staff-profile__position {
	margin: 0.5em 0 0;
	color: var(--digi-staff-muted);
	font-size: var(--wp--preset--font-size--medium, 1.25rem);
}

.digi-staff-profile__contact {
	display: grid;
	gap: 0.75em;
	margin: var(--digi-staff-space-m) 0 0;
	padding: var(--digi-staff-space-s) 0 0;
	border-block-start: 1px solid var(--digi-staff-line);
}

.digi-staff-profile__row {
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.digi-staff-profile__row dt {
	display: flex;
}

.digi-staff-profile__row dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.digi-staff-icon {
	flex: none;
	width: 1.125em;
	height: 1.125em;
}

.digi-staff-profile__bio {
	margin-top: var(--digi-staff-space-m);
}

.digi-staff-profile__bio > :first-child {
	margin-top: 0;
}

.digi-staff-profile__bio > :last-child {
	margin-bottom: 0;
}

.digi-staff-profile__actions {
	margin-top: var(--digi-staff-space-m);
}

/* Classic themes ---------------------------------------------------------- */

.digi-staff-classic {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem 1rem;
}

/* Job openings ------------------------------------------------------------- */

/* The facts of a job (location, contract, working time) as the theme's
   pills, like the meta line under a post title. */
.digi-staff-job-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.digi-staff-job-facts > li {
	margin: 0;
}

/* Career page: rows between hairlines like the theme's events pattern -
   padding m, no line above the first or below the last row; title and facts
   stacked, side by side (l apart) from 782px container width up. */
.digi-staff-jobs {
	margin: 0;
	padding: 0;
	list-style: none;
}

.digi-staff-jobs__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--digi-staff-space-s);
	margin: 0;
	padding-block: var(--digi-staff-space-m);
	border-block-end: 1px solid var(--digi-staff-line);
}

.digi-staff-jobs__item:first-child {
	padding-block-start: 0;
}

.digi-staff-jobs__item:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

@container (min-width: 782px) {
	.digi-staff-jobs__item {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--l, 4rem);
	}

	.digi-staff-jobs__item .digi-staff-job-facts {
		flex: none;
		justify-content: flex-end;
		max-width: 50%;
	}
}

.digi-staff-jobs .digi-staff-jobs__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium, 1.25rem);
}

/* The title is a structural link like a card's: no underline at rest, the
   theme's hover underline; the whole row is clickable. */
.digi-staff-jobs__title a:not(:hover, :focus-visible) {
	text-decoration: none;
}

.digi-staff-jobs__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.digi-staff-jobs__title a:focus-visible {
	outline: none;
}

.digi-staff-jobs__title a:focus-visible::after {
	outline: 2px solid var(--wp--custom--color--focus, currentColor);
	outline-offset: 2px;
}

.digi-staff-jobs-empty {
	margin: 0;
}

/* Job detail page: a header, then one row per text - the heading on the
   left (25 %), the text on the right (75 %, at reading width), rows
   alternating between a neutral box and the page ground; stacked on narrow
   containers. Plain rows keep the boxes' padding, so all texts line up. */
.digi-staff-job__header {
	padding: 0 var(--digi-staff-space-m) var(--digi-staff-space-m);
}

.digi-staff-job__department {
	margin: 0 0 var(--digi-staff-space-s);
}

/* The page's h1, sized like a section headline (the theme's h2). */
.digi-staff-job .digi-staff-job__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large, 2rem);
}

.digi-staff-job__header .digi-staff-job-facts {
	margin-top: var(--digi-staff-space-s);
}

.digi-staff-job__section {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--digi-staff-space-s);
	padding: var(--digi-staff-space-m);
}

.digi-staff-job__section.is-boxed {
	border-radius: var(--wp--custom--radius, var(--digi-staff-radius));
}

.digi-staff-job .digi-staff-job__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--large, 1.5rem);
}

.digi-staff-job__text {
	max-width: var(--wp--style--global--content-size, 45rem);
}

@container (min-width: 782px) {
	/* Centred like the theme's section heads, left-aligned on phones. */
	.digi-staff-job__header {
		text-align: center;
	}

	.digi-staff-job__header .digi-staff-job-facts {
		justify-content: center;
	}

	.digi-staff-job__section {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
		gap: var(--digi-staff-space-m);
	}

}

/* Call to apply (own block, full width at the end of the job page, meeting
   the footer): like the theme's centred call to action - pill, headline and
   button on the accent, centred from 782px, left-aligned on phones. The
   page margin comes from has-global-padding (DIGISTARTER) or the fallback. */
.digi-staff-job-apply {
	container-type: inline-size;
	padding-block: var(--wp--preset--spacing--l, 4rem);
	border-radius: 0;
}

.digi-staff-job-apply:not(.has-global-padding) {
	padding-inline: var(--digi-staff-space-m);
}

.digi-staff-job-apply__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--digi-staff-space-s);
	max-width: var(--wp--style--global--content-size, 45rem);
	margin-inline: auto;
}

.digi-staff-job-apply__inner > * {
	margin: 0;
}

.digi-staff-job-apply .digi-staff-job-apply__title {
	font-size: var(--wp--preset--font-size--x-large, 2rem);
}

@container (min-width: 782px) {
	.digi-staff-job-apply__inner {
		align-items: center;
		text-align: center;
	}
}

/* Free text from the editor: no extra space above or below a section's text. */
.digi-staff-job__text > :first-child {
	margin-top: 0;
}

.digi-staff-job__text > :last-child {
	margin-bottom: 0;
}

/* Headings the editor sets inside a text rank below the section heading. */
.digi-staff-job__text :is(h3, h4) {
	margin-bottom: 0.5em;
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
}