.project-item { position: relative; }
.project-item__link { display: block; color: var(--color-text-default); text-decoration: none; }
.project-item__media { position: relative; margin: 0; overflow: hidden; }
.project-item__media img { display: block; width: 100%; height: auto; }
.project-item__caption { margin: var(--space-2xs) 0 0; font-size: var(--font-size-caption); color: var(--color-text-muted); }   /* IDML: image→caption ~11×0.8 ≈ 8 */
.project-item__badge {
    position: absolute; top: var(--space-xs); left: var(--space-xs);   /* IDML: badge inset ~15×0.8 ≈ 12 */
    display: inline-flex; align-items: center; gap: var(--space-2xs);
    opacity: 0;
    transition: opacity var(--motion-duration-hover) var(--motion-easing-default);
    z-index: var(--z-overlay);
}
/* Scoped past `.project-item__media img` (0,1,1) so the badge keeps its small
   intrinsic size instead of stretching to the full thumbnail width. */
.project-item__badge .project-item__badge-shape { height: 2rem; width: auto; }
.project-item__badge-label { font-size: var(--font-size-caption); color: var(--color-text-on-badge); }

.project-item__media img {
    transition: transform var(--motion-duration-transition) var(--motion-easing-default);
}

/* Hover-only: badge reveal + image zoom apply where a real hover exists (desktop). */
@media (hover: hover) {
    .project-item:hover .project-item__badge,
    .project-item:focus-within .project-item__badge { opacity: 1; }
    .project-item:hover .project-item__media img { transform: scale(1.04); }
}

/* Touch / no-hover: never reveal the badge, never zoom. */
@media (hover: none) {
    .project-item__badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .project-item__media img { transition: none; }
    .project-item:hover .project-item__media img { transform: none; }
}