/*
 * Lightflow v0.4.4 — final responsive/hero polish over v0.4.3.
 * Desktop composition stays locked. Service HeroCurve geometry is not touched.
 */

/* Home: move only the curve down 8px; shard, photo, frame, and backdrop stay put. */
.hero-template-home {
  --hero-curve-bottom: -96px;
}

/* Shift both ornaments inside the curve 20px to the right. */
.hero-template-home .hero-blue-sweep::before {
  transform: translateX(20px);
}

/* Service backdrop crops measured from the v0.4.2 770px checkpoint. */
.detail-inalite .hero-template-service,
.detail-inalink .hero-template-service,
.detail-iot .hero-template-service {
  min-height: 730px;
}

.detail-inara .hero-template-service,
.detail-managed .hero-template-service {
  min-height: 755px;
}

/* Per-page DNA direction: same asset and opacity, deliberately varied placement. */
.detail-inalite .hero-template-service .inalite-blue-curve::before {
  background-position: 38% 54%;
  background-size: 610px auto;
  transform: rotate(-4deg) scale(1.04);
  transform-origin: center;
}

.detail-inalink .hero-template-service .inalite-blue-curve::before {
  background-position: 57% 42%;
  background-size: 650px auto;
  transform: scaleX(-1) rotate(6deg);
  transform-origin: center;
}

.detail-iot .hero-template-service .inalite-blue-curve::before {
  background-position: 68% 58%;
  background-size: 560px auto;
  transform: rotate(45deg) scale(.94);
  transform-origin: center;
}

.detail-inara .hero-template-service .inalite-blue-curve::before {
  background-position: 32% 43%;
  background-size: 630px auto;
  transform: scaleX(-1) rotate(-11deg);
  transform-origin: center;
}

.detail-managed .hero-template-service .inalite-blue-curve::before {
  background-position: 55% 50%;
  background-size: 590px auto;
  transform: rotate(17deg) scale(1.06);
  transform-origin: center;
}

/* The responsive NOC photo is present in markup but never affects desktop. */
.operations-photo > .operations-photo-mobile {
  display: none;
}

@media (max-width: 900px) {
  .detail-inalite .hero-template-service,
  .detail-inalink .hero-template-service,
  .detail-iot .hero-template-service {
    min-height: auto;
    padding-bottom: 64px;
  }

  .detail-inara .hero-template-service,
  .detail-managed .hero-template-service {
    min-height: auto;
    padding-bottom: 89px;
  }

  /* Swap only the photo layer; the card, ornaments, tag, and copy remain unchanged. */
  .operations-photo > img:not(.operations-photo-mobile) {
    display: none;
  }

  .operations-photo > .operations-photo-mobile {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% center;
    filter: saturate(.96) contrast(1.02);
    transform: none;
  }
}

@media (max-width: 620px) {
  .hero-template-home {
    --hero-curve-bottom: -64px;
  }

  .detail-inalite .hero-template-service,
  .detail-inalink .hero-template-service,
  .detail-iot .hero-template-service {
    padding-bottom: 70px;
  }

  .detail-inara .hero-template-service,
  .detail-managed .hero-template-service {
    padding-bottom: 95px;
  }

  .operations-photo > .operations-photo-mobile {
    object-position: 70% center;
  }
}