/* Home category tiles (sections/job-category/style4). */
.cat4-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.cat4 {
    --cat4-tint: hsl(var(--cat4-hue, 160) 70% 45%);
    position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; min-height: 88px;
    background: #fff; border: 1px solid #e7e9ef; border-radius: var(--appearance-card-border-radius, 16px);
    text-decoration: none; overflow: hidden; isolation: isolate;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cat4::before { /* soft colour wash that grows on hover */
    content: ""; position: absolute; inset: auto -40% -60% auto; width: 140px; height: 140px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--cat4-tint) 22%, transparent), transparent 70%);
    z-index: -1; transition: transform .35s ease;
}
.cat4:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--cat4-tint) 45%, #e7e9ef); box-shadow: 0 16px 32px -18px color-mix(in srgb, var(--cat4-tint) 60%, transparent); }
.cat4:hover::before { transform: scale(1.8); }
.cat4:focus-visible { outline: 2px solid var(--cat4-tint); outline-offset: 2px; }

.cat4-icon {
    flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--cat4-tint) 14%, #fff); border: 1px solid color-mix(in srgb, var(--cat4-tint) 25%, #fff);
}
.cat4-icon img { width: 28px; height: 28px; object-fit: contain; }
.cat4-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cat4-body strong { color: #101828; font-size: 1rem; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat4-body small { color: #5b6475; font-size: .82rem; font-weight: 500; }
.cat4-go {
    flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    color: var(--cat4-tint); background: color-mix(in srgb, var(--cat4-tint) 10%, #fff);
    transition: background .2s, color .2s, transform .2s;
}
.cat4:hover .cat4-go { background: var(--cat4-tint); color: #fff; transform: rotate(-45deg); }

body.dark-mode .cat4 { background: #141a24; border-color: #2a3140; }
body.dark-mode .cat4-icon { background: color-mix(in srgb, var(--cat4-tint) 18%, #141a24); border-color: color-mix(in srgb, var(--cat4-tint) 30%, #141a24); }
body.dark-mode .cat4-body strong { color: #f2f4f7; }
body.dark-mode .cat4-body small { color: #a6aebb; }
body.dark-mode .cat4-go { background: color-mix(in srgb, var(--cat4-tint) 16%, #141a24); }

[dir="rtl"] .cat4:hover .cat4-go { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .cat4, .cat4::before, .cat4-go { transition: none; } .cat4:hover { transform: none; } }