/* Keep explicitly marked hero photos inside the organic frame. */
.lf-hero[data-hero-photo-fill] .editorial-photo img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Coverage catalogue: preserve location context in a tighter crop. */
.lf-hero[data-hero-photo-fill="coverage"] .editorial-photo img {
  object-position: 35% center;
}

.lf-hero[data-hero-photo-fill="coverage-city"] .editorial-photo img {
  object-position: left center;
  transform: scale(1.3);
  transform-origin: left center;
}

/* Keep the article subject visible as the frame narrows. */
.lf-hero[data-hero-photo-fill="article"] .editorial-photo img {
  object-position: 66% 45%;
}

/* Keep both people visible in the portrait coastal hero crop. */
.lf-hero[data-hero-photo-fill="coast"] .editorial-photo img {
  object-position: center 23%;
}

/* Reverse only the organic frame silhouettes; keep photos upright. */
.lf-hero[data-hero-photo-fill="coverage"] .editorial-photo {
  border-radius: 44% 56% 42% 58% / 60% 67% 33% 40%;
}

.lf-hero[data-hero-photo-fill="coverage-city"] .editorial-photo {
  border-radius: 56% 44% 58% 42% / 67% 60% 40% 33%;
}

.lf-hero[data-hero-photo-fill="coverage"] .editorial-shard {
  top: calc(50% - 19px);
}

/* Legacy seam placement remains scoped to the careers hero. */
.lf-hero[data-hero-shard-center="seam"] .editorial-shard {
  right: -47px;
}

/* Regional shards cross the actual photo rim, rather than the outer stage edge. */
.lf-hero[data-hero-shard-center="frame"] .editorial-shard {
  right: 16%;
  z-index: 7;
}

/* Give the regional content photo a definite height so the photo fills its
   frame instead of stopping at its intrinsic image ratio. */
.coverage-content-photo {
  height: 430px;
  min-height: 0;
}

.coverage-content-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Studio cutouts sit inside the existing photo frame with Sandya's visual motifs. */
.coverage-content-photo--field {
  isolation: isolate;
  background: radial-gradient(circle at 76% 25%, #e9f9ff 0, transparent 43%),
    linear-gradient(145deg, #d5f1ff 0%, #86c5e8 58%, #3278ad 100%);
}
.coverage-content-photo--field::before,
.coverage-content-photo--field::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}
.coverage-content-photo--field::before {
  z-index: 0;
  background-image: url("assets/signature/wave.svg");
  background-size: 78% auto;
  background-position: right 55%;
  opacity: .34;
}
.coverage-content-photo--field::after {
  z-index: 1;
  background-image: url("assets/signature/triangles.svg");
  background-size: 62% auto;
  background-position: right 22%;
  opacity: .28;
}
.coverage-content-photo--field img {
  z-index: 2;
  object-position: center top;
}
.coverage-content-photo--west img,
.coverage-content-photo--east img {
  object-fit: contain;
  transform: translateX(-52px) scale(1.3);
  transform-origin: center top;
}
.coverage-content-photo--east img { transform: translateX(-64px) scale(1.3); }
.coverage-content-photo--east {
  background: radial-gradient(circle at 72% 18%, #effaff 0, transparent 45%),
    linear-gradient(105deg, #d7f2ff, #8ac9e9 46%, #347eae);
}
.coverage-content-photo--metro img { object-position: center 12%; }
.coverage-region-grid .region-card:first-child > img { object-position: 24% center; }

.coverage-jabodetangsel-hero .coverage-jabodetangsel-title {
  font-size: clamp(44px, 4vw, 58px);
  line-height: 1;
}

@media (max-width: 900px) {
  .coverage-content-photo { height: 320px; }
  .lf-hero[data-hero-photo-fill="coverage"] .editorial-shard {
    top: calc(50% - 20px);
  }
  .coverage-jabodetangsel-hero .coverage-jabodetangsel-title {
    font-size: clamp(42px, 7vw, 56px);
  }
}

@media (max-width: 620px) {
  .coverage-content-photo--west img { transform: translateX(-38px) scale(1.3); }
  .coverage-content-photo--east img { transform: translateX(-46px) scale(1.3); }
  .lf-hero[data-hero-shard-center="frame"] .editorial-shard {
    right: 12%;
  }
  .lf-hero[data-hero-shard-center="seam"] .editorial-shard {
    right: -28px;
  }
  .lf-hero[data-hero-photo-fill="coverage"] .editorial-shard {
    top: calc(50% - 39px);
  }
  .coverage-jabodetangsel-hero .coverage-jabodetangsel-title {
    font-size: 42px;
  }
}