/* JCC Singapore architectural hero system — 23 July 2026. */
body {
  font-family: "Hanken Grotesk", Arial, sans-serif;
}

.jcc-architecture-hero {
  --jcc-hero-current: var(--jcc-hero-desktop);
  --hero-image: var(--jcc-hero-current);
  --hero-position: center center;
  --hero-mobile-position: center center;
}

.jcc-architecture-hero[data-jcc-hero-family="firm-civic"] {
  --jcc-hero-desktop: url('/assets/jcc-hero-firm-civic-v1-desktop.webp');
  --jcc-hero-mobile: url('/assets/jcc-hero-firm-civic-v1-mobile.webp');
}
.jcc-architecture-hero[data-jcc-hero-family="family-residential"] {
  --jcc-hero-desktop: url('/assets/jcc-hero-family-residential-v1-desktop.webp');
  --jcc-hero-mobile: url('/assets/jcc-hero-family-residential-v1-mobile.webp');
}
.jcc-architecture-hero[data-jcc-hero-family="estates-heritage"] {
  --jcc-hero-desktop: url('/assets/jcc-hero-estates-heritage-v1-desktop.webp');
  --jcc-hero-mobile: url('/assets/jcc-hero-estates-heritage-v1-mobile.webp');
}
.jcc-architecture-hero[data-jcc-hero-family="litigation-geometry"] {
  --jcc-hero-desktop: url('/assets/jcc-hero-litigation-geometry-v1-desktop.webp');
  --jcc-hero-mobile: url('/assets/jcc-hero-litigation-geometry-v1-mobile.webp');
}
.jcc-architecture-hero[data-jcc-hero-family="corporate-district"] {
  --jcc-hero-desktop: url('/assets/jcc-hero-corporate-district-v1-desktop.webp');
  --jcc-hero-mobile: url('/assets/jcc-hero-corporate-district-v1-mobile.webp');
}
.jcc-architecture-hero[data-jcc-hero-family="construction-structure"] {
  --jcc-hero-desktop: url('/assets/jcc-hero-construction-structure-v1-desktop.webp');
  --jcc-hero-mobile: url('/assets/jcc-hero-construction-structure-v1-mobile.webp');
}
.jcc-architecture-hero[data-jcc-hero-family="editorial-detail"] {
  --jcc-hero-desktop: url('/assets/jcc-hero-editorial-detail-v1-desktop.webp');
  --jcc-hero-mobile: url('/assets/jcc-hero-editorial-detail-v1-mobile.webp');
}

.jcc-architecture-hero.image-hero {
  --hero-image: var(--jcc-hero-current) !important;
}

.jcc-architecture-hero [data-jcc-hero-media] {
  background-color: #171717 !important;
  background-image: var(--jcc-hero-current) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.jcc-architecture-hero.jcc-architecture-hero--single-layer [data-jcc-hero-media] {
  background-image:
    linear-gradient(90deg, rgba(16, 16, 16, .93) 0%, rgba(16, 16, 16, .74) 54%, rgba(16, 16, 16, .30) 100%),
    var(--jcc-hero-current) !important;
}

.jcc-architecture-hero.readiness-hero {
  background-color: #171717 !important;
  background-image:
    linear-gradient(90deg, rgba(16, 16, 16, .92) 0%, rgba(16, 16, 16, .72) 58%, rgba(16, 16, 16, .30) 100%),
    var(--jcc-hero-current) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.jcc-architecture-hero .jcc-rw-hero-visual,
.jcc-architecture-hero .jcc-home-hero-visual,
.jcc-architecture-hero .jcc-al-hero-visual {
  background-color: #222 !important;
  background-image: var(--jcc-hero-current) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.jcc-architecture-hero [data-jcc-hero-placeholder] {
  opacity: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
}

.jcc-architecture-hero .jcc-rw-hero-visual > [data-jcc-hero-placeholder] {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.jcc-architecture-hero .jcc-home-hero-visual {
  border: 1px solid rgba(195, 195, 195, .34);
  box-shadow: 26px 26px 0 rgba(164, 164, 164, .12);
}

.jcc-architecture-hero .jcc-home-hero-visual > [data-jcc-hero-placeholder] {
  transform: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

@media (min-width: 1041px) {
  .jcc-architecture-hero {
    min-height: min(78svh, 760px);
  }
}

@media (max-width: 640px) {
  .jcc-architecture-hero {
    --jcc-hero-current: var(--jcc-hero-mobile);
  }

  .jcc-architecture-hero .jcc-home-hero-visual {
    box-shadow: 14px 14px 0 rgba(164, 164, 164, .10);
  }
}