/* Top jobs: home page, above Most recent jobs. Strip cards: 1 per row on phones, 2 per row from 720px (fixed columns). */
.top-jobs { padding: 2.5rem 0 2.25rem; background: linear-gradient(180deg, #e8efff 0%, #f5f8ff 100%); border-top: 3px solid #1d4ed8; }
.top-jobs[hidden] { display: none; }
.top-jobs h2 { font-size: 1.6rem; margin-bottom: 0.3rem; color: #0f1f4d; }
.top-jobs-note { color: #3a4a6b; margin-bottom: 1.1rem; font-size: 0.97rem; }
.top-jobs-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 720px) { .top-jobs-list { grid-template-columns: 1fr 1fr; } }
.top-job { position: relative; display: flex; align-items: center; gap: 0.85rem; min-width: 0; background: #fff; border: 1px solid #c7d6fb; border-left: 5px solid #1d4ed8; border-radius: 14px; padding: 0.8rem 0.9rem; box-shadow: 0 4px 14px rgba(29, 78, 216, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.top-job.is-featured { border-left-color: #f59e0b; }
.top-job:hover, .top-job:focus-within { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(29, 78, 216, 0.18); }
@media (prefers-reduced-motion: reduce) { .top-job { transition: none; } .top-job:hover, .top-job:focus-within { transform: none; } }
.top-job-mark { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; color: #1d4ed8; background: #e0e9ff; }
.top-job.is-featured .top-job-mark { color: #92400e; background: #fef3c7; }
.top-job-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.top-job-badge { align-self: flex-start; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #1d4ed8; background: #e0e9ff; border-radius: 999px; padding: 0.1rem 0.55rem; }
.top-job.is-featured .top-job-badge { color: #92400e; background: #fef3c7; }
/* Up to two lines, then "..." */
.top-job-title { color: #0f172a; font-weight: 700; font-size: 1rem; line-height: 1.3; text-decoration: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.top-job-title::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.top-job-title:hover { color: #1d4ed8; }
.top-job-meta { color: #555; font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-job-cta { flex: 0 0 auto; padding: 0.45rem 0.95rem; border-radius: 999px; background: #1d4ed8; color: #fff; font-weight: 700; font-size: 0.86rem; white-space: nowrap; }
@media (max-width: 420px) { .top-job-cta { padding: 0.4rem 0.7rem; font-size: 0.8rem; } .top-job-mark { width: 2.2rem; height: 2.2rem; font-size: 0.95rem; } }