/* Home-page service-image refactor (img + gradient overlay).
 * Scoped tightly to home-page tiles via their unique sub-classes
 * so service pages (Residential, Commercial, Industrial, etc.) — which
 * use the same .service-image class name but render the image via a
 * CSS custom property — are NOT affected.
 *
 * Loaded after main.css so background-image declarations there are overridden.
 */

/* Home-page tile classes only */
.service-item .service-image.residential-scaffolding,
.service-item .service-image.commercial-scaffolding,
.service-item .service-image.mobile-access-towers,
.service-item .service-image.edge-protection,
.service-item .service-image.temporary-roofing {
    position: relative;
    overflow: hidden;
    background-color: lightgray;
    background-image: none !important;
}

.service-item .service-image.residential-scaffolding > img,
.service-item .service-image.commercial-scaffolding > img,
.service-item .service-image.mobile-access-towers > img,
.service-item .service-image.edge-protection > img,
.service-item .service-image.temporary-roofing > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-item .service-image.residential-scaffolding::after,
.service-item .service-image.commercial-scaffolding::after,
.service-item .service-image.mobile-access-towers::after,
.service-item .service-image.edge-protection::after,
.service-item .service-image.temporary-roofing::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.service-item .service-image.residential-scaffolding::after,
.service-item .service-image.mobile-access-towers::after,
.service-item .service-image.temporary-roofing::after {
    background: linear-gradient(90deg, #8F0101 0%, rgba(143, 1, 1, 0) 50%);
}
.service-item .service-image.commercial-scaffolding::after,
.service-item .service-image.edge-protection::after {
    background: linear-gradient(270deg, #8F0101 0%, rgba(143, 1, 1, 0) 50%);
}
@media (max-width: 768px) {
    .service-item .service-image.residential-scaffolding::after,
    .service-item .service-image.commercial-scaffolding::after,
    .service-item .service-image.mobile-access-towers::after,
    .service-item .service-image.edge-protection::after,
    .service-item .service-image.temporary-roofing::after {
        background: linear-gradient(0deg, #8F0101 0%, rgba(143, 1, 1, 0) 100%);
    }
}