/* ============================================================
   Network of Trusted Networks — Imagery & photographic treatment
   The source site shipped no photography. This defines the
   house treatment so any photo reads unmistakably NoTN:
   cool, desaturated, navy-duotoned, with a cyan highlight glow
   and scrims for text legibility. Pair with <image-slot> or
   plain <img> inside a .notn-photo wrapper.
   ============================================================ */
:root {
  /* Cool, technical grade applied to every brand photo */
  --photo-filter: saturate(0.72) brightness(0.9) contrast(1.05); /* @kind other */
  /* Navy duotone wash (multiplied over the photo) + cyan glow */
  --photo-duotone: linear-gradient(175deg, rgba(7,17,30,0.55), rgba(11,35,72,0.78)),
                   radial-gradient(120% 90% at 80% -10%, rgba(0,159,212,0.30), transparent 55%); /* @kind other */
  --photo-scrim-bottom: linear-gradient(0deg, rgba(7,17,30,0.92) 0%, rgba(7,17,30,0.0) 62%); /* @kind other */
  --photo-scrim-left: linear-gradient(90deg, var(--navy-950) 4%, rgba(7,17,30,0.55) 42%, rgba(7,17,30,0) 78%); /* @kind other */
  --photo-scrim-full: linear-gradient(180deg, rgba(7,17,30,0.5), rgba(7,17,30,0.78)); /* @kind other */
}

/* Wrapper — sized by the author; navy fallback shows while empty */
.notn-photo {
  position: relative;
  overflow: hidden;
  background: var(--navy-950);
  isolation: isolate;
}
.notn-photo > img,
.notn-photo > image-slot {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: var(--photo-filter);
}

/* Always-on navy duotone wash */
.notn-photo.notn-duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--photo-duotone);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

/* Scrims for text legibility (do not block drops/clicks) */
.notn-scrim-bottom::before,
.notn-scrim-left::before,
.notn-scrim-full::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.notn-scrim-bottom::before { background: var(--photo-scrim-bottom); }
.notn-scrim-left::before   { background: var(--photo-scrim-left); }
.notn-scrim-full::before   { background: var(--photo-scrim-full); }

/* Thin cyan top accent some featured media uses */
.notn-photo.notn-photo-accent { box-shadow: inset 0 2px 0 var(--cyan-500); }