/* ==========================================
   Image Placeholder Styles
   Styles for missing images - creates nice gradient placeholders
   ========================================== */

.capability-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

/* Placeholder for missing images */
img[src*="juicecore_demo.png"],
img[src*="awb_demo.png"],
img[src*="juiceai_demo.png"],
img[src*="JuiceCLI.jpg"] {
    min-height: 400px;
    background: linear-gradient(135deg,
            var(--color-primary) 0%,
            var(--color-primary-light) 50%,
            var(--color-primary) 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Add pseudo-element text to show it's a placeholder */
img[src*="juicecore_demo.png"]::after {
    content: "JuiceCore Demo";
    position: absolute;
    color: white;
    font-size: var(--text-2xl);
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

img[src*="awb_demo.png"]::after {
    content: "AWB Demo";
    position: absolute;
    color: white;
    font-size: var(--text-2xl);
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

img[src*="juiceai_demo.png"]::after {
    content: "JuiceAI Demo";
    position: absolute;
    color: white;
    font-size: var(--text-2xl);
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

img[src*="JuiceCLI.jpg"]::after {
    content: "JuiceCLI Demo";
    position: absolute;
    color: white;
    font-size: var(--text-2xl);
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Ensure images that fail to load show background */
img {
    background: linear-gradient(135deg,
            rgba(26, 115, 232, 0.1) 0%,
            rgba(66, 133, 244, 0.1) 100%);
}

/* Photo placeholder improvements for developer cards */
.photo-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            var(--color-primary-bg) 0%,
            var(--color-bg-elevated) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.placeholder-icon {
    font-size: 4rem;
    opacity: 0.6;
}

/* Blog image placeholders */
.blog-card .image-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg,
            var(--color-primary-bg) 0%,
            var(--color-bg-elevated) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
}

.blog-card .placeholder-icon {
    font-size: 3rem;
    opacity: 0.5;
}