/**
 * The [airec_jobs] listing.
 *
 * Kept apart from public.css because it is optional: a site can style the
 * listing from its own theme, or from its own CSS, in which case none of this
 * is printed at all.
 *
 * Copyright (c) 2026 AtoZ INFOWAY INC. All rights reserved. Proprietary.
 */

/* ── [airec_jobs] listing ──────────────────────────────────────────────── */
/*
 * Built from the theme's own colours rather than a palette of ours, so the
 * cards belong on the page. Override --airec-jobs-* to take control.
 */
.airec-jobs {
	--airec-jobs-line: rgba(128,128,128,.28);
	--airec-jobs-muted: rgba(128,128,128,1);
	--airec-jobs-tint: rgba(128,128,128,.14);
	--airec-jobs-radius: 14px;
	--airec-jobs-accent: currentColor;
	--airec-jobs-pad: 1.75rem;
	--airec-jobs-gap: 1.5rem;
}
@supports (color: color-mix(in srgb, currentColor 10%, transparent)) {
	.airec-jobs {
		--airec-jobs-line: color-mix(in srgb, currentColor 14%, transparent);
		--airec-jobs-muted: color-mix(in srgb, currentColor 62%, transparent);
		--airec-jobs-tint: color-mix(in srgb, currentColor 9%, transparent);
	}
}

/* ── How much of the page the listing may use ──────────────────────────── */

/*
 * Three cards across need about 900px, and a theme's reading measure is closer
 * to 640. The !important is deliberate and narrow: WordPress's own constrained
 * -layout CSS sets max-width and the inline margins with !important, so a block
 * that wants out of the measure has no other way to say so. The calc resolves
 * to zero once the element is already viewport-wide, so on a theme that honours
 * alignfull this changes nothing.
 */
.airec-jobs.airec-jobs--w-wide,
.airec-jobs.airec-jobs--w-full {
	width: auto !important;
	max-width: none !important;
	margin-inline: calc(50% - var(--airec-vw, 100vw) / 2) !important;
}
.airec-jobs--w-wide .airec-jobs__inner {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.airec-jobs--w-full .airec-jobs__inner { padding-inline: clamp(1rem, 4vw, 3rem); }

/*
 * The columns measure themselves against this element rather than the window,
 * so a listing dropped into a narrow column shows fewer cards across instead
 * of the same number squeezed.
 */
.airec-jobs__inner { container-type: inline-size; container-name: airecjobs; }

.airec-jobs__filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 2rem; }
.airec-jobs__filter {
	display: inline-block; padding: .5em 1.25em;
	border: 1px solid var(--airec-jobs-line); border-radius: 999px;
	text-decoration: none; font-size: .95em; line-height: 1.4;
}
.airec-jobs__filter.is-active { background: var(--airec-jobs-tint); border-color: var(--airec-jobs-accent); color: var(--airec-jobs-accent); font-weight: 600; }

.airec-jobs__grid { display: grid; gap: 1.5rem; }
.airec-jobs--grid .airec-jobs__grid { grid-template-columns: 1fr; }
@container airecjobs (min-width: 620px) {
	.airec-jobs--grid.airec-jobs--cols-2 .airec-jobs__grid,
	.airec-jobs--grid.airec-jobs--cols-3 .airec-jobs__grid,
	.airec-jobs--grid.airec-jobs--cols-4 .airec-jobs__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@container airecjobs (min-width: 920px) {
	.airec-jobs--grid.airec-jobs--cols-3 .airec-jobs__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.airec-jobs--grid.airec-jobs--cols-4 .airec-jobs__grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@container airecjobs (min-width: 1200px) {
	.airec-jobs--grid.airec-jobs--cols-4 .airec-jobs__grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Without container queries the window is the best guess available, which is
 * what this did before — right most of the time, and never worse. */
@supports not (container-type: inline-size) {
	@media (min-width: 700px) {
		.airec-jobs--grid.airec-jobs--cols-2 .airec-jobs__grid,
		.airec-jobs--grid.airec-jobs--cols-3 .airec-jobs__grid,
		.airec-jobs--grid.airec-jobs--cols-4 .airec-jobs__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	}
	@media (min-width: 1000px) {
		.airec-jobs--grid.airec-jobs--cols-3 .airec-jobs__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
		.airec-jobs--grid.airec-jobs--cols-4 .airec-jobs__grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
	}
}

.airec-jobs__grid { gap: var(--airec-jobs-gap); }

.airec-jobs__card {
	display: flex; flex-direction: column; gap: .75rem;
	padding: var(--airec-jobs-pad);
	border: 1px solid var(--airec-jobs-line);
	border-radius: var(--airec-jobs-radius);
}
.airec-jobs__body, .airec-jobs__side { display: flex; flex-direction: column; gap: .75rem; }
.airec-jobs__side { margin-top: auto; }

/* ── Corners ── */
.airec-jobs--corners-sharp { --airec-jobs-radius: 0; }
.airec-jobs--corners-soft  { --airec-jobs-radius: 14px; }
.airec-jobs--corners-round { --airec-jobs-radius: 26px; }

/* ── Density ── */
.airec-jobs--compact { --airec-jobs-pad: 1.15rem; --airec-jobs-gap: 1rem; }
.airec-jobs--compact .airec-jobs__card { gap: .5rem; }
.airec-jobs--compact .airec-jobs__title { font-size: 1.15em; }
.airec-jobs--compact .airec-jobs__cta { padding-top: .65rem; }

/* ── Card styles ──
 * Each one is a different answer to "how much should a card assert itself".
 * They share the same markup, so switching costs nothing on the page.
 */
.airec-jobs--elevated .airec-jobs__card {
	border: 0;
	background: var(--airec-jobs-tint);
	box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
}
.airec-jobs--panel .airec-jobs__card { border: 0; background: var(--airec-jobs-tint); }

.airec-jobs--flat .airec-jobs__card {
	border: 0; border-radius: 0; padding: var(--airec-jobs-pad) 0;
	border-bottom: 1px solid var(--airec-jobs-line);
}
.airec-jobs--flat .airec-jobs__grid { gap: 0; }
.airec-jobs--flat .airec-jobs__card:first-child { padding-top: 0; }
.airec-jobs--flat .airec-jobs__cta { border-top: 0; padding-top: .25rem; }

.airec-jobs--split .airec-jobs__card { flex-direction: row; align-items: center; gap: 2rem; }
/* The badge belongs beside the department, not stranded across the row. */
.airec-jobs--split .airec-jobs__top { justify-content: flex-start; gap: .75rem; }
.airec-jobs--split .airec-jobs__body { flex: 1 1 auto; }
.airec-jobs--split .airec-jobs__side { flex: 0 0 auto; align-items: flex-end; margin-top: 0; }
.airec-jobs--split .airec-jobs__cta { border-top: 0; padding-top: 0; margin: 0; }
.airec-jobs--split .airec-jobs__tags { justify-content: flex-end; }
@container airecjobs (max-width: 700px) {
	.airec-jobs--split .airec-jobs__card { flex-direction: column; align-items: stretch; gap: .75rem; }
	.airec-jobs--split .airec-jobs__side { align-items: stretch; }
	.airec-jobs--split .airec-jobs__tags { justify-content: flex-start; }
}

.airec-jobs__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.airec-jobs__eyebrow { font-size: .75em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--airec-jobs-muted); }
.airec-jobs__status {
	font-size: .7em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	padding: .3em 1em; border-radius: 999px; border: 1px solid var(--airec-jobs-line);
	color: var(--airec-jobs-muted); white-space: nowrap;
}
.airec-jobs__title { margin: 0; font-size: 1.35em; line-height: 1.25; }
.airec-jobs__title a { text-decoration: none; }
.airec-jobs__summary { margin: 0; color: var(--airec-jobs-muted); }
.airec-jobs__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 0; }
.airec-jobs__tag {
	font-size: .8em; padding: .35em 1em;
	border-radius: 999px; border: 1px solid var(--airec-jobs-line);
}
.airec-jobs__cta { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--airec-jobs-line); }
.airec-jobs__cta a { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; font-weight: 600; color: var(--airec-jobs-accent); }
.airec-jobs__arrow { transition: transform .15s; }
.airec-jobs__cta a:hover .airec-jobs__arrow { transform: translateX(3px); }

.airec-jobs__empty { text-align: center; color: var(--airec-jobs-muted); padding: 2rem 0; }
.airec-jobs__note { text-align: center; margin: 2rem 0 0; color: var(--airec-jobs-muted); font-size: .95em; }
.airec-jobs__pages { display: flex; justify-content: center; gap: .5rem; margin: 2rem 0 0; }
.airec-jobs__pages .page-numbers { padding: .4em .9em; border: 1px solid var(--airec-jobs-line); border-radius: 8px; text-decoration: none; }
.airec-jobs__search { display: flex; gap: .5rem; justify-content: center; margin: 0 0 1.5rem; }
.airec-jobs__search input[type="search"] {
	flex: 0 1 22rem; padding: .6em 1em;
	border: 1px solid var(--airec-jobs-line); border-radius: 999px;
	background: transparent; color: inherit; font: inherit;
}
.airec-jobs__search button {
	padding: .6em 1.5em; border: 1px solid var(--airec-jobs-accent); border-radius: 999px;
	background: transparent; color: var(--airec-jobs-accent); font: inherit; cursor: pointer;
}