/* ════════════════════════════════════════════════════════
   Real photos overlaid on placeholder slots.
   Loaded AFTER each design's own stylesheet so it wins.
   Shared across all variants (editorial / industrieel /
   architecturaal / mobiel) via common class names.
   ════════════════════════════════════════════════════════ */

/* ───────── HERO ───────── */
/* editorial — portrait slot → machine close-up */
.hero-img {
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.5) 100%),
    url("../assets/photo-hero.jpg") center/cover no-repeat !important;
}
/* industrieel + architecturaal — landscape slot → graafwerken */
.hero-photo {
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 35%),
    url("../assets/photo-hero.jpg") center/cover no-repeat !important;
}
/* mobiel */
.m-hero-photo {
  background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 40%),
    url("../assets/photo-hero.jpg") center/cover no-repeat !important;
}
.hero-img-tag, .hero-photo .ph-tag, .m-hero-photo .tag { display: none !important; }

/* ───────── ABOUT ───────── */
.about-img, .about-media, .m-about-img {
  background: url("../assets/photo-loader.jpg") center/cover no-repeat !important;
}
.about-img .tag, .about-media .ph-tag, .m-about-img .tag { display: none !important; }

/* ───────── PROJECTS ───────── */
/* editorial (.proj-*) AND industrieel (v2 .proj) share .proj + .proj-fill */
.proj:nth-child(1) .proj-fill { background: linear-gradient(transparent 45%, rgba(0,0,0,.6)), url("../assets/photo-fleet.jpg") center/cover no-repeat !important; }
.proj:nth-child(2) .proj-fill { background: linear-gradient(transparent 45%, rgba(0,0,0,.6)), url("../assets/photo-hedge.jpg") center/cover no-repeat !important; }
.proj:nth-child(3) .proj-fill { background: linear-gradient(transparent 45%, rgba(0,0,0,.6)), url("../assets/photo-slab-card.jpg") center/cover no-repeat !important; }
.proj:nth-child(4) .proj-fill { background: linear-gradient(transparent 45%, rgba(0,0,0,.6)), url("../assets/photo-excavator.jpg") center/cover no-repeat !important; }
.proj:nth-child(5) .proj-fill { background: linear-gradient(transparent 45%, rgba(0,0,0,.6)), url("../assets/photo-loader-card.jpg") center/cover no-repeat !important; }
.proj-placeholder-tag { display: none !important; }

/* architecturaal (v3) — editorial rows */
.proj-row:nth-child(1) .proj-img { background: url("../assets/photo-fleet.jpg") center/cover no-repeat !important; }
.proj-row:nth-child(2) .proj-img { background: url("../assets/photo-hedge.jpg") center/cover no-repeat !important; }
.proj-row:nth-child(3) .proj-img { background: url("../assets/photo-slab-card.jpg") center/cover no-repeat !important; }
.proj-row:nth-child(4) .proj-img { background: url("../assets/photo-excavator.jpg") center/cover no-repeat !important; }
.proj-row:nth-child(5) .proj-img { background: url("../assets/photo-loader-card.jpg") center/cover no-repeat !important; }
.proj-img .ph-tag { display: none !important; }

/* mobiel — swipe gallery */
.m-proj:nth-child(1) .img { background: linear-gradient(transparent 50%, rgba(0,0,0,.5)), url("../assets/photo-fleet.jpg") center/cover no-repeat !important; }
.m-proj:nth-child(2) .img { background: linear-gradient(transparent 50%, rgba(0,0,0,.5)), url("../assets/photo-hedge.jpg") center/cover no-repeat !important; }
.m-proj:nth-child(3) .img { background: linear-gradient(transparent 50%, rgba(0,0,0,.5)), url("../assets/photo-slab-card.jpg") center/cover no-repeat !important; }
.m-proj:nth-child(4) .img { background: linear-gradient(transparent 50%, rgba(0,0,0,.5)), url("../assets/photo-excavator.jpg") center/cover no-repeat !important; }
.m-proj:nth-child(5) .img { background: linear-gradient(transparent 50%, rgba(0,0,0,.5)), url("../assets/photo-loader-card.jpg") center/cover no-repeat !important; }
.m-proj .img .tag { display: none !important; }

/* ───────── MACHINERY — fleet panorama as a quiet backdrop wash ───────── */
/* (left as styled placeholders; specs still shown) */