/**
 * ============================================================
 *  Home Page — Top Career Opportunities Section CSS
 * ============================================================
 *  Styles for the [wedrive_job_categories] shortcode:
 *  route tabs, dynamic category cards, job-count badges.
 *
 *  Accent color is driven by the --wjs-accent CSS variable,
 *  set inline on the .wjs-catgrid wrapper from the shortcode's
 *  accent="" attribute (default #29abe2).
 *
 *  Loaded by: includes/class-wjs-categories.php (wp_enqueue_style)
 *  Handle:    wjs-top-opportunities
 * ============================================================
 */

.wjs-catgrid{max-width:1160px;margin:0 auto;font-family:inherit}
.wjs-catgrid *{box-sizing:border-box}
.wjs-catgrid__heading{font-size:46px !important;font-weight:800 !important;color:#333 !important;
	margin:0 0 14px !important;padding:0 !important;line-height:1.1 !important;letter-spacing:-.01em;
	text-transform:none !important}
.wjs-catgrid__heading .wjs-catgrid__heading-accent{color:var(--wjs-accent) !important;font:inherit !important}
.wjs-catgrid__sub{color:#555 !important;font-size:15px !important;line-height:1.6 !important;
	margin:0 0 26px !important;max-width:680px}
.wjs-catgrid__tabs{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 30px;padding:0}
/* Hard reset — jobbank/theme global button styles must not leak in */
.wjs-catgrid .wjs-catgrid__tab,
.wjs-catgrid button.wjs-catgrid__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:13px 26px !important;
	font-family:inherit !important;font-size:15px !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-catgrid .wjs-catgrid__tab:hover{
	border-color:var(--wjs-accent) !important;color:var(--wjs-accent) !important;background:#fff none !important}
.wjs-catgrid .wjs-catgrid__tab.is-active,
.wjs-catgrid .wjs-catgrid__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}
.wjs-catgrid__grid{display:grid;grid-template-columns:repeat(var(--wjs-cols,3),1fr);gap:26px}
.wjs-catgrid__card{background:#fff;border:0 !important;border-radius:16px;padding:28px 26px 24px;
	display:flex;flex-direction:column;box-shadow:0 3px 14px rgba(0,0,0,.06);
	transition:box-shadow .18s ease,transform .18s ease}
.wjs-catgrid__card:hover{box-shadow:0 10px 26px rgba(0,0,0,.10);transform:translateY(-2px)}
.wjs-catgrid__cardhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.wjs-catgrid__title{font-size:18px !important;font-weight:700 !important;color:#333 !important;
	margin:0 !important;padding:0 !important;line-height:1.3 !important;text-transform:none !important}
.wjs-catgrid__badge{flex:none;background:color-mix(in srgb,var(--wjs-accent) 13%,#fff);color:var(--wjs-accent) !important;
	font-size:12.5px !important;font-weight:700;border-radius:999px;padding:4px 12px;white-space:nowrap;line-height:1.4}
.wjs-catgrid__desc{color:#555 !important;font-size:14px !important;line-height:1.7 !important;
	margin:0 0 26px !important;flex:1}
.wjs-catgrid__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.wjs-catgrid a.wjs-catgrid__cta{color:var(--wjs-accent) !important;font-size:12px !important;
	font-weight:800 !important;letter-spacing:.12em !important;text-decoration:none !important;
	text-transform:uppercase !important;line-height:1.2 !important;border:0 !important;background:none !important;
	padding:0 !important;box-shadow:none !important}
.wjs-catgrid a.wjs-catgrid__cta:hover{text-decoration:underline !important;color:var(--wjs-accent) !important}
.wjs-catgrid a.wjs-catgrid__lines{flex:none;width:28px;height:9px;display:inline-block;
	text-decoration:none !important;background:none !important;padding:0 !important;box-shadow:none !important;
	border:0 !important;border-top:2.5px solid var(--wjs-accent) !important;
	border-bottom:2.5px solid var(--wjs-accent) !important;transition:transform .18s ease}
.wjs-catgrid__card:hover .wjs-catgrid__lines{transform:translateX(4px)}
@media(max-width:1024px){.wjs-catgrid__grid{grid-template-columns:repeat(2,1fr)}
	.wjs-catgrid__heading{font-size:38px !important}}
@media(max-width:640px){
	.wjs-catgrid__grid{grid-template-columns:1fr;gap:18px}
	.wjs-catgrid__heading{font-size:30px !important}
	.wjs-catgrid__tabs{gap:10px}
	.wjs-catgrid .wjs-catgrid__tab{padding:11px 18px !important;font-size:14px !important}
}
/* Fallback for browsers without color-mix */
@supports not (background:color-mix(in srgb,red 10%,white)){
	.wjs-catgrid__badge{background:#e3f4fc}
}

/* ── Responsive: small phones ─────────────────────────────── */
@media(max-width:400px){
	.wjs-catgrid__heading{font-size:26px !important}
	.wjs-catgrid__card{padding:20px 17px 18px;border-radius:12px}
	.wjs-catgrid .wjs-catgrid__tab{padding:9px 13px !important;font-size:13px !important}
	.wjs-catgrid__title{font-size:17px !important}
	.wjs-catgrid__badge{font-size:11.5px !important;padding:3px 10px}
}

/* ── Content resilience ───────────────────────────────────── */
.wjs-catgrid__title,.wjs-catgrid__cta{overflow-wrap:break-word;word-break:break-word}