/* Scoped enhancements for the Google Ads cladding-installation landing page. */
.landing-mosaic-hero {
  display: block;
  height: 134svh;
  min-height: 760px;
  overflow: visible;
  background: #0b0d0e;
}

.landing-mosaic-hero::before { content: none; }

.landing-mosaic-hero__viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  background: #0b0d0e;
}

.landing-mosaic-hero .hero__media {
  inset: 0;
  z-index: 0;
  transform: none;
}

.landing-mosaic-hero .hero__media img {
  object-position: 58% 46%;
  opacity: var(--landing-base-opacity, 0.38);
  filter: saturate(0.9) contrast(1.04) brightness(0.72);
  transform: scale(1.025);
}

.landing-mosaic-hero__tiles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.landing-mosaic-tile {
  --tile-x: 0px;
  --tile-y: 0px;
  --tile-r: 0deg;
  --tile-s: 1;
  position: absolute;
  overflow: hidden;
  opacity: 0.86;
  background-repeat: no-repeat;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transform: translate3d(var(--tile-x), var(--tile-y), 0) rotate(var(--tile-r)) scale(var(--tile-s));
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.landing-mosaic-tile::before,
.landing-mosaic-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.landing-mosaic-tile::before {
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04), rgba(4, 7, 8, 0.1));
  opacity: 0.46;
}

.landing-mosaic-tile::after {
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-mosaic-tile--1 { left: 0; top: 0; width: 38%; height: 46%; }
.landing-mosaic-tile--2 { left: 38%; top: 0; width: 30%; height: 46%; }
.landing-mosaic-tile--3 { left: 68%; top: 0; width: 32%; height: 100%; }
.landing-mosaic-tile--4 { left: 0; top: 46%; width: 27%; height: 54%; }
.landing-mosaic-tile--5 { left: 27%; top: 46%; width: 41%; height: 54%; }

.landing-mosaic-hero__shimmer {
  position: absolute;
  inset: -24%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-52%, 0, 0) rotate(-11deg);
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,0.08) 45%, rgba(255,231,194,0.32) 50%, rgba(255,255,255,0.08) 55%, transparent 64%);
  mix-blend-mode: screen;
}

.landing-mosaic-hero__shimmer.is-active {
  animation: landingMosaicShimmer 1.35s cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

@keyframes landingMosaicShimmer {
  0% { opacity: 0; transform: translate3d(-52%, 2%, 0) rotate(-11deg); }
  24% { opacity: 0.62; }
  60% { opacity: 0.32; }
  100% { opacity: 0; transform: translate3d(52%, -2%, 0) rotate(-11deg); }
}

.landing-mosaic-hero__grade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 8, 9, 0.86) 0%, rgba(6, 8, 9, 0.58) 40%, rgba(6, 8, 9, 0.08) 73%, rgba(6, 8, 9, 0.22) 100%),
    linear-gradient(to top, rgba(6, 8, 9, 0.74) 0%, transparent 48%);
  opacity: var(--landing-grade-opacity, 1);
}

.landing-mosaic-hero .hero__inner {
  z-index: 4;
  width: 100%;
  opacity: var(--landing-copy-opacity, 1);
  transform: translate3d(0, var(--landing-copy-y, 0px), 0);
  will-change: transform, opacity;
}

.landing-mosaic-hero.is-copy-hidden .hero__inner {
  visibility: hidden;
  pointer-events: none;
}

.landing-gallery--editorial {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.landing-gallery--editorial figure {
  grid-column: span 4;
  min-width: 0;
}

.landing-gallery--editorial figure:nth-child(4),
.landing-gallery--editorial figure:nth-child(5) {
  grid-column: span 6;
}

.landing-gallery--editorial .landing-gallery__portrait { grid-column: span 4; }
.landing-gallery--editorial .landing-gallery__feature { grid-column: span 8; }
.landing-gallery--editorial .landing-gallery__wide { grid-column: 1 / -1; }
.landing-gallery--editorial .landing-gallery__panorama { grid-column: 1 / -1; }

.landing-gallery--editorial .landing-gallery__portrait .media { aspect-ratio: 1076 / 1773; }
.landing-gallery--editorial .landing-gallery__feature .media { aspect-ratio: 4 / 3; }
.landing-gallery--editorial .landing-gallery__wide .media { aspect-ratio: 16 / 8.5; }
.landing-gallery--editorial .landing-gallery__panorama .media { aspect-ratio: 2511 / 1270; }
.landing-gallery--editorial .landing-gallery__wide img { object-position: 50% 54%; }

.landing-gallery--editorial figcaption {
  display: grid;
  gap: 6px;
  padding: 2px 2px 12px;
}

.landing-gallery--editorial figcaption strong {
  font-size: 16px;
  line-height: 1.2;
}

.landing-gallery--editorial figcaption p {
  max-width: 58ch;
  margin: 0;
  color: var(--grey);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .landing-mosaic-hero {
    height: 126svh;
    min-height: 690px;
  }

  .landing-mosaic-hero__viewport { min-height: 600px; }
  .landing-mosaic-hero__grade {
    background:
      linear-gradient(to top, rgba(6, 8, 9, 0.9) 0%, rgba(6, 8, 9, 0.42) 56%, rgba(6, 8, 9, 0.18) 100%),
      linear-gradient(90deg, rgba(6, 8, 9, 0.38), transparent 74%);
  }
  .landing-mosaic-hero__shimmer { display: none; }

  .landing-gallery--editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-gallery--editorial figure,
  .landing-gallery--editorial figure:nth-child(4),
  .landing-gallery--editorial figure:nth-child(5),
  .landing-gallery--editorial .landing-gallery__portrait,
  .landing-gallery--editorial .landing-gallery__feature { grid-column: span 1; }
  .landing-gallery--editorial .landing-gallery__wide,
  .landing-gallery--editorial .landing-gallery__panorama { grid-column: 1 / -1; }
}

@media (max-width: 540px) {
  .landing-mosaic-hero {
    height: 124svh;
    min-height: 650px;
  }

  .landing-mosaic-hero__viewport { min-height: 580px; }
  .landing-mosaic-hero .hero__media img { object-position: 62% 48%; }
  .landing-mosaic-hero .hero__inner { padding-bottom: max(42px, env(safe-area-inset-bottom)); }
  .landing-mosaic-tile { box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255,255,255,0.14); }

  .landing-gallery--editorial { grid-template-columns: 1fr; }
  .landing-gallery--editorial figure,
  .landing-gallery--editorial figure:nth-child(4),
  .landing-gallery--editorial figure:nth-child(5),
  .landing-gallery--editorial .landing-gallery__portrait,
  .landing-gallery--editorial .landing-gallery__feature,
  .landing-gallery--editorial .landing-gallery__wide,
  .landing-gallery--editorial .landing-gallery__panorama { grid-column: 1; }
  .landing-gallery--editorial .landing-gallery__wide .media { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-mosaic-hero { height: 100svh; min-height: 620px; }
  .landing-mosaic-tile { transform: none !important; opacity: 0.86 !important; }
  .landing-mosaic-hero__shimmer { display: none; }
  .landing-mosaic-hero .hero__inner { visibility: visible !important; pointer-events: auto; opacity: 1 !important; transform: none !important; }
}