/* Real client / network logos in the loop strip (Mena 2026-07-20).
   Replaces the placeholder Logoipsum SVGs. Each logo is a transparent
   white silhouette (images/clients/*, cropped to content); they're
   CSS-masked so EVERY logo paints in one uniform colour and sits in an
   identical box — varied brand shapes read as one cohesive "trusted by"
   set. Change --logo-color to recolour all seven at once.
   Paths are `../images/...` because url() in these rules resolves
   relative to THIS stylesheet (in client-logos/). */
.loop_logos .logo {
  --logo-color: #9aa1aa;
  display: inline-block;
  flex: none;
  width: 91.8px;  /* 108 − 15% */
  height: 25.5px; /* 30 − 15% */
  background-color: var(--logo-color);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  /* the silhouettes carry the shape in their ALPHA channel — pin the
     mode so browsers don't luminance-interpret them (which clipped
     everything out) */
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

.loop_logos .logo.is-disney { --logo: url("../images/clients/disney.png"); }
.loop_logos .logo.is-fox    { --logo: url("../images/clients/fox.svg"); }
.loop_logos .logo.is-sony   { --logo: url("../images/clients/sony.png"); }
.loop_logos .logo.is-wbd    { --logo: url("../images/clients/wbd.png"); }
.loop_logos .logo.is-viacom { --logo: url("../images/clients/viacom.png"); }
.loop_logos .logo.is-abc    { --logo: url("../images/clients/abc-family.png"); }
.loop_logos .logo.is-agt    { --logo: url("../images/clients/agt.png"); }