/* Decorative backgrounds stay behind the content throughout each page. */
.entry-page,
.mosque-page,
.hotel-page {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  background-color: #edf3f4;
  --muted: #536171;
}

.entry-page::before,
.entry-page::after,
.mosque-page::before,
.hotel-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.mosque-page::before {
  background-image:
    linear-gradient(90deg, #f5fafb88, #f7fafbc9 24%, #f7fafbd9 72%, #f5fafb88),
    url("assets/mosque-background.webp");
}

.hotel-page {
  background-color: #f1f1ed;
}

.hotel-page::before {
  background-image:
    linear-gradient(90deg, #f8f8f388, #fafaf6c9 24%, #fafaf6d9 72%, #f8f8f388),
    url("assets/hotel-background.webp");
}

/* The entry page gives the two background treatments the same space. */
.entry-page::before {
  right: 50%;
  background-position: left center;
  background-image:
    linear-gradient(90deg, #f5fafb99, #f7fafbd9),
    url("assets/mosque-background.webp");
}

.entry-page::after {
  left: 50%;
  background-position: right center;
  background-image:
    linear-gradient(90deg, #fafaf6d9, #f8f8f399),
    url("assets/hotel-background.webp");
}

.entry-intro {
  padding: 22px 26px;
  background: #ffffffeb;
  border: 1px solid #ffffff;
}

.mosque-page .hero-copy,
.hotel-page .hero-copy {
  padding: 28px;
  background: #ffffffeb;
  border: 1px solid #ffffff;
  box-shadow: 0 12px 40px #121d4608;
}

.mosque-page .collection,
.mosque-page .approach,
.hotel-page #spaces,
.mosque-page .contact,
.hotel-page .contact {
  background: #ffffffdf;
  box-shadow: 24px 0 #ffffffdf, -24px 0 #ffffffdf;
}

.mosque-page .about,
.hotel-page .hotel-constructions {
  background: #f5f9f9ed;
}

.entry-page .sector-card,
.mosque-page .product-card {
  background: #fffffffa;
  box-shadow: 0 8px 30px #121d4606;
}

.site-footer {
  background: #ffffffeb;
}

@media (max-width: 850px) {
  .mosque-page .hero-copy,
  .hotel-page .hero-copy {
    padding: 22px;
  }

  .mosque-page .collection,
  .mosque-page .approach,
  .hotel-page #spaces,
  .mosque-page .contact,
  .hotel-page .contact {
    box-shadow: 14px 0 #ffffffdf, -14px 0 #ffffffdf;
  }
}

@media (max-width: 600px) {
  .mosque-page::before {
    background-position: left center;
  }

  .hotel-page::before {
    background-position: right center;
  }

  .entry-intro {
    padding: 20px 18px;
  }

  .mosque-page .hero-copy,
  .hotel-page .hero-copy {
    padding: 22px 18px;
  }

  .entry-page::before {
    right: 0;
    bottom: 50%;
    background-position: center left;
  }

  .entry-page::after {
    left: 0;
    top: 50%;
    background-position: center right;
  }
}

@media print {
  .entry-page::before,
  .entry-page::after,
  .mosque-page::before,
  .hotel-page::before {
    display: none;
  }
}