/* Placeholder styles for missing images */
img[src="video.png"],
img[src="ps.png"],
img[src="kdp.png"],
img[src="3d.png"],
img[src="me.png"],
img[src="alllogos.png"],
img[src="video-thumbnail.jpg"],
img[src^="portfolio/"],
img[src^="avatars/"] {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-two-color));
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    text-align: center;
    font-size: 0.8rem;
    border-radius: 8px;
}

img[src="video.png"]::before {
    content: "VIDEO";
}

img[src="ps.png"]::before {
    content: "PHOTO";
}

img[src="kdp.png"]::before {
    content: "DOCUMENT";
}

img[src="3d.png"]::before {
    content: "3D DESIGN";
}

img[src="me.png"]::before {
    content: "PROFILE";
}

img[src="alllogos.png"]::before {
    content: "LOGOS";
}

img[src="video-thumbnail.jpg"]::before {
    content: "PLAY VIDEO";
}

img[src^="portfolio/"]::before {
    content: "PORTFOLIO";
}

img[src^="avatars/"]::before {
    content: "AVATAR";
}

/* Fallback for broken images */
img {
    position: relative;
}

img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    display: none;
}

img[alt]::after {
    content: attr(alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-size: 0.8rem;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}