/* ==========================================================================
   NGOJobsite Modern Homepage Stylesheet
   ========================================================================== */

.site-header-filter,
			.header-filter-bar,
			#ngo-searchbar {
				display: none !important;
			}
			@media (min-width: 901px) {
				.ngo-modern-homepage {
					overflow: visible !important;
				}
				.ngo-home-feed-section,
				.ngo-section-container {
					overflow: visible !important;
					position: relative !important;
				}
				.ngo-layout-2col {
					display: grid !important;
					grid-template-columns: 310px 1fr !important;
					gap: 32px !important;
					align-items: start !important;
					overflow: visible !important;
					position: relative !important;
				}
				.ngo-discovery-sidebar {
					position: -webkit-sticky !important;
					position: sticky !important;
					top: 24px !important;
					align-self: flex-start !important;
					max-height: calc(100vh - 48px) !important;
					overflow-y: auto !important;
					overflow-x: hidden !important;
					overscroll-behavior: contain !important;
					scrollbar-width: thin !important;
					scrollbar-color: rgba(148, 163, 184, 0.4) transparent !important;
					z-index: 50 !important;
				}
				body.admin-bar .ngo-discovery-sidebar {
					top: 56px !important;
					max-height: calc(100vh - 76px) !important;
				}
				.ngo-discovery-sidebar::-webkit-scrollbar {
					width: 5px !important;
				}
				.ngo-discovery-sidebar::-webkit-scrollbar-thumb {
					background: rgba(148, 163, 184, 0.35) !important;
					border-radius: 4px !important;
				}
				.ngo-discovery-sidebar::-webkit-scrollbar-thumb:hover {
					background: rgba(148, 163, 184, 0.6) !important;
				}
				.ngo-discovery-sidebar .ngo-sidebar-card {
					margin-bottom: 20px !important;
				}
				.ngo-discovery-sidebar .ngo-sidebar-card:last-child {
					margin-bottom: 0 !important;
				}
			}
			@media (max-width: 900px) {
				.ngo-layout-2col {
					display: flex !important;
					flex-direction: column !important;
					width: 100% !important;
				}
				.ngo-main-feed {
					order: 1 !important;
					width: 100% !important;
				}
				.ngo-discovery-sidebar {
					order: 2 !important;
					position: static !important;
					top: auto !important;
					width: 100% !important;
					max-height: none !important;
					overflow: visible !important;
				}
			}

/* ══════════════════════════════════════════════════════════════
   PROPOSED HOMEPAGE REDESIGN STYLES (Dynamic Theme Colors & Seamless Desktop/Mobile Alignment)
   ══════════════════════════════════════════════════════════════ */

/* HERO SECTION - Unified container with integrated right-background image */
.ngo-ref-hero {
	background: #f8fafc;
	background: linear-gradient(180deg, color-mix(in srgb, var(--ngo-primary, #1e73be) 6%, #ffffff) 0%, #f8fafc 100%);
	padding: 56px 0 60px;
	position: relative;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
}

/* Background Photo Visual on the Right with authentic diagonal paint-brush cut */
.ngo-ref-hero-bg-visual {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50%;
	max-width: 760px;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

/* Sky-blue diagonal dry-brush strokes running parallel to the cut matching reference */
.ngo-ref-brush-splash {
	position: absolute;
	top: 18px;
	left: 8%;
	width: 240px;
	height: 130px;
	pointer-events: none;
	z-index: 2;
	transform: rotate(-4deg);
}

.ngo-ref-hero-bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	display: block;
	/* Authentic diagonal paint-brush cut angled at ~134deg matching reference mockup exactly */
	-webkit-mask-image: linear-gradient(134deg, transparent 0%, transparent 24%, rgba(0, 0, 0, 0.12) 28%, rgba(0, 0, 0, 0.55) 34%, rgba(0, 0, 0, 0.92) 39%, #000 44%);
	mask-image: linear-gradient(134deg, transparent 0%, transparent 24%, rgba(0, 0, 0, 0.12) 28%, rgba(0, 0, 0, 0.55) 34%, rgba(0, 0, 0, 0.92) 39%, #000 44%);
}

/* Handwriting impact stamp overlay (When enabled in options) */
.ngo-ref-hero-stamp {
	position: absolute;
	top: 36px;
	right: 48px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-family: "Caveat", "Dancing Script", "Segoe Print", "Comic Sans MS", cursive, sans-serif;
	line-height: 1.14;
	color: #1e40af;
	transform: rotate(-8deg);
	pointer-events: none;
	z-index: 10;
}
.ngo-stamp-line-1 { font-weight: 700; font-size: 27px; color: #1e3a8a; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95); margin-bottom: 2px; }
.ngo-stamp-line-2 { font-style: italic; font-size: 25px; color: #1e40af; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95); margin-bottom: 2px; }
.ngo-stamp-line-3 { font-weight: 800; font-size: 27px; color: #1d4ed8; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95); margin-bottom: 2px; }
.ngo-stamp-line-4 { 
	font-weight: 800; 
	font-size: 27px; 
	color: #1d4ed8; 
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
	position: relative;
	display: inline-flex;
	flex-direction: column;
}
.ngo-stamp-underline {
	width: 65px;
	height: 8px;
	margin-top: 1px;
}

/* Content Container sitting on top of hero background */
.ngo-ref-hero-container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
	position: relative;
	z-index: 5;
}

.ngo-ref-hero-text {
	max-width: 620px;
	position: relative;
	z-index: 5;
}

.ngo-ref-tagline {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ngo-primary, #1e73be);
	margin-bottom: 12px;
}

.ngo-ref-hero-title {
	font-size: 3.2rem;
	font-weight: 900;
	line-height: 1.13;
	color: #0f172a;
	margin: 0 0 16px;
	letter-spacing: -0.03em;
}

.ngo-ref-hero-desc {
	font-size: 1.15rem;
	color: #475569;
	margin: 0 0 32px;
	line-height: 1.55;
	max-width: 550px;
}

/* White Elevated Search Bar with Separators - Spans across so submit button sits on top of image */
.ngo-ref-search-card {
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 14px 38px -6px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.05);
	border: 1px solid #e2e8f0;
	padding: 8px 10px;
	margin-bottom: 24px;
	max-width: 1060px;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	z-index: 10;
}

.ngo-ref-search-form {
	display: flex;
	align-items: center;
	gap: 0;
	width: 100%;
	box-sizing: border-box;
}

.ngo-ref-search-col {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 18px;
	flex: 1;
	border-right: 1px solid #e2e8f0;
	min-width: 0;
	box-sizing: border-box;
}

.ngo-ref-search-col--keyword {
	flex: 1.4;
}

.ngo-ref-search-col--category {
	border-right: none;
}

.ngo-ref-col-icon {
	color: var(--ngo-primary, #1e73be);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ngo-ref-col-inputs {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
}

.ngo-ref-col-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: capitalize;
	color: #64748b;
	margin-bottom: 2px;
	line-height: 1;
}

.ngo-ref-col-inputs input,
.ngo-ref-col-inputs select {
	border: none !important;
	outline: none !important;
	padding: 2px 0 !important;
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #0f172a !important;
	background: transparent !important;
	width: 100% !important;
	box-shadow: none !important;
}

.ngo-ref-col-inputs select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 4px center;
	padding-right: 22px !important;
	cursor: pointer;
}

.ngo-ref-col-inputs input::placeholder {
	color: #94a3b8;
	font-weight: 400;
}

.ngo-ref-search-submit {
	background: var(--ngo-primary, #1e73be);
	color: #ffffff !important;
	border: none;
	border-radius: 10px;
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s ease;
	flex-shrink: 0;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--ngo-primary, #1e73be) 35%, transparent);
}

.ngo-ref-search-submit:hover {
	filter: brightness(0.92);
	transform: translateY(-1px);
}

/* Quick Filter Pills Row */
.ngo-ref-quick-tags {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	position: relative;
	z-index: 10;
}

.ngo-ref-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	text-decoration: none;
	transition: all 0.18s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.ngo-ref-pill svg {
	color: var(--ngo-primary, #1e73be);
	flex-shrink: 0;
}

.ngo-ref-pill:hover {
	border-color: var(--ngo-primary, #1e73be);
	color: var(--ngo-primary, #1e73be);
	transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════
   FEATURE CARDS SECTION BEFORE POST LIST (3 Pills on Light Slate)
   ══════════════════════════════════════════════════════════════ */
.ngo-ref-prefeed-strip {
	background: #edf2f7;
	background: color-mix(in srgb, var(--ngo-primary, #1e73be) 4%, #f1f5f9);
	padding: 24px 0;
	border-top: 1px solid #e2e8f0;
	border-bottom: 1px solid #e2e8f0;
}

.ngo-ref-feature-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.ngo-ref-feature-card {
	background: #ffffff;
	border-radius: 14px;
	padding: 18px 22px;
	display: flex;
	align-items: center;
	gap: 16px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
	text-decoration: none;
	color: inherit;
	transition: all 0.2s ease;
}

.ngo-ref-feature-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
	border-color: color-mix(in srgb, var(--ngo-primary, #1e73be) 35%, #e2e8f0);
}

.ngo-ref-feature-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: color-mix(in srgb, var(--ngo-primary, #1e73be) 10%, #ffffff);
	color: var(--ngo-primary, #1e73be);
}

.ngo-ref-feature-text h3 {
	font-size: 16px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 3px;
	line-height: 1.25;
}

.ngo-ref-feature-text p {
	font-size: 13px;
	color: #64748b;
	margin: 0;
	line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════
   OPPORTUNITIES HEADER ROW
   ══════════════════════════════════════════════════════════════ */
.ngo-ref-opportunities-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid #f1f5f9;
}

.ngo-ref-opp-title {
	font-size: 1.75rem;
	font-weight: 800;
	color: #0f172a;
	margin: 0;
	letter-spacing: -0.02em;
}

.ngo-ref-view-all-link {
	font-size: 14px;
	font-weight: 700;
	color: var(--ngo-primary, #1e73be);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease;
}

.ngo-ref-view-all-link:hover {
	gap: 9px;
	text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════
   2-COLUMN HOMEPAGE FEED & STICKY DISCOVERY SIDEBAR (Desktop)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
	.ngo-modern-homepage,
	.ngo-home-feed-section,
	.ngo-section-container {
		overflow: visible !important;
	}
	.ngo-layout-2col {
		display: grid !important;
		grid-template-columns: 310px 1fr !important;
		gap: 32px !important;
		align-items: start !important;
		overflow: visible !important;
		position: relative !important;
	}
	.ngo-discovery-sidebar {
		position: -webkit-sticky !important;
		position: sticky !important;
		top: 24px !important;
		align-self: flex-start !important;
		max-height: calc(100vh - 48px) !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		overscroll-behavior: contain !important;
		scrollbar-width: thin !important;
		scrollbar-color: rgba(148, 163, 184, 0.4) transparent !important;
		z-index: 50 !important;
	}
	body.admin-bar .ngo-discovery-sidebar {
		top: 56px !important;
		max-height: calc(100vh - 76px) !important;
	}
	.ngo-discovery-sidebar::-webkit-scrollbar {
		width: 5px !important;
	}
	.ngo-discovery-sidebar::-webkit-scrollbar-thumb {
		background: rgba(148, 163, 184, 0.35) !important;
		border-radius: 4px !important;
	}
	.ngo-discovery-sidebar::-webkit-scrollbar-thumb:hover {
		background: rgba(148, 163, 184, 0.6) !important;
	}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS (Matching User Reference Mockup Exactly)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
	.ngo-modern-homepage,
	.ngo-ref-hero {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	.ngo-ref-hero {
		padding: 24px 0 28px !important;
		position: relative !important;
	}

	/* Hero Background Image on Mobile: integrated in top right with diagonal brush cut */
	.ngo-ref-hero-bg-visual {
		width: 52% !important;
		height: 220px !important;
		top: 0 !important;
		right: 0 !important;
		bottom: auto !important;
		z-index: 1 !important;
		opacity: 0.95 !important;
	}

	.ngo-ref-brush-splash {
		display: none !important;
	}

	.ngo-ref-hero-bg-img {
		width: 100% !important;
		height: 100% !important;
		object-position: center top !important;
		-webkit-mask-image: linear-gradient(142deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.4) 32%, #000 50%), linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 1) 35%) !important;
		mask-image: linear-gradient(142deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.4) 32%, #000 50%), linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 1) 35%) !important;
		-webkit-mask-composite: source-in !important;
		mask-composite: intersect !important;
	}

	.ngo-ref-hero-bg-img {
		object-position: center top !important;
	}

	.ngo-ref-hero-stamp {
		display: none !important;
	}

	.ngo-ref-hero-container {
		padding: 0 16px !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		position: relative !important;
		z-index: 5 !important;
	}

	.ngo-ref-hero-text {
		max-width: 100% !important;
		position: relative !important;
		z-index: 5 !important;
	}

	.ngo-ref-tagline {
		display: none !important; /* In user mobile screenshot, tagline is hidden, starts directly with h1 */
	}

	.ngo-ref-hero-title {
		font-size: 1.85rem !important;
		line-height: 1.16 !important;
		margin: 0 0 10px 0 !important;
		max-width: calc(100% - 85px) !important;
		word-break: break-word !important;
		overflow-wrap: break-word !important;
		color: #0f172a !important;
	}

	.ngo-ref-hero-desc {
		font-size: 0.95rem !important;
		line-height: 1.45 !important;
		margin: 0 0 20px 0 !important;
		max-width: calc(100% - 65px) !important;
		color: #475569 !important;
	}

	/* Search Card on Mobile: Clean white card, stacked single-line fields matching mobile mockup */
	.ngo-ref-search-card {
		background: #ffffff !important;
		border-radius: 16px !important;
		border: 1px solid #e2e8f0 !important;
		box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;
		padding: 14px !important;
		margin: 0 0 18px 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		position: relative !important;
		z-index: 10 !important;
	}

	.ngo-ref-search-form {
		display: flex !important;
		flex-direction: column !important;
		gap: 9px !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	.ngo-ref-search-col {
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		border: 1px solid #e2e8f0 !important;
		border-radius: 10px !important;
		padding: 10px 14px !important;
		box-sizing: border-box !important;
		background: #ffffff !important;
		min-width: 0 !important;
		margin: 0 !important;
	}

	.ngo-ref-col-icon {
		width: 18px !important;
		height: 18px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		color: var(--ngo-primary, #1e73be) !important;
		flex-shrink: 0 !important;
	}

	.ngo-ref-col-label {
		display: none !important; /* Single line clean field */
	}

	.ngo-ref-col-inputs {
		width: 100% !important;
		min-width: 0 !important;
		flex: 1 1 auto !important;
	}

	.ngo-ref-col-inputs input,
	.ngo-ref-col-inputs select {
		font-size: 14px !important;
		font-weight: 500 !important;
		color: #1e293b !important;
		padding: 0 !important;
		height: 22px !important;
		line-height: 22px !important;
		width: 100% !important;
		min-width: 0 !important;
		background: transparent !important;
		border: none !important;
		outline: none !important;
		box-shadow: none !important;
		box-sizing: border-box !important;
	}

	.ngo-ref-col-inputs select {
		appearance: none !important;
		-webkit-appearance: none !important;
		-moz-appearance: none !important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
		background-repeat: no-repeat !important;
		background-position: right 4px center !important;
		padding-right: 22px !important;
		cursor: pointer !important;
	}

	.ngo-ref-search-submit {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;
		padding: 13px 18px !important;
		border-radius: 10px !important;
		margin-top: 3px !important;
		background: var(--ngo-primary, #1e73be) !important;
		color: #ffffff !important;
		border: none !important;
		box-shadow: 0 4px 14px color-mix(in srgb, var(--ngo-primary, #1e73be) 30%, transparent) !important;
	}

	.ngo-ref-search-submit svg {
		display: inline-block !important;
		width: 18px !important;
		height: 18px !important;
		stroke: #ffffff !important;
		flex-shrink: 0 !important;
	}

	.ngo-ref-search-submit span {
		display: inline-block !important;
		color: #ffffff !important;
		font-size: 15px !important;
		font-weight: 700 !important;
		line-height: 1 !important;
	}

	/* Quick filter tags */
	.ngo-ref-quick-tags {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
		padding: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		overflow-x: visible !important;
	}

	.ngo-ref-pill {
		display: inline-flex !important;
		align-items: center !important;
		gap: 6px !important;
		padding: 6px 12px !important;
		border-radius: 20px !important;
		background: #ffffff !important;
		border: 1px solid #e2e8f0 !important;
		color: #334155 !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		text-decoration: none !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
		white-space: nowrap !important;
		flex-shrink: 0 !important;
	}

	.ngo-ref-feature-cards-grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}

	.ngo-ref-feature-card {
		padding: 14px 16px !important;
	}

	.ngo-ref-feature-icon {
		width: 44px !important;
		height: 44px !important;
	}

	.ngo-ref-opportunities-header {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px !important;
	}

	.ngo-ref-opp-title {
		font-size: 1.5rem !important;
	}
}

/* REFINED JOB CARD MATCHING USER REFERENCE DESIGN */
.ngo-premium-job-card {
	background: #ffffff;
	border-radius: 16px;
	border: 1px solid #e2e8f0;
	padding: 20px 22px;
	margin-bottom: 14px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
	transition: all 0.2s ease;
}

.ngo-premium-job-card:hover {
	border-color: color-mix(in srgb, var(--ngo-primary, #1e73be) 40%, #cbd5e1);
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
	transform: translateY(-2px);
}

.ngo-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
}

.ngo-card-identity {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ngo-card-logo-wrap {
	width: 50px;
	height: 50px;
	border-radius: 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

.ngo-card-logo-wrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
	box-sizing: border-box;
}

.ngo-logo-placeholder {
	font-weight: 800;
	font-size: 16px;
	color: var(--ngo-primary, #1e73be);
}

.ngo-card-title-meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ngo-card-job-title {
	font-size: 1.15rem;
	font-weight: 800;
	margin: 0;
	line-height: 1.3;
}

.ngo-card-job-title a {
	color: #0f172a;
	text-decoration: none;
	transition: color 0.15s ease;
}

.ngo-card-job-title a:hover {
	color: var(--ngo-primary, #1e73be);
}

.ngo-card-org-name {
	font-size: 13.5px;
	font-weight: 600;
	color: #64748b;
}

.ngo-badge-featured {
	background: color-mix(in srgb, var(--ngo-primary, #1e73be) 12%, #ffffff);
	color: var(--ngo-primary, #1e73be);
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 6px;
	letter-spacing: 0.02em;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ngo-badge-pinned {
	background: #fef3c7;
	color: #b45309;
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ngo-card-pills-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.ngo-card-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #f1f5f9;
	color: #475569;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
}

.ngo-card-pill svg {
	color: #64748b;
}

.ngo-card-pill--loc svg {
	color: var(--ngo-primary, #1e73be);
}

.ngo-card-pill--sector {
	background: color-mix(in srgb, var(--ngo-primary, #1e73be) 8%, #ffffff);
	color: var(--ngo-primary, #1e73be);
}

.ngo-card-footer {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: 14px;
}

.ngo-card-avatar {
	display: none !important;
}

.ngo-card-inner {
	width: 100% !important;
	display: flex !important;
	align-items: flex-start !important;
	gap: 18px !important;
}

.ngo-card-thumbnail {
	border-radius: 12px !important;
	overflow: hidden !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
	transition: all 0.2s ease !important;
}

.ngo-premium-job-card:hover .ngo-card-thumbnail {
	border-color: color-mix(in srgb, var(--ngo-primary, #1e73be) 35%, #cbd5e1) !important;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--ngo-primary, #1e73be) 15%, transparent) !important;
}

.ngo-card-thumbnail a {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

.ngo-card-thumb-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 10px !important;
}

.ngo-card-body {
	width: 100% !important;
	flex: 1 !important;
	min-width: 0 !important;
}

@media (max-width: 600px) {
	.ngo-card-inner {
		flex-direction: row !important;
		gap: 14px !important;
	}
	.ngo-card-thumbnail {
		width: clamp(68px, 20vw, 88px) !important;
		height: clamp(68px, 20vw, 88px) !important;
		min-width: clamp(68px, 20vw, 88px) !important;
		max-width: clamp(68px, 20vw, 88px) !important;
	}
}

.ngo-card-apply-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: var(--ngo-primary, #1e73be) !important;
	color: #ffffff !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	padding: 9px 20px !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	transition: all 0.18s ease !important;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--ngo-primary, #1e73be) 25%, transparent) !important;
}

.ngo-card-apply-btn:hover {
	background: var(--ngo-secondary, #ff6600) !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--ngo-secondary, #ff6600) 30%, transparent) !important;
}

.ngo-card-apply-btn span {
	color: #ffffff !important;
	font-weight: 700 !important;
}

.ngo-card-apply-btn svg {
	width: 14px !important;
	height: 14px !important;
	stroke: #ffffff !important;
	stroke-width: 2.2 !important;
	fill: none !important;
	display: inline-block !important;
}