/**
 * Site-wide — background images instead of framed inline photos
 */

/* Hero: full-bleed background (not a content image) */
main > section:first-of-type .absolute.inset-0.z-0 > img,
main > section:first-of-type .absolute.inset-0.z-0 > div[role="img"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* Homepage "من نحن" — hide framed photo, use as section background */
main > section.py-24.bg-muted\/30 {
  position: relative !important;
  overflow: hidden !important;
  background-image: var(--eco-about-bg, url("/images/blog/industrial-air-quality(1).png")) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

main > section.py-24.bg-muted\/30::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.92) 45%,
    rgba(255, 255, 255, 0.55) 100%
  ) !important;
  z-index: 0 !important;
}

main > section.py-24.bg-muted\/30 > .container {
  position: relative !important;
  z-index: 1 !important;
}

main > section.py-24.bg-muted\/30 .relative.group.order-2 {
  display: none !important;
}

main > section.py-24.bg-muted\/30 .grid {
  grid-template-columns: 1fr !important;
  max-width: 42rem !important;
  margin-right: auto !important;
  margin-left: 0 !important;
}

@media (max-width: 1023px) {
  main > section.py-24.bg-muted\/30::before {
    background: rgba(255, 255, 255, 0.94) !important;
  }
}

/* All pages — remove same interior photo from content boxes */
main img[src="/images/blog/industrial-air-quality(1).png"],
main img[src="/images/blog/aboutUS.jpg"] {
  display: none !important;
}

main .relative.rounded-lg.overflow-hidden.shadow-2xl:has(img[src="/images/blog/aboutUS.jpg"]),
main .relative.group.order-2:has(img[src="/images/blog/industrial-air-quality(1).png"]),
main .grid > .relative:has(img[src="/images/blog/aboutUS.jpg"]),
main .grid > div.relative:has(> img[src="/images/blog/aboutUS.jpg"]) {
  display: none !important;
}

main .grid.lg\:grid-cols-2:has(img[src="/images/blog/aboutUS.jpg"]) {
  grid-template-columns: 1fr !important;
}

main .grid.lg\:grid-cols-2:has(img[src="/images/blog/aboutUS.jpg"]) > div:last-child {
  max-width: 48rem !important;
}

/* Inner page headers (products, services, contact, about) — remove hero-bg / about photos */
main section.relative.py-24.bg-\[\#0a1f44\] > .absolute.inset-0.opacity-10,
main section.relative.py-24.bg-\[\#0a1f44\] .absolute.inset-0.opacity-10 img[src="/images/hero-bg.jpg"],
main section.relative.py-24.bg-\[\#0a1f44\] .absolute.inset-0.opacity-10 img[src="/images/hero-bg-new.jpg"],
main section.relative.py-24.bg-\[\#0a1f44\] .absolute.inset-0.opacity-10 img[src="/images/aboutUS.jpg"],
main section.relative.py-24.bg-\[\#0a1f44\] .absolute.inset-0.opacity-10 img[src="/images/blog/aboutUS.jpg"],
main section.relative.py-24.bg-\[\#0a1f44\] .absolute.inset-0.opacity-10 img[src="/images/blog/industrial-air-quality(1).png"] {
  display: none !important;
}