/* ==========================================================================
 * SARANSH DAINIK — Job Alert public UI (modern job-portal style).
 * Scoped with .ja-* prefixes so it never conflicts with the site theme.
 * Mobile-first. Loaded only on /jobs and /jobs/{slug}.
 * ========================================================================== */

.ja-wrap { max-width: 1200px; margin: 0 auto; padding: 18px 14px; }

/* Compact hero */
.ja-hero {
	background: linear-gradient(135deg, #0f3d8c 0%, #1b5fd9 100%);
	border-radius: 10px; color: #fff; padding: 22px 24px; margin-bottom: 16px;
}
.ja-hero h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; color: #fff; }
.ja-hero p  { margin: 0; font-size: 14px; opacity: .92; }
.ja-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ja-chip {
	background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35);
	border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 600;
}

/* Search / filter panel */
.ja-filter {
	background: #fff; border: 1px solid #e3e8ef; border-radius: 10px;
	box-shadow: 0 1px 3px rgba(16,44,84,.06); padding: 14px; margin-bottom: 18px;
}
.ja-filter .form-control { height: 40px; border-radius: 6px; }
.ja-clear { margin-left: 6px; }

/* Job card grid: 1 col mobile, 2 cols desktop */
.ja-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) { .ja-grid { grid-template-columns: 1fr 1fr; } }

.ja-card {
	background: #fff; border: 1px solid #e3e8ef; border-radius: 10px;
	box-shadow: 0 1px 4px rgba(16,44,84,.08); display: flex; flex-direction: column;
	height: 100%; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease;
}
.ja-card:hover { box-shadow: 0 6px 18px rgba(16,44,84,.14); transform: translateY(-2px); }

.ja-card-top { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px 0; }
.ja-badge {
	display: inline-block; padding: 2px 10px; border-radius: 20px;
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
.ja-badge-gov      { background: #e8f0fe; color: #0f3d8c; }
.ja-badge-private  { background: #f3e8ff; color: #6a1b9a; }
.ja-badge-cat      { background: #f1f4f9; color: #475569; }
.ja-badge-featured { background: #fff7e6; color: #b26a00; }

.ja-card-body { flex: 1; padding: 10px 16px 12px; }
.ja-title { margin: 0 0 4px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.ja-title a { color: #0f3d8c; }
.ja-title a:hover { color: #0a2c66; }
.ja-org { color: #475569; font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.ja-loc { color: #64748b; font-size: 13px; margin-bottom: 8px; }
.ja-loc i { margin-right: 4px; }

.ja-chips2 { display: flex; flex-wrap: wrap; gap: 6px; }
.ja-mini {
	background: #f6f8fb; border: 1px solid #e8edf3; color: #334155;
	border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 600;
}
.ja-mini.deadline { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

.ja-card-foot {
	display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #f0f3f7; margin-top: auto;
}
.ja-btn {
	flex: 1; display: inline-block; text-align: center; border-radius: 6px;
	padding: 8px 10px; font-size: 13px; font-weight: 600; text-decoration: none;
}
.ja-btn-detail { background: #eef2ff; color: #0f3d8c; border: 1px solid #c7d2fe; }
.ja-btn-detail:hover { background: #e0e7ff; color: #0a2c66; text-decoration: none; }
.ja-btn-apply { background: #16a34a; color: #fff; border: 1px solid #16a34a; }
.ja-btn-apply:hover { background: #15803d; color: #fff; text-decoration: none; }

/* Empty state */
.ja-empty {
	background: #fff; border: 1px dashed #cbd5e1; border-radius: 10px;
	text-align: center; padding: 36px 20px; color: #64748b;
}
.ja-empty i { font-size: 34px; color: #94a3b8; display: block; margin-bottom: 10px; }

/* Detail page sections */
.ja-detail .ja-sec {
	background: #fff; border: 1px solid #e3e8ef; border-radius: 10px; padding: 16px 18px; margin-bottom: 14px;
}
.ja-detail .ja-sec h2 {
	margin: 0 0 10px; font-size: 16px; font-weight: 700; color: #0f3d8c;
	border-bottom: 2px solid #eef2f7; padding-bottom: 8px;
}
.ja-kv { width: 100%; border-collapse: collapse; font-size: 14px; }
.ja-kv td { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.ja-kv td:first-child { width: 38%; color: #64748b; font-weight: 600; }
.ja-desc { white-space: pre-wrap; word-break: break-word; color: #1e293b; font-size: 14px; line-height: 1.65; }
.ja-expired {
	background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
	border-radius: 8px; padding: 10px 14px; font-weight: 600; margin-bottom: 12px;
}

/* Card + detail images (logos stay compact; wide photos become banners) */
.ja-thumb { display: block; overflow: hidden; background: #f1f5f9; }
.ja-thumb-img {
	width: 100%; height: 130px; object-fit: contain; display: block; background: #f1f5f9;
}

/* Job detail header: [image/logo panel] + title column */
.ja-detail-head { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 18px; }
.ja-img-panel {
	flex: 0 0 auto; width: 220px; max-width: 240px; height: 170px;
	display: flex; align-items: center; justify-content: center;
	background: #fff; border: 1px solid #e3e8ef; border-radius: 10px; padding: 14px;
}
.ja-img-panel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ja-img-panel.ja-img-wide { width: 100%; max-width: none; height: auto; padding: 0; border: 0; }
.ja-img-panel.ja-img-wide img { object-fit: cover; max-height: 320px; border-radius: 10px; }
.ja-detail-meta { flex: 1; min-width: 0; }
.ja-detail-meta .ja-title { font-size: 22px; margin: 0 0 6px; }
.ja-detail-meta .ja-org { font-size: 16px; margin-bottom: 2px; }
.ja-detail-meta .ja-loc { font-size: 14px; margin-bottom: 8px; }
.ja-detail-meta .ja-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ja-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ja-detail-actions .ja-btn { flex: none; }

/* Mobile */
@media (max-width: 767px) {
	.ja-title { font-size: 16px; }
	.ja-card-foot { flex-direction: column; }
	.ja-btn { width: 100%; }
	.ja-filter .form-control { margin-bottom: 8px; }
	.ja-hero h1 { font-size: 20px; }
	.ja-detail-head { flex-direction: column; align-items: center; text-align: center; }
	.ja-img-panel { width: 180px; height: 140px; }
	.ja-detail-meta .ja-badges { justify-content: center; }
	.ja-detail-actions { justify-content: center; }
}