/*
 * MyAnas Job Circular — frontend styles
 * Namespaced under .mjc- so nothing here can collide with theme CSS.
 * Palette/spacing are adapted from the supplied Job Circular design
 * reference. All colors are CSS custom properties so they can be
 * overridden by a child theme without editing this file.
 */

.mjc-page,
.mjc-single-main {
	--mjc-bg: #f3f5f8;
	--mjc-card: #fff;
	--mjc-text: #171a21;
	--mjc-muted: #727987;
	--mjc-stroke: #e2e5eb;
	--mjc-purple: #7657f4;
	--mjc-green: #159467;
	--mjc-red: #ff5b66;
	--mjc-teal: #238f8f;
	--mjc-shadow: 0 6px 18px rgba(25, 31, 45, .08);
	-webkit-font-smoothing: antialiased;
}

/*
 * IMPORTANT: color and font-family are applied to .mjc-page ONLY, not
 * .mjc-single-main. The single job article intentionally inherits the
 * active theme's own text color and typography (see single.css) so it
 * matches whatever the theme's current dark/light mode is. Forcing
 * the landing page's hardcoded dark text color (#171a21) here would
 * render as near-invisible dark-on-dark text whenever the theme is in
 * dark mode, since .mjc-single-main sits on the theme's own (often
 * dark) background — not on the landing page's own light --mjc-bg.
 */
.mjc-page {
	color: var(--mjc-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Bengali", Arial, sans-serif;
}

/*
 * The --mjc-* custom properties above were only ever given one, light
 * set of values — nothing redefined them for the theme's dark mode
 * (html[data-theme="dark"], set by inc/dark-mode.php), and several
 * card-related elements below don't even use the variables, they
 * hardcode raw light colors (#fff, #f8f9fb, #1b1e26, etc.) directly.
 * That's why the job card section stayed light no matter what the
 * site's dark/light toggle was set to. Re-pointing the variables at
 * the theme's own dark tokens (inc/design-tokens.php) here, plus
 * overriding the remaining hardcoded spots, makes the cards follow
 * the theme's mode like everything else on the site.
 */
html[data-theme="dark"] .mjc-page,
html[data-theme="dark"] .mjc-single-main {
	--mjc-bg: var(--bg-deep, #171923);
	--mjc-card: var(--surface-card, #21232fa6);
	--mjc-text: var(--text-primary, #f4f5fb);
	--mjc-muted: var(--text-secondary, #E6E6EA);
	--mjc-stroke: var(--border-subtle, #9296b826);
	--mjc-shadow: var(--at-card-shadow, 0 6px 18px rgba(0, 0, 0, .45));
}
html[data-theme="dark"] .mjc-hero-logo,
html[data-theme="dark"] .mjc-info-item,
html[data-theme="dark"] .mjc-action,
html[data-theme="dark"] .mjc-pagination a,
html[data-theme="dark"] .mjc-pagination span {
	background: var(--mjc-card);
	border-color: var(--mjc-stroke);
}
html[data-theme="dark"] .mjc-info-label { color: var(--mjc-muted); }
html[data-theme="dark"] .mjc-info-value { color: var(--mjc-text); }
html[data-theme="dark"] .mjc-action-inner { color: var(--mjc-text); }
html[data-theme="dark"] .mjc-action--deadline { border-color: rgba(255, 91, 102, .35); background: rgba(255, 91, 102, .08); }
html[data-theme="dark"] .mjc-action--deadline .mjc-action-inner { background: rgba(255, 91, 102, .16); color: #ff9098; }
html[data-theme="dark"] .mjc-action--deadline.is-expired { border-color: var(--mjc-stroke); background: var(--mjc-card); }
html[data-theme="dark"] .mjc-action--deadline.is-expired .mjc-action-inner { background: var(--mjc-stroke); color: var(--mjc-muted); }
html[data-theme="dark"] .mjc-action--details { border-color: rgba(35, 143, 143, .35); background: rgba(35, 143, 143, .08); }
html[data-theme="dark"] .mjc-action--details .mjc-action-inner { background: rgba(35, 143, 143, .18); color: #59d3d3; }
html[data-theme="dark"] .mjc-ad-slot {
	background: var(--mjc-card);
	border-color: var(--mjc-stroke);
}
html[data-theme="dark"] .mjc-ad-placeholder { color: var(--mjc-muted); }

/*
 * Job-card mini hero (.mjc-job-card .mjc-hero) previously used the
 * same fixed pastel gradient in both modes — fine as a background, but
 * .mjc-hero-title/.mjc-hero-sub below were hardcoded to dark text
 * (#171a21/#4c5160) assuming that background never changed, which is
 * no longer true now that it has a dark variant here.
 */
html[data-theme="dark"] .mjc-hero--one { background: linear-gradient(145deg, #3c2f57, #2b2140); }
html[data-theme="dark"] .mjc-hero--two { background: linear-gradient(145deg, #1e3543, #172a35); }
html[data-theme="dark"] .mjc-hero--three { background: linear-gradient(145deg, #4a3620, #372a18); }
html[data-theme="dark"] .mjc-hero-title { color: var(--mjc-text); }
html[data-theme="dark"] .mjc-hero-sub { color: var(--mjc-muted); }
html[data-theme="dark"] .mjc-type-btn { background: rgba(255, 255, 255, .16); color: var(--mjc-text); }
html[data-theme="dark"] .mjc-save-btn { background: rgba(255, 255, 255, .12); color: var(--mjc-muted); }
html[data-theme="dark"] .mjc-adv-field select {
	background-color: var(--mjc-card);
	color: var(--mjc-text);
	border-color: var(--mjc-stroke);
}

.mjc-page * ,
.mjc-single-main * {
	box-sizing: border-box;
}

.mjc-page {
	min-height: 100vh;
	padding-bottom: 60px;
}

/*
 * Page wrap — cloned from the MyAnas theme's own real single.html /
 * page.html / archive.html block templates: each wraps its content in
 * a `wp:group` with layout `{"contentSize":"1200px","wideSize":"1200px"}`
 * and no root padding is set in theme.json, so on every real theme
 * page this resolves to max-width:1200px, centered, with NO side
 * padding at this wrap level (individual elements inside supply their
 * own spacing). Mirrored here exactly so MJC pages sit at the same
 * width as the rest of the site instead of a plugin-invented size.
 * Shared by the landing page (no sidebar), the category/location
 * archives (with sidebar) via .mjc-container, and the single job
 * article via .mjc-page-wrap (see templates/single-job_circular.php).
 */
.mjc-container,
.mjc-page-wrap {
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* ---------- Hero ---------- */
/* Full-bleed edge-to-edge: escapes any parent max-width wrapper the
   theme puts around the page content, same trick as the reference
   design's .site-hero. Reset for the job-card mini hero below, which
   must stay sized to its own card, not the viewport. */
.mjc-hero {
	position: relative;
	overflow: hidden;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 14px;
	padding: 32px 0 24px;
	text-align: center;
	background: linear-gradient(135deg, #7657f4 0%, #a15ff0 28%, #ff6f8e 58%, #ffa64d 80%, #15b48a 100%);
	color: #fff;
}
.mjc-hero-eyebrow {
	display: inline-block;
	margin: 0 0 8px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mjc-purple);
	background: rgba(255, 255, 255, .85);
}
.mjc-hero-h1 {
	margin: 0 0 14px;
	font-size: clamp(22px, 3.4vw, 32px);
	line-height: 1.22;
	font-weight: 800;
}
.mjc-typed-wrap { color: #fff2c4; }
.mjc-cursor {
	display: inline-block;
	margin-left: 2px;
	animation: mjc-blink 1s steps(1) infinite;
}
@keyframes mjc-blink { 50% { opacity: 0; } }

/*
 * Decorative circles/line — purely cosmetic <span>s (see job-listing.php
 * and mjc_render_job_card()), no JS involved. Two size sets: the big
 * page hero (.mjc-hero > .mjc-hero-deco) and the smaller per-card mini
 * hero (.mjc-job-card .mjc-hero > .mjc-hero-deco) share the same class
 * names but different sizing, scoped below.
 */
.mjc-hero-deco {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.mjc-hero > .mjc-deco-a { width: 220px; height: 220px; top: -90px; right: -60px; background: rgba(255, 255, 255, .28); }
.mjc-hero > .mjc-deco-b { width: 140px; height: 140px; bottom: -60px; left: -40px; background: rgba(255, 255, 255, .2); }

.mjc-job-card .mjc-hero .mjc-deco-a { width: 130px; height: 130px; top: -50px; right: -40px; background: rgba(255, 255, 255, .3); }
.mjc-job-card .mjc-hero .mjc-deco-b { width: 90px; height: 90px; bottom: -35px; left: -28px; background: rgba(255, 255, 255, .2); }
.mjc-job-card .mjc-hero .mjc-deco-c { width: 12px; height: 12px; top: 16px; left: 20px; background: rgba(255, 255, 255, .55); }
.mjc-job-card .mjc-hero .mjc-deco-d { width: 7px; height: 7px; bottom: 20px; right: 26px; background: rgba(255, 255, 255, .6); }
.mjc-job-card .mjc-hero .mjc-deco-line {
	position: absolute;
	pointer-events: none;
	width: 60px;
	height: 2px;
	border-radius: 2px;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
}
/* Everything inside the hero that carries meaning sits above the decos. */
.mjc-hero-top,
.mjc-hero-logo,
.mjc-hero-eyebrow,
.mjc-hero-h1,
.mjc-search-bar,
.mjc-filter-chips,
.mjc-hero-title,
.mjc-hero-sub {
	position: relative;
	z-index: 2;
}

.mjc-search-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 480px;
	margin: 0 auto 14px;
	background: #fff;
	border-radius: 999px;
	padding: 5px 5px 5px 16px;
	box-shadow: var(--mjc-shadow);
}
.mjc-search-bar input[type="search"] {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 13px;
	color: #171a21;
	padding: 8px 0;
}
.mjc-search-bar input::placeholder { color: #a7acb8; }
.mjc-search-bar button {
	border: none;
	cursor: pointer;
	background: var(--mjc-purple);
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	padding: 9px 16px;
	border-radius: 999px;
}

.mjc-filter-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0 0 5px;
}
.mjc-filter-chips--location { margin-top: 3px; }
.mjc-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 13px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
	color: #3c4150;
	background: rgba(255, 255, 255, .6);
	border: 1px solid transparent;
}
.mjc-chip.is-active {
	background: #fff;
	color: var(--mjc-purple);
}
.mjc-chip:focus-visible {
	outline: 2px solid rgba(118, 87, 244, .7);
	outline-offset: 2px;
}
.mjc-chip--ghost {
	background: rgba(255, 255, 255, .35);
	color: #fff;
}
.mjc-chip--ghost.is-active {
	background: #fff;
	color: var(--mjc-teal);
}

/* ---------- Advanced search (education / deadline / published-date dropdowns) ---------- */
.mjc-adv-filters {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	max-width: 720px;
	margin: 10px auto 0;
	text-align: left;
}
.mjc-adv-field label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: rgba(255, 255, 255, .85);
	margin: 0 0 4px 2px;
}
.mjc-adv-field select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23727987' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
	background-size: 14px;
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 9px 30px 9px 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--mjc-text, #171a21);
	box-shadow: var(--mjc-shadow);
	cursor: pointer;
}
.mjc-adv-field select:focus-visible {
	outline: 2px solid rgba(118, 87, 244, .7);
	outline-offset: 1px;
}

@media (max-width: 640px) {
	.mjc-adv-filters {
		grid-template-columns: 1fr;
	}
}

/* ---------- Breadcrumbs ---------- */
.mjc-breadcrumbs {
	margin: 16px 0 8px;
	font-size: 12px;
	color: var(--mjc-muted);
}
.mjc-breadcrumbs a { color: var(--mjc-muted); text-decoration: none; }
.mjc-breadcrumbs a:hover { color: var(--mjc-purple); }
.mjc-breadcrumb-sep { margin: 0 6px; }

.mjc-result-count {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--mjc-muted);
}

/* ---------- Job grid ---------- */
/* Mobile-first: 1 column by default. From tablet width up we hand the
   column count to grid's own auto-fit/minmax math instead of a fixed
   repeat(2, 1fr): the landing page's .mjc-jobs sits in the full
   1200px .mjc-container (no sidebar), which comfortably fits 3 cards
   at this minimum width, while the category/location archives' grid
   sits inside the narrower 70% .mjc-listing-content-col (sidebar eats
   the other 30%), where only 2 fit — same rule, it just resolves
   differently per page because the available width differs. */
.mjc-jobs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
/* Only the /job-circular/ landing page's grid gets this extra top gap
   (its .mjc-container has no .mjc-listing-columns class, since it has
   no sidebar) — the category/location archives' .mjc-jobs is left
   alone, unchanged from before. */
.mjc-container:not(.mjc-listing-columns) .mjc-jobs {
	margin-top: 16px;
}
@media (min-width: 768px) {
	.mjc-jobs { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

.mjc-job-card {
	background: var(--mjc-card);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--mjc-shadow);
	border: 1px solid var(--mjc-stroke);
	display: flex;
	flex-direction: column;
}
.mjc-job-card.is-expired { opacity: .72; }
/* AJAX live filter (assets/js/frontend.js + includes/ajax.php) dims
   the results briefly while a new query is in flight. */
.mjc-results.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s ease; }

.mjc-hero--one { background: linear-gradient(145deg, #ead9f7, #d9bcec); }
.mjc-hero--two { background: linear-gradient(145deg, #dcebf6, #bfd9ed); }
.mjc-hero--three { background: linear-gradient(145deg, #f7e5d0, #edcba4); }

/*
 * Fixed height + flex column so every card's mini hero lines up at
 * the same height across a row, no matter how long the title or
 * organization name is — .mjc-hero-title/.mjc-hero-sub are clamped
 * below so overflowing text never pushes past it.
 */
.mjc-job-card .mjc-hero {
	width: auto;
	margin: 0;
	border-radius: 0;
	text-align: center;
	color: var(--mjc-text);
	padding: 16px 16px 14px;
	height: 160px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}
/*
 * DOM order is logo, then badge/save-button row, then title/subtitle
 * (see includes/template-tags.php) — `order` re-stacks them visually
 * so the badge/save row stays pinned as a full-width top strip while
 * the logo/title/subtitle become one centered block underneath it.
 */
.mjc-hero-logo {
	order: 2;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	margin: 0 auto 8px;
	flex: 0 0 auto;
}
.mjc-hero-logo img { width: 100%; height: 100%; object-fit: cover; }

.mjc-hero-top {
	order: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	flex: 0 0 auto;
}
.mjc-type-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .72);
	color: #242832;
	text-decoration: none;
}
.mjc-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.mjc-accent-0 .mjc-dot { background: var(--mjc-purple); }
.mjc-accent-1 .mjc-dot { background: var(--mjc-green); }
.mjc-accent-2 .mjc-dot { background: var(--mjc-red); }
.mjc-accent-3 .mjc-dot { background: var(--mjc-teal); }

/* Decorative only (no JS toggle) — matches the reference bookmark icon. */
.mjc-save-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .55);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	flex: 0 0 auto;
}
.mjc-save-btn svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: #171a21;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}
html[data-theme="dark"] .mjc-save-btn svg { stroke: var(--mjc-text); }

/*
 * Hardcoded light-mode colors (not var(--mjc-text)/var(--mjc-muted))
 * because this title/subtitle sit on the mini hero's own pastel
 * gradient, which no longer stays fixed between modes — the dark-mode
 * override for both now lives in the dark-mode block above, alongside
 * the gradient's own dark variant.
 * -webkit-line-clamp caps each to a fixed number of lines so long
 * text never grows past the hero's fixed height.
 */
.mjc-hero-title {
	order: 3;
	margin: 0 0 3px;
	font-size: 15px;
	line-height: 1.28;
	font-weight: 800;
	color: #171a21;
	width: 100%;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mjc-hero-title a { color: inherit; text-decoration: none; }
.mjc-hero-sub {
	order: 4;
	margin: 0;
	font-size: 11px;
	color: #4c5160;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * Was a 1px-gap + shared-background "faux table" trick (no radius on
 * the individual boxes) — looked like a plain data table instead of
 * the reference design's separated, rounded info pills. Switched to
 * a real gap with each item as its own bordered, centered rounded
 * box, matching the reference 1:1.
 */
.mjc-info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5px;
	padding: 10px 14px 0;
}
.mjc-info-item {
	background: #f8f9fb;
	border: 1px solid var(--mjc-stroke);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 7px 6px;
	min-height: 44px;
}
.mjc-info-item--wide { grid-column: 1 / -1; }
.mjc-info-label {
	display: block;
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #818795;
	margin-bottom: 2px;
}
.mjc-info-value {
	display: block;
	font-size: 11px;
	font-weight: 750;
	color: #242832;
}
.mjc-info-value.is-expired { color: var(--mjc-red); }

/*
 * Was a plain flex row: a small pill badge + an unstyled text link —
 * the "View Details" side had no background/border/icon at all, so
 * it rendered as a bare hyperlink instead of a button. Rebuilt as the
 * reference's two-column grid of full button-styled boxes, each with
 * its own icon circle.
 */
.mjc-actions {
	margin-top: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	padding: 10px 14px 14px;
}
.mjc-action {
	height: 40px;
	border: 1px solid #dfe3e9;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 3px 10px rgba(24, 29, 40, .06);
	overflow: hidden;
}
.mjc-action-inner {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #1b1e26;
	font-size: 11px;
	font-weight: 750;
	letter-spacing: .03px;
	transition: transform .15s, filter .15s;
}
a.mjc-action-inner:active { transform: scale(.98); }
.mjc-action--deadline { border-color: #ffd1d5; background: #fff8f8; }
.mjc-action--deadline .mjc-action-inner { background: #fff0f1; color: #d9414d; }
.mjc-action--deadline.is-expired { border-color: #e5e7ec; background: #f7f8fa; }
.mjc-action--deadline.is-expired .mjc-action-inner { background: #f2f2f2; color: #8b8f99; }
.mjc-action--details { border-color: #cce6e6; background: #f7ffff; }
.mjc-action--details .mjc-action-inner { background: #e1f5f5; color: #147979; }
.mjc-action-icon {
	width: 13px;
	height: 13px;
	margin-right: 5px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	flex: 0 0 auto;
}
.mjc-action--deadline .mjc-action-icon { background: #ff5b66; color: #fff; }
.mjc-action--details .mjc-action-icon { background: #238f8f; color: #fff; }
.mjc-action-icon svg {
	width: 8px;
	height: 8px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Still used by the plain "View All Job Circulars" link in the
   no-results state — a real text link there, left untouched. */
.mjc-view-details {
	font-size: 13px;
	font-weight: 700;
	color: var(--mjc-teal);
	text-decoration: none;
}

/* ---------- Ad slot ---------- */
.mjc-ad-slot {
	grid-column: 1 / -1;
	border: 1px dashed #c7ccd5;
	background: #eef0f4;
	border-radius: 14px;
	min-height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mjc-ad-placeholder {
	font-size: 12px;
	color: #9aa0ab;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* ---------- Pagination ---------- */
.mjc-pagination { margin-top: 34px; display: flex; justify-content: center; }
.mjc-pagination ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; flex-wrap: wrap; }
.mjc-pagination a,
.mjc-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	color: var(--mjc-text);
	background: #fff;
	border: 1px solid var(--mjc-stroke);
}
.mjc-pagination .current { background: var(--mjc-purple); color: #fff; border-color: var(--mjc-purple); }

/*
 * ---------- Content/sidebar split (category & location archives, and
 * the single job article) ----------
 * Cloned from the theme's own real column blocks (templates/single.html,
 * page.html, archive.html — the wp:columns markup with 70%/30% wp:column
 * widths) and its extra CSS in assets/css/site-styles-deferred.css:
 *   - gap: WP core's own Columns-block default is
 *     `var(--wp--style--block-gap, 2em)` — theme.json never sets
 *     blockGap, so the real fallback everywhere on this theme is 2em
 *     (32px), not an arbitrary value.
 *   - stack-on-mobile breakpoint: WP core switches a Columns block from
 *     stacked to side-by-side at 782px, same as every real theme page.
 *   - sticky sidebar at 921px: the theme's own rule for
 *     .myanas-archive-columns / .myanas-page-columns / .myanas-single-columns
 *     (site-styles-deferred.css) turns the sidebar sticky at exactly
 *     this breakpoint — mirrored here with the same top:70px offset.
 * Named .mjc-listing-* / .mjc-single-* (not myanas-single-columns etc.)
 * on purpose: this markup is hand-authored PHP, not a real Gutenberg
 * Columns block, so reusing the theme's literal class names would only
 * invite this plugin to silently pick up (or fight with) future theme
 * CSS aimed at real wp:columns blocks. Same computed layout, isolated
 * class names.
 */
.mjc-listing-columns,
.mjc-single-columns {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--wp--style--block-gap, 2em);
	align-items: flex-start;
	box-sizing: border-box;
}
.mjc-listing-content-col,
.mjc-single-content-col {
	flex: 1 1 70% !important;
	min-width: 0;
	box-sizing: border-box;
}
.mjc-listing-sidebar-col,
.mjc-single-sidebar-col {
	flex: 1 1 30% !important;
	min-width: 0;
	box-sizing: border-box;
}
.mjc-listing-sidebar-col > *,
.mjc-single-sidebar-col > * {
	max-width: 100%;
	box-sizing: border-box;
	float: none !important;
}
.mjc-listing-content-col > :first-child,
.mjc-listing-sidebar-col > :first-child,
.mjc-single-content-col > :first-child,
.mjc-single-sidebar-col > :first-child {
	margin-top: 0;
}
@media (min-width: 921px) {
	.mjc-listing-sidebar-col,
	.mjc-single-sidebar-col {
		position: sticky;
		top: 70px;
		align-self: flex-start;
	}
}
@media (max-width: 781px) {
	.mjc-listing-columns,
	.mjc-single-columns {
		flex-direction: column !important;
	}
	.mjc-listing-sidebar-col,
	.mjc-single-sidebar-col {
		flex-basis: auto !important;
		max-width: none;
	}
}

/* Extra compaction for small phones — everything above is already
   fairly tight, this just trims a bit further so two-up (or even the
   1-column) card grid doesn't feel oversized on narrow screens. */
@media (max-width: 480px) {
	.mjc-hero { padding: 26px 0 20px; }
	.mjc-hero-h1 { margin-bottom: 12px; }
	.mjc-search-bar { padding: 4px 4px 4px 14px; }
	.mjc-jobs { gap: 10px; }
	.mjc-job-card .mjc-hero { height: 148px; padding: 14px 14px 12px; }
	.mjc-hero-logo { width: 32px; height: 32px; margin-bottom: 6px; }
	.mjc-hero-top { margin-bottom: 8px; }
	.mjc-type-btn { font-size: 10px; padding: 3px 9px; }
	.mjc-save-btn { width: 24px; height: 24px; }
	.mjc-save-btn svg { width: 12px; height: 12px; }
	.mjc-hero-title { font-size: 14px; }
	.mjc-hero-sub { font-size: 10px; }
	.mjc-info-grid { gap: 4px; padding: 8px 12px 0; }
	.mjc-info-item { padding: 6px 5px; min-height: 40px; border-radius: 10px; }
	.mjc-info-label { font-size: 8px; }
	.mjc-info-value { font-size: 10px; }
	.mjc-actions { gap: 5px; padding: 8px 12px 12px; }
	.mjc-action { height: 36px; border-radius: 10px; }
	.mjc-action-inner { font-size: 10px; }
	.mjc-action-icon { width: 12px; height: 12px; margin-right: 4px; }
	.mjc-action-icon svg { width: 7px; height: 7px; }
}

/* ---------- No results ---------- */
.mjc-no-results {
	text-align: center;
	padding: 60px 20px;
	color: var(--mjc-muted);
}
.mjc-no-results .mjc-view-details {
	display: inline-block;
	margin-top: 12px;
	color: var(--mjc-purple);
}