/* =================================================================
   TAYYARIPOINT JOBS — course-style card design
   2 cols on mobile · 3 cols on desktop · green enroll · grey result
================================================================= */

.tp-jobs-wrap {
	--tp-blue: #1D4ED8;
	--tp-blue-soft: #EFF4FF;
	--tp-yellow: #F59E0B;
	--tp-green: #16A34A;
	--tp-green-hover: #15803D;
	--tp-green-soft: #DCFCE7;
	--tp-navy: #0F172A;
	--tp-slate: #64748B;
	--tp-slate-2: #94A3B8;
	--tp-line: #E2E8F0;
	--tp-line-2: #F1F5F9;
	--tp-grey: #94A3B8;
	--tp-grey-deep: #64748B;

	font-family: 'Inter', 'Segoe UI', sans-serif;
	color: var(--tp-navy);
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 12px;
}

/* ========== SEARCH ========== */
.tp-jobs-wrap .tp-jobs-search {
	display: flex; align-items: center; gap: 10px;
	max-width: 560px; margin: 0 auto 16px;
	padding: 6px 8px 6px 18px;
	background: #fff; border: 1px solid var(--tp-line);
	border-radius: 999px;
	box-shadow: 0 6px 22px rgba(15,23,42,.06);
	transition: border-color .2s, box-shadow .2s;
}
.tp-jobs-wrap .tp-jobs-search:focus-within {
	border-color: var(--tp-green);
	box-shadow: 0 8px 26px rgba(22,163,74,.18);
}
.tp-jobs-wrap .tp-jobs-search svg { flex: 0 0 auto; }
.tp-jobs-wrap .tp-jobs-search input {
	flex: 1; min-width: 0; border: 0; outline: 0;
	padding: 10px 6px; background: transparent;
	font: 500 15px 'Inter',sans-serif; color: var(--tp-navy);
}
.tp-jobs-wrap .tp-jobs-search input::placeholder { color: var(--tp-slate-2); }

/* ========== FILTERS ========== */
.tp-jobs-wrap .tp-jobs-filters {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
	margin: 0 0 20px;
}
.tp-jobs-wrap .tp-filter {
	padding: 8px 14px; border: 1px solid var(--tp-line);
	border-radius: 999px; background: #fff;
	color: var(--tp-slate); font: 500 12.5px 'Inter',sans-serif;
	cursor: pointer; transition: all .2s ease;
}
.tp-jobs-wrap .tp-filter:hover { border-color: var(--tp-blue); color: var(--tp-blue); }
.tp-jobs-wrap .tp-filter.tp-active {
	background: var(--tp-blue); border-color: var(--tp-blue); color: #fff;
	box-shadow: 0 6px 16px rgba(29,78,216,.28);
}

/* ========== GRID: 2 cols mobile, 3 cols desktop ========== */
.tp-jobs-wrap .tp-jobs-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
@media (max-width: 379px){ .tp-jobs-wrap .tp-jobs-grid { grid-template-columns: 1fr; } }
@media (min-width: 900px){
	.tp-jobs-wrap[data-columns="3"] .tp-jobs-grid { grid-template-columns: repeat(3,1fr); gap: 20px; }
	.tp-jobs-wrap[data-columns="4"] .tp-jobs-grid { grid-template-columns: repeat(4,1fr); gap: 18px; }
	.tp-jobs-wrap[data-columns="2"] .tp-jobs-grid { grid-template-columns: repeat(2,1fr); gap: 22px; }
}

/* ========== CARD ========== */
.tp-jobs-wrap .tp-job-card {
	position: relative; display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--tp-line);
	border-radius: 16px; overflow: hidden;
	box-shadow: 0 6px 18px rgba(15,23,42,.05);
	transition: transform .25s ease, box-shadow .25s ease;
}
.tp-jobs-wrap .tp-job-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(15,23,42,.12);
}

/* ribbon */
.tp-jobs-wrap .tp-popular-ribbon {
	position: absolute; top: 10px; left: -4px; z-index: 3;
	padding: 4px 10px; background: var(--tp-yellow); color: #231602;
	font: 700 10px 'Poppins','Inter',sans-serif;
	border-radius: 4px 999px 999px 4px;
	box-shadow: 0 5px 12px rgba(245,158,11,.35);
	letter-spacing: .02em;
}

/* thumb */
.tp-jobs-wrap .tp-card-thumb {
	position: relative; display: block;
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg,#DBEAFE,#EFF4FF) center/cover no-repeat;
}
.tp-jobs-wrap .tp-card-thumb::after {
	content:""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(15,23,42,.32) 0%, transparent 45%);
}

/* badge */
.tp-jobs-wrap .tp-badge {
	position: absolute; top: 10px; right: 10px; z-index: 2;
	padding: 4px 10px; border-radius: 999px;
	font: 700 10px 'Poppins',sans-serif; letter-spacing: .02em;
	backdrop-filter: blur(6px);
}
.tp-jobs-wrap .tp-badge-available { background: rgba(22,163,74,.95); color: #fff; }
.tp-jobs-wrap .tp-badge-soon      { background: rgba(245,158,11,.95); color: #231602; }
.tp-jobs-wrap .tp-badge-closed    { background: rgba(100,116,139,.92); color: #fff; }
.tp-jobs-wrap .tp-badge-passed    { background: rgba(29,78,216,.95); color: #fff; }

/* body */
.tp-jobs-wrap .tp-card-body {
	padding: 14px; display: flex; flex-direction: column;
	gap: 6px; flex: 1;
}

.tp-jobs-wrap .tp-card-org {
	align-self: flex-start;
	font: 700 10px 'Poppins',sans-serif;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--tp-slate-2);
}
.tp-jobs-wrap .tp-card-title {
	margin: 0;
	font: 700 15px/1.35 'Poppins','Inter',sans-serif;
	color: var(--tp-navy);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.tp-jobs-wrap .tp-card-title a { color: inherit; text-decoration: none; }
.tp-jobs-wrap .tp-card-title a:hover { color: var(--tp-green); }
.tp-jobs-wrap .tp-card-desc {
	margin: 0;
	font-size: 12.5px; line-height: 1.55; color: var(--tp-slate);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}

/* green duration line */
.tp-jobs-wrap .tp-card-duration {
	display: inline-flex; align-items: center; gap: 6px;
	margin: 4px 0 0; padding: 6px 10px;
	background: var(--tp-green-soft); color: var(--tp-navy);
	border-radius: 8px; font-size: 12px;
	align-self: flex-start;
}
.tp-jobs-wrap .tp-card-duration svg { width: 14px; height: 14px; flex: 0 0 auto; }
.tp-jobs-wrap .tp-card-duration b { color: var(--tp-green-hover); }

/* tick-mark features */
.tp-jobs-wrap .tp-card-features {
	list-style: none; margin: 6px 0 0; padding: 0;
	display: grid; grid-template-columns: 1fr; gap: 5px;
}
.tp-jobs-wrap .tp-card-features li {
	display: flex; align-items: center; gap: 7px;
	font-size: 12.5px; color: var(--tp-navy);
}
.tp-jobs-wrap .tp-card-features svg {
	width: 16px; height: 16px; flex: 0 0 auto;
}

/* price row */
.tp-jobs-wrap .tp-card-price {
	display: flex; align-items: baseline; gap: 8px;
	margin: 6px 0 2px;
	padding-top: 10px; border-top: 1px dashed var(--tp-line);
}
.tp-jobs-wrap .tp-price-now {
	font: 800 16px 'Poppins','Inter',sans-serif;
	color: var(--tp-navy);
}
.tp-jobs-wrap .tp-price-old {
	font-size: 12px; color: var(--tp-slate-2);
	text-decoration: line-through;
}

/* actions */
.tp-jobs-wrap .tp-card-actions {
	display: flex; flex-direction: column; gap: 6px;
	margin-top: auto; padding-top: 8px;
}
.tp-jobs-wrap .tp-btn-primary {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 10px 14px; border-radius: 10px;
	font: 700 13px 'Poppins','Inter',sans-serif;
	text-decoration: none;
	transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.tp-jobs-wrap .tp-btn-green {
	background: var(--tp-green); color: #fff;
	box-shadow: 0 8px 18px rgba(22,163,74,.28);
}
.tp-jobs-wrap .tp-btn-green:hover {
	background: var(--tp-green-hover); transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(22,163,74,.35);
}
.tp-jobs-wrap .tp-btn-grey {
	background: var(--tp-grey); color: #fff;
	box-shadow: 0 6px 14px rgba(100,116,139,.24);
	cursor: default;
}
.tp-jobs-wrap .tp-btn-grey:hover {
	background: var(--tp-grey-deep); transform: translateY(-1px);
}
.tp-jobs-wrap .tp-btn-secondary {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 9px 14px; border-radius: 10px;
	background: transparent; border: 1.5px solid var(--tp-green);
	color: var(--tp-green);
	font: 700 12.5px 'Poppins','Inter',sans-serif;
	text-decoration: none;
	transition: background .18s ease;
}
.tp-jobs-wrap .tp-btn-secondary:hover { background: var(--tp-green-soft); }

/* passed / closed cards: dim thumb */
.tp-jobs-wrap .tp-job-card[data-status="closed"] .tp-card-thumb,
.tp-jobs-wrap .tp-job-card[data-status="passed"] .tp-card-thumb {
	filter: grayscale(.5) brightness(.95);
}

/* empty state */
.tp-jobs-wrap .tp-empty {
	grid-column: 1 / -1; text-align: center;
	padding: 40px 20px; color: var(--tp-slate);
	background: #fff; border: 1px dashed var(--tp-line);
	border-radius: 18px;
}

/* loading */
.tp-jobs-wrap.tp-loading .tp-jobs-grid {
	opacity: .5; pointer-events: none; transition: opacity .2s;
}

/* ========== DESKTOP: bigger, roomier cards ========== */
@media (min-width: 900px) {
	.tp-jobs-wrap .tp-card-body { padding: 18px; gap: 8px; }
	.tp-jobs-wrap .tp-card-org { font-size: 11px; }
	.tp-jobs-wrap .tp-card-title { font-size: 17px; }
	.tp-jobs-wrap .tp-card-desc { font-size: 13.5px; }
	.tp-jobs-wrap .tp-card-features { grid-template-columns: 1fr 1fr; gap: 8px 14px; }
	.tp-jobs-wrap .tp-card-features li { font-size: 13px; }
	.tp-jobs-wrap .tp-card-duration { font-size: 13px; padding: 7px 12px; }
	.tp-jobs-wrap .tp-price-now { font-size: 20px; }
	.tp-jobs-wrap .tp-price-old { font-size: 13.5px; }
	.tp-jobs-wrap .tp-card-actions { flex-direction: row; gap: 8px; }
	.tp-jobs-wrap .tp-btn-primary { flex: 1; padding: 12px 16px; font-size: 14px; }
	.tp-jobs-wrap .tp-btn-secondary { padding: 11px 14px; font-size: 13px; }
	.tp-jobs-wrap .tp-popular-ribbon { top: 12px; padding: 5px 12px; font-size: 11px; }
	.tp-jobs-wrap .tp-badge { padding: 5px 12px; font-size: 11px; }
}

/* ========================================================
   SINGLE JOB PAGE (unchanged from v1)
======================================================== */
.tp-single-job { max-width: 1080px; margin: 30px auto; padding: 0 16px; font-family: 'Inter',sans-serif; color: #0F172A; }
.tp-single-job .tp-single-hero { position: relative; padding: 34px 30px; border-radius: 22px; background: linear-gradient(135deg,#1D4ED8,#1B3FB0); color: #fff; overflow: hidden; }
.tp-single-job .tp-single-hero::after { content:""; position: absolute; inset: auto -80px -80px auto; width: 260px; height: 260px; background: #FBBF24; opacity: .15; border-radius: 50%; filter: blur(50px); }
.tp-single-job .tp-single-org { display: inline-block; padding: 4px 12px; background: rgba(255,255,255,.18); border-radius: 999px; font: 700 11px 'Poppins',sans-serif; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 12px; }
.tp-single-job h1 { margin: 0 0 8px; font: 800 clamp(24px,4vw,36px)/1.2 'Poppins',sans-serif; }
.tp-single-job .tp-single-pos { opacity: .85; font-size: 15px; }
.tp-single-job .tp-single-badges { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.tp-single-job .tp-single-badges .tp-badge { position: static; }
.tp-single-job .tp-single-body { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 22px; }
@media (min-width: 900px) { .tp-single-job .tp-single-body { grid-template-columns: 1fr 340px; } }
.tp-single-job .tp-single-content { background: #fff; border: 1px solid #E2E8F0; border-radius: 18px; padding: 26px; line-height: 1.7; }
.tp-single-job .tp-single-content h2 { font: 700 20px/1.3 'Poppins',sans-serif; margin: 20px 0 8px; }
.tp-single-job .tp-sidebar { position: sticky; top: 100px; align-self: start; background: #fff; border: 1px solid #E2E8F0; border-radius: 18px; padding: 22px; box-shadow: 0 10px 26px rgba(15,23,42,.06); }
.tp-single-job .tp-sidebar .tp-side-btn { display: block; text-align: center; padding: 14px 20px; border-radius: 999px; background: #16A34A; color: #fff; font: 700 15px 'Poppins',sans-serif; text-decoration: none; box-shadow: 0 10px 22px rgba(22,163,74,.32); transition: background .2s; }
.tp-single-job .tp-sidebar .tp-side-btn:hover { background: #15803D; }
.tp-single-job .tp-sidebar .tp-side-btn.tp-side-btn--secondary { background: transparent; color: #16A34A; border: 1.5px solid #16A34A; box-shadow: none; margin-top: 10px; }
.tp-single-job .tp-sidebar .tp-side-btn.tp-side-btn--secondary:hover { background: #DCFCE7; }
.tp-single-job .tp-side-list { list-style: none; margin: 18px 0 0; padding: 0; }
.tp-single-job .tp-side-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #E2E8F0; font-size: 14px; }
.tp-single-job .tp-side-list li:last-child { border-bottom: 0; }
.tp-single-job .tp-side-list b { color: #0F172A; font-weight: 700; }
.tp-single-job .tp-side-list span { color: #64748B; }