/**
 * HealthN.E.S.S. — Media system (implementation pass)
 * Treatments for approved temporary + real assets. No redesign.
 */

/* --------------------------------------------------------------------------
 * Shared media utilities
 * ------------------------------------------------------------------------ */
.hn-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hn-media--contain {
  object-fit: contain;
}

.hn-picture {
  display: contents;
}

/* --------------------------------------------------------------------------
 * Homepage service pillars — contained editorial thumbs
 * ------------------------------------------------------------------------ */
.home-pillar__media {
  display: block;
  margin: 0 0 0.35rem;
  aspect-ratio: 16 / 9;
  border-radius: 0.2rem;
  overflow: hidden;
  border: 1px solid rgba(153, 144, 124, 0.22);
  background: #0c0d0c;
}

.home-pillar__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) brightness(0.72) contrast(1.06);
}

.home-pillar:nth-child(1) .home-pillar__media img {
  object-position: center 42%;
}

.home-pillar:nth-child(2) .home-pillar__media img {
  object-position: 62% 40%;
}

.home-pillar:nth-child(3) .home-pillar__media img {
  object-position: center 48%;
}

.home-pillar:nth-child(4) .home-pillar__media img {
  object-position: center 35%;
}

@media (max-width: 430px) {
  .home-pillar__media {
    aspect-ratio: 2 / 1;
    max-height: 7.5rem;
  }
}

/* --------------------------------------------------------------------------
 * Homepage founder documentary frame
 * ------------------------------------------------------------------------ */
.home-about__visual .vf-media {
  position: relative;
  overflow: hidden;
}

.home-about__visual .vf-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  z-index: 0;
}

.home-about__visual .vf-media__fallback {
  display: none;
}

@media (max-width: 768px) {
  .home-about__visual .vf-media img {
    object-position: center 22%;
  }
}

/* --------------------------------------------------------------------------
 * Homepage contact finale — restrained atmosphere
 * ------------------------------------------------------------------------ */
#contact .contact-atmosphere img {
  object-position: center 40%;
  opacity: 0.55;
  filter: saturate(0.65) brightness(0.42) contrast(1.08);
}

@media (max-width: 768px) {
  #contact .contact-atmosphere img {
    object-position: center 32%;
    opacity: 0.48;
  }
}

#contact .contact-atmosphere__scrim {
  background:
    linear-gradient(180deg, rgba(8, 9, 8, 0.55) 0%, rgba(8, 9, 8, 0.72) 42%, rgba(8, 9, 8, 0.92) 100%),
    linear-gradient(90deg, rgba(8, 9, 8, 0.35), transparent 55%);
}

/* --------------------------------------------------------------------------
 * Services constellation ambient plate
 * ------------------------------------------------------------------------ */
.svc-open__ambient {
  overflow: hidden;
}

.svc-open__ambient-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.46;
  filter: saturate(0.75) brightness(0.52) contrast(1.05);
  pointer-events: none;
}

.svc-open__ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 48% 42% at 50% 8%, rgba(242, 202, 80, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(8, 9, 8, 0.35) 0%, rgba(8, 9, 8, 0.82) 72%, rgba(8, 9, 8, 0.94) 100%);
}

@media (max-width: 768px) {
  .svc-open__ambient-img {
    opacity: 0.28;
    object-position: center 35%;
  }
}

/* Service detail hero crops */
.svc-detail-hero--lens .svc-detail-hero__img {
  object-position: 28% 42%;
}

.svc-detail-hero--layers .svc-detail-hero__img {
  object-position: 58% 40%;
}

.svc-detail-hero--interface .svc-detail-hero__img {
  object-position: center 45%;
}

.svc-detail-hero--pathways .svc-detail-hero__img {
  object-position: center 48%;
}

.svc-detail-hero--signal .svc-detail-hero__img {
  object-position: center 38%;
}

@media (max-width: 768px) {
  .svc-detail-hero--lens .svc-detail-hero__img {
    object-position: 35% 38%;
  }

  .svc-detail-hero--layers .svc-detail-hero__img {
    object-position: 55% 32%;
  }

  .svc-detail-hero__media {
    max-height: 14rem;
  }

  .svc-detail-hero__img {
    max-height: 14rem;
  }
}

/* --------------------------------------------------------------------------
 * About documentary / portrait position
 * ------------------------------------------------------------------------ */
.about-story__media img {
  object-position: center 30%;
  filter: saturate(0.8) brightness(0.78) contrast(1.05);
}

@media (max-width: 768px) {
  .about-story__media {
    max-height: 16rem;
  }

  .about-story__media img {
    object-position: center 24%;
    max-height: 16rem;
  }

  .home-about__visual .vf-media img {
    object-position: center 22%;
  }
}

.about-story__placeholder {
  inset: auto 0 0 0;
  height: auto;
  padding: 1.15rem 1rem 1rem;
  place-content: end start;
  text-align: left;
  background: linear-gradient(180deg, transparent, rgba(8, 9, 8, 0.92));
  pointer-events: none;
}

/* --------------------------------------------------------------------------
 * FAQ — single restrained supporting visual
 * ------------------------------------------------------------------------ */
.faq-hero__visual img {
  object-position: center 40%;
  filter: saturate(0.7) brightness(0.55) contrast(1.06);
}

@media (max-width: 768px) {
  .faq-hero__visual {
    max-height: 11rem;
  }

  .faq-hero__visual img {
    object-position: center 35%;
  }
}

/* --------------------------------------------------------------------------
 * Insights editorial cover
 * ------------------------------------------------------------------------ */
.insight-cover__img {
  object-position: 35% 45%;
  filter: saturate(0.78) brightness(0.72) contrast(1.05);
}

@media (max-width: 768px) {
  .insight-cover {
    max-height: 14rem;
  }

  .insight-cover__img {
    object-position: 40% 38%;
    max-height: 14rem;
  }
}

.insight-cover__caption {
  background: linear-gradient(180deg, transparent, rgba(8, 9, 8, 0.82));
}

/* --------------------------------------------------------------------------
 * Contact page — mobile crop, desktop balance
 * ------------------------------------------------------------------------ */
.contact-split__visual img {
  object-position: center 32%;
}

@media (max-width: 959px) {
  .contact-split__visual {
    max-height: 12.5rem;
  }

  .contact-split__visual img {
    object-position: center 28%;
  }

  .contact-split__caption {
    font-size: 0.58rem;
  }
}

@media (min-width: 960px) {
  .contact-split__visual img {
    object-position: center 36%;
  }
}

.proof-media--editorial .vf-media {
  aspect-ratio: 4 / 5;
  max-height: 22rem;
  border-radius: 0.25rem;
  overflow: hidden;
  border: 1px solid rgba(153, 144, 124, 0.24);
}

.proof-media--editorial .vf-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(0.8) brightness(0.78) contrast(1.04);
}

@media (max-width: 768px) {
  .proof-media--editorial .vf-media {
    max-height: 14rem;
    aspect-ratio: 16 / 10;
  }

  .proof-media--editorial .vf-media img {
    object-position: center 28%;
  }
}

/* --------------------------------------------------------------------------
 * Growth system media (when mounted)
 * ------------------------------------------------------------------------ */
.gs-visual__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: saturate(0.8) brightness(0.78) contrast(1.04);
}

/* --------------------------------------------------------------------------
 * Service detail portrait examples — canvas must match 9:16 media
 * (Loaded late so width/height win over generic example screen rules.)
 * ------------------------------------------------------------------------ */
.svc-example--portrait .svc-example__screen,
.svc-example--portrait.svc-example--thumb-native-portrait .svc-example__screen,
.svc-example--portrait.svc-example--video .svc-example__screen {
  width: calc((min(32rem, 72vh) * 9) / 16);
  height: min(32rem, 72vh);
  max-width: 100%;
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  overflow: hidden;
}

.svc-example--portrait.svc-example--thumb-native-portrait {
  width: fit-content;
  max-width: min(22rem, 100%);
}

.svc-example--portrait .svc-example__link,
.svc-example--portrait .svc-example__frame {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .svc-detail__examples:has(.svc-example--portrait) {
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: start;
  }
}