/* User annotations: Katalog hero, Tentang story photo, and Pengurus only. */

/* Add Lightflow depth inside the Katalog photo frame, behind the cutout trio. */
.lf-hero[data-hero-accent="services"] .editorial-photo {
  background: radial-gradient(circle at 24% 18%, #407fb4 0, #20598f 38%, #123b70 78%, #0b2f5b 100%);
}

.lf-hero[data-hero-accent="services"] .editorial-photo::before,
.lf-hero[data-hero-accent="services"] .editorial-photo::after {
  position: absolute;
  display: block;
  content: "";
  pointer-events: none;
}

.lf-hero[data-hero-accent="services"] .editorial-photo::before {
  z-index: 0;
  inset: 0;
  background: url("assets/signature/wave.svg") 45% 58% / 130% auto no-repeat;
  opacity: .58;
  mix-blend-mode: screen;
}

.lf-hero[data-hero-accent="services"] .editorial-photo::after {
  z-index: 1;
  inset: 0;
  background: url("assets/signature/triangles.svg") center / 105% auto no-repeat;
  opacity: .25;
  filter: brightness(2.3);
}

.lf-hero[data-hero-accent="services"] .editorial-photo img { z-index: 2; }

/* Straddle the right-hand border at the photo's vertical midpoint. */
.lf-hero[data-hero-accent="services"] .editorial-shard {
  top: 48%;
  right: -34px;
  transform: translateY(-50%) rotate(-5deg);
}

@media (max-width: 620px) {
  .lf-hero[data-hero-accent="services"] .editorial-shard { right: -20px; }
}

/* The office photo fills its existing rounded frame in the About story. */
#cerita .content-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% center;
}

/* Keep the Pengurus photo stage's top and right edges; grow left and down. */
body.people-page .people-hero .people-hero-copy h1 { font-weight: 900; }

@media (min-width: 1200px) {
  body.people-page .people-hero .people-hero-shell { align-items: start; }
  body.people-page .people-hero .people-hero-copy {
    max-width: 430px;
    padding-top: 32px;
  }
  body.people-page .people-hero .people-hero-copy h1 {
    max-width: 430px;
    font-size: clamp(58px, 4.35vw, 66px);
  }
  body.people-page .people-hero .people-hero-copy > p:not(.eyebrow) { max-width: 430px; }
  body.people-page .people-hero .people-hero-visual {
    width: 140%;
    height: 663.6px;
    justify-self: end;
    align-self: start;
  }
}

@media (min-width: 1200px) and (max-width: 1240px) {
  body.people-page .people-hero .people-hero-copy,
  body.people-page .people-hero .people-hero-copy h1,
  body.people-page .people-hero .people-hero-copy > p:not(.eyebrow) { max-width: 400px; }
}

/* Move portraits inside their frames without moving any frame or card. */
body.people-page .people-directors .person-portrait > img,
body.people-page .people-management .management-portrait > img {
  translate: 0 -10px;
}