/* D&S GROUP / Service DETAIL pages only.
   Deliberately no .ds-services-circular rules: Circular18 is untouched.
   Images are delivered by Unsplash at the same aspect ratios as these frames. */

/* New catalog detail pages (14 service pages): the picture IS the frame. */
.detail-visual .ds-service-detail-picture:not(.ds-service-detail-picture--legacy) {
  box-sizing: border-box;
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: #151a18;
}

/* Existing service pages (3 with photos): identical edge-to-edge framing. */
.detail-visual .detail-mock.detail-image.ds-has-service-picture {
  display: block;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: 2 / 1 !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #151a18;
}
.detail-visual .detail-mock.ds-has-service-picture > .ds-service-detail-picture {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Fill the entire image area; never shrink or add letterbox padding. */
.detail-visual .ds-service-detail-picture > img.ds-cc-detail-photo {
  display: block;
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  image-rendering: auto;
  background: #151a18;
}

@media (max-width: 700px) {
  /* Unsplash mobile crop: 960×720 = 4:3; photos do not need stretching. */
  .detail-visual .ds-service-detail-picture:not(.ds-service-detail-picture--legacy),
  .detail-visual .detail-mock.detail-image.ds-has-service-picture {
    aspect-ratio: 4 / 3 !important;
  }
}

/* Legacy contain selector in services-circular.css is highly specific:
   explicitly outrank it without changing that stylesheet or the carousel. */
.detail-visual .detail-mock.detail-image.ds-has-service-picture > .ds-service-detail-picture > img.ds-cc-detail-photo {
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}