/* Homepage corrections layered over the exported site styles. */

/* Use the user's untouched aerial photo for the hero and first case. */
.heroImage {
  background-image: url('/zhuoya-hero-aerial-4000-sharp.jpg') !important;
  background-position: center 52% !important;
  background-size: cover !important;
  animation: heroGentleMotion 10s ease-in-out infinite alternate !important;
  transform-origin: center center;
  will-change: transform;
}

.projectCard:first-child {
  background-image:
    linear-gradient(180deg, rgba(11, 27, 31, 0.08), rgba(11, 27, 31, 0.72)),
    url('/real-gallery/case-large-campus-aerial.webp') !important;
  background-position: center !important;
  background-size: cover !important;
}

.projectCard:first-child::before,
.projectCard:first-child::after {
  content: none !important;
  display: none !important;
}

/* Match the luxury-house card to the main image used on its detail page. */
.product.p5 .productPhoto {
  content: url('/product-premium-house-card.png');
}

/* Keep the logo-free image previously requested for combination house 1. */
.product.p6 .productPhoto {
  content: url('/product-combination-1-clean.png');
}

/* Remove the temporary room labels and guide lines. */
.product.p3::before,
.product.p5::before,
.product.p3 .productInfo::before,
.product.p5 .productInfo::before,
.product.p3 .productInfo::after,
.product.p5 .productInfo::after {
  content: none !important;
  display: none !important;
}

/* One image per row on phones. */
@media (max-width: 850px) {
  .galleryGrid,
  .productGrid {
    grid-template-columns: 1fr !important;
  }

  .galleryItem,
  .product {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .heroImage {
    background-position: center center !important;
    animation-duration: 11s !important;
  }
}

@keyframes heroGentleMotion {
  from { transform: scale(1.01) translate3d(-0.8%, 0, 0); }
  to { transform: scale(1.085) translate3d(0.8%, -0.5%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .heroImage {
    animation: none !important;
    transform: none !important;
  }
}

/* Remove the superseded park-office card from the homepage and project listing. */
.projectCards > a[href="/projects/industrial-park-office"],
.projectListing > a[href="/projects/industrial-park-office"] {
  display: none !important;
}

.projectCards {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
  align-items: start;
  gap: 30px !important;
  width: min(100%, 1080px);
  margin: 0 auto;
}

.projectCards .projectCard,
.projectCards .projectCard.large {
  grid-row: auto !important;
  aspect-ratio: 20 / 9;
  min-height: 0 !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #10221d !important;
}

.projectCards > a[href="/projects/cultural-tourism-camp"] {
  background-image:
    linear-gradient(180deg, rgba(11, 27, 31, 0.06), rgba(11, 27, 31, 0.72)),
    url('/product-premium-house-garden.webp') !important;
}

.projectCards > a[href="/projects/mountain-valley-camp"] {
  background-image:
    linear-gradient(180deg, rgba(11, 27, 31, 0.04), rgba(11, 27, 31, 0.7)),
    url('/project-mountain-valley-camp.jpg') !important;
}

.projectListing .mountainValleyCase {
  background-image: url('/project-mountain-valley-camp.jpg') !important;
}

.projects {
  display: block !important;
  padding: 110px 6.5vw !important;
}

.projectLead {
  width: min(100%, 1080px);
  margin: 0 auto 52px;
}

.projectLead > p:not(.kicker) {
  max-width: 720px;
}

@media (max-width: 850px) {
  .projects {
    padding: 72px 20px 86px !important;
  }

  .projectLead {
    margin-bottom: 34px;
  }

  .projectCards {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .projectCards .projectCard,
  .projectCards .projectCard.large {
    width: 100% !important;
    aspect-ratio: 16 / 10;
  }
}