/* Placeholder Images Generator - CSS-only solution until real images are added */

/* Portfolio Project Placeholders */
.portfolio-item[data-category="e-commerce"] .portfolio-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: -1;
}

.portfolio-item[data-category="web-app"] .portfolio-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    z-index: -1;
}

.portfolio-item[data-category="web-design"] .portfolio-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    z-index: -1;
}

.portfolio-item[data-category="landing"] .portfolio-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    z-index: -1;
}

/* Placeholder for missing images */
.portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--bg-secondary);
}

.portfolio-image img[alt]::after {
    content: attr(alt);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.2rem;
    text-align: center;
    font-weight: 600;
}

/* Testimonial placeholder avatars */
.testimonial-author img {
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
}

/* Generate placeholder content */
.testimonial-author img[alt*="Sarah"]::after { content: "SJ"; }
.testimonial-author img[alt*="Michael"]::after { content: "MC"; }
.testimonial-author img[alt*="Emily"]::after { content: "ER"; }