/* CSS khusus project.blade.php (resources/views/livewire/guest-page). Dimuat di <head> lewat partials/page-css. */
.pj-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ugs-surface); }
.pj-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ugs-pg-card:hover .pj-img img { transform: scale(1.04); }
.pj-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.2rem; color: var(--ugs-fg-3); }
.pj-ph.is-3d { color: var(--ugs-accent); background: radial-gradient(circle at 50% 50%, var(--ugs-accent-tint), transparent 70%); }
.pj-badges { position: absolute; top: .75rem; left: .75rem; right: .75rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.pj-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; background: var(--ugs-card); color: var(--ugs-fg); font-size: .74rem; font-weight: 500; border: 1px solid var(--ugs-hairline); }
.pj-badge.is-3d { background: var(--ugs-accent); color: #fff; border-color: transparent; }
.pj-body { display: flex; flex-direction: column; gap: .45rem; padding: 1.2rem 1.4rem 1.4rem; flex: 1; }
.pj-text { flex: 1; }