/* V69.1 — fit approved service preview panels into the frame.
   Same approved visuals, no zoom/crop, no giant text, no horizontal overflow.
*/

.service-detail {
  overflow: hidden !important;
}

.service-detail-frame {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #07090d !important;
  cursor: pointer;
  box-sizing: border-box !important;
}

.service-detail-frame::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-color: #07090d !important;
  transform: none !important;
}

.service-detail-frame::after {
  display: none !important;
  content: none !important;
}

.service-detail-content,
.service-detail-visual {
  display: none !important;
}

/* Keep existing service open/close transition, but prevent layout from expanding because of old content. */
.service-detail.is-active .service-detail-frame {
  transform: none !important;
}

/* Slightly narrower visual on very wide screens so the panel doesn't feel oversized. */
@media (min-width: 1500px) {
  .service-detail-frame {
    max-width: 1480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Tablet/mobile: retain full panel visibility. */
@media (max-width: 980px) {
  .service-detail-frame {
    aspect-ratio: 16 / 9 !important;
  }

  .service-detail-frame::before {
    background-size: contain !important;
    background-position: center center !important;
  }
}

@media (max-width: 640px) {
  .service-detail-frame {
    aspect-ratio: 16 / 9 !important;
  }
}