/* Stock Yard Jobs — structural styles only. Colours/fonts inherit from Divi.
 * Override the custom properties in Divi's Theme Options CSS if needed. */

.sy-jobs,
.sy-job-details {
	--sy-gap: 24px;
	--sy-text: inherit;          /* set these in Divi custom CSS to theme it */
	--sy-heading: inherit;
	--sy-muted-opacity: .75;
	--sy-border: color-mix(in srgb, currentColor 22%, transparent); /* works on light or dark grounds */
	--sy-card-bg: transparent;
	--sy-fade: .2s;
	/* --sy-rule: colour of the card's divider lines. Unset = the text colour. */
	color: var(--sy-text);
}

/* Divi colours h1–h6 #333 by default; make our headings follow the module's text colour instead. */
.sy-jobs .sy-job-card-title,
.sy-jobs .sy-job-card-title a,
.sy-job-details .sy-job-title { color: var(--sy-heading); }
.sy-job-card-excerpt,
.sy-job-fact dd,
.sy-job-description { color: inherit; }
.sy-job-card-meta > span,
.sy-job-meta > span { opacity: var(--sy-muted-opacity); }

.sy-jobs-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: var(--sy-gap); }
.sy-jobs-label { font-weight: 600; }
.sy-jobs-filter { min-width: 220px; padding: 10px 12px; font-size: 16px; }
.sy-jobs-reset { margin: 0 !important; }

.sy-jobs-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--sy-gap);
	transition: opacity var(--sy-fade) ease;
}
.sy-jobs-list.is-fading { opacity: 0; }

.sy-job-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	background: var(--sy-card-bg);
	border: 1px solid var(--sy-border);
	transition: transform var(--sy-fade) ease, box-shadow var(--sy-fade) ease;
}
.sy-job-card.is-hidden { display: none; }
.sy-job-card:not(.sy-job-card--static):hover,
.sy-job-card:focus-within { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }

.sy-job-card-title { margin: 0; padding: 0; }
.sy-job-card-title a { color: inherit; text-decoration: none; }
.sy-job-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
.sy-job-card-title a:focus-visible { outline: none; }
.sy-job-card:focus-within { outline: 2px solid currentColor; outline-offset: 2px; }

.sy-job-card-excerpt { margin: 0; padding: 0; }

/* Card layout: meta / title / excerpt stack at the top;
   facts + button sit at the bottom. Grid rows stretch, so bottoms line up across a row. */
.sy-job-card-button { align-self: flex-start; margin-top: auto !important; }
.sy-job-card-facts { margin-top: auto; }
.sy-job-card-facts + .sy-job-card-button { margin-top: 8px !important; }

/* Card divider lines */
.sy-job-card-meta::after,
.sy-job-card-title::after,
.sy-job-card-facts::before {
	content: "";
	display: block;
	background: var(--sy-rule, currentColor);
}
.sy-job-card-meta::after   { width: 100px; height: 2px; margin-top: 8px; }   /* under team + type */
.sy-job-card-title::after  { width: 50%;   height: 3px; margin-top: 10px; }  /* under the title */
.sy-job-card-facts::before { width: 50%;   height: 3px; margin-bottom: 10px; } /* above pay / date */

.sy-job-card-meta,
.sy-job-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.sy-job-card-meta { flex-direction: column; align-items: flex-start; gap: 4px; } /* team, then type on its own line */
.sy-job-meta { margin-bottom: 20px; }

.sy-jobs-none { margin-top: var(--sy-gap); }
.sy-jobs-link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }

.sy-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.sy-jobs-list, .sy-job-card { transition: none; }
}

/* Optional facts (wage / closing date) — only rendered when filled in */
.sy-job-card-facts,
.sy-job-facts { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 0; }
.sy-job-facts { margin: 0; }
.sy-job-card-facts { flex-direction: column; gap: 4px; margin-bottom: 0; } /* stacked on cards */
.sy-job-facts { margin-bottom: 20px; }
.sy-job-fact { display: flex; gap: 6px; }
.sy-job-fact dt { font-weight: 600; margin: 0; }
.sy-job-fact dt::after { content: ":"; }
.sy-job-fact dd { margin: 0; }
.sy-job-closed-notice { padding: 12px 16px; border-left: 3px solid currentColor; margin-bottom: 20px; }