/* ===================================
   Placeholder Styles for Missing Images
   Remove this file once all images are added
   =================================== */

/* Placeholder gradient backgrounds for missing images */
.hero-bg img,
.page-header-bg img {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
    min-height: 100%;
}

.about-image img,
.about-intro-image img,
.service-detail-image img {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    min-height: 400px;
}

.portfolio-item img {
    background: linear-gradient(135deg, #1a1a1a 0%, #333 50%, #1a1a1a 100%);
}

.material-card img,
.slab-card img {
    background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 50%, #2a2a2a 100%);
}

/* Logo placeholder */
.logo img {
    min-width: 150px;
    min-height: 50px;
    background: transparent;
}

/* Preloader logo placeholder */
.preloader-logo {
    min-width: 120px;
    min-height: 40px;
    background: transparent;
}

/* Hide broken image icons */
img {
    color: transparent;
}

img::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

/* Placeholder text for demo */
img[src*="placeholder"],
img:not([src]),
img[src=""] {
    background: linear-gradient(135deg, var(--color-black-light) 0%, var(--color-black-lighter) 100%);
    position: relative;
}

/* Service card icons should show even without images */
.service-icon {
    min-width: 80px;
    min-height: 80px;
}

/* Portfolio overlay should still work */
.portfolio-item {
    background: var(--color-black-light);
}

/* Material/slab cards should have content visible */
.material-card,
.slab-card {
    background: var(--color-black-light);
}