/**
 * ============================================================
 *  Job Category Archive Page CSS
 * ============================================================
 *  Styles for the shared category landing template
 *  (/job-category/{slug}/): eyebrow, two-tone heading, route
 *  tabs, and the job-card grid (image, Save badge, meta rows,
 *  Contact / Apply buttons).
 *
 *  Accent color via --wjs-accent on .wjs-jobarch (default cyan).
 *
 *  Loaded by: includes/class-wjs-categories.php (wp_enqueue_style)
 *  Handle:    wjs-category-archive
 * ============================================================
 */

.wjs-jobarch{padding:40px 0 70px}
.wjs-jobarch *{box-sizing:border-box}
.wjs-jobarch__inner{max-width:1160px;margin:0 auto;padding:0 20px}

/* ── Hero ─────────────────────────────────────────────────── */
.wjs-jobarch__eyebrow{font-size:12px !important;font-weight:800 !important;letter-spacing:.14em !important;
	text-transform:uppercase !important;color:#333 !important;margin:0 0 8px !important}
.wjs-jobarch__heading{font-size:44px !important;font-weight:800 !important;color:#333 !important;
	margin:0 0 12px !important;padding:0 !important;line-height:1.1 !important;text-transform:none !important}
.wjs-jobarch__heading .wjs-jobarch__heading-accent{color:var(--wjs-accent) !important;font:inherit !important}
.wjs-jobarch__desc{color:#555 !important;font-size:15px !important;line-height:1.6 !important;
	margin:0 0 26px !important;max-width:720px}

/* ── Route tabs (same design language as the home section) ── */
.wjs-jobarch__tabs{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 30px;padding:0}
.wjs-jobarch .wjs-jobarch__tab,
.wjs-jobarch button.wjs-jobarch__tab{
	appearance:none !important;-webkit-appearance:none !important;cursor:pointer !important;
	display:inline-block !important;width:auto !important;height:auto !important;min-height:0 !important;
	margin:0 !important;border:1px solid #e7e7e7 !important;background:#fff none !important;
	color:#333 !important;border-radius:999px !important;padding:12px 22px !important;
	font-family:inherit !important;font-size:14px !important;font-weight:700 !important;line-height:1 !important;
	text-transform:none !important;letter-spacing:normal !important;text-indent:0 !important;
	text-shadow:none !important;text-decoration:none !important;white-space:nowrap;
	transition:all .18s ease;box-shadow:0 2px 6px rgba(0,0,0,.05) !important;outline:none}
.wjs-jobarch .wjs-jobarch__tab:hover{
	border-color:var(--wjs-accent) !important;color:var(--wjs-accent) !important;background:#fff none !important}
.wjs-jobarch .wjs-jobarch__tab.is-active,
.wjs-jobarch .wjs-jobarch__tab.is-active:hover{
	background:var(--wjs-accent) none !important;border-color:var(--wjs-accent) !important;color:#fff !important;
	box-shadow:0 4px 12px rgba(41,171,226,.35) !important}

/* ── Card grid ────────────────────────────────────────────── */
.wjs-jobarch__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.wjs-jobarch__card{background:#fff;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;
	box-shadow:0 3px 14px rgba(0,0,0,.08);transition:box-shadow .18s ease,transform .18s ease}
.wjs-jobarch__card:hover{box-shadow:0 10px 26px rgba(0,0,0,.13);transform:translateY(-2px)}
.wjs-jobarch__card.is-hidden{display:none}

/* Media / Save badge */
.wjs-jobarch__media{position:relative;aspect-ratio:16/9;background:#2c3e50;overflow:hidden}
.wjs-jobarch__media img{width:100%;height:100%;object-fit:cover;display:block}
.wjs-jobarch__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
	background:linear-gradient(135deg,#34495e 0%,#22303d 100%)}
.wjs-jobarch__placeholder-logo{color:#fff;font-weight:800;font-size:20px;letter-spacing:.02em;
	padding:8px 18px;border:2px solid rgba(255,255,255,.55);border-radius:8px;max-width:85%;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wjs-jobarch button.wjs-jobarch__save{
	appearance:none !important;position:absolute;top:12px;left:12px;cursor:pointer !important;
	background:var(--wjs-accent) none !important;color:#fff !important;border:0 !important;
	border-radius:4px !important;padding:6px 14px !important;font-size:12px !important;
	font-weight:700 !important;line-height:1 !important;font-family:inherit !important;
	text-transform:none !important;letter-spacing:normal !important;box-shadow:0 2px 6px rgba(0,0,0,.25) !important;
	transition:background .15s ease}
.wjs-jobarch button.wjs-jobarch__save[aria-pressed="true"]{background:#1c86b5 none !important}

/* Body */
.wjs-jobarch__body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.wjs-jobarch__jobtitle{font-size:16px !important;font-weight:700 !important;margin:0 0 10px !important;
	padding:0 !important;line-height:1.35 !important}
.wjs-jobarch__jobtitle a{color:var(--wjs-accent) !important;text-decoration:none !important}
.wjs-jobarch__jobtitle a:hover{text-decoration:underline !important}
.wjs-jobarch__meta{list-style:none !important;margin:0 0 16px !important;padding:0 !important;flex:1}
.wjs-jobarch__meta li{color:#555 !important;font-size:13px !important;line-height:1.9 !important;
	margin:0 !important;padding:0 !important}
.wjs-jobarch__meta li.wjs-jobarch__pay{color:#333 !important;font-weight:600 !important}

/* Buttons */
.wjs-jobarch__actions{display:flex;gap:12px}
.wjs-jobarch a.wjs-jobarch__btn{
	flex:1;display:inline-block;text-align:center;background:var(--wjs-accent) none !important;
	color:#fff !important;border:0 !important;border-radius:4px !important;padding:11px 10px !important;
	font-size:13px !important;font-weight:700 !important;line-height:1 !important;
	text-decoration:none !important;text-transform:none !important;letter-spacing:normal !important;
	box-shadow:none !important;transition:background .15s ease}
.wjs-jobarch a.wjs-jobarch__btn:hover{background:#1c86b5 none !important;color:#fff !important}

/* Empty states */
.wjs-jobarch__empty{color:#555;font-size:15px;margin:10px 0 0}

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:1024px){
	.wjs-jobarch__grid{grid-template-columns:repeat(2,1fr)}
	.wjs-jobarch__heading{font-size:36px !important}
}
@media(max-width:640px){
	.wjs-jobarch{padding:28px 0 50px}
	.wjs-jobarch__grid{grid-template-columns:1fr;gap:18px}
	.wjs-jobarch__heading{font-size:29px !important}
	.wjs-jobarch__tabs{gap:9px}
	.wjs-jobarch .wjs-jobarch__tab{padding:10px 16px !important;font-size:13px !important}
}

/* Tab count chip (jobs per variant) */
.wjs-jobarch__tab .wjs-jobarch__tabcount{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
	font-size:11px;font-weight:800;line-height:1.4;background:rgba(41,171,226,.13);color:var(--wjs-accent)}
.wjs-jobarch__tab.is-active .wjs-jobarch__tabcount{background:rgba(255,255,255,.25);color:#fff}

/* ── Responsive: small phones ─────────────────────────────── */
@media(max-width:400px){
	.wjs-jobarch__inner{padding:0 14px}
	.wjs-jobarch__heading{font-size:25px !important}
	.wjs-jobarch__card{border-radius:8px}
	.wjs-jobarch__body{padding:14px 15px 16px}
	.wjs-jobarch .wjs-jobarch__tab{padding:9px 13px !important;font-size:12px !important}
	.wjs-jobarch__tab .wjs-jobarch__tabcount{margin-left:6px;padding:1px 6px;font-size:10px}
	.wjs-jobarch__actions{gap:8px}
	.wjs-jobarch a.wjs-jobarch__btn{padding:10px 8px !important;font-size:12px !important}
}

/* ── aspect-ratio fallback (older mobile browsers) ─────────── */
@supports not (aspect-ratio: 16/9){
	.wjs-jobarch__media{position:relative;height:0;padding-top:56.25%}
	.wjs-jobarch__media img,.wjs-jobarch__placeholder{position:absolute;inset:0;height:100%}
}

/* ── Content resilience ───────────────────────────────────── */
.wjs-jobarch__jobtitle a,.wjs-jobarch__title{overflow-wrap:break-word;word-break:break-word}

/* ── Save badge: hard alignment (some theme mobile styles force
      button{width:100%;display:block}, stretching the badge) ── */
.wjs-jobarch button.wjs-jobarch__save{
	display:inline-block !important;width:auto !important;min-width:0 !important;
	max-width:calc(100% - 24px);height:auto !important;min-height:0 !important;
	right:auto !important;bottom:auto !important;margin:0 !important;
	white-space:nowrap;text-align:center !important;box-sizing:border-box}

/* ── Tabs: compact on mobile (match approved desktop look, smaller scale) ── */
@media(max-width:640px){
	.wjs-jobarch__tabs{gap:8px}
	.wjs-jobarch .wjs-jobarch__tab{padding:9px 14px !important;font-size:12.5px !important}
	.wjs-jobarch__tab .wjs-jobarch__tabcount{margin-left:6px;padding:1px 7px;font-size:10px}
}