/* WAG Design 8 image system.
   Loaded after page-system.css so image roles are consistent in Oncord Edit
   and View without changing the 53 semantic page bodies. */
.wag-design8-shell img {
  display: block;
  max-width: 100%;
}

/* Brand marks and accreditation artwork must always remain complete. */
.wag-design8-shell :is(.original-wag-logo,.footer-logo-lockup,.badge-strip img) {
  height: auto;
  object-fit: contain !important;
}
.wag-design8-shell .badge-strip img {
  width: min(150px, 100%);
  max-height: 96px;
}

/* Service illustrations are complete compositions.  A consistent frame makes
   them feel intentional without clipping labels, equipment or people. */
.wag-design8-shell .inner-polish :is(.hero-image,.service-hero-image) {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--cream, #f7f1e7);
}
.wag-design8-shell .inner-polish :is(.hero-image,.service-hero-image) img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Site-work is documentary photography and can use a deliberate 3:2 crop. */
.wag-design8-shell .inner-polish :is(.hero-image,.service-hero-image) img[src*="site-work"] {
  object-fit: cover !important;
  object-position: center 48% !important;
}

/* Supporting photographs keep their natural proportions.  The panoramic team
   photograph is allowed the full content width so faces are not reduced to a
   thin half-column or lost to a crop. */
.wag-design8-shell .inner-polish .split > img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}
@media (min-width: 901px) {
  .wag-design8-shell .inner-polish .split:has(> img[src*="group-photo-homepage"]) {
    grid-template-columns: 1fr;
  }
  .wag-design8-shell .inner-polish .split:has(> img[src*="group-photo-homepage"]) > img {
    width: 100% !important;
  }
}

/* Repeated service cards share one calm image frame.  Contain preserves the
   original illustration while the frame eliminates accidental tiny variants. */
.wag-design8-shell :is(.feature-service-media,.service-card,.aeh-service-tile) {
  overflow: hidden;
}
.wag-design8-shell :is(.feature-service-media,.service-card > img) {
  background: var(--sand, #efe2d0);
}
.wag-design8-shell :is(.feature-service-media img,.service-card > img) {
  width: 100% !important;
  aspect-ratio: 3 / 2 !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* AEH delivery tiles are editorial photos, so a consistent crop is preferable
   to six visibly different card heights. */
.wag-design8-shell .aeh-service-tile img {
  width: 100% !important;
  aspect-ratio: 8 / 5 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Archive photos include landscape and portrait originals.  The 4:3 frame is
   stable, while contain guarantees the entire source remains visible. */
.wag-design8-shell .wag-history :is(.history-photo,.milestone-2026 > img) {
  background: var(--cream, #f7f1e7);
  overflow: hidden;
}
.wag-design8-shell .wag-history .history-photo {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}
.wag-design8-shell .wag-history :is(.history-photo img,.milestone-2026 > img) {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Homepage: keep the offer compact without slicing the illustration, and make
   the wide team photograph large enough to read while preserving every face. */
.wag-design8-shell .option-3 .campaign-visual {
  display: grid;
  place-items: center;
  background: transparent !important;
}
.wag-design8-shell .option-3 .campaign-visual img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: 420px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}
.wag-design8-shell .option-3 .home-hero-image img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 10 / 3 !important;
  object-fit: contain !important;
  object-position: center !important;
}
@media (min-width: 901px) {
  .wag-design8-shell .option-3 .campaign-hero {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: clamp(32px,4vw,80px) !important;
  }
  .wag-design8-shell .option-3 .campaign-copy,
  .wag-design8-shell .option-3 .home-hero-card {
    max-width: none !important;
  }
  .wag-design8-shell .option-3 .home-hero {
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  }
}

@media (max-width: 900px) {
  .wag-design8-shell .inner-polish :is(.hero-image,.service-hero-image) {
    width: 100%;
    aspect-ratio: auto;
  }
  .wag-design8-shell .inner-polish :is(.hero-image,.service-hero-image) img,
  .wag-design8-shell :is(.feature-service-media img,.service-card > img),
  .wag-design8-shell .aeh-service-tile img {
    height: auto !important;
  }
  .wag-design8-shell .option-3 .campaign-visual img {
    width: min(100%, 520px) !important;
    max-height: none !important;
  }
}