/* Home page: the Sarkari list cards (Views/Jobs/Index.cshtml, ".hsu"). */
.hsu {
    --hsu-ink: #0f172a;
    --hsu-text: #334155;
    --hsu-muted: #64748b;
    --hsu-line: #e8ecf3;
    --hsu-card: #ffffff;
    --hsu-soft: #f6f8fc;
    padding: 30px 0 18px;
    font-family: 'Open Sans', 'Open Sans Fallback', 'Segoe UI', Arial, sans-serif;
}
html[data-theme="dark"] .hsu { --hsu-ink: #f1f5f9; --hsu-text: #cbd5e1; --hsu-muted: #94a3b8; --hsu-line: #2b3a52; --hsu-card: #1e293b; --hsu-soft: #0f172a; }
.hsu *, .hsu *::before, .hsu *::after { box-sizing: border-box; }
.hsu a { text-decoration: none; }

/* ---------------------------------------------------------------- section header */
.hsu-head { margin: 0 0 18px; }
.hsu-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #e11d48; }
.hsu-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #e11d48; }
.hsu-live::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #e11d48; opacity: 0; animation: hsuPing 2s ease-out 3; }
@keyframes hsuPing { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
.hsu-head h2 { margin: 6px 0 4px; font-family: 'Montserrat', 'Montserrat Fallback', sans-serif; font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 800; letter-spacing: -.01em; color: var(--hsu-ink); }
.hsu-head p { margin: 0; color: var(--hsu-muted); font-size: .9rem; }

/* ---------------------------------------------------------------- cards */
.hsu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.hsu-card {
    position: relative; overflow: hidden;
    border-radius: 18px; background: var(--hsu-card); border: 1px solid var(--hsu-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 30px -24px rgba(15, 23, 42, .45);
}
.hsu-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); }
.hsu-card-head { display: flex; align-items: center; gap: 11px; padding: 16px 16px 12px; border-bottom: 1px solid var(--hsu-line); }
.hsu-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: .95rem; background: var(--c); box-shadow: 0 8px 16px -10px var(--c); }
.hsu-card-head h3 { flex: 1; min-width: 0; margin: 0; font-family: 'Montserrat', 'Montserrat Fallback', sans-serif; font-size: 1.02rem; font-weight: 800; line-height: 1.2; color: var(--hsu-ink); }
.hsu-card-head h3 small { display: block; margin-top: 2px; font-family: 'Open Sans', 'Open Sans Fallback', sans-serif; font-size: .72rem; font-weight: 600; color: var(--hsu-muted); }

.hsu-list { margin: 0; padding: 6px 8px 8px; list-style: none; counter-reset: hsu; }
.hsu-list li { margin: 0; padding: 0; counter-increment: hsu; }
.hsu-list li + li { border-top: 1px dashed var(--hsu-line); }
.hsu-list a { display: flex; align-items: flex-start; gap: 10px; padding: 9px 8px; border-radius: 10px; color: var(--hsu-text) !important; font-size: .86rem; font-weight: 600; line-height: 1.42; transition: background .15s, color .15s; }
.hsu-list a::before { content: counter(hsu); flex: none; min-width: 22px; height: 22px; margin-top: -1px; border-radius: 7px; display: grid; place-items: center; background: var(--hsu-soft); border: 1px solid var(--hsu-line); color: var(--hsu-muted); font-size: .66rem; font-weight: 800; transition: background .15s, color .15s, border-color .15s; }
.hsu-list a:hover { background: var(--hsu-soft); color: var(--hsu-ink) !important; }
.hsu-list a:hover::before { background: var(--c); border-color: var(--c); color: #fff; }
.hsu-list a:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
.hsu-t { flex: 1; min-width: 0; text-transform: capitalize; overflow-wrap: anywhere; }

.hsu-foot { padding: 0 14px 14px; }
.hsu-go { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 11px; background: var(--c); color: #fff !important; font-weight: 800; font-size: .84rem; box-shadow: 0 8px 16px -12px var(--c); transition: filter .15s; }
.hsu-go:hover { filter: brightness(1.08); }

@media (max-width: 1199px) { .hsu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .hsu { padding-top: 22px; }
    .hsu-head { margin-bottom: 12px; }
    .hsu-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .hsu-latestjob { order: -1; }   /* phones: Latest Job first, as before */
}
@media (prefers-reduced-motion: reduce) { .hsu-live::after { animation: none; } }